如何使用bootstrap

時間 2019-11-07

原文原文鏈接

前言: 前幾天，本想作一個登錄界面，但本身寫form表單必然很醜，因此想用下bootstarp框架，以前聽別人說bootstrap很牛的樣子。但我徹底不會bootstrap...css

下載&目錄

看bootstrap官網，接着我下載了用於生產環境Bootstrap:html

解壓出來是這樣的:jquery

目錄結構大概是這樣的，前幾天在官網有看到。下面這個目錄結構你應該先了解下:bootstrap

bootstrap3
    ├── css
    │   ├── bootstrap-theme.css //主題類型，生產上通常用不到
    │   ├── bootstrap-theme.css.map //主題類型，生產上通常用不到
    │   ├── bootstrap-theme.min.css //主題類型，生產上通常用不到
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map //作映射的，能夠理解爲 shuaige = 「luotianshuai」那麼掉shuaige的時候就至關於掉luotianshuai
    │   └── bootstrap.min.css
    ├── fonts //包含了字體圖標文件，他也是作的對應。下面的文件包含了不一樣系統下的字體圖標
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   └── glyphicons-halflings-regular.woff2
    └── js
        ├── bootstrap.js
        ├── bootstrap.min.js瀏覽器

bootstrap作了不少美化過的css樣式在bootstrap.css中，js則放在bootstrap.js。注意了，bootstrap的js與Jquery的js是不同的。bootstrap的js必須依賴Jquery。因此在導入JS的時候，得先導入Jquery.框架

應用

接下來看官網給咱們推薦的入門級模版.ide

雖然不怎麼好看，但我想在本地上也能有這麼個HTML文件。怎麼搞??
右擊鼠標，點擊網頁另存爲，保存到本地。svg

下載的除了HTML文件外，還有另一個文件Starter Template for Boostrap_files，打開後，顯示以下:是所須要的bootstrap的css與js,可在HTML中引入。字體

我已經下載了bootstrap，因此我直接用我本地的bootstrap就行了，因而我刪除上面的Starter Template for Boostrap_files文件夾。ui

bootstrap_1.html:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
 8     <title>Bootstrap 101 Template</title>
 9 
10     <!-- Bootstrap -->
11     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
12 
13 
14   </head>
15   <body>
16     <h1>你好，世界！</h1>
17 
18     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
19     <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
20     <!-- Include all compiled plugins (below), or include individual files as needed -->
21     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
22   </body>
23 </html>

11行從bootstrap導入css.
19行導入jquery
21行從bootstrap導入js

導入bootstrap的css與js注意路徑:

用瀏覽器打開上面的html界面會出現"你好，世界"。很low，我不由懷疑bootstrap真的有用嗎??說好的美化效果呢

我在bootstrap官網隨便找下"巨幕"的組件

將組件的代碼貼到HTML的body中，即可以使用了。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
 8     <title>Bootstrap 101 Template</title>
 9 
10     <!-- Bootstrap -->
11     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
12 
13 
14   </head>
15   <body>
16     <h1>你好，世界！</h1>
17     <div class="jumbotron container">
18         <div >
19             <h1>Hello, world!</h1>
20             <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
21         </div>
22     </div>
23 
24     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
25     <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
26     <!-- Include all compiled plugins (below), or include individual files as needed -->
27     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
28   </body>
29 </html>