網站、部落格架設-3-2-排版、表格、按鈕

網站、部落格架設

3-2 排版、表格、按鈕

一、排版

標題：<h1> ~ <h6> 或 .h1 ~ .h6

對齊：

<p class="text-left">靠左對齊文字。</p>
<p class="text-center">置中對齊文字。</p>
<p class="text-right">靠右對齊文字。</p>
<p class="text-nowrap">不換行文字。</p>

清單

無序清單
<ul>
  <li>...</li>
</ul>

有序清單
<ol>
  <li>...</li>
</ol>

二、表格

HTML


    <div class="container">
      <table>
        <tr>
          <th>標題1</th><th>標題2</th><th>標題3</th>
        </tr>
        <tr>
          <td>內容1</td><td>內容2</td><td>內容3</td>
        </tr>
      </table>
    </div>
    <hr>

為任意<table>標籤添加.table類可以為其賦予基本的樣式—少量的內補（padding）和水平方向的分隔線。這種方式看起來很多餘！？但是我們覺得，表格元素使用的很廣泛，如果我們為其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，所以我們選擇將此樣式獨立出來。
```
<table  class= "table" >
  ...
</table>
```
通過.table-striped類可以給<tbody>之內的每一行增加斑馬條紋樣式
```
<table  class= "table table-striped" >
  ...
</table>
```
添加.table-bordered類為表格和其中的每個單元格增加邊框
```
<table  class= "table table-bordered" >
  ...
</table>
```
通過添加.table-hover類可以讓<tbody>中的每一行對鼠標懸停狀態作出響應。
```
<table  class= "table table-hover" >
  ...
</table>
```
通過添加.table-condensed類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。
```
<table  class= "table table-condensed" >
  ...
</table>
```
將任何.table元素包裹在.table-responsive元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於768px寬度時，水平滾動條消失。
```
<div  class= "table-responsive" > 
  <table  class= "table" >
    ...
  </table> 
</div>
```

表格架構


<table>
  <thead>
    <tr>
      <th>#</th>
      <th>標題</th>
      <th>標題</th>
      <th>標題</th>
      <th>標題</th>
      <th>標題</th>
      <th>標題</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
    </tr>
    <tr>
      <th>2</th>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
    </tr>
    <tr>
      <th>3</th>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
      <td>儲存格</td>
    </tr>
  </tbody>
</table>

三、按鈕

為<a>、<button>或<input>元素添加按鈕類（button class）即可使用Bootstrap提供的樣式。

<a  class= "btn btn-default"  href= "#"  role= "button" > Link </a> 
<button  class= "btn btn-default"  type= "submit" > Button </button> 
<input  class = "btn btn-default"  type= "button"  value= "Input" > 
<input  class= "btn btn-default"  type= "submit"  value= "Submit" >

針對組件的注意事項

雖然按鈕類可以應用到<a>和<button>元素上，但是，導航和導航條組件只支持<button>元素。

預定義樣式

使用下面列出的類可以快速創建一個帶有預定義樣式的按鈕。

<!-- Standard button --> 
<button  type= "button"  class= "btn btn-default" >（默認樣式）Default </button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons --> 
<button  type= "button"  class= "btn btn-primary" >（首選項）Primary </button>

<!-- Indicates a successful or positive action --> 
<button  type= "button"  class= "btn btn-success" >（成功）Success </button>

<!-- Contextual button for informational alert messages --> 
<button  type= "button"  class= "btn btn-info" >（一般信息）Info </button>

<!-- Indicates caution should be taken with this action --> 
<button  type= "button"  class= "btn btn-warning" >（警告）Warning </button>

<!-- Indicates a dangerous or potentially negative action --> 
<button  type= "button"  class= "btn btn-danger" >（危險）Danger </button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior --> 
<button  type= "button"  class= "btn btn-link" >（鏈接）Link </button>

尺寸

需要讓按鈕具有不同尺寸嗎？使用.btn-lg、.btn-sm或.btn-xs就可以獲得不同尺寸的按鈕。

<p> 
  <button  type= "button"  class= "btn btn-primary btn-lg" >（大按鈕）Large button </button> 
  <button  type= "button"  class= "btn btn-default btn-lg" >（大按鈕）Large button </button> 
</p> 
<p> 
  <button  type= "button"  class= "btn btn-primary" >（默認尺寸）Default button </button> 
  <button  type= "button "  class= "btn btn-default" >（默認尺寸）Default button </button> 
</p> 
<p> 
  <button  type= "button"  class= "btn btn-primary btn-sm" >（小按鈕） Small button </button> 
  <button  type= "button"  class= "btn btn-default btn-sm" >（小按鈕）Small button </button> 
</p> 
<p> 
  <button  type= "button"  class = "btn btn-primary btn-xs" >（超小尺寸）Extra small button </button> 
  <button  type= "button"  class= "btn btn-default btn-xs" >（超小尺寸）Extra small button </button> 
</p>

通過給按鈕添加.btn-block類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。

<button  type= "button"  class= "btn btn-primary btn-lg btn-block" >（塊級元素）Block level button </button> 
<button  type= "button"  class= "btn btn-default btn-lg btn-block" >（塊級元素）Block level button </button>