BootStrap入門教程 (二)

 文本轉自 http://www.cnblogs.com/ventlam/archive/2012/05/29/2520807.html

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

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

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

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

         

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

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

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

圖2-2 引用(Blockquotes)

代碼片斷以下所示：

<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較好顯示了這幾種列表：

圖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

 

 

   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

 

    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

          若是須要更多樣式的按鈕，能夠在這個網站來定製。 若是須要更多的整個網站的樣式和風格，能夠在這個和那個網站來定製。

     參考文獻與延伸閱讀

           1. M. Pilgrim, HTML5: up and running: Oreilly & Associates Inc, 2010

           2. HTML 5 <caption> 標籤 http://www.w3school.com.cn/html5/tag_caption.asp

           3. StyleBootstrap http://stylebootstrap.info/

           4. 基於wordpress的Bootstrap  http://bootstrapwp.rachelbaker.me/

           5.Why did Twitter release Bootstrap? http://www.quora.com/Why-did-Twitter-release-Bootstrap

 

 
本做品由VentLam創做，採用知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議進行許可。