bootstrap框架的搭建

bootstrap框架

    Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。Bootstrap 的響應式 CSS 可以自適應於臺式機、平板電腦和手機。使用bootstrap框架時，切記不能改變class的組名，若是須要建組設置屬性，就再增長一個class組，下面的Bootstrp只是一些比較經常使用的屬性，若是須要用到其餘的屬性，就到http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html網站調用。

1.Bootstrap 的網格系統

    Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類。Bootstrap 3 是移動設備優先的，在這個意義上，Bootstrap 代碼從小屏幕設備（好比移動設備、平板電腦）開始，而後擴展到大屏幕設備（好比筆記本電腦、臺式電腦）上的組件和網格。移動設備上優先是指1.在內容上決定什麼事最重要的；2.在佈局上，優先設計更小的寬度，基礎的 CSS 是移動設備優先，媒體查詢是針對於平板電腦、臺式電腦；3.逐漸加強，隨着屏幕大小的增長而添加元素；4.響應式網格系統隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列，這12列相鄰的列也能夠合併。

2.Bootstrap 排版

a.標題    Bootstrap 中定義了全部的 HTML 標題（h1 到 h6）的樣式。例如h1： <h1>標題 <small>副標題1</small></h1>，副標題顏色和大小不如正標題明顯。

b.引導主題副本    爲了給段落添增強調文本，則能夠添加 <p class="lead"></p>，這將獲得更大更粗、行高更高的文本。

c.強調    <strong>（設置文本爲更粗的文本）、<em>（設置文本爲斜體）。<strong>加強語氣的文本</strong>。

3. Bootstrap按鈕

    經常使用的按鈕有下列按鈕：

<!-- 標準的按鈕 --> <button type="button" class="btn btn-default">默認按鈕</button>

<!-- 提供額外的視覺效果，標識一組按鈕中的原始動做 --> <button type="button" class="btn btn-primary">原始按鈕</button>

<!-- 表示一個成功的或積極的動做 --> <button type="button" class="btn btn-success">成功按鈕</button>

<!-- 信息警告消息的上下文按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button>

<!-- 表示應謹慎採起的動做 --> <button type="button" class="btn btn-warning">警告按鈕</button>

<!-- 表示一個危險的或潛在的負面動做 --> <button type="button" class="btn btn-danger">危險按鈕</button>

<!-- 並不強調是一個按鈕，看起來像一個連接，但同時保持按鈕的行爲 --> <button type="button" class="btn btn-link">連接按鈕</button>

   按鈕的大小控制：

.btn-lg   這會讓按鈕看起來比較大。

.btn-sm   這會讓按鈕看起來比較小。

.btn-xs   這會讓按鈕看起來特別小。

.btn-block    這會建立塊級的按鈕，會橫跨父元素的所有寬度。

    按鈕禁用：disabled  當禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。<button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕</button>

4.Bootstrap圖片

.img-rounded  爲圖片添加圓角

.img-circle  將圖片變爲圓形 

.img-thumbnail  縮略圖功能

.img-responsive  圖片響應式

5.Bootstrap響應式實用工具

                          超小屏幕                 小屏幕                    中等屏幕                 大屏幕
                          手機 (<768px)        平板 (≥768px)        桌面 (≥992px)        桌面 (≥1200px)
                                                             
 .visible-xs-*          可見                        隱藏                       隱藏                      隱藏                                                                                            
                                                                                                                  
.visible-sm-*          隱藏                        可見                        隱藏                      隱藏

.visible-md-*          隱藏                        隱藏                        可見                      隱藏

.visible-lg-*            隱藏                        隱藏                        隱藏                      可見

.hidden-xs              隱藏                       可見                        可見                       可見

.hidden-sm              可見                      隱藏                        可見                        可見

.hidden-md              可見                      可見                        隱藏                        可見

.hidden-lg                可見                      可見                         可見                       隱藏

 

6.Bootstrap下拉菜單    如需使用下列菜單，只須要在 class .dropdown 內加上下拉菜單便可。

    例如：

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題
　　<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
　　<li role="presentation">
　　　　<a role="menuitem" tabindex="-1" href="#">Java</a>
　　</li> 
　　<li role="presentation">
　　　　<a role="menuitem" tabindex="-1" href="#">數據挖掘</a>
　　</li>
</ul>

    上面代碼表示一個下拉菜單，下拉名稱爲主題，下拉項有Java和數據挖掘2項。

7.Bootstrap輸入框組

    使用輸入框組，能夠很容易地向基於文本的輸入框添加做爲前綴和後綴的文本或按鈕。經過向輸入域添加前綴和後綴的內容，能夠向用戶輸入添加公共的元素。例如用戶名輸入框、密碼輸入框，郵箱輸入，均可以用到。

    輸入框組大小的調整：能夠經過向 .input-group 添加相對錶單大小的 class（好比 .input-group-lg、input-group-sm、input-group-xs）來改變輸入框組的大小。輸入框中的內容會自動調整大小。

8.Bootstrap導航元素

    導航元素以一個帶有 class .nav 的無序列表開始。代碼示例以下：導航欄的名稱爲導航菜單，導航元素裏有Home、SVN、iOS、VB.Net、Java、PHP  6個選項。

    

<p>導航菜單</p>

    <ul class="nav nav-tabs">

    　　<li class="active"><a href="#">Home</a></li>

　 　　<li><a href="#">SVN</a></li>

    　　<li><a href="#">iOS</a></li>

    　　<li><a href="#">VB.Net</a></li>

    　　<li><a href="#">Java</a></li>

    　　<li><a href="#">PHP</a></li>

    </ul>

9.Bootstrap警告（Alerts）

    建立一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警告框。

　　示例：

　　

<div class="alert alert-success">成功！很好地完成了提交。</div>

　　<div class="alert alert-info">信息！請注意這個信息。</div>

　　<div class="alert alert-warning">警告！請不要提交。</div>

　　<div class="alert alert-danger">錯誤！請進行一些更改。</div>

10.Bootstrap輪播

<div id="myCarousel" class="carousel slide">

　　<!-- 輪播（Carousel）指標 -->

　　<ol class="carousel-indicators">

　　　　<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

　　　　<li data-target="#myCarousel" data-slide-to="1"></li>

　　　　<li data-target="#myCarousel" data-slide-to="2"></li>

　　</ol>

　　<!-- 輪播（Carousel）項目 -->

　　<div class="carousel-inner">

　　　　<div class="item active">

　　　　　　<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div>

　　　　<div class="item">

　　　　　　<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div>

　　　　<div class="item">

　　　　　　<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div>

　　　　</div> <!-- 輪播（Carousel）導航 -->

　　　　<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; </a>

　　　　<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo; </a>

</div>