从 <h1> 到 <h6> 标签
<p>标签
这是一段文字段落
<hr>标签
<code>标签
javascript
alert('Hello World!');
<ul><li>无序列表标签,默认样式如下:
<ol><li>有序列表标签,默认样式如下
通过添加.list-unstyled 可取消列表样式,样式效果如下:
说明 该样式只影响直接子元素
通过添加.list-inline 可以让列表内联,样式效果如下:
说明 该样式只影响直接子元素
<table> 标签,表格文本默认居中
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
支持大部分table属性:
| Header | Header2 | Header3 |
|---|---|---|
| Data | Data | Data |
| Data | ||
| Data | Data | Data |
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
通过添加 .table-condensed 可以让表格更加紧凑,单元格中的内补(padding)均会减半。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
通过添加 .table-unborder 可以让表格无边框
| item | content |
|---|---|
| 姓名 | 遇善房 |
| 地址 | 时代TIT广场 |
通过在外层包囊 <div class="table-responsive"></div> 可以让表格具有响应式特性,也就是说内容较多的表格在屏幕较小无法友好的显示全部内容时,在下方显示左右滚动条,让表格可以左右滚动!
说明 该样式由 Bootstrap 提供,且已做兼容 Backman 处理
| # | First Name | Last Name | Username | age | job | join-time | address | |
|---|---|---|---|---|---|---|---|---|
| 1 | Mark1 | Otto | @mdo | 23 | mdo@hotmail.com | Customer Service Specialist | 2016/11/11 | Rome1232, Youth building, No.34 West Beisanhuan Road, Beijing, China |
| 2 | Jacob | Thornton | @fat | 27 | thornton@163.com | Senior PHP Engineer | 2016/11/11 | Room 403, No.37, SiFan Residential Quarter, BaoShan District |
| 3 | Larry | the Bird | 26 | Larry@gmail.com | Web Software Engineer | 2016/11/11 | Room 204, building No.102, East TaiShan Residential, BaoYin, JiangSu |
注意 当给表格添加样式 .table 时,将显示为 Bootstrap3 的表格效果。两种表格显示模式相互独立互不影响!
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |