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），将所有元素放置于同一行。
描述
带有描述的短语列表。
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描述
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl> 
代码
内联代码
通过 <code> 标签包裹内联样式的代码片段。
<code>Java</code> is the best language in the world
用户输入
通过<kbd>标签标记用户通过键盘输入的内容。
<kbd>Java</kbd> is the best language in the world
<p>复制和粘贴<kbd>ctrl+c and ctrl+v</kbd></p>
代码块
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
<pre>var a,b,c,d = 0;</pre>
还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
变量
通过 <var> 标签标记变量。
<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）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
<!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-childCSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
状态类
| # | 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>
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
