使用BootStrap框架設置全局CSS樣式

一、排版

標題

HTML 中的所有標題標簽，<h1> 到 <h6> 均可使用。另外，還提供了 .h1 到 .h6 類，為的是給內聯（inline）屬性的文本賦予標題的樣式。

    <h1>這是一個h1標簽</h1>
    <h2>這是一個h2標簽</h2>
    <h3>這是一個h3標簽</h3>
    <h4>這是一個h4標簽</h4>
    <h5>這是一個h5標簽</h5>
    <h6>這是一個h6標簽</h6>

在標題內還可以包含 <small> 標簽或賦予 .small 類的元素，可以用來標記副標題。

 

內聯文本元素

You can use the mark tag to <mark>highlight</mark> text.

 

被刪除的文本和無用文本

對於被刪除的文本使用 <del> 標簽。而對於沒用的文本使用 <s> 標簽。

<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>

 

插入文本和帶下划線的文本

額外插入的文本使用 <ins> 標簽。而為文本添加下划線，使用 <u> 標簽。

<ins>This line of text is meant to be treated as an addition to the document.</ins>
<u>This line of text will render as underlined</u>

 

文本的對齊方式

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

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

 

改變文本的大小寫

<p class="text-lowercase">hello world!!</p>
<p class="text-uppercase">hello world!!</p>
<p class="text-capitalize">hello world!!</p>

 

列表

分為無序列表、有序列表、無樣式列表和內聯列表

①無序列表

<ul><!--無序列表-->
　　<li>Lorem ipsum dolor sit amet</li>
　　<li>Consectetur adipiscing elit</li>
　　<li>Nulla volutpat aliquam velit
　　　　<ul>
　　　　　　<li>Phasellus iaculis neque</li>
　　　　　　<li>Purus sodales ultricies</li>
　　　　　　<li>Vestibulum laoreet porttitor sem</li>
　　　　</ul>
　　</li>
　　<li>Lorem ipsum dolor sit amet</li>
</ul>

②有序列表

<ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Nulla volutpat aliquam velit</li>
    <li>Lorem ipsum dolor sit amet</li>
</ol>

③無樣式列表

移除了默認的 list-style 樣式和左側外邊距的一組元素（只針對直接子元素）。這是針對直接子元素的，也就是說，你需要對所有嵌套的列表都添加這個類才能具有同樣的樣式。

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
        </ul>
    </li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

④內聯列表

通過設置 display: inline-block; 並添加少量的內補（padding），將所有元素放置於同一行。

<ul class="list-inline">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Nulla volutpat aliquam velit</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

 

二、代碼

內聯代碼

通過 <code> 標簽包裹內聯樣式的代碼片段。

<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

用戶輸入

通過 <kbd> 標簽標記用戶通過鍵盤輸入的內容。

<p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.</p>

代碼塊

多行代碼可以使用 <pre> 標簽。為了正確的展示代碼，注意將尖括號做轉義處理。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

 

三、表格

標准表格樣式

為任意 <table> 標簽添加 .table 類可以為其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。這種方式看起來很多余！？但是我們覺得，表格元素使用的很廣泛，如果我們為其賦予默認樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將此樣式獨立出來。

<table class="table table-bordered">
      <thead>
           <tr>
               <th>whgogogdaw</th>
               <th>dawgdawdg</th>
           </tr>
      </thead>
      <tbody>
           <tr class="danger">
               <td>111111</td>
               <td>111111</td>
           </tr>
           <tr>
               <td>111111</td>
               <td>111111</td>
           </tr>
           <tr>
               <td>111111</td>
               <td>111111</td>
           </tr>
     </tbody>
 </table>

 

條紋狀表格

 通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。

<table class="table table-bordered table-striped">
     <thead>
         <tr>
            <th>whgogogdaw</th>
            <th>dawgdawdg</th>
         </tr>
     </thead>
     <tbody>
         <tr>
            <td>111111</td>
            <td>111111</td>
         </tr>
         <tr>
            <td>111111</td>
            <td>111111</td>
         </tr>
     </tbody>
 </table>

 

鼠標懸停

通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應。相當於CSS中的點擊事件

<table class="table table-hover">
      ...
</table>

緊縮表格

通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。

狀態類

<table class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th>whgogogdaw</th>
            <th>dawgdawdg</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>111111</td>
            <td>111111</td>
        </tr>
        <tr class="success">
            <td>111111</td>
            <td>111111</td>
        </tr>
        <tr class="danger">
            <td>111111</td>
            <td>111111</td>
        </tr>
    </tbody>
</table>

 

BootStrap框架的內容今天就先寫到這里，往后會陸續更新完善，更新，希望能夠幫助到您！！