2016-07-22 30 views
0

我剛剛購買了域名,我正在使用免費託管服務(https://www.000webhost.com/)。我是全新的前端Web開發人員,但我很高興能夠學習!我想使用Bootstrap。如何開始使用Bootstrap構建網站?

這是我從主機服務

裏面的index.html,我有基本的例子代碼,我從引導網站看到了:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <h1>Hello, world!</h1> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 

然而,網站未沒有任何格式。我將這些文件下載到我的電腦上。

bootstrap/ 
├── css/ 
│ ├── bootstrap.css 
│ ├── bootstrap.css.map 
│ ├── bootstrap.min.css 
│ ├── bootstrap.min.css.map 
│ ├── bootstrap-theme.css 
│ ├── bootstrap-theme.css.map 
│ ├── bootstrap-theme.min.css 
│ └── bootstrap-theme.min.css.map 
├── js/ 
│ ├── bootstrap.js 
│ └── bootstrap.min.js 
└── fonts/ 
    ├── glyphicons-halflings-regular.eot 
    ├── glyphicons-halflings-regular.svg 
    ├── glyphicons-halflings-regular.ttf 
    ├── glyphicons-halflings-regular.woff 
    └── glyphicons-halflings-regular.woff2 

我是否需要將它們全部上傳到託管服務中的/ public_html文件夾中?這個怎麼用?任何關於這個基本的信息也會有幫助,因爲我是全新的。

+0

你檢查了他們的「入門指南」嗎? (http://getbootstrap.com/getting-started/) – ochi

+0

是的,但它沒有涵蓋我需要的基礎知識 – Michael

回答

1

爲了方便起見,您可以鏈接到HTML代碼中的CDN,而不是上傳這些文件。

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
1

引導基本上是用來做Web應用程序responsive.You需要使用下面的引導文件

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

欲瞭解更多信息,請參閱http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

0

複製CSS,JS,字體文件夾到你的public_html文件夾