本节知识点
- 表格
- 按钮
(一)表格
- 基础样式 class = "table"
<table class="table">
<theader>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</theader>
</table>
- 表格加上边框 table-bordered
<table class="table table-bordered">
- 响应式表格
表格的父元素设置成响应式,小于768px出现边框
<body class="table-responsive">
(二) 按钮
注意事项
a超链接要是在导航里面,想变成按钮必须要加上role="button"属性 才能使用class="btn"的属性
尽量使用<button>这个标签。input标签在火狐下面可能不能完全与行高保持高度预留信息 btn-warning等等
class = "btn btn-default" //默认颜色
class = "btn btn-primary" //浅蓝色
class = "btn btn-success" //绿色
class = "btn btn-info" //信息蓝色
class= "btn btn-danger" //危险红色
class = "btn btn-warning" //黄色
class = "btn btn-link" //超链接
<button class="btn btn-default">天津</button>
<button class="btn btn-primary">天津</button>
<button class="btn btn-success">天津</button>
<button class="btn btn-danger">天津</button>
<button class="btn btn-warning">天津</button>
<button class="btn btn-info">天津</button>
<button class="btn btn-link">天津</button>
- 尺寸大小 btn-xs ,btn-lg 等等
<button class="btn btn-xs">手机上的小按钮</button>
<button class="btn btn-sm">平板上的小按钮</button>
<button class="btn btn-md">电脑上的小按钮</button>
<button class="btn btn-lg">手机上的大按钮</button>
- 按钮块级元素 一个按钮占了一行
<button class=" btn btn-block">按钮块级元素</button>
<button class=" btn btn-block">按钮块级元素2</button>
- 按钮禁用状态
<button class=" btn disabled">这个按钮被禁用了</button>