初涉Bootstrap —— 表格與代碼樣式

時間 2019-11-08

原文原文鏈接

Bootstrap —— 列表與代碼樣式

列表

無序列表

<ul>
  <li>...</li>
</ul>

有序列表

<ol>
  <li>...</li>
</ol>

無樣式列表

<div class="container">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <ul class="list-unstyled">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </ul>
    </div>

內聯列表

經過設置 display: inline-block; 並添加少許的內補（padding），將全部元素放置於同一行。javascript

描述

帶有描述的短語列表。
css

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述

.dl-horizontal 可讓 <dl> 內的短語及其描述排在一行。開始是像 <dl> 的默認樣式堆疊在一塊兒，隨着導航條逐漸展開而排列在一行。html

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

代碼

內聯代碼

經過 <code> 標籤包裹內聯樣式的代碼片斷。java

<code>Java</code> is the best language in the world

用戶輸入

經過<kbd>標籤標記用戶經過鍵盤輸入的內容。jquery

<kbd>Java</kbd> is the best language in the world
        <p>複製和粘貼<kbd>ctrl+c and ctrl+v</kbd></p>

代碼塊

多行代碼可使用 <pre> 標籤。爲了正確的展現代碼，注意將尖括號作轉義處理。bootstrap

<pre>var a,b,c,d = 0;</pre>

還可使用 .pre-scrollable 類，其做用是設置 max-height 爲 350px ，並在垂直方向展現滾動條。
瀏覽器

變量

經過 <var> 標籤標記變量。url

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
        <br />
        <var>y = ax² + bx + c</var>

程序輸入

<p>This text is meant to be treated as sample output from a computer program.</p>
        <h4>This text is meant to be treated as sample output from a computer program.</h4>
        <samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

基本實例

爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。這種方式看起來不少餘！？可是咱們以爲，表格元素使用的很普遍，若是咱們爲其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，因此咱們選擇將此樣式獨立出來。spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <table class="table">
                <tr>Optional table caption.
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                </tr>
                <tr>
                    <th>2</th>
                    <th>Jacob</th>
                    <th>Thornton</th>
                    <th>@fat</th>
                </tr>
            </table>
        </div>
    </body>
</html>

條紋狀表格

經過 .table-striped 類能夠給 <tbody> 以內的每一行增長斑馬條紋樣式。插件

跨瀏覽器兼容性：條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支持。

鼠標懸停

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

Optional table caption.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

緊縮表格

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

Optional table caption.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

狀態類

Optional table caption.

#	First Name	Last Name	Username	#	#
1	Mark	Otto	@mdo	#	#
2	Jacob	Thornton	@fat	#	#
狀態	active	success	info	warning	danger

響應式表格

將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

垂直方向的內容截斷：響應式表格使用了 overflow-y: hidden 屬性，這樣就能將超出表格底部和頂部的內容截斷。特別是，也能夠截斷下拉菜單和其餘第三方組件。

Firefox 和 fieldset 元素：Firefox 瀏覽器對 fieldset 元素設置了一些影響 width 屬性的樣式，致使響應式表格出現問題。可使用下面提供的針對 Firefox 的 hack 代碼解決，可是如下代碼並未集成在 Bootstrap 中：
@-moz-document url-prefix() {
 fieldset { display: table-cell; }
}

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

初涉Bootstrap —— 表格與代碼樣式

Bootstrap —— 列表與代碼樣式

列表

無序列表

有序列表

無樣式列表

內聯列表

描述

水平排列的描述

代碼

內聯代碼

用戶輸入

代碼塊

變量

程序輸入

表格

基本實例

條紋狀表格

跨瀏覽器兼容性：條紋狀表格是依賴 `:nth-child` CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支持。

鼠標懸停

緊縮表格

狀態類

響應式表格

垂直方向的內容截斷：響應式表格使用了 `overflow-y: hidden` 屬性，這樣就能將超出表格底部和頂部的內容截斷。特別是，也能夠截斷下拉菜單和其餘第三方組件。

`Firefox` 和 `fieldset` 元素：Firefox 瀏覽器對 `fieldset` 元素設置了一些影響 `width` 屬性的樣式，致使響應式表格出現問題。可使用下面提供的針對 Firefox 的 hack 代碼解決，可是如下代碼並未集成在 Bootstrap 中：

初涉Bootstrap —— 表格與代碼樣式

Bootstrap —— 列表與代碼樣式

列表

無序列表

有序列表

無樣式列表

內聯列表

描述

水平排列的描述

代碼

內聯代碼

用戶輸入

代碼塊

變量

程序輸入

表格

基本實例

條紋狀表格

跨瀏覽器兼容性：條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支持。

鼠標懸停

緊縮表格

狀態類

響應式表格

垂直方向的內容截斷：響應式表格使用了 overflow-y: hidden 屬性，這樣就能將超出表格底部和頂部的內容截斷。特別是，也能夠截斷下拉菜單和其餘第三方組件。

Firefox 和 fieldset 元素：Firefox 瀏覽 器對 fieldset 元素設置了一些影響 width 屬性的樣式，致使響應式表格出現問題。可使用下面提供的針對 Firefox 的 hack 代碼解決，可是如下代碼並未集成在 Bootstrap 中：

跨瀏覽器兼容性：條紋狀表格是依賴 `:nth-child` CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支持。

垂直方向的內容截斷：響應式表格使用了 `overflow-y: hidden` 屬性，這樣就能將超出表格底部和頂部的內容截斷。特別是，也能夠截斷下拉菜單和其餘第三方組件。

`Firefox` 和 `fieldset` 元素：Firefox 瀏覽器對 `fieldset` 元素設置了一些影響 `width` 屬性的樣式，致使響應式表格出現問題。可使用下面提供的針對 Firefox 的 hack 代碼解決，可是如下代碼並未集成在 Bootstrap 中：