初涉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 中：