這篇文章將為大家詳細(xì)講解有關(guān)使用bootstrap框架的案例，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式營銷型網(wǎng)站需求，讓再小的成都品牌網(wǎng)站建設(shè)也能產(chǎn)生價(jià)值！

下載&目錄

看bootstrap官網(wǎng)，接著我下載了用于生產(chǎn)環(huán)境Bootstrap:

解壓出來是這樣的:

目錄結(jié)構(gòu)大概是這樣的，前幾天在官網(wǎng)有看到。下面這個(gè)目錄結(jié)構(gòu)你應(yīng)該先了解下:

bootstrap3
├── css
│├── bootstrap-theme.css //主題類型，生產(chǎn)上一般用不到
│├── bootstrap-theme.css.map //主題類型，生產(chǎn)上一般用不到
│├── bootstrap-theme.min.css //主題類型，生產(chǎn)上一般用不到
│ ├── bootstrap.css
│ ├── bootstrap.css.map //做映射的，可以理解為 shuaige = “l(fā)uotianshuai” 那么掉shuaige的時(shí)候就相當(dāng)于掉luotianshuai
│ └── bootstrap.min.css
├──fonts //包含了字體圖標(biāo)文件，他也是做的對應(yīng)。下面的文件包含了不同系統(tǒng)下的字體圖標(biāo)
│ ├── 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。所以在導(dǎo)入JS的時(shí)候，得先導(dǎo)入Jquery.

應(yīng)用

接下來看官網(wǎng)給我們推薦的入門級模版.

雖然不怎么好看，但我想在本地上也能有這么個(gè)HTML文件。怎么搞??
右擊鼠標(biāo)，點(diǎn)擊網(wǎng)頁另存為，保存到本地。

下載的除了HTML文件外，還有另外一個(gè)文件Starter Template for Boostrap_files，打開后，顯示如下:是所需要的bootstrap的css與js,可在HTML中引入。

我已經(jīng)下載了bootstrap，所以我直接用我本地的bootstrap就好了，于是我刪除上面的Starter Template for Boostrap_files文件夾。

bootstrap_1.html:

 
 
 
 
 
 

 
 


 
 
 
你好，世界！

 
 
 
 
 

• 11行從bootstrap導(dǎo)入css.

• 19行導(dǎo)入jquery

• 21行從bootstrap導(dǎo)入js

導(dǎo)入bootstrap的css與js注意路徑:

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

我在bootstrap官網(wǎng)隨便找下"巨幕"的組件

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

 
 
 
 
 
 

 
 


 
 
 
你好，世界！
 
  
   
Hello, world!
   
Learn more