Title1

Title2

Title3

2-4 HTML標籤

  1. <!DOCTYPE html> :建立HTML5文件並宣告HTML5 doctype
  2. 基本架構:
    <html>
     <head>
      <title>標題</title>
     </head>
     <body .....>
      網頁內容  
     </body>
    </html>

     

  3. 標題
    HTML中的所有標題標籤,<h1><h6>均可使用。另外,還提供了.h1.h6類,為的是給內聯(inline)屬性的文本賦予標題的樣式。
    <h1> h1. Bootstrap heading </h1> 
    <h2> h2. Bootstrap heading </h2> 
    <h3> h3. Bootstrap heading </h3> 
    <h4> h4. Bootstrap heading </h4> 
    <h5> h5. Bootstrap heading </h5> 
    <h6> h6. Bootstrap heading </h6>

    在標題內還可以包含<small>標籤或賦予.small類的元素,可以用來標記副標題。
    <h1> h1. Bootstrap heading <small> Secondary text </small></h1> 
    <h2> h2. Bootstrap heading <small> Secondary text </small></h2> 
    <h3> h3. Bootstrap heading <small> Secondary text </small></h3> 
    <h4> h4. Bootstrap heading <small> Secondary text </small></h4> 
    <h5> h5. Bootstrap heading <small> Secondary text </small></h5> 
    <h6> h6. Bootstrap heading <small> Secondary text </small></h6>
  4. 對齊

    通過文本對齊類,可以簡單方便的將文字重新對齊。
     

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

     

    1. .text-justify 的範例不是很好(不管官方或我翻譯後的),可另外參考 w3schools 的 text-align 範例。
    2. Bootstrap 3 預設的 .text-justify 類別僅對英文有效,如果想要中文有一樣的效果,在原始碼的 .text-justify 類別附加一個 text-justify:inter-ideograph; 屬性設定。

     

  5. 無序清單
     

    <ul>
      <li>...</li>
    </ul>

     

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

     


  7.  

  8.  

  9.  

  10.  
  11.  

  12.