1.Bootstrap介紹

1.1簡(jiǎn)介:
Bootstrap,來(lái)自 Twitter,是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡(jiǎn)潔靈活,使得 Web 開發(fā)更加快捷。 它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā),是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎,一直是GitHub上的熱門開源項(xiàng)目,包括NASA的MSNBC(微軟全國(guó)廣播公司)的Breaking News都使用了該項(xiàng)目。 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架,如WeX5前端開源框架等,也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來(lái)。

1.2特點(diǎn):
(1)跨設(shè)備、瀏覽器
甚至兼容IE7、8,一般不考慮IE9以下的瀏覽器
(2)響應(yīng)式布局
不僅可以支持PC端的各種分辨率的顯示,還可以支持移動(dòng)端屏幕響應(yīng)式切換顯示。
(3)提供全面的組件
提供大量實(shí)用的組件,包括:導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組件
(4)內(nèi)置jQuery插件
內(nèi)置很多實(shí)用的jQuery插件
(5)支持HTML5 、CSS3
HTML5語(yǔ)義化標(biāo)簽和CSS3屬性都得到很好的支持。
(6)支持LESS動(dòng)態(tài)樣式
LESS實(shí)用變量、嵌套,操作混合編碼,編寫更快、更靈活的CSS,能和Bootstrap很好的配合開發(fā)。

1.3Bootstrap結(jié)構(gòu):
BootStrap下載地址:http://v3.bootcss.com/ (選擇生產(chǎn)環(huán)境,最新版) 如下圖:

Paste_Image.png

下載完解壓后主要有三個(gè)文件夾,分別是css(樣式) 、fonts(字體)、js(腳本),結(jié)構(gòu)如下:

Paste_Image.png

1.3.1 css目錄下有四個(gè)css后綴的文件,min是壓縮包,一般使用這個(gè);其他屬于沒(méi)有壓縮的。map后綴的文件是css源碼映射表,在一些特定的瀏覽器工具中使用。
1.3.2 js目錄包含兩個(gè)文件,分別為壓縮和未壓縮的js文件。
1.3.3 fonts目錄下包含不同后綴的字體文件。

1.4創(chuàng)建第一個(gè)頁(yè)面
我使用的編輯器是sublime text。大家也可以網(wǎng)上搜索這個(gè)編輯器,感覺(jué)還是很強(qiáng)大的,當(dāng)然你也可以使用其他的編輯器。好的,不廢話進(jìn)入主題。
1.首先新建一個(gè)文件夾,然后把剛剛下載解壓得到額三個(gè)文件夾放進(jìn)文件夾內(nèi),利用編輯器新建一個(gè)index.html文件。
2.引入樣式
在head里引入

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

3.下載jQuery腳本庫(kù)
瀏覽器打開http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
右鍵另存為jquery.min.js保存到j(luò)s文件夾下
4.引入腳本庫(kù)
在body底部引入,這樣網(wǎng)頁(yè)打開時(shí)先不加載js庫(kù),能提高頁(yè)面加載速度。

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

第一個(gè)頁(yè)面代碼:頁(yè)面顯示一個(gè)按鈕

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>第一個(gè)Bootstrap頁(yè)面</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-info">按鈕</button>
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

效果圖如下:

Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,546評(píng)論 6 533
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,570評(píng)論 3 418
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,505評(píng)論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,017評(píng)論 1 313
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,786評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,219評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,287評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,438評(píng)論 0 288
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,971評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,796評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,995評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,540評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,230評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,918評(píng)論 1 286
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,697評(píng)論 3 392
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,991評(píng)論 2 374

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,776評(píng)論 1 92
  • 《即戰(zhàn)力:如何成為世界通用的人才|大前研一》這本書中的即戰(zhàn)力是指,即使進(jìn)入全新的環(huán)境,也能通過(guò)冷靜地觀察發(fā)現(xiàn)事物的...
    斯藍(lán)閱讀 1,780評(píng)論 0 3
  • 前言 身為一個(gè)初學(xué)者,不是說(shuō)引用和指針難學(xué),而是他們定義和使用的方式非常令人迷惑,定義和使用,該用&還是不該用&,...
    妖怪來(lái)了閱讀 393評(píng)論 0 4