Bootstrap基础入门(第四篇)

Bootstrap基础入门(四)

一、Bootstrap实现表格

1. 表格结构

    2.<table>上的类

• table:为<table>添加基本样式
• table-striped:为主体内容添加斑马线形式的条纹
• table-bordered:为所有表格的单元格添加边框
• table-hover:为主体内容每一行添加鼠标悬停状态
• table-condensed:可以让表格更加紧凑，单元格中的内部(上下padding)均会减半

    3.状态类

            通过这些状态类可以为行或单元格设置颜色，添加在<th>,<tr>,<td>上

• active             鼠标悬停在行或单元格上时所设置的颜色
• success          标识成功或积极的动作
• info                标识普通的提示信息或动作
• warning         标识警告或需要用户注意
• danger            标识危险或潜在的带来负面影响的动作           

//上面的类可以对应下面的例子：
<table class="table table-striped table-bordered table-hover table-condensed">
        <caption>基本的表格布局</caption>
        <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
            </tr>
        </thead>
        <tbody>
             <tr class="active">
                <td class="warning">Tanmay</td>
                <td>Bangalore</td>
            </tr>
            <tr class="info">
                <td>Tanmay</td>
                <td>Bangalore</td>
            </tr>
            <tr class="success">
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            <tr class="warning">
                <td>Tanmay</td>
                <td>Bangalore</td>
            </tr>
            <tr class="danger">
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
        </tbody>
    </table>

运行结果：

4.响应式表格

• 给table标签添加一个类名为class="table-responsive"的父级即可创建响应式表格

//响应式表格
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <caption>基本的表格布局</caption>
        <thead>
        <tr>
            <th>名称</th>
            <th>城市</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td class="warning">TanmayTanmayTanmayTanmayTanmayTanmay</td>
            <td>BangaloreBangaloreBangaloreBangaloreBangaloreBangalore</td>
        </tr>
        <tr class="info">
            <td>TanmayTanmayTanmayTanmayTanmayTanmayTanmayTanmayTanmay</td>
            <td>BangaloreBangaloreBangaloreBangaloreBangaloreBangalore</td>
        </tr>
        <tr class="success">
            <td>SachinSachinSachinSachinSachinSachinSachinSachinSachin</td>
            <td>MumbaiMumbaiMumbaiMumbaiMumbaiMumbaiMumbaiMumbaiMumbaiMu</td>
        </tr>
        <tr class="warning">
            <td>Tanmay</td>
            <td>Bangalore</td>
        </tr>
        <tr class="danger">
            <td>Sachin</td>
            <td>Mumbai</td>
        </tr>
        </tbody>
    </table>
</div>

运行结果：

二、Bootstrap表格

1. 表单的基本实现

• 创建form表单
• 把标签和控件放在一个带有class="form-group"的<div></div>中。这是获取最佳间距所必须的
• 向所有的文本元素<input>、<textarea>和<select>添加class="form-control"

        说明："form-control"实现了当前控件占器父级的百分百宽度

        注意：文字信息必须放在label标签里面，便于屏幕阅读器识别可以使用".sr-only将其隐藏"

    2.内联表单

• 给form标签设置form-inline

//表单
<form action="" class="form-inline">
    <div class="form-group">
        <label class="sr-only">用户名：</label>
        <input class="form-control" type="text" placeholder="请输入您的用户名">
    </div>
    <div class="form-group">
        <label>密码：</label>
       <input class="form-control" type="password" placeholder="请输入您的密码">
    </div>
</form>

    3.设置输入框组：

            把前缀或后缀元素放在一个带有class="input-group"的<div></div>中给放置前缀或后缀的元素添加类名"input-group-addon"

//例： 
<div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control">
</div>

    4.水平排列的表单

• 为表单设置"form-horizontal"+栅格布局实现
• 说明："form-horizontal"类会使"form-group"元素具有栅格布局中的"row"的特点，因此通过给label标签和包含控件的元素添加栅格列布局类即可实现水平排列。

        给lable标签添加"control-label"

    5.表单中的单选，多选框

• 给input添加一个div父级，给该父级添加对应的类名
• 单选框添加类名class="radio"
• 多选框添加类名class="checkbox"

//单选框和多选框
<div class="container">
    <form action="" class="form-horizontal">
        <div class="checkbox">
            <input type="checkbox">忘记密码？
        </div>
        <div class="radio">
            <input type="radio">忘记密码？
        </div>
  </form>
</div>

    6.表单中的下拉列表

• 给select设置class="form-control"
• 说明：若给select设置了"multiple"则下拉菜单显示展开状态

//下拉列表
<div class="container">
    <form action="" class="form-horizontal">
        <div class="form-group">
            <!--若给select设置了multiple则下拉菜单显示展开状态-->
            <select class="form-control" multiple>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
    </form>
</div>

    7.静态控件

• 为<p></p>标签添加"form-control-static"类

//静态控件
<div class="container">
    <form action="" class="form-horizontal">
        <!--静态控件form-control-static-->
        <div class="form-group">
            <label class="col-lg-2 control-label">用户名：</label>
            <div class="col-lg-10">
                <p class="form-control-static">我是Bootstrap</p>
            </div>
        </div>
    </form>
</div>

    8.表单控件状态

• 焦点状态：Bootstrap将某些表单控件的默认outline样式移出，然后对：focus状态赋予box-shadow属性
• 禁用状态：给输入框设置disabled属性,若禁止多个，则可以将这几个控件放在字段集fieldset里面，给fieldset设置disabled

注意：fieldset不仅可以禁止控件也可以禁止按钮，但是它不能禁止a标签

• 只读状态：给输入框设置readonly属性
• 验证状态：

     (1)Bootstrap包含了错误、警告和成功消息的验证样式。只需要对form-group简单地添加适当的class("has-warning","has-erroe",或"has-success")即可使用验证状态

     (2)给form-group添加"has-feedback"类

     (3)给文本输入框form-control后面span 标签上添加图标基类以及对应图标类和"form-control-feedback"

    9.表单控件大小

• 表单中分别使用class="input-[lg/sm/xs]"和"col-lg-*"来设置表单的高度和宽度

    10.帮助文本

• 文本输入框下面的提示信息，给该元素添加"help-block"

        <div class="form-group has-success has-feedback">
            <label class="col-lg-2 control-label">用户名：</label>
            <div class="col-lg-4">
                <input type="text" class="form-control "  placeholder="请输入您的用户名">
                <span class="form-control-feedback glyphicon glyphicon-ok"></span>//图标
            </div>
        </div>
       <!-- 文本输入框下面的提示信息，给该元素添加help-block-->
        <div class="form-group has-error has-feedback">
            <label for="user" class="col-lg-2 control-label">用户名：</label>
            <div class="col-lg-4">
                <input type="text" class="form-control "  placeholder="请输入您的用户名">
                <p class="help-block">用户名用字母数字组成</p>//帮助文本
                <span class="form-control-feedback glyphicon glyphicon-remove"></span>//图标
            </div>
        </div>

运行结果：

今天就分享到这里了，拜拜~~~