讀者們，你們好，好久不見！最近一直在用Bootstrap來寫一些網(wǎng)站，個人覺得簡介靈活，使得Web開發(fā)更方便快捷，下面我就給大家詳細(xì)的說說Bootstrap,希望對大家有幫助！

一、Bootstrap究竟是什么？
Bootstrap是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架，也是目前最受歡迎的，Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
二、為什么要使用Bootstrap？
★ 移動設(shè)備優(yōu)先：自 Bootstrap 3 起，框架包含了貫穿于整個庫的移動設(shè)備優(yōu)先的樣式。
★ 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
★ 容易上手：只要您具備 HTML 和 CSS 的基礎(chǔ)知識，您就可以開始學(xué)習(xí) Bootstrap。
★ 響應(yīng)式設(shè)計：Bootstrap的響應(yīng)式CSS能夠自適應(yīng)于臺式機、平板電腦和手機。
三、下面我就針對幾個比較常用也比較重要的給大家講解一下：
1、 柵格系統(tǒng)
Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義類，還有強大的mixin 用于生成更具語義的布局。
簡介：
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：
☆ “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補（padding）。
☆ 通過為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
☆ 柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創(chuàng)建。
2、在寫柵格之前呢，我們先來看一下媒體查詢：
★ 在柵格系統(tǒng)中，我們在 Less 文件中使用以下媒體查詢（media query）來創(chuàng)建關(guān)鍵的分界點閾值。

/* 超小屏幕（手機，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因為這在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動設(shè)備優(yōu)先的嗎？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內(nèi)。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

3、柵格參數(shù)
通過下表可以詳細(xì)查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。

適配多種設(shè)備.png

接下來，我們來看一個實例吧！
★ 從堆疊到水平排列
使用單一的一組 .col-md-* 柵格類，就可以創(chuàng)建一個基本的柵格系統(tǒng)，在手機和平板設(shè)備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設(shè)備上變?yōu)樗脚帕?。所有“列（column）必須放在 ” .row 內(nèi)。

從堆疊到水平排列.png

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

★ 流式布局容器
將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉(zhuǎn)換為 100% 寬度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

★ 移動設(shè)備和桌面屏幕

移動設(shè)備和桌面屏幕.png

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

★ 手機、平板、桌面
在上面案例的基礎(chǔ)上，通過使用針對平板設(shè)備的 .col-sm-* 類，我們來創(chuàng)建更加動態(tài)和強大的布局吧。

手機、平板、桌面.png

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

2、Bootstrap 響應(yīng)式實用工具
Bootstrap 提供了一些輔助類，以便更快地實現(xiàn)對移動設(shè)備友好的開發(fā)。這些可以通過媒體查詢結(jié)合大型、小型和中型設(shè)備，實現(xiàn)內(nèi)容對設(shè)備的顯示和隱藏。

需要謹(jǐn)慎使用這些工具，避免在同一個站點創(chuàng)建完全不同的版本。響應(yīng)式實用工具目前只適用于塊和表切換。

適配各種屏幕.png

適配各種屏幕的三種變體.png

響應(yīng)式布局.png

<div class="container" style="padding: 40px;">
    <div class="row visible-on">
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-xs">特別小型</span>
            <span class="visible-xs">? 在特別小型設(shè)備上可見</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-sm">小型</span>
            <span class="visible-sm">? 在小型設(shè)備上可見</span>
        </div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-md">中型</span>
            <span class="visible-md">? 在中型設(shè)備上可見</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-lg">大型</span>
            <span class="visible-lg">? 在大型設(shè)備上可見</span>
        </div>
    </div>
</div>

好了，以上就是今天我要給大家分享的比較重要使用的一些知識，大家有什么需要補充的敬請留言給我哦！
如果對你有用并且很喜歡我的文章，那就點贊加關(guān)注吧！