一．表格
Bootstrap 提供了一些丰富的表格样式供开发者使用。
1.基本格式
//实现基本的表格样式
<table class="table">
注：我们可以通过 Firebug 查看相应的 CSS
2.条纹状表格
//让<tbody>里的行产生一行隔一行加单色背景效果
<table class="table table-striped">
注：表格效果需要基于基本格式.table
3.带边框的表格
//给表格增加边框
<table class="table table-bordered">
4.悬停鼠标
//让<tbody>下的表格悬停鼠标实现背景效果
<table class="table table-hover">
5.状态类
//可以单独设置每一行的背景样式
<tr class="success">
注：一共五种不同的样式可供选择。如下图。
6.隐藏某一行
//隐藏行
<tr class="sr-only">
7.响应式表格
//表格父元素设置响应式，小于 768px 出现边框
<body class="table-responsive">
8. 案例
<%-- Created by IntelliJ IDEA. User: shyroke Date: 2018/6/13 0013 Time: 17:18 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); %> <html> <head> <title>boostrap</title> <link rel="stylesheet" href="<%=path%>/script/bootstrap/css/bootstrap.css"> </head> <body style="margin: 50px"> <table class="table table-bordered table-hover"> <thead> <tr > <td>编号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> </thead> <tbody> <tr class="success"> <td>1</td> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr class="info"> <td>2</td> <td>李四</td> <td>女</td> <td>22</td> </tr> <tr> <td>3</td> <td>王五</td> <td>男</td> <td>35</td> </tr> <tr> <td>4</td> <td>赵六</td> <td>男</td> <td>28</td> </tr> </tbody> </table> <script src="<%=path%>/script/jquery-3.2.1.min.js"></script> <script src="<%=path%>/script/bootstrap/js/bootstrap.min.js"></script> </body> </html>
结果：
二、按钮
Bootstrap 提供了很多丰富按钮供开发者使用。
1.可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
//转化成普通按钮
<a href="###" class="btn btn-default">Link</a> <button class="btn btn-default">Button</button> <input type="button" class="btn btn-default" value="input">
2. 注意事项
3. 预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<!-- Standard button --> <button type="button" class="btn btn-default">（默认样式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首选项）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（链接）Link</button>
4.尺寸
- 使用
.btn-lg、.btn-sm或.btn-xs就可以获得不同尺寸的按钮。
<p> <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> <button type="button" class="btn btn-default">（默认尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p>
- 通过给按钮添加
.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
5.激活状态
<button class="btn active">Button</button>
6.禁用状态
为 <button> 元素添加 disabled 属性，使其表现出禁用状态。
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>