Bootstrap前端開發(fā)框架【使用教程】

Bootstrap 來自 Twitter(推特)，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。

中文官網(wǎng)：http://www.bootcss.com/ 

官網(wǎng)：http://getbootstrap.com/ 

推薦使用：http://bootstrap.css88.com/

框架：顧名思義就是一套架構(gòu)，它有一套比較完整的網(wǎng)頁功能解決方案，而且控制權(quán)在框架本身，有預(yù)制樣式庫、組件和插件。使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開發(fā)。

Bootstrap框架優(yōu)點(diǎn)：

標(biāo)準(zhǔn)化的html+css編碼規(guī)范

提供了一套簡(jiǎn)潔、直觀、強(qiáng)悍的組件

有自己的生態(tài)圈，不斷的更新迭代

讓開發(fā)更簡(jiǎn)單，提高了開發(fā)的效率

Bootstrap自出現(xiàn)至今一共有3個(gè)類型的版本，使用最多最穩(wěn)定的是3.x.x的版本。

2.x.x：停止維護(hù),兼容性好,代碼不夠簡(jiǎn)潔，功能不夠完善。

3.x.x：目前使用最多,穩(wěn)定,但是放棄了 IE6-IE7。對(duì) IE8 支持但是界面效果不好,偏向用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。

4.x.x ：最新版，目前還不是很流行

Bootstrap 使用四步曲： 1. 創(chuàng)建文件夾結(jié)構(gòu) 2. 創(chuàng)建 html 骨架結(jié)構(gòu) 3. 引入相關(guān)樣式文件 4. 書寫內(nèi)容

1.創(chuàng)建文件夾結(jié)構(gòu)

2.創(chuàng)建html骨架結(jié)構(gòu)

<!--要求當(dāng)前網(wǎng)頁使用IE瀏覽器最高版本的內(nèi)核來渲染-->
<meta content="IE=edge" http-equiv="X-UA-Compatible">
    <!--視口的設(shè)置：視口的寬度和設(shè)備一致，默認(rèn)的縮放比例和PC端一致，用戶不能自行縮放-->
    <meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<!--[if lt IE 9]>
 <!--解決ie9以下瀏覽器對(duì)html5新增標(biāo)簽的不識(shí)別，并導(dǎo)致CSS不起作用的問題-->
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
        </script>
        <!--解決ie9以下瀏覽器對(duì) css3 Media Query 的不識(shí)別 -->
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
        </script>
    <![endif]-->

3. 引入相關(guān)樣式文件

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

4. 書寫內(nèi)容

直接拿Bootstrap 預(yù)先定義好的樣式來使用

修改Bootstrap 原來的樣式，注意權(quán)重問題

學(xué)好Bootstrap 的關(guān)鍵在于知道它定義了哪些樣式，以及這些樣式能實(shí)現(xiàn)什么樣的效果

布局容器

Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container 容器，它提供了兩個(gè)作此用處的類。

1. container 類

響應(yīng)式布局的容器 固定寬度

大屏 ( >=1200px) 寬度定為 1170px 

中屏 ( >=992px) 寬度定為 970px 

小屏 ( >=768px) 寬度定為 750px 

超小屏 (100%)

2. container-fluid 類

流式布局容器 百分百寬度 占據(jù)全部視口（viewport）的容器。

Bootstrap是什么？有什么用處？

Bootstrap簡(jiǎn)介，如何下載和使用Bootstrap？

Bootstrap源文件的目錄結(jié)構(gòu)是怎樣的？

Bootstrap源文件的目錄結(jié)構(gòu)是怎樣的？

傳智教育前端與移動(dòng)開發(fā)培訓(xùn)