3一、BootStrap

Bootstrap:

概念：一個前端開發的框架，

框架：一個半成品軟件，開發人員能夠在框架基礎上，再進行開發，簡化編碼

好處：一、定義了不少css樣式和js插件。咱們開發人員直接可使用這些樣式和插件獲得豐富的頁面效果

         二、響應式佈局，同一套頁面能夠兼容不一樣分辨率的設備

 

快速入門：

            一、下載Bootstrap        

            二、在項目中將文件複製到

            三、建立html頁面，引入必要資源文件

 

響應式佈局：

實現：依賴於柵格系統，將一行平均分紅12個格子， 能夠指定元素佔幾個格子

步驟：一、定義容器。至關於以前的table

                            容器分類：一、container：兩邊留白

<div class="container"></div>

                                           二、container-fluid：每種設備都是100%

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

         二、定義行。相對於以前的tr 樣式：row

<div class="row"></div>

         三、定義元素。指定改元素在不一樣設備上，所佔的格子數目。樣式：col-設備代號-格子數目

                             設備代號：一、xs：超小屏幕 手機 （<768px）

                                            二、sm：小屏幕 pad （>=768px）

                                            三、md：中等屏幕 筆記本 （>=992px）

                                            四、lg：大屏幕 顯示器（>1200px）

                     注意：一、一行種若是格子數目超過12，則超出部分自動換行

                              二、柵格類屬性能夠向上兼容，柵格類適用於與屏幕寬度大衣或等於分界點大小的設備

                              三、若是真實設備寬度小於了設置柵格類屬性的設備代碼的最小值，會一個元素佔滿一整行

<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
</div>

 

CSS樣式和JS插件：

一、全局CSS樣式

    按鈕：class= "btn btn-default"

    圖片：class ="img - responsive"圖片在任意尺寸都佔100%

             class="img-rounded"方形

             class = "img-circle"圓形

             class = "img-thumbnail"相框

    表格：table

             table-bordered

             table-hover

    表單：form-control

二、組件

    導航條

    分頁條

    

三、插件

    輪播圖

 

查詢網址：https://v3.bootcss.com，只需選擇本身須要的樣式，在其基礎上進行修改便可作出一個精緻的頁面。