說到boostrap, 我可以這樣說,大概在半年前,我寫頁面的時(shí)候使用過它來布局及寫樣式, 但是根本沒有好好學(xué)習(xí)過它,尤其它的珊格系統(tǒng), 在布局的時(shí)候,它真的很好使,少寫很多的css,而且響應(yīng)式很好, 然而雖然我用過,但是還理解的很不全面. 現(xiàn)在我找到工作了,在實(shí)習(xí)做項(xiàng)目中又要使用它了, 對(duì)它很不熟悉,導(dǎo)致使用起來概念模糊,所以這就來好好學(xué)習(xí)它,整理一下, 使用起來更得心應(yīng)手.
什么是 Bootstrap？
Bootstrap是由Twitter推出的開源CSS框架
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的雷恃。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品魂莫。
為什么學(xué)習(xí)和使用boostrap ?
移動(dòng)設(shè)備優(yōu)先：自 Bootstrap 3 起挡育，框架包含了貫穿于整個(gè)庫的移動(dòng)設(shè)備優(yōu)先的樣式腾誉。
瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap帆谍。
容易上手：只要您具備 HTML 和 CSS 的基礎(chǔ)知識(shí)饼酿，您就可以開始學(xué)習(xí) Bootstrap运准。
響應(yīng)式設(shè)計(jì)：Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)吭敢、平板電腦和手機(jī)碰凶。更多有關(guān)響應(yīng)式設(shè)計(jì)的內(nèi)容詳見 Bootstrap 響應(yīng)式設(shè)計(jì)
Bootstrap 包的內(nèi)容
基本結(jié)構(gòu)：Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式鹿驼、背景的基本結(jié)構(gòu)欲低。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細(xì)講解。
CSS：Bootstrap 自帶以下特性：全局的 CSS 設(shè)置蠢沿、定義基本的 HTML 元素樣式伸头、可擴(kuò)展的 class，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)舷蟀。這將在 Bootstrap CSS 部分詳細(xì)講解恤磷。
組件：Bootstrap 包含了十幾個(gè)可重用的組件，用于創(chuàng)建圖像野宜、下拉菜單扫步、導(dǎo)航、警告框匈子、彈出框等等河胎。這將在 布局組件 部分詳細(xì)講解。
JavaScript 插件：Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件虎敦。您可以直接包含所有的插件游岳，也可以逐個(gè)包含這些插件政敢。這將在Bootstrap 插件 部分詳細(xì)講解。
定制：您可以定制 Bootstrap 的組件胚迫、LESS 變量和 jQuery 插件來得到您自己的版本喷户。
如何使用Boostrap ?
兩種方法在我們的html文件里面引入它
方法一: 最簡單,但是在網(wǎng)絡(luò)通暢的情況下才有效
引入Boostrap的在線鏈接
- 利用免費(fèi)的CDN，你可以用BootStrap官網(wǎng)的免費(fèi)CDN访锻，或者其他的例如百度的靜態(tài)資源庫的 CDN 服務(wù)（簡單的來說就是網(wǎng)址）
啥? 你不知道CDN是什么?
好,我來告訴你,CDN的全稱是Content Delivery Network褪尝，即內(nèi)容分發(fā)網(wǎng)絡(luò).
你就理解它是一個(gè)免費(fèi)的服務(wù)器，而你要引入的文件放在這個(gè)服務(wù)器上期犬，你直接用網(wǎng)址引用就行.
引入CDN也有兩種選擇:
- BootStap官網(wǎng)提供的CDN:
Bootstrap 中文網(wǎng) 為 Bootstrap 專門構(gòu)建了自己的免費(fèi) CDN 加速服務(wù)河哑。基于國內(nèi)云廠商的 CDN 服務(wù)龟虎，訪問速度更快璃谨、加速效果更明顯、沒有速度和帶寬限制遣总、永久免費(fèi)睬罗。Bootstrap 中文網(wǎng)還對(duì)大量的前端開源工具庫提供了 CDN 加速服務(wù)，請(qǐng)進(jìn)入BootCDN 主頁查看更多可用的工具庫旭斥。
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" >
<!-- 可選的Bootstrap主題文件（一般不用引入） -->
<link rel="stylesheet" >
<!-- jQuery文件容达。務(wù)必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
- 采用百度的靜態(tài)資源庫 (http://cnd.code.baidu.com/):
百度的靜態(tài)資源庫的CDN服務(wù),訪問速度快,加速效果更明顯,沒有速度和帶寬的限制,永久免費(fèi),引入代碼如下:
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link
rel="stylesheet">
<!-- 可選的Bootstrap主題文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
這樣你的環(huán)境就好了,你就可以直接使用Boostrap了.
方法二:
下載bootStrap到本地垂券，從本地引入
谷歌/百度搜索 BootStrap, 然后去官網(wǎng)下載
一般都提供了3種下載, 包但是Bootstrap 提供了兩種形式的壓縮包花盐，在下載下來的壓縮包內(nèi)可以看到以下目錄和文件，這些文件按照類別放到了不同的目錄內(nèi)菇爪，并且提供了 壓縮 與 未壓縮 兩種版本算芯。
如下圖:
一般推薦下載第一種，用于生產(chǎn)環(huán)境的BootStrap包 （預(yù)編譯(已經(jīng)編譯好的)的 Bootstrap）
-
當(dāng)您下載了 Bootstrap 的已編譯的版本(第一種)凳宙，解壓縮 ZIP 文件熙揍，您將看到下面的文件/目錄結(jié)構(gòu)：
-
Bootstrap 源代碼（如果您下載了 Bootstrap 源代碼，那么文件結(jié)構(gòu)將如下所示：）
然后就是把下載的包復(fù)制到你的項(xiàng)目里氏涩，然后根據(jù)你的的路徑引入就行届囚，引入的文件和從cdn引入的文件一樣
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="本地路徑/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可選的Bootstrap主題文件（一般不用引入） -->
<link rel="stylesheet" >
<!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 -->
<script src="本地路徑/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="本地路徑/bootstrap/3.3.5/js/bootstrap.min.js"></script>
由于Boostrap所有的實(shí)現(xiàn)都是封裝在類class屬性中,所以下面的例子你可以看到Boostrap的實(shí)現(xiàn)是寫在class中的.
simple example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Example</title>
#這里是為了能夠適應(yīng)更多設(shè)備的響應(yīng)式設(shè)計(jì)
<meta name="viewport" content="width=device-width, initial-scale=1">
#引入Boostrap
<link rel="stylesheet" >
</head>
<body>
<div class="container">
<h2>Button</h2>
<span> .btn 類是按鈕的基本樣式:</span>
<button type="button" class="btn">基本按鈕</button>
<br/>
<sapn>.btn-warning 該樣式表示需要謹(jǐn)慎操作的按鈕:</sapn>
<button type="button" class="btn btn-warning">Warning</button>
</div>
</body>
</html>
響應(yīng)式設(shè)計(jì)
<meta name="viewport" content="width=device-width, initial-scale=1">
這是為了讓你的BOOTstrap在小屏幕上是尖，也正常顯示大小意系，響應(yīng)式頁面設(shè)置，
