Bootstrap基础入门(第四篇)

曾经终败给现在 2022-05-30 12:16 314阅读 0赞

# Bootstrap基础入门(四) #

**一、Bootstrap实现表格**

1.  表格结构

![20180312143549828][]

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>

运行结果：

![201803121453546][]

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>

运行结果：

![20180312145752983][]

**二、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>

![20180312160352616][]

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 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">
            
            <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>
           
            <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>

运行结果：

![20180312194633772][]

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

[20180312143549828]: /images/20220530/bca218a0d527432fb0f01382777e5276.png
[201803121453546]: /images/20220530/bb444332fd024026abe6ffcc12086312.png
[20180312145752983]: /images/20220530/2c944e47ea664d41bf5fe861e227f936.png
[20180312160352616]: /images/20220530/252109606b3d4848a28c8c3bd5c2ffb4.png
[20180312194633772]: /images/20220530/65fd26bfc7ef4bc5a7775336fdddfdfc.png