整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML表格的構建中，<tr>標簽（表格行）扮演著基礎而關鍵的角色。正確使用表格行不僅能夠提升數據展示的清晰度，還可以通過各種技巧增強表格的功能性和交互性。本文將深入探討如何高效利用<tr>標簽，從而在網頁設計中實現更精細、更專業的布局和表現。
在HTML中，<tr>標簽用于定義表格的行。每個<tr>元素內部可以包含一或多個<td>（表格單元格）或<th>（表頭單元格）元素，用于展示具體的數據或標題。
一個典型的表格行示例如下：
<table>
<tr>
<th>編號</th>
<th>姓名</th>
<th>職位</th>
</tr>
<tr>
<td>1</td>
<td>王小明</td>
<td>前端開發</td>
</tr>
</table>
這個例子展示了如何使用<tr>來創建包含標題和一行數據的表格。
通過CSS，我們可以對表格行進行樣式化，例如設置斑馬線效果（條紋表格）、行懸停顏色等，以提升可讀性和用戶體驗。
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
給表格行添加類或ID，可以更細致地控制特定行的樣式，這對于突出顯示某些數據非常有用。
可以通過JavaScript為表格行添加點擊事件，達到如彈出詳細信息、修改數據等交互效果。
document.querySelectorAll("tr").forEach(row => {
row.addEventListener("click", function() {
alert("你點擊了一行！");
});
});
在需要動態修改表格內容的場景下，可以通過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";
}
通過深入了解和運用<tr>標簽，你可以大幅提升HTML表格的功能性和視覺吸引力。無論是數據密集型網站還是需要高度定制的用戶界面，精通這些技巧將使你在網頁開發中更加得心應手。
結尾部分：
希望本文的分享能幫助你更好地掌握HTML中的<tr>使用技巧，無論是基礎的數據展示還是復雜的用戶交互，都能通過你的代碼得到完美的實現。不斷實踐，不斷創新，讓我們在編程的路上一起進步！
本文主要記錄常用的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中的新標簽 |
普通用法
錨點鏈接
錨點鏈接通過點擊超鏈接，自動跳轉到我們設置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉本頁面元素，其他頁面跳轉自行搜索。
具體做法如下：
示例如下。為了顯示效果，通過使用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編碼
name
網頁自動跳轉
無序列表
無序列表使用粗體圓點進行標記。簡單示例如下。
<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="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>單元格合并
簡單示例如下。
<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="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">密碼輸入框
簡單示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">單選框
示例一，兩個單選框都可以被選中
<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>??
??<optgroup>??
??<option>??
示例一，單選下拉列表
<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="checked">A
<input type="checkbox">B文本框
簡單示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上傳控件
簡單示例如下。
<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="60" max="100"></progress>??<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="demo.mp3" controls autoplay></audio>??<video>??
簡單示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
簡單示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的瀏覽器不支持video元素。
</video>??HTML特殊字符編碼對照表??
將講解 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，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
