BootStrap入門教程 (二) ：BASE CSS（排版(Typography),表格(Table),表單(Forms),按鈕(Buttons)）

時間 2019-11-30

標籤 bootstrap 入門教程 base css 排版 typography 表格 table 表單 forms 按鈕 buttons 欄目 Bootstarp 简体版

原文原文鏈接

上講回顧：Bootstrap的手腳架(Scaffolding)提供了固定(fixed)和流式(fluid)兩種佈局，它同時創建了一個寬達940px和12列的格網系統。css

基於手腳架(Scaffolding)之上，Bootstrap的基礎CSS(Base CSS)提供了一系列的基礎Html頁面要素，旨在爲用戶提供新鮮、一致的頁面外觀和感受。本文將主要深刻講解排版(Typography),表格(Table),表單(Forms),按鈕(Buttons)這四個方面的內容。html

排版 (Typography)，它囊括標題(Headings),段落 (paragraphs), 列表(lists)以及其餘內聯要素。咱們能夠經過修改variables.less的兩個變量:@baseFontSize 和 @baseLineHeight來控制總體排版的樣式。Bootstrap同時還用了一些其餘的算術方法來建立全部類型要素的margin,padding,line-height等。

1.1 標題和段落使用常見的html<h*></h*>和<p></P>便可表現,能夠沒必要考慮margin,padding。二者顯示效果如圖2-1所示：html5

圖2-1 標題與段落(Headings&paragraphs)git

1.2 強調(Emphasis).使用<strong>和<em>兩個標籤，前者使用粗體，後者使用斜體來強調標籤內容。請注意<strong>標籤在html4中定義語氣更重的強調文本；在 HTML 5 中，<strong> 定義重要的文本。這些短語標籤也能夠經過定義CSS的方式來豐富效果。更多短語標籤請參見[1].縮寫(abbreviations ).使用<abbr>，它從新封裝了該標籤，鼠標滑過會異步地顯示縮寫的含義。引入title屬性來顯示原文，使用.initialism類對縮寫以大寫方式顯示。github

1.3 引用文字(Blockquotes).使用<blockquote>標籤和<small>兩個標籤，前者<blockquote>是引用的文字內容，後者<small>是可選的要素，可以添加書寫式的引用，好比內容做者。如圖2-2所示chrome

圖2-2 引用(Blockquotes)bootstrap

代碼片斷以下所示：瀏覽器

<div class="row"> <div class="span6 "> <blockquote class="pull-right"> <p>凌冬將至. 我是黑暗中的利劍，長城上的守衛，抵禦寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護王國的堅盾。</p> 守夜人軍團總司令.<small>蒙奇.D.<cite title="">路飛</cite></small> </blockquote> </div> <div class="span6 "> <blockquote > <p>凌冬將至. 我是黑暗中的利劍，長城上的守衛，抵禦寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護王國的堅盾。</p> 守夜人軍團總司令.<small>蒙奇.D.<cite title="">路飛</cite></small> </blockquote> </div> </div>

1.4列表(lists).Bootstrap提供三種標籤來表現不一樣類型的列表。<ul>表示無序列表，<ul class="unstyled">表示無樣式的無序列表，<ol>表示有序列表，<dl>表示描述列表，<dl class="dl-horizontal">表示豎排描述列表。圖2-3較好顯示了這幾種列表：less

圖2-3 列表(lists)異步

2.表格(Table).依然使用<table><tr><th><td>等標籤來表現表格。主要提供了四個css的類來控制表格的邊和結構。表2-1顯示了bootstrap的table可選項。

名字	Class	描述
Default	None	沒有樣式，只有行和列
Basic	.table	只有在行間有豎線
Bordered	.table-bordered	圓角和添加外邊框
Zebra-stripe	.table-striped	爲奇數行添加淡灰色的背景色
Condensed	.table-condensed	將橫向的 padding 對切

表2-1 表格選項(Table Options)

咱們能夠將這些CSS類結合起來使用，如圖2-4所示，顯示一個混合的表格：

圖2-4 表格(Table)

代碼片斷以下所示：

View Code 
    
<div class="span8"> <form class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="focusedInput">Focused input</label> <div class="controls"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"> </div> </div> <div class="control-group"> <label class="control-label">Uneditable input</label> <div class="controls"> <span class="input-xlarge uneditable-input">Some value here</span> </div> </div> <div class="control-group"> <label class="control-label" for="disabledInput">Disabled input</label> <div class="controls"> <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> </div> </div> <div class="control-group"> <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled> This is a disabled checkbox </label> </div> </div> <div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div> <div class="control-group success"> <label class="control-label" for="selectError">Select with success</label> <div class="controls"> <select id="selectError"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="help-inline">Woohoo!</span> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button class="btn">Cancel</button> </div> </fieldset> </form> </div>

3. 表單(Forms).Bootstrap的表單是很是驚豔的部分。最好的地方在於你如何使用這些hmtl標籤，它都會有很好的表現效果，並且不須要其餘多餘的代碼。不管多複雜的佈局均可以根據這些簡潔，可擴展，事件綁定的要素來輕易實現。主要提供了四四種表單選項，如表2-2所示：

名字	Class	描述
Vertical (default)	.form-vertical (not required)	堆放式, 可控制的左對齊標籤
Inline	.form-inline	左對齊標籤和簡約的內聯控制塊
Search	.form-search	放大的圓角，具備美感的搜索框
Horizontal	.form-horizontal	左漂浮, 右對齊標籤

推薦到官方文檔去體驗下各類表單要素的真實效果，在chrome,Firefox等現代瀏覽器下顯示十分優雅。同時能夠使用.control-group來控制表單輸入、錯誤等狀態，須要wekit內核。如圖2-5所示：

圖2-5 表單狀態控制

代碼片斷以下：

View Code 
    
<div class="span8"> <form class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="focusedInput">Focused input</label> <div class="controls"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"> </div> </div> <div class="control-group"> <label class="control-label">Uneditable input</label> <div class="controls"> <span class="input-xlarge uneditable-input">Some value here</span> </div> </div> <div class="control-group"> <label class="control-label" for="disabledInput">Disabled input</label> <div class="controls"> <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> </div> </div> <div class="control-group"> <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled> This is a disabled checkbox </label> </div> </div> <div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div> <div class="control-group success"> <label class="control-label" for="selectError">Select with success</label> <div class="controls"> <select id="selectError"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="help-inline">Woohoo!</span> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button class="btn">Cancel</button> </div> </fieldset> </form> </div> </div>

4.按鈕(Buttons).Bootstrap提供多種樣式的按鈕，一樣是經過CSS的類來控制,包括btn, btn-primary, btn-info,btn-success等不一樣顏色的按鈕，亦能夠簡單經過.btn-large .btn-mini等CSS的class控制按鈕大小，可以同時用在<a>,<button>,<input>標籤上，很是簡單易用。如圖2-6所示，不一樣顏色的按鈕：

圖2-6 按鈕(Buttons)

代碼片斷以下：

View Code 
    
<table class="table table-bordered table-striped"> <thead> <tr> <th>Button</th> <th>class=""</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><button class="btn" href="#">Default</button></td> <td><code>btn</code></td> <td>Standard gray button with gradient</td> </tr> <tr> <td><button class="btn btn-primary" href="#">Primary</button></td> <td><code>btn btn-primary</code></td> <td>Provides extra visual weight and identifies the primary action in a set of buttons</td> </tr> <tr> <td><button class="btn btn-info" href="#">Info</button></td> <td><code>btn btn-info</code></td> <td>Used as an alternative to the default styles</td> </tr> <tr> <td><button class="btn btn-success" href="#">Success</button></td> <td><code>btn btn-success</code></td> <td>Indicates a successful or positive action</td> </tr> <tr> <td><button class="btn btn-warning" href="#">Warning</button></td> <td><code>btn btn-warning</code></td> <td>Indicates caution should be taken with this action</td> </tr> <tr> <td><button class="btn btn-danger" href="#">Danger</button></td> <td><code>btn btn-danger</code></td> <td>Indicates a dangerous or potentially negative action</td> </tr> <tr> <td><button class="btn btn-inverse" href="#">Inverse</button></td> <td><code>btn btn-inverse</code></td> <td>Alternate dark gray button, not tied to a semantic action or use</td> </tr> </tbody> </table>