HTML表格行技巧大揭秘：如何高效使用標簽提升網頁布局

HTML表格的構建中，<tr>標簽（表格行）扮演著基礎而關鍵的角色。正確使用表格行不僅能夠提升數據展示的清晰度，還可以通過各種技巧增強表格的功能性和交互性。本文將深入探討如何高效利用<tr>標簽，從而在網頁設計中實現更精細、更專業的布局和表現。

1. 理解<tr>標簽的基本用途

1.1 <tr>標簽概述

在HTML中，<tr>標簽用于定義表格的行。每個<tr>元素內部可以包含一或多個<td>（表格單元格）或<th>（表頭單元格）元素，用于展示具體的數據或標題。

1.2 創建基本的表格行

一個典型的表格行示例如下：

<table>
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>職位</th>
    </tr>
    <tr>
        <td>1</td>
        <td>王小明</td>
        <td>前端開發</td>
    </tr>
</table>

這個例子展示了如何使用<tr>來創建包含標題和一行數據的表格。

2. 樣式化表格行

2.1 改善行的視覺效果

通過CSS，我們可以對表格行進行樣式化，例如設置斑馬線效果（條紋表格）、行懸停顏色等，以提升可讀性和用戶體驗。

tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #ddd;
}

2.2 使用類和ID優化樣式控制

給表格行添加類或ID，可以更細致地控制特定行的樣式，這對于突出顯示某些數據非常有用。

3. 動態交互的實現

3.1 使用JavaScript處理行事件

可以通過JavaScript為表格行添加點擊事件，達到如彈出詳細信息、修改數據等交互效果。

document.querySelectorAll("tr").forEach(row => {
    row.addEventListener("click", function() {
        alert("你點擊了一行！");
    });
});

3.2 動態添加和刪除行

在需要動態修改表格內容的場景下，可以通過JavaScript動態地添加或刪除表格行。

function addRow() {
    const table = document.getElementById("myTable");
    const row = table.insertRow(-1);  // 插入到表格末尾
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);
    cell1.innerHTML = "新行單元格1";
    cell2.innerHTML = "新行單元格2";
}

4. 結語

通過深入了解和運用<tr>標簽，你可以大幅提升HTML表格的功能性和視覺吸引力。無論是數據密集型網站還是需要高度定制的用戶界面，精通這些技巧將使你在網頁開發中更加得心應手。

結尾部分：
希望本文的分享能幫助你更好地掌握HTML中的<tr>使用技巧，無論是基礎的數據展示還是復雜的用戶交互，都能通過你的代碼得到完美的實現。不斷實踐，不斷創新，讓我們在編程的路上一起進步！

用html標簽使用介紹

本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。

常用html標簽列表

標簽	英文全拼	作用	特點
?<html></html>??	html	網頁的根標簽	所有的標簽都要寫在這一對根標簽里面
??<head></head>??	head	網頁的頭標簽	包括完檔的屬性和信息
??<body></body>??	body	網頁的主題	包含文檔的所有內容
??<div></div>??	division	定義一個區域	瀏覽器通常會在??<div>??前后放置一個換行符
??<!-- 注釋 -->??	-	注釋	單標簽
??<br>或<br/>??	break	換行	單標簽，不會在其前后創建空白行
??<hr>或<hr/>??	horizontal rule	添加水平線	單標簽
??<img src="">??	image	添加圖片	單標簽
??<embed src="">??	embed	嵌入外部應用	單標簽
??<meta>??	meta	提供有關頁面的元信息	單標簽，??<meta>???標簽通常位于??<head>??區域內
??<link>??	link	定義文檔與外部資源的關系	單標簽，??<link>???標簽只能存在于??<head>??區域內，不過它可出現任何次數。
??<p></p>??	paragraph	定義段落	自動在其前后創建空白行
??<h1> to <h6>??	Header 1 to Header 6	定義標題	h1在一個頁面里只能出現一次
??<strong></strong>??	strong	文本加粗	加粗標記該文本
??<b></b>??	bold	文本加粗	加粗顯示文本，不推薦使用
??<em></em>??	emphasize	文本傾斜	傾斜標記文本
??<i></i>??	italic	文本傾斜	傾斜顯示文本，不推薦使用
??<del></del>??	delete	文本添加刪除線	-
??<s></s>??	strike	文本添加刪除線	不推薦使用
??<ins></ins>??	insert	文本添加下劃線	-
??<u></u>??	underline	文本添加下劃線	不推薦使用
??<a href="">填寫內容</a>??	anchor	添加超鏈接	最好使用CSS來改變鏈接的樣式
??<ul></ul>??	unordered list	定義無序列表	通常與??<li>??標簽一起使用
??<ol></ol>??	ordered list	定義有序列表	通常與??<li>??標簽一起使用
??<li></li>??	list item	創建列表項	可與各種列表定義標簽一起使用
??<dl></dl>??	definition list	定義描述列表	通常與??<dt>???和??<dd>??一起使用
??<dt></dt>??	definition term	定義條目	定義描述列表的項目
??<dd></dd>??	definition description	定義描述	對描述列表中的項目進行描述
??<table></table>??	table	定義HTML表格	盡可能通過樣式改變表格外觀
??<tr></tr>??	table row	定義表格的行	一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽
??<th></th>??	table headline	定義表格每一列的標題	該標簽的文本通常呈現為粗體且居中
??<td></td>??	table data	定義表格中的單元格數據	該標簽的文本呈現為普通且左對齊
??<caption>表格標題</caption>??	caption	定義整個表格的標題	??<caption>???標簽必須直接放在??<table>??標簽后
??<input type="">??	input	定義輸入控件	輸入字段可通過多種方式改變，取決于type屬性
??select??	select	定義下拉列表	??<select>???中的??<option>??標簽定義了列表中的可用選項
??<option></option>??	option	定義下拉列表中的可用項	??<option>??標簽不可自由定義寬高
??<optgroup></optgroup>??	options group	定義選項組	??<optgroup>??標簽用于把相關的選項組合在一起
??<textarea></textarea>??	textarea	定義多行的文本輸入控件	文本的默認字體是等寬字體
??<form></form>??	form	定義表單	??<form>??可以包含多個元素
??<fieldset></fieldset>??	field set	定義圍繞表單中元素的邊框	??<legend>???為??<fieldset>??定義標題
??<legend></legend>??	legend	為??<fieldset>??定義標題	??<legend>??通過css設定樣式
??<progress></progress>??	progress	定義運行中的任務進度	??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡
??<meter></meter>??	meter	度量衡	??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條
??<audio></audio>??	audio	添加音頻	??<audio>??標簽是HTML5的新標簽
??<video></video>??	video	添加視頻	??<video>??標簽是HTML5的新標簽
??<source>??	source	定義媒介資源	??<source>??標簽是HTML5中的新標簽

常用標簽使用說明

常用寫法：??<img src="" alt="" title=""width="" height=""??>
src：圖片的來源（必寫屬性）
alt：圖像不顯示時的替代文本
title：鼠標在移動到元素上的文本提示
width/height：圖片寬高，沒有定義寬高的時候，圖片按照百分之百比例顯示，更改圖片的寬度或者高度，圖片等比例縮放

普通用法

常用寫法：??<a href="" title="" target="">填寫內容</a>??
href：去往的路徑（必寫屬性）
title：鼠標在移動到元素上的文本提示
target：規定在何處打開路徑

_blank：新頁面打開
_parent：在父窗口中打開鏈接
_self：當前頁面跳轉（默認值）
_top：在當前窗體打開鏈接，并替換當前的整個窗體

當href的值為javascript：void(0); 或 javascript：; ，表示超鏈接不做任何事情，不做任何跳轉
當href的值為#，表示超鏈接為空鏈接，點擊此鏈接時會跳轉到頁首的位置

錨點鏈接

錨點鏈接通過點擊超鏈接，自動跳轉到我們設置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉本頁面元素，其他頁面跳轉自行搜索。
具體做法如下：

給目標元素設置id值，如??<p id="id1"></p>??
設置錨點超鏈接，錨點的超鏈接路徑一定包含"#"，后面緊跟元素的id或者name，如??<a href="#id1"></a>??

示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超鏈接全局設置

在頁面head中寫入代碼可以設置超鏈接的全局跳轉設置

<head>
  <!-- 讓頁面所有的超鏈接新頁面打開 -->
  <base target="_blank">  
</head>

charset編碼

常用寫法： ??<meta charset="UTF-8">??
charset：定義文檔的字符編碼

ASCII/ANSI/Unicode：英語
GBK：亞洲通用字符集
GB2312：中文簡體
Big5：臺澳港繁體
UTF-8：世界通用字符集

name

關鍵字

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網頁的關鍵字，盡量將重要的關鍵詞放在前面

網頁描述

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網頁的主要內容

作者

常用寫法： ??<meta name="author" content="">??
描述：告訴搜索引擎網頁的作者

文件檢索

常用寫法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
描述：有時候會有一些站點內容，不希望被ROBOTS抓取而公開。為了解決這個問題，ROBOTS開發界提供了兩個辦法：一個是robots.txt，另一個是The Robots META標簽。
content: 文件檢索方式

all：文件將被檢索，且頁面上的鏈接可以被查詢（默認值）
none：文件將不被檢索，且頁面上的鏈接不可以被查詢
index：文件將被檢索；
noindex：文件將不被檢索，但頁面上的鏈接可以被查詢
follow：頁面上的鏈接可以被查詢
nofollow：文件將不被檢索，頁面上的鏈接可以被查詢

網頁自動跳轉

常用寫法： ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
描述：網頁5秒后自動跳轉到谷歌主頁
url：為空則刷新本頁
常用寫法：
描述：規定當前文檔與被鏈接文檔/資源之間的關系
rel：定義當前文檔與被鏈接文檔之間的關系。rel 是 relationship的英文縮寫（必寫屬性）
type：規定被鏈接文檔的類型
href：鏈接的文件路徑
示例：

鏈接外部樣式表：??<link rel="stylesheet" type="text/css" href="a.css">??
設置網頁icon圖標：??<link rel="icon" href="a.ico">??

列表

無序列表

無序列表使用粗體圓點進行標記。簡單示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用數字進行標記，我們可以通過整數值start指定列表編號的起始值。簡單示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通過描述列表自定義列表，列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。

<dl>
        <dt>A</dt> <!-- 小標題 -->
            <dd>A1</dd> <!-- 解釋標題 -->
            <dd>A2</dd> <!-- 解釋標題 -->
        <dt>B</dt> <!-- 小標題 -->
            <dd>B1</dd> <!-- 解釋標題 -->
            <dd>B2</dd> <!-- 解釋標題 -->
    </dl>

表格

基礎表格

常用寫法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
width：表格寬度
height：表格高度
border：邊框寬度
cellspacing：單元格間距
cellpadding：內容與邊框間距

簡單示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->

<tr>
    <!-- 定義表格的行 -->
    <td>A1</td> <!-- 定義表格該行第一列中的數據 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定義表格的行 -->
    <th>A</th> <!-- 定義表格每一列的標題 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

單元格合并

常用寫法：??<td colspan=“” rowspan=“”></td>??
描述：告訴表格該單元格可以橫跨colspan列，縱跨rowspan行

簡單示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
    <!-- 定義表格的行 -->
    <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

文本輸入框

常用寫法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
type：規定輸入字段的類型
name：輸入框的名字
maxlength：輸入文本長度
readonly：輸入框是否只讀
disabled：輸入框是否未激活
value：輸入框默認值

簡單示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

密碼輸入框

常用寫法：??<input type="password" name="">??
type：規定輸入字段的類型
name：輸入框的名字
密碼輸入框的其他參數和文本輸入框一樣

簡單示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

單選框

常用寫法：??<input type="radio" name="" checked="checked">??
type：規定輸入字段的類型
name：輸入框的名字
checked：設定該輸入框被預先選定
想要多個單選框只能有一個被選中，設置所有單選框的name值相同即可實現

示例一，兩個單選框都可以被選中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，兩個單選框只能有一個被選中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

??<select>??

常用寫法：??<select multiple=""></select>??
multiple：當該屬性為true時，可選擇多個選項。

??<optgroup>??

常用寫法：??<optgroup label=""></optgroup>??
label：設定選項組的描述。

??<option>??

常用寫法：??<option value="" selected="">選項值</option>??
value：定義送往服務器的選項值。
selected：當該屬性為true時，該選項被默認選擇。

示例一，單選下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默認選中 -->
  </select>

示例二，帶組合的單選下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，帶組合的多選下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多選框

常用寫法：??<input type="checkbox" checked="">??
type：規定輸入字段的類型
checked：設定該輸入框被預先選定

簡單示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用寫法：??<textarea cols="" rows="" placeholder=""></textarea>??
cols：控制可見文本的列數
rows：控制可見文本的行數
placeholder：提示字符

簡單示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上傳控件

常用寫法：??<input type="file" accept=""/>??
accept：規定提交的文件的類型

簡單示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他類型按鈕

<input type="submit">文件提交按鈕
  <input type="button" value="">普通按鈕
  <input type="image" src="">圖片按鈕
  <input type="reset">重置按鈕
  <input type="url">網址控件
  <input type="date">日期控件 
  <input type="time">時間控件
  <!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
  <input type="email">郵件控件
  <input type="number" step="3">數字控件
  <input type="range" step="100">滑塊控件
  <input type="color">顏色控件

表單

示例一，普通表單

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，帶分組信息表單

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

與

??<progress>???與??<meter>??主要區別和用法見??HTML5 progress和meter控件??

??<progress>??

常用寫法：??<progress value="" max=""></progress>??
value：規定進程的當前值
max：規定需要完成的值

簡單示例如下。

<progress value="60" max="100"></progress>

??<meter>??

常用寫法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
value：規定度量的當前值
max：規定被界定為高的值的范圍
min：規定被界定為低的值的范圍
low：規定被界定為低的值的范圍
high：規定被界定為高的值的范圍
optimum：規定度量的最優值
具體使用見meter標簽改變顏色規則

簡單示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒體資源

??<audio>??

常用寫法：??<audio src="" controls autoplay loop></audio>??
src：規定音頻文件的url
controls：如果出現該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現該屬性，自動播放音頻
loop：如果出現該屬性，循環播放音頻

簡單示例如下

<audio src="demo.mp3" controls autoplay></audio>

??<video>??

常用寫法：??<video src="" width="" height="" poster="" controls autoplay loop></video>??
src：規定視頻文件的url
width：設置視頻播放器的寬度（pixels）
height：設置視頻播放器的高度（pixels）
poster：設置視頻未播放時展示的畫面
controls：如果出現該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現該屬性，自動播放音頻
loop：如果出現該屬性，循環播放音頻

簡單示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

??<source>??

常用寫法：??<source src="" type="">??
src：規定媒體文件的url
type：規定媒體文件的類型
因為不同瀏覽器支持的媒體格式不同，當添加媒體文件時，需要考慮瀏覽器是否支持它們。我們可以準備多種不同格式的媒體文件，然后使用source 標簽，讓瀏覽器從上到下選擇支持的媒體格式

簡單示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的瀏覽器不支持video元素。
  </video>

特殊字符

??HTML特殊字符編碼對照表??

參考

??HTML基礎??
??HTML 參考手冊??
HTML中標簽對應的英文
meter標簽改變顏色規則
HTML5 progress和meter控件

將講解 Bootstrap 的網格系統（Grid System）。

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

什么是網格（Grid）？

摘自維基百科：

在平面設計中，網格是一種由一系列用于組織內容的相交的直線（垂直的、水平的）組成的結構（通常是二維的）。它廣泛應用于打印設計中的設計布局和內容結構。在網頁設計中，它是一種用于快速創建一致的布局和有效地使用 HTML 和 CSS 的方法。

簡單地說，網頁設計中的網格用于組織內容，讓網站易于瀏覽，并降低用戶端的負載。

什么是 Bootstrap 網格系統（Grid System）？

Bootstrap 官方文檔中有關網格系統的描述：

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。

讓我們來理解一下上面的語句。Bootstrap 3 是移動設備優先的，在這個意義上，Bootstrap 代碼從小屏幕設備（比如移動設備、平板電腦）開始，然后擴展到大屏幕設備（比如筆記本電腦、臺式電腦）上的組件和網格。

移動設備優先策略

內容

決定什么是最重要的。

布局

優先設計更小的寬度。
基礎的 CSS 是移動設備優先，媒體查詢是針對于平板電腦、臺式電腦。

漸進增強

隨著屏幕大小的增加而添加元素。

響應式網格系統隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

1	1	1	1	1	1	1	1	1	1	1	1
4	4	4
4	8
6	6
12

Bootstrap 網格系統（Grid System）的工作原理

網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了 Bootstrap 網格系統是如何工作的：

行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
使用行來創建列的水平組。
內容應該放置在列內，且唯有列可以是行的直接子元素。
預定義的網格類，比如 .row 和 .col-xs-4，可用于快速創建網格布局。LESS 混合類可用于更多語義布局。
列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最后一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。

媒體查詢

媒體查詢是非常別致的"有條件的 CSS 規則"。它只適用于一些基于某些規定條件的 CSS。如果滿足那些條件，則應用相應的樣式。

Bootstrap 中的媒體查詢允許您基于視口大小移動、顯示并隱藏內容。下面的媒體查詢在 LESS 文件中使用，用來創建 Bootstrap 網格系統中的關鍵的分界點閾值。

/* 超小設備（手機，小于 768px） *//* Bootstrap 中默認情況下沒有媒體查詢 *//* 小型設備（平板電腦，768px 起） */@media (min-width: @screen-sm-min) { ... }/* 中型設備（臺式電腦，992px 起） */@media (min-width: @screen-md-min) { ... }/* 大型設備（大臺式電腦，1200px 起） */@media (min-width: @screen-lg-min) { ... }

我們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小范圍的屏幕大小之內。

@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }

媒體查詢有兩個部分，先是一個設備規范，然后是一個大小規則。在上面的案例中，設置了下列的規則：

讓我們來看下面這行代碼：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

對于所有帶有 min-width: @screen-sm-min 的設備，如果屏幕的寬度小于 @screen-sm-max，則會進行一些處理。

網格選項

下表總結了 Bootstrap 網格系統如何跨多個設備工作：

	超小設備手機（<768px）	小型設備平板電腦（≥768px）	中型設備臺式電腦（≥992px）	大型設備臺式電腦（≥1200px）
網格行為	一直是水平的	以折疊開始，斷點以上是水平的	以折疊開始，斷點以上是水平的	以折疊開始，斷點以上是水平的
最大容器寬度	None (auto)	750px	970px	1170px
Class 前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列數量和	12	12	12	12
最大列寬	Auto	60px	78px	95px
間隙寬度	30px（一個列的每邊分別 15px）	30px（一個列的每邊分別 15px）	30px（一個列的每邊分別 15px）	30px（一個列的每邊分別 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

基本的網格結構

下面是 Bootstrap 網格的基本結構：

<div class="container"><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div> </div><div class="row">...</div></div><div class="container">....

讓我們來看幾個簡單的網格實例：

實例：堆疊的水平
實例：中型和大型設備
實例：手機、平板電腦、臺式電腦

響應式的列重置

以下實例包含了4個網格，但是我們在小設備瀏覽時無法確定網格顯示的位置。

為了解決這個問題，可以使用 .clearfix class和響應式實用工具來解決，如下面實例所示：

實例

<divclass="container"><divclass="row"><divclass="col-xs-6 col-sm-3"style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><divclass="col-xs-6 col-sm-3"style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p></div><divclass="clearfix visible-xs"></div><divclass="col-xs-6 col-sm-3"style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div><divclass="col-xs-6 col-sm-3"style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p></div></div></div>

嘗試一下 ?

瀏覽器上調整窗口大小查看變化，或在您手機上查看效果。

偏移列

偏移是一個用于更專業的布局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類不支持偏移，但是它們可以簡單地通過使用一個空的單元格來實現該效果。

為了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 范圍是從 1 到 11。

在下面的實例中，我們有 <div class="col-md-6">..</div>，我們將使用 .col-md-offset-3 class 來居中這個 div。

實例

<divclass="container"><h1>Hello, world!</h1><divclass="row"><divclass="col-xs-6 col-md-offset-3"style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p></div></div></div>

嘗試一下 ?

結果如下所示：

嵌套列

為了在內容中嵌套默認的網格，請添加一個新的 .row，并在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須占滿12列）。

在下面的實例中，布局有兩個列，第二列被分為兩行四個盒子。

實例

<divclass="container"><h1>Hello, world!</h1><divclass="row"><divclass="col-md-3"style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第一列</h4><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p></div><divclass="col-md-9"style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第二列 - 分為四個盒子</h4><divclass="row"><divclass="col-md-6"style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p> Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis. </p></div><divclass="col-md-6"style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div><divclass="row"><divclass="col-md-6"style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div><divclass="col-md-6"style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. </p></div></div></div></div></div>

嘗試一下 ?

結果如下所示：

列排序

Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序編寫列，然后以另一種順序顯示列。

您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 范圍是從 1 到 11。

在下面的實例中，我們有兩列布局，左列很窄，作為側邊欄。我們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。

實例

<divclass="container"><h1>Hello, world!</h1><divclass="row"><p> 排序前 </p><divclass="col-md-4"style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左邊 </div><divclass="col-md-8"style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右邊 </div></div><br><divclass="row"><p> 排序后 </p><divclass="col-md-4 col-md-push-8"style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左邊 </div><divclass="col-md-8 col-md-pull-4"style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右邊 </div></div></div>

嘗試一下 ?

結果如下所示：

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：高仿富途牛牛-組件化-界面美化
下一篇：深入解讀HTML5移動應用程序開發！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML表格行技巧大揭秘：如何高效使用標簽提升網頁布局

1. 理解<tr>標簽的基本用途

1.1 <tr>標簽概述

1.2 創建基本的表格行

2. 樣式化表格行

2.1 改善行的視覺效果

2.2 使用類和ID優化樣式控制

3. 動態交互的實現

3.1 使用JavaScript處理行事件

3.2 動態添加和刪除行

4. 結語

用html標簽使用介紹

常用html標簽列表

常用標簽使用說明

列表

表格

與

多媒體資源

特殊字符

參考

您的項目需求