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

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

標籤。

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

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

程式碼：

# 標籤包裹內聯樣式的程式碼片段

標籤標記使用者透過鍵盤輸入的內容

 展示程式碼區塊。可用pre-scrollable 類別設定最高350px帶垂直捲軸。 <p><br></p><var> 標籤標記變數<p><br></p><samp> 標籤標記程式輸出的內容。 <p><br></p>
<p>表格：<strong></strong><br>##.table 類別指定基本樣式， </p>
<p><br>.table-striped 條紋樣式， </p>
<p><br>.table-bordered 類別為邊框樣式， </p>
<p>##.table-hover 類別帶滑鼠懸停樣式， <br></p>
<p>.table-condensed類別緊湊樣式。 <br></p>
<p>狀態類別(行或儲存格設定顏色)：active，success，info，warning，info。 <br></p>
<p>將任何 .table 元素包裹在 .table-responsive 元素內，即可建立響應式表格，其 響應式表格: 會在小螢幕裝置上（小於768px）水平捲動。當螢幕大於 768px 寬度時，水平捲軸消失。
<br></p>
<p><strong><br></strong>表單：</p>
<p><strong></strong>#1、基本實例：<br></p>所有設定了.form-control類別的<input>、<textarea> 和
<select> 元素都會被預設設定寬度屬性為 width: 100%;。 <p></p>
<p>將 label 元素和前面提到的控制項包裹在
.form-group 中可以獲得最好的排列。 <br></p>
<p>不要講表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。 <br></p>
<p>form-group，input-group，control-group， <br></p>
<p>2、內聯表單：<br></p><form> 元素新增.form -inline 類別可使其內容左對齊並且表現為inline-block 層級的控制項。只適用於視窗（viewport）至少在 768px 寬度時（視窗寬度再小的話就會使表單折疊）。 <p></p>
<p>在內聯表單中單選/多選框控制項的寬度設定為width: auto; <br></p>
<p>#如果你沒有為每個輸入控制項設定label 標籤，螢幕閱讀器將無法正確識別。對於這些內聯表單，你可以透過為label 設定 .sr-only 類別將其隱藏。 <br></p>
<p>3、 水平排列的表單
：透過為表單新增 .form-horizo​​ntal 類別改變 .form-group 的行為，使其表現為柵格系統中的行（row） <br></p>
<p>4、多選和單選框
：.radio、.radio-inline、.checkbox、.checkbox-inline 。 <br></p>
<p>5、靜態控件
：水平佈局的表單中，如需將一行純文字和 label 元素放置於同一行，為 <p> 元素新增 .form-control-static類別即可。 <br></p>
<p>6、控件狀態 <br></p>
<p>.disabled類別停用控件，為<fieldset> 設定disabled 時則停用包含的所有控件。 <br></p>
<p>a標籤不受此類影響。 <br></p>
<p>readonly 屬性可以禁止使用者輸入 <br></p>
<p>.has-warning、.has-error 或 .has-success 類別到這些控制項的父元素即可。任何包含在此元素之內的 .control-label、.form-control 和.help-block 元素都將接受這些校驗狀態的樣式。 <br></p>
<p>你也可以針對校驗狀態為輸入框新增額外的圖示（注意依賴label標籤）。只需設定相應的 .has-feedback 類別並添加正確的圖示。 </p>
<p>7、 控制項尺寸<br></p>
<p>透過.input-lg .input-sm類似的類別可以為控制項設定高度，透過.col-lg-* 類似的類別可以為控件設定寬度<br></p>
<p>透過新增.form-group-lg 或.form-group-sm 類，為.form-horizo​​ntal 包裹的label 元素和表單控制項快速設定尺寸。 <br></p>
<p>用柵格系統中的欄位（column）包裹輸入框或其任何父元素，都可輕鬆的為其設定寬度。 <br></p>
<p>8、輔助文字 ：help-block類，針對表單控制項的「區塊（block）」級輔助文字。 <br></p>
<p><strong>按鈕：</strong></p>
<p>1、基本樣式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、 btn-danger、active <br></p>
<p>2、 展現形式，btn-link、btn-block、close <br></p>
<p>3、尺寸樣式，.btn-lg、.btn- sm 、.btn-xs 。 <br></p>
<p>可透過<a>、<button> 或<input> 元素應用按鈕類，但建議用<button> 元素來獲得在各個瀏覽器上獲得相匹配的繪製效果。 <br></p>
<p><strong>圖片：</strong>圖片形狀，img-rounded，img-circle，img-thumbnail，IE8 不支援 CSS3 中的圓角屬性。 <br></p>
<p><strong>輔助：</strong>text-muted、text-primary、text-success、text-info、text-warning、text-danger
、bg-primary、bg-success、bg-info、bg-warning、bg-danger，三角符號，caret
，浮動
，居中
<strong><br></strong></p>
<p><strong>元件樣式</strong> <br></p>
<p><strong>#圖示：</strong> <br></p>
<p>200個來自Glyphicon Halflings 的字體圖標， <br></p>
<p>圖標類別只能應用在空元素上，且不可與其它元件結合使用。 <br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><span class="glyphicon glyphicon-search"></span>

登入後複製