2. 程式人生 > >BootStrap基礎——排版（二）

BootStrap基礎——排版（二）

阿新 • • 發佈：2019-01-14

程式碼

本節內容相對來說比較簡單，一般在個人部落格上使用的較為頻繁，用於顯示程式碼的風格。在Bootstrap主要提供了三種程式碼風格：
1、使用<code></code>來顯示單行內聯程式碼
2、使用<pre></pre>來顯示多行塊程式碼
3、使用<kbd></kbd>來顯示使用者輸入程式碼

在使用程式碼時，使用者可以根據具體的需求來使用不同的型別：
1、<code>：一般是針對於單個單詞或單個句子的程式碼
2、<pre>：一般是針對於多行程式碼（也就是成塊的程式碼）
3、<kbd>

:一般是表示使用者要通過鍵盤輸入的內容

雖然不同的型別風格不一樣，但其使用方法是類似的。
code風格：

<div>Bootstrap的程式碼風格有三種：
  <code>&lt;code&gt;</code>
  <code>&lt;pre&gt;</code>
  <code>&lt;kbd&gt;</code>
</div>

pre風格：

<div>
    <pre>
        &lt;ul&gt;
        &lt;li&gt;...
 
&lt;/li&gt;
        &lt;li&gt;...&lt;/li&gt;
        &lt;li&gt;...&lt;/li&gt;
        &lt;/ul&gt;
    </pre>
</div>

kbd風格：

<div>請輸入<kbd>ctrl+c</kbd>來複制程式碼，然後使用<kbd>ctrl+v</kbd>來貼上程式碼</div>

不管使用哪種程式碼風格，在程式碼中碰到小於號（<）要使用硬編碼“<”來替代，大於號(>)使用“>”來替代。而且對於<pre>

程式碼塊風格，標籤前面留多少個空格，在顯示效果中就會留多少個空格。建議在編寫HTML標籤時，就控制好。

正如前面所示，<pre>元素一般用於顯示大塊的程式碼，並保證原有格式不變。但有時候程式碼太多，而且不想讓其佔有太大的頁面篇幅，就想控制程式碼塊的大小。Bootstrap也考慮到這一點，你只需要在pre標籤上新增類名“.pre-scrollable”，就可以控制程式碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條。
/*原始碼請檢視bootstrap.css第731行~第734行*/

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

用法如下所示：

<pre class="pre-scrollable">
<ol>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
</ol>
</pre>

表格

表格是Bootstrap的一個基礎元件之一，Bootstrap為表格提供了1種基礎樣式和4種附加樣式以及1個支援響應式的表格。在使用Bootstrap的表格過程中，只需要新增對應的類名就可以得到不同的表格風格，在接下來的內容中，我們會詳細介紹Bootstrap的表格使用。

Bootstrap為表格不同的樣式風格提供了不同的類名，主要包括：

☑ .table：基礎表格

☑ .table-striped：斑馬線表格

☑ .table-bordered：帶邊框的表格

☑ .table-hover：滑鼠懸停高亮的表格

☑ .table-condensed：緊湊型表格

☑ .table-responsive：響應式表格

用法如下所示：

<body>
<h1>基礎表格</h1>
<table class="table">
   <thead>
     <tr>
       <th>表格標題</th>
       <th>表格標題</th>
       <th>表格標題</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
   </tbody>
 </table>
<h1>斑馬線表格</h1>
<table class="table table-striped">
   <thead>
     <tr>
       <th>表格標題</th>
       <th>表格標題</th>
       <th>表格標題</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
   </tbody>
 </table>
<h1>帶邊框的表格</h1>
 <table class="table table-bordered">
   <thead>
     <tr>
       <th>表格標題</th>
       <th>表格標題</th>
       <th>表格標題</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
   </tbody>
 </table>
<h1>滑鼠懸浮高亮的表格</h1>
<table class="table table-striped table-bordered table-hover">
   <thead>
     <tr>
       <th>表格標題</th>
       <th>表格標題</th>
       <th>表格標題</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
   </tbody>
 </table>
 <h1>緊湊型表格</h1>
  <table class="table table-condensed">
   <thead>
     <tr>
       <th>表格標題</th>
       <th>表格標題</th>
       <th>表格標題</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
   </tbody>
 </table>
 <h1>響應式表格</h1>
 <div class="table-responsive">
   <table class="table table-bordered">
   <thead>
     <tr>
       <th>表格標題</th>
       <th>表格標題</th>
       <th>表格標題</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
   </tbody>
 </table>
</div>
</body>

表格行的類

Bootstrap還為表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：
這裡寫圖片描述
其使用非常的簡單，只需要在<tr>元素中新增上表對應的類名，就能達到你自己需要的效果：

<tr class="active">
    <td>…</td>
</tr>

特別提示：除了“.active”之外，其他的四個類名和“.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應的懸浮狀態的樣式設定，所以如果需要給tr元素新增其他顏色樣式時，在”.table-hover”表格中也要做相應的調整。

注意要實現懸浮狀態，需要在<table>標籤上加入table-hover類。

其用法如下所示：

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>類名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示當前活動的資訊</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正確的行為</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的資訊或行為</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，需要特別注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危險或者可能是錯誤的行為</td>
    </tr>
  </tbody>
</table>

基礎表格

在Bootstrap中，對於基礎表格是通過類名“.table”來控制。如果在<table>元素中不新增任何類名，表格是無任何樣式效果的。想得到基礎表格，我們只需要在<table>元素上新增“.table”類名，就可以得到Bootstrap的基礎表格：

<table class="table">
…
</table>

Bootstrap的基礎表格，大致長得像下圖所示的樣子：
這裡寫圖片描述

“.table”主要有三個作用：

☑ 給表格設定了margin-bottom:20px以及設定單元內距

☑ 在thead底部設定了一個2px的淺灰實線

☑ 每個單元格頂部設定了一個1px的淺灰實線

斑馬線表格

有時候為了讓表格更具閱讀性，需要將表格製作成類似於斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果並不困難，只需要在<table class="table">的基礎上增加類名“.table-striped”即可：

<table class="table table-striped">
…
</table>

其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現原理也非常的簡單，利用CSS3的結構性選擇器“:nth-child”來實現，所以對於IE8以及其以下瀏覽器，沒有背景條紋效果。
原始碼請檢視bootstrap.css檔案第1465行~第1468行：

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}

帶邊框的表格

基礎表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出於實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。
Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎表格<table class="table">基礎上新增一個“.table-bordered”類名即可：

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

樣式如下圖所示：
這裡寫圖片描述

其原始碼可以檢視bootstrap.css檔案第1450行~第1464行：

.table-bordered {
  border: 1px solid #ddd;/*整個表格設定邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd; /*每個單元格設定邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表頭底部邊框*/
}

滑鼠懸浮高亮的表格

當滑鼠懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴使用者正在閱讀表格哪一行的資料。Bootstrap提供了一個“.table-hover”類名來實現這種表格效果。
滑鼠懸停高亮的表格使用也簡單，僅需要<table class="table">元素上新增類名“table-hover”即可：

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

滑鼠懸浮高亮的效果主要是通過“hover”事件來實現，設定了“tr:hover”時的th、td的背景色為新顏色。
其原始碼請檢視bootstrap.css檔案中第1469行~第1472行：

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

緊湊型表格

何謂緊湊型表格，簡單理解，就是單元格沒內距或者內距較其他表格的內距更小。換句話說，要實現緊湊型表格只需要重置表格單元格的內距padding的值。那麼在Bootstrap中，通過類名“table-condensed”重置了單元格內距值。
緊湊型表格的運用，也只是需要在<table class="table">基礎上新增類名“table-condensed”：

<table class="table table-condensed">
…
</table>

另外，不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意，你的<table>元素中一定不能缺少類名“table”。

響應式表格

隨著各種手持裝置的出現，要想讓你的Web頁面適合千羅萬像的裝置瀏覽，響應式設計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果，將其稱為響應式表格。
Bootstrap提供了一個容器，並且此容器設定類名“.table-responsive”,此容器就具有響應式效果，然後將<table class="table">置於這個容器當中，這樣表格也就具有響應式效果。
Bootstrap中響應式表格效果表現為：當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

相關推薦

BootStrap基礎——排版（二）

程式碼 本節內容相對來說比較簡單，一般在個人部落格上使用的較為頻繁，用於顯示程式碼的風格。在Bootstrap主要提供了三種程式碼風格： 1、使用<code></code>來顯示單行內聯程式碼 2、使用<pre><

bootstrap基礎介紹（二）

一、下拉選單 注意：我們通常用.pull-right使按鈕選單內容右對齊 ，class="disabled"表示禁用狀態，class="active"表示當前狀態 <div class="dropdown"> <button class="

bootstrap 學習之（二）------ 排版

1.標題 Bootstrap 中定義了所有的 HTML 標題（h1 到 h6）的樣式。 2.內聯子標題 如果需要向任何標題新增一個內聯子標題，只需要簡單地在元素兩旁新增 <small>，或者新增 .small class，這樣子您就能得到一個字號更小的顏色更

webpack基礎使用（二）

-- pts nbsp port pat string類 abp dirname pac webpack.config.js文件的配置：輸入：module.exports={

Mongodb基礎實踐（二）

數據庫查詢 表達式 where 技術 文章 在前面的文章裏面主要介紹了MongoDB的文檔，集合，數據庫等操作和對文檔的增、刪、改相關知識，接下來會總結一點有關查詢的相關知識。 在MySQL中,我們知道數據查詢是優化的主要內容，讀寫分離等技術都是可以用來處理數據庫查詢優化的，足以見數

深度學習數學基礎介紹（二）概率與數理統計

特征 數字特征 抽樣分布 第5章 最大 中心 3.4 獨立 知識 第1章 隨機事件與概率§1.1 隨機事件§1.2 隨機事件的概率§1.3 古典概型與幾何概型§1.4 條件概率§1.5 事件的獨立性 第2章 隨機變量的分布與數字特征§2.1 隨機變量及其分布§2.2 隨機變

Dji Mobile SDK 基礎實現（二）

stat one 透傳 pub != exceptio rom tick ann Dji Mobile SDK 基礎實現（二） 本文簡要介紹如何通過調用DJI Mobile SDK，實現獲取和釋放無人機的控制權限、模擬遙控器按鈕控制無人機的飛行、獲取無人機的回傳視頻、獲取

RobotFramework自動化測試框架的基礎關鍵字（二）

速查 語言 left 自動化 logs python語言 添加 src bsp 1.1.1 如何快速查詢某一個關鍵字的API說明 鼠標選中我們關鍵字，同時按住Ctrl+Alt鍵，即可出來該關鍵字的幫助API以及使用示例 1.1.2 如何快速補全

Bootstrap 插件（二）

存在 初始 code 更新 菜單 png ade pdo 匹配 1.Bootstrap 下拉菜單（Dropdown）插件 Bootstrap 下拉菜單 這一章講解了下拉菜單，但是沒有涉及到交互部分，本章將具體講解下拉菜單的交互。使用下拉菜單（Dropdown）插件，您可以向

HTML5基礎小結（二）——標簽小例

加速 支持 ide oat enter controls 畫圓 side tint 隨篇博客的思維導圖。繼續： 二。看下標簽的使用，這裏看幾個小樣例（效果圖不再給出）： 1。結構標簽的使用，這裏來看一個頁面的布局：<!doc

JavaScript基礎知識（二）

window ttr demo1 隨機數 put 意義 成員 poi pac 一、JavaScript事件詳解 1、事件流：描述的是在頁面中結束事件的順序 事件傳遞有兩種方式：冒泡與捕獲。 　 事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插

python基礎知識（二）

.py .com 數值類型 spa gbk 4.5 wal 編碼 nic 1.pycharm使用 快速搜索欄，蠻重要的 2.字符串格式化 %s 字符串類型 %d數值類型 msg = "我是%s,年齡%d,愛好%s" % (‘alex‘, 18, ‘boy‘) print(

.NET基礎知識（二）

處理 read 不能被繼承 c# 方法表 .net基礎 arr 如果 數據 1、new有幾種用法？ 答：1、new Class(); 2、覆蓋方法，public new XXXX(); 3、new() 約束指定泛型類聲明中的任何類型參數都必須有公共的無參數構造函數 2

多線程基礎知識（二）

必須 否則 closed form 自己 back play sender 重點 線程池 因為每次創建線程、銷毀線程都比較消耗 cpu 資源，因此可以通過線程池進行優化。線程池是一組已經創建好的線程，隨用隨取，用完了不是銷毀線程，然後放到線程池中，供其他人用。 用線程池之

PHP基礎入門（二）【PHP函數基礎】

就是 進行 size 自定義 取地址 代碼 功能 sha 有一種 PHP基礎入門（二）——函數基礎 了解 PHP基礎入門詳解（一） 後，給大家分享一下PHP的函數基礎。 這部分主要講的就是: 函數的聲明與使用、PHP中變量的作用域、靜態變量、函數的參數傳遞、變量函數

java基礎總結（二）---關鍵字

-- rem 關鍵字 rgs java err style ret 基礎總結 1.this 　　在java中， this 對象，它可以在類裏面來引用這個類的屬性和方法。 　　1.它在方法內部使用，即這個方法所屬的對象的引用。 　　2.它在構造器內部使用，表示該構造器正在初始

node基礎總結（二）

ack ace content node body ons favicon name utf-8 獲取路由（訪問路徑） 6_path.js代碼： var http = require(‘http‘); var url = require(‘url‘); var route

Python 之 基礎知識（二）

break post elif true 滿足 賦值 隨機數 計數 spa 一、分支運算 　　在Python 2.x中判斷不等於還可以用<> if語句進階：elif if 條件1: 　　...... elif 條件2: 　　...... else:

Shell基礎語法（二）

-s pac nbsp num mil etc nor 不能 rep if語句基礎格式格式1：if 條件 ; then 語句; fi格式2：if 條件; then 語句; else 語句; fi格式3：if …; then … ;elif …; then …; else …

java學習筆記之基礎語法（二）

讓其 實例 高效率 使用 個數 存儲 記錄 棧內存 數組 1.數組： 概念：同一種類型數據的集合，其實，數組就是一個容器 優點：可以方便的對其進行操作，編號從0開始，方便操作這些元素。 2，數組的格式 元素類型[]數組名=new 元素類型[數組元素個