Bootstrap基本样式

一、按钮样式

1.类

btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

2.实例

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

结果：

 二、表格样式

1.

标签	描述
<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>	表格主体中的表格行的容器元素（<tr>）。
<tr>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>	默认的表格单元格。
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>	关于表格存储内容的描述或总结。

 2.

类	描述
.table	为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

3.<tr>, <th> 和 <td> 类

.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

4.响应式表格

 <!-- 响应式表格 -->
    <div class="table-responsive">
        <table class="table table-hover table-bordered table-striped">
            <caption>响应式表格布局</caption>
            <thead>
                <tr>
                    <th>产品</th>
                    <th>付款日期</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>产品1</td>
                    <td>23/11/2013</td>
                    <td>待发货</td>
                </tr>
                <tr class="success">
                    <td>产品2</td>
                    <td>10/11/2013</td>
                    <td>发货中</td>
                </tr>
                <tr class="warning">
                    <td>产品3</td>
                    <td>20/10/2013</td>
                    <td>待确认</td>
                </tr>
                <tr class="danger">
                    <td>产品4</td>
                    <td>20/10/2013</td>
                    <td>已退货</td>
                </tr>
            </tbody>
        </table>
    </div>

结果：

 三、表单样式

1.分类

• 垂直表单（默认）:form-vertical
• 内联表单:form-inline
• 水平表单：form-horizontal

2.水平表单

  <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">账号</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname" placeholder="请输入账号">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">请记住我
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default btn-success">登录</button>
            </div>
        </div>
    </form>

 结果：