Bootstrap

1.bootstrap

1.1bootstrap概述

bootstrap簡介：
    bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。bootstrap 是 2011 年八月在 GitHub 上發佈的開源產品。
boostrap特色
    1 移動設備優先：自 bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
瀏覽器支持：
    2 全部的主流瀏覽器都支持 bootstrap。
    Internet Explorer Firefox Opera Google Chrome Safari
    3 容易上手：只要您具有 HTML 和 CSS 的基礎知識，您就能夠開始學習 bootstrap。
    4 響應式設計：bootstrap 的響應式 CSS 可以自適應於臺式機、平板電腦和手機。

1.2響應式的頁面

bootstrap的使用步驟：
1.下載bootstrap
    http://www.bootcss.com/
2.導入bootstrap.css文件
3.導入jquery.js
4.導入bootstrap.js

<!--導入css-->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- 導入jquery-->
    <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
    <!--導入.js -->
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
 5.導入支持移動設備  支持縮放 實際上是1.0
    <meta name="viewport" content="width=device-width, initial-scale=1">

6.將全部的內容放到佈局容器中
    .container 類用於固定寬度並支持響應式佈局的容器。
    <div class="container">
        ...
    </div>
    .container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。
    <div class="container-fluid">
        ...
    </div>
    測試1: 直接寫container顯示不全
    <div class="container">
              <div style="border: 1px solid red;">111111</div>
    </div>

1.3 bootstrap的組成

1.全局css的樣式

2.組件

3.js插件

1.4柵格系統

1.4.1什麼是柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。 注意: Bootstrap將每一行分紅12份! Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工做原理： 「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。 經過「行（row）」在水平方向建立一組「列（column）」。

注意：

柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可使用三個 .col-xs-4 來建立。若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。

1.4.2媒體查詢功能

1.5 排版

1.5.1 標題

標題: HTML 中的全部標題標籤，<h1> 到 <h6> 都可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式。

1.5.2Mark標籤

1.5.3對齊

經過文本對齊類，能夠簡單方便的將文字從新對齊

1.5.4 表格

table 表格 全屏

table-striped 表格隔行變色 斑馬線效果

table-bordered 邊框

table-hover 懸浮變色

1.5.5 行狀態

1.6表單

元素都將被默認設置寬度屬性爲 width: 100%;將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。

1.6.1 基本實例

 單獨的表單控件會被自動賦予一些全局樣式。全部設置了 .form-control 類的 <input>、<textarea> 和 <select>

內聯表單

爲 <form> 元素添加 .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。

水平表單

經過爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，能夠將 label 標籤和控件組水平並排佈局。這樣作將改變 .form-group 的行爲，使其表現爲柵格系統中的行（row），所以就無需再額外添加 .row 了。

特殊符號 金額輸入框

複選框和單選框

經過將 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框（checkbox）或單選框（radio）控件上，可使這些控件排列在一行。

靜態控件

1.6.7校驗狀態

Bootstrap 對錶單控件的校驗狀態，如 error、warning 和 success 狀態，都定義了樣式。使用時，
添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素便可。
任何包含在此元素以內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。

 

 

1.6.8按鈕

class = btn 將任何東西變成按鈕 須要配合 btn-default

1.6.9尺寸

須要讓按鈕具備不一樣尺寸嗎？使用 .btn-lg、.btn-sm 或 .btn-xs 就能夠得到不一樣尺寸的按鈕

1.6.10 圖片的形狀

響應式圖片!隨着窗體大小改變大小 經過爲 <img> 元素添加如下相應的類，可讓圖片呈現不一樣的形狀。

1.6.11 輔助類

一.情境文本顏色
經過顏色來展現意圖，Bootstrap 提供了一組工具類。這些類能夠應用於連接，而且在鼠標通過時顏色能夠還能夠加深，就像默認的連接同樣。

二 情景背景顏色

和情境文本顏色類同樣，使用任意情境背景色類就能夠設置元素的背景。連接組件在鼠標通過時顏色會加深，就像上面所講的情境文本顏色類同樣。

1.6.12 浮動

1.6.13 可見類

1.7 組件

無數可複用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能

1.7.1 圖片使用Glyphicons字體圖標

1.7.2 下拉菜單

1.7.3 按鈕組

把一系列的.btn按鈕放入.btn-group。

btn-group 內部嵌套 btn

1.7.4 toolbar 按鈕工具欄

把一組 <div class="btn-group"> 組合進一個 <div class="btn-toolbar"> 中就能夠作成更復雜的組件

1.7.5 尺寸

只要給 .btn-group 加上 .btn-group-* 類，就省去爲按鈕組中的每一個按鈕都賦予尺寸類了，若是包含了多個按鈕組時也適用。

1.7.6 標籤式導航欄

1.7.7膠囊導航

1.7.8導航條

1.7.9 路徑導航 麪包屑導航

1.7.10 標籤

1.7.11徽章 提示信息

1.7.12 進度條

1.7.13 well