Bootstrap 教程

認(rèn)識(shí) Bootstrap：

在您學(xué)習(xí)完本教程后，您即可達(dá)到使用 Bootstrap 開發(fā) Web 項(xiàng)目的中等水平。建議您進(jìn)行Bootstrap實(shí)戰(zhàn)練習(xí)來鞏固您剛學(xué)到的新知識(shí)。

如果您覺得 Bootstrap 的學(xué)習(xí)難度較高，不易理解，建議您采用視頻教程進(jìn)行學(xué)習(xí)：Bootstrap視頻課程

在您開始學(xué)習(xí)本教程之前需要先學(xué)習(xí)以下教程:

《HTML 教程》

《CSS 教程》

《JavaScript 教程》

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的，它在jQuery的基礎(chǔ)上進(jìn)行了更為個(gè)性化和人性化的完善，形成一套自己獨(dú)有的網(wǎng)站風(fēng)格，并兼容大部分jQuery插件。

Bootstrap 簡潔靈活，使得 Web 開發(fā)更加快捷。其最大的優(yōu)勢(shì)是響應(yīng)式布局，使得開發(fā)者可以方便的讓網(wǎng)頁無論在臺(tái)式機(jī)、平板設(shè)備、手機(jī)上都獲得最佳的體驗(yàn)。

bootstrap教程結(jié)構(gòu)概述：

本教程共由5個(gè)章節(jié)構(gòu)成，詳細(xì)講述了 Bootstrap 的基礎(chǔ)使用方法并附帶了大量可在線試運(yùn)行的實(shí)例輔助您的學(xué)習(xí)，讓您輕松掌握 Bootstrap。

本教程包含：

1、《bootstrap 簡介》

2、《Bootstrap CSS》

3、《Bootstrap 布局組件》

4、《Bootstrap 插件》

5、《Bootstrap 相關(guān)內(nèi)容》

bootstrap的發(fā)展：

2010年6月，為了提高內(nèi)部的協(xié)調(diào)性和工作效率，Twitter 公司的幾個(gè)前端開發(fā)人員自發(fā)成立了一個(gè)興趣小組，Bootstrap的構(gòu)想產(chǎn)生了。他們希望通過這個(gè)工具包提供一種精致的、經(jīng)典的、得到充分認(rèn)可的，且使用HTML、CSS和JavaScript構(gòu)建的組件，為用戶建立和創(chuàng)建靈活的設(shè)計(jì)和豐富的插件庫。

2011年8月，Twitter 將其開源，至今 Bootstrap 已發(fā)展到包括幾十個(gè)組件，并已成為最受歡迎的 Web 前端框架之一。Bootstrap 是最穩(wěn)定，響應(yīng)最好的框架之一。它被各種水平的開發(fā)者所喜愛，即使是一個(gè)只具備 HTML 和一些 CSS 基礎(chǔ)知識(shí)的初學(xué)者也能夠輕易地上手 Bootstrap。

在2015年8月下旬，Bootstrap 四周歲之際，Bootstrap 團(tuán)隊(duì)發(fā)布了 Bootstrap 4 alpha 版。

Bootstrap4 的的更新主要提升了以下幾個(gè)方面：

• 從 Less 遷移到 Sass
• 改進(jìn)網(wǎng)格系統(tǒng)
• 缺省彈性框支持
• Dropped wells, thumbnails, and panels for cards
• 合并所有 HTML resets 到一個(gè)新的模塊中：Reboot
• 全新自定義選項(xiàng)
• 不再支持 IE8
• 重寫所有的 JavaScript 插件
• 改進(jìn)工具提示和 popovers 的自動(dòng)定位
• 改進(jìn)文檔
• 其他大量改進(jìn)

bootstrap的缺點(diǎn)：

雖然 Bootstrap 自適應(yīng)效果很好，但是缺點(diǎn)是不方便修改樣式，對(duì)細(xì)節(jié)的不好把握，而且Bootstrap 是由 Twitter 的開發(fā)者開發(fā)來系統(tǒng)化他們網(wǎng)站應(yīng)用的樣式。當(dāng)你的網(wǎng)站應(yīng)用的樣式和他們不一樣，這意味著你不得不覆蓋掉他們的樣式來。大多數(shù)網(wǎng)站的樣式并不像 Twitter 那樣。因此，如果他們安裝 Bootstrap ，他們會(huì)覆蓋掉很多樣式。

bootstrap的安裝：

官網(wǎng)下載地址：http://getbootstrap.com/ 

中文網(wǎng)下載地址：http://www.bootcss.com/

如果您使用的是未編譯的源代碼，您需要編譯 LESS 文件來生成可重用的 CSS 文件。對(duì)于編譯 LESS 文件，Bootstrap 官方只支持 Recess，這是 Twitter 的基于 less.js 的 CSS 提示。

具體的安裝方法您可以按照本手冊(cè)中的《Bootstrap 環(huán)境安裝》

除了本教程，您還可以在w3cschool上學(xué)習(xí)：

《Bootstrap 手冊(cè)》

《Bootstrap4 教程》

要想更加全面的掌握 Bootstrap 框架技術(shù)，你可以在本站學(xué)習(xí)湯小洋老師的《通俗易懂的Bootstrap視頻課程》！