bootstrap排版3: 代码code — 表格table

发表于:2017-11-06 19:38 阅读:

代码:
内联代码:使用 <code> 标签包裹内联样式的代码片段,如:
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
用户输入:使用 <kbd> 标签标记用户通过键盘输入的内容,如:
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
 
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 
代码块:多行代码可以使用 <pre> 标签,为正确展示代码,需将尖括号做转义处理(还可使用 .pre-scrollable 类将max-height 设置为350px ,并在垂直方向显示滚动条),如:
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 
 
变量:
使用 <var> 标签标记变量,如:
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
 
 
程序输出:
使用 <samp> 标签来标记程序输出的内容,如:
<samp>This text is meant to be treated as sample output from a computer program.</samp>
 
 
表格:
为<table>标签添加 .table 类可以为其赋予基本样式(少量的padding和水平方向的分隔线):
<table class="table">
 
使用 .table-striped 类可以为表格的每一行增加斑马纹样式(隔行变色)(不支持IE8):
<table class="table table-striped">
 
使用 .table-bordered 类为表格和每个单元格添加边框:
<table class="table table-bordered">
 
使用 .table-hover 类可以让每一行对鼠标悬停作出响应:
<table class="table table-hover">
 
使用 .table-condensed 类可以让表格更加紧凑(单元格的padding会减半):
<table class="table table-condensed">
 
通过这些状态类可以为行或单元格设置颜色:
.active   鼠标悬停在行或单元格上时所设置的颜色
.success   标识成功或积极的动作
.info        标识普通的提示信息或动作
.warning  标识警告或需要用户注意
.danger标识危险或潜在的带来负面影响的动作
 
将 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格(如单元格内文字较多,会在小屏幕设备上[小于768px]出现水平滚动条,当屏幕大于768px 时,水平滚动条消失[*用处不大]):
<div class="table-responsive">
<table class="table">
...
</table>
</div>


灵石网络专注于营销型网站设计、SEO搜索引擎优化、PHP开发、企业网络营销服务。


扫描二维码加我微信!