排版-標題及table


  排版-標題

  在標題中還可以包含small標簽,可以用來標記副標題

  副標題灰色,比主標題小

     <h1>我是標題 <small>我是小標題</small></h1>

  頁面主體

  Bootstrap 將全局 font-size 設置為 14px,line-height 設置為 1.428。這些屬性直接賦予 <body> 元素和所有段落元 素。另外,<p> (段落)元素還被設置了等於 1/2 行高(即 10px)的底部外邊距(margin)。

  

  無用文本

  對於沒用的文本使用 <s> 標簽。

  

  <p><s>無用的文本</s></p>
 

  帶下划線的文本

      為文本添加下划線,使用u標簽

  着重

  通過使用strong強調一段文本

  文本對齊 

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

  

  內聯列表
  通過display:inline-block;並添加少量內補,將所有元素放置同一行
  
<ul class="list-inline">
  <li>...</li>
</ul>

 

表格

基本實例

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

  

//不帶條紋的
<
table class="table"> ... </table>


//條紋table
<table class="table">
  ...
</table>
 

 

<div class="container">       
        <div class="row">   
            <div class="col md-12">
                    <table class="table table-striped">
                            <tr class="text-center">
                                <th class="text-center">標題</th>
                                <th class="text-center">備注</th>
                                <th class="text-center">名稱</th>
                            </tr>
                            <tr class="text-center">
                                <td>C#</td>
                                <td>怎么學好C#</td>
                                <td>長春師范</td>
                            </tr>
                            <tr class="text-center">
                                <td>前端開發</td>
                                <td>怎么學好前端</td>
                                <td>河北師范</td>
                            </tr>
                        </table>
            </div>
            
        </div>
    </div>

效果

帶表框的table

  添加 .table-bordered 類為表格和其中的每個單元格增加邊框。

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

 

鼠標懸停

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

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

 

  

 

 

 
 
 
 
 
 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM