bootstrap框架怎麼用？ bootstrap框架的用法介紹

Bootstrap是來自Twitter的一款目前最受歡迎的前端框架，Bootstrap框架基於HTML、CSS、javascript，簡潔靈活，使得Web 開發更加快捷，但是有很多朋友不知道怎麼用bootstrap框架，接下來的這篇文章就來跟大家來介紹一下bootstrap框架使用方法。

話不多說，我們直接來看正文~（免費課程推薦：bootstrap教程）

1 、Bootstrap 中用到一些 HTML元素和CSS屬性需要將頁面設定為 HTML5 文件類型，也就是在頁面頂部新增「」

##2 、佈局容器：Bootstrap 需要為頁面內容和柵格系統包裹一個 .container或container-fluid（佔據全部視口viewport的容器）容器。

3 、柵格系統：Bootstrap 提供了一套最多12列的流式柵格系統，透過 .row表示行 和 .col-xs-4 這種表示寬度的列快速建立柵格佈局。

4 、Bootstrap 排版、連結樣式設定了基本的全域樣式。

font-size 設定為 14px，line-height 設定為 1.428。

（段落）元素也被設定了等於 1/2 行高（即 10px）的底部外邊距（margin）。

基礎樣式

排版：

#1、標題，可以用來.h1 到.h6 類別給內聯屬性的文字賦予標題樣式，標題內透過 標籤或帶有.small 類別的元素標記副標題。

主體文字：.lead 類別讓段落反白顯示。

2、內嵌文本，使用 標籤表示標註文本，刪除，無用，插入，下劃線，小號（父容器字體大小的 85%），著重，斜體。

3、文字對齊類，text-left，text-center，text-right，text-justify，text-nowrap

4、文字大小寫類， text-lowercase，text-uppercase，text-capitalize

5、縮寫類，為 元素設定title屬性並使用.initialism 類別讓font-size 變得稍微小一點。例：attr

6. 地址，以日常使用的格式呈現，在行結尾加上
保留所需的樣式即可。

7、引用，將 HTML 元素包覆在

中即可表現為引用樣式。對於直接引用，建議用

標籤。

8、列表，list-unstyled類別移除預設 list-style 樣式和左側外邊距的一組元素（只針對直接子元素）。 list-inline類別透過設定 display: inline-block; 並添加少量的內補（padding），將所有元素放置於同一行。 dl-horizo​​ntal類別讓

內的短語及其描述排在一行。

程式碼：

# 標籤包裹內聯樣式的程式碼片段<p><br> </p> <kbd> 標籤標記使用者透過鍵盤輸入的內容<p><br></p> <pre class="brush:php;toolbar:false"> 展示程式碼區塊。可用pre-scrollable 類別設定最高350px帶垂直捲軸。 &lt;p&gt;&lt;br&gt;&lt;/p&gt;&lt;var&gt; 標籤標記變數&lt;p&gt;&lt;br&gt;&lt;/p&gt; &lt;samp&gt; 標籤標記程式輸出的內容。 &lt;p&gt;&lt;br&gt;&lt;/p&gt; &lt;p&gt;表格：&lt;strong&gt;&lt;/strong&gt;&lt;br&gt;##.table 類別指定基本樣式， &lt;/p&gt; &lt;p&gt;&lt;br&gt;.table-striped 條紋樣式， &lt;/p&gt; &lt;p&gt;&lt;br&gt;.table-bordered 類別為邊框樣式， &lt;/p&gt; &lt;p&gt;##.table-hover 類別帶滑鼠懸停樣式， &lt;br&gt;&lt;/p&gt; &lt;p&gt;.table-condensed類別緊湊樣式。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;狀態類別(行或儲存格設定顏色)：active，success，info，warning，info。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;將任何 .table 元素包裹在 .table-responsive 元素內，即可建立響應式表格，其 響應式表格: 會在小螢幕裝置上（小於768px）水平捲動。當螢幕大於 768px 寬度時，水平捲軸消失。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;&lt;br&gt;&lt;/strong&gt;表單：&lt;/p&gt; &lt;p&gt;&lt;strong&gt;&lt;/strong&gt;#1、基本實例：&lt;br&gt;&lt;/p&gt;所有設定了.form-control類別的&lt;input&gt;、&lt;textarea&gt; 和 &lt;select&gt; 元素都會被預設設定寬度屬性為 width: 100%;。 &lt;p&gt;&lt;/p&gt; &lt;p&gt;將 label 元素和前面提到的控制項包裹在 .form-group 中可以獲得最好的排列。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;不要講表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;form-group，input-group，control-group， &lt;br&gt;&lt;/p&gt; &lt;p&gt;2、內聯表單：&lt;br&gt;&lt;/p&gt; &lt;form&gt; 元素新增.form -inline 類別可使其內容左對齊並且表現為inline-block 層級的控制項。只適用於視窗（viewport）至少在 768px 寬度時（視窗寬度再小的話就會使表單折疊）。 &lt;p&gt;&lt;/p&gt; &lt;p&gt;在內聯表單中單選/多選框控制項的寬度設定為width: auto; &lt;br&gt;&lt;/p&gt; &lt;p&gt;#如果你沒有為每個輸入控制項設定label 標籤，螢幕閱讀器將無法正確識別。對於這些內聯表單，你可以透過為label 設定 .sr-only 類別將其隱藏。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;3、 水平排列的表單 ：透過為表單新增 .form-horizo​​ntal 類別改變 .form-group 的行為，使其表現為柵格系統中的行（row） &lt;br&gt;&lt;/p&gt; &lt;p&gt;4、多選和單選框 ：.radio、.radio-inline、.checkbox、.checkbox-inline 。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;5、靜態控件 ：水平佈局的表單中，如需將一行純文字和 label 元素放置於同一行，為 &lt;/p&gt; &lt;p&gt; 元素新增 .form-control-static類別即可。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;6、控件狀態 &lt;br&gt;&lt;/p&gt; &lt;p&gt;.disabled類別停用控件，為&lt;/p&gt; &lt;fieldset&gt; 設定disabled 時則停用包含的所有控件。 &lt;br&gt;&lt;p&gt;a標籤不受此類影響。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;readonly 屬性可以禁止使用者輸入 &lt;br&gt;&lt;/p&gt; &lt;p&gt;.has-warning、.has-error 或 .has-success 類別到這些控制項的父元素即可。任何包含在此元素之內的 .control-label、.form-control 和.help-block 元素都將接受這些校驗狀態的樣式。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;你也可以針對校驗狀態為輸入框新增額外的圖示（注意依賴label標籤）。只需設定相應的 .has-feedback 類別並添加正確的圖示。 &lt;/p&gt; &lt;p&gt;7、 控制項尺寸&lt;br&gt;&lt;/p&gt; &lt;p&gt;透過.input-lg .input-sm類似的類別可以為控制項設定高度，透過.col-lg-* 類似的類別可以為控件設定寬度&lt;br&gt;&lt;/p&gt; &lt;p&gt;透過新增.form-group-lg 或.form-group-sm 類，為.form-horizo​​ntal 包裹的label 元素和表單控制項快速設定尺寸。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;用柵格系統中的欄位（column）包裹輸入框或其任何父元素，都可輕鬆的為其設定寬度。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;8、輔助文字 ：help-block類，針對表單控制項的「區塊（block）」級輔助文字。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;按鈕：&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;1、基本樣式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、 btn-danger、active &lt;br&gt;&lt;/p&gt; &lt;p&gt;2、 展現形式，btn-link、btn-block、close &lt;br&gt;&lt;/p&gt; &lt;p&gt;3、尺寸樣式，.btn-lg、.btn- sm 、.btn-xs 。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;可透過&lt;a&gt;、&lt;button&gt; 或&lt;input&gt; 元素應用按鈕類，但建議用&lt;button&gt; 元素來獲得在各個瀏覽器上獲得相匹配的繪製效果。 &lt;br&gt;&lt;/button&gt;&lt;/button&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;圖片：&lt;/strong&gt;圖片形狀，img-rounded，img-circle，img-thumbnail，IE8 不支援 CSS3 中的圓角屬性。 &lt;br&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;輔助：&lt;/strong&gt;text-muted、text-primary、text-success、text-info、text-warning、text-danger 、bg-primary、bg-success、bg-info、bg-warning、bg-danger，三角符號，caret ，浮動 ，居中 &lt;strong&gt;&lt;br&gt;&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;元件樣式&lt;/strong&gt; &lt;br&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;#圖示：&lt;/strong&gt; &lt;br&gt;&lt;/p&gt; &lt;p&gt;200個來自Glyphicon Halflings 的字體圖標， &lt;br&gt;&lt;/p&gt; &lt;p&gt;圖標類別只能應用在空元素上，且不可與其它元件結合使用。 &lt;br&gt;&lt;/p&gt;&lt;pre class='brush:php;toolbar:false;'&gt;&lt;span class=&quot;glyphicon glyphicon-search&quot;&gt;&lt;/span&gt;</pre><p><strong>選單：</strong></p> <p>將下拉式選單觸發器和下拉式選單都包裹在.dropdown 中<br></p> <p>選單對齊：預設情況下，下拉式選單會自動沿著父元素的上沿和左側被定位為100% 寬度。為.dropdown-menu 新增.dropdown-menu-right 類別可以讓選單右對齊<br></p> <p>選單分組：dropdown-header表描述項，.disabled 表格停用項目<br></p> <p> #向上彈出： .dropup 類別就能使觸發的下拉式選單朝上方打開 <strong><br></strong></p> <p><strong>按鈕群組 ：</strong><br></p> <p>按鈕群組.btn-group，透過.btn-group-* 指定群組中按鈕尺寸。 <br></p> <p>按鈕列.btn-toolbar <br></p> <p>按鈕垂直堆疊排列顯示btn-group-vertical <br></p> <p>兩端對齊排列的按鈕組btn-group-justified <strong><br></strong></p> <p><strong>導覽：</strong></p> <p>標籤頁.nav-tabs 類別依賴 .nav 基底類別。 <br></p> <p>膠囊式標籤頁.nav-pills 類，新增 .nav-stacked 類別改為垂直堆疊。 <br></p> <p>.nav-justified 類別可以很容易的讓標籤頁或膠囊式標籤呈現出同等寬度。 <br></p> <p>navbar navbar-default <br></p> <p>對於不包含在</p> <form> 中的<button> 元素，加上.navbar-btn 後，可以讓它在導航條裡垂直居中。 <br><p> 將表單放在.navbar-form 之內可以呈現很好的垂直對齊， <br></p> <p>.navbar-text <br></p> <p>. navbar-link <br></p> <p>.navbar-left 和.navbar-right 工具類別讓導覽連結、表單、按鈕或文字對齊。 <br></p> <p>.navbar-fixed-top 類別可以讓導覽條固定在頂部<br></p> <p>.navbar-fixed-bottom 類別可以讓導覽條固定在底部<br></p> <p>.navbar-static-top 類別可讓導覽條隨著頁面向下捲動而消失。 <br></p> <p>.navbar-inverse 類別可以改變導覽條的外觀。 <br></p> <p>breadcrumb 建立具有層次的導航結構（麵包屑）。 <strong><br></strong></p> <p><strong>分頁：</strong><br></p> <p>pagination，並根據情況對頁碼使用.disabled 類別、 .active 類別。 <br></p> <p>.pagination-lg 或 .pagination-sm 類別提供了額外可供選擇的尺寸。 <br></p> <p>pager上一頁和下一頁的簡單翻頁。並可透過previous，next類標示。 <br></p> <p><strong>標籤：</strong>label標籤基類，可透過label-default, label-primary, label-success, label-info, label-warning, label-danger改變標籤的外觀。 <br>badge，可以很醒目的展示新的或未讀的資訊條目。 <br></p> <p>其它：縮圖 、提示框 、進度條 、媒體對像等 <strong><br></strong></p> <p><strong>客製化樣式 </strong><br></p> <p>BootStrap提供了根據自己需要的元件及jquery外掛程式進行客製化，使用者也可以直接修改Less原始碼。 <br></p></button> </form> </fieldset> </form></select></textarea></samp></var></pre></kbd>

以上是bootstrap框架怎麼用？ bootstrap框架的用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！