Bootstrap表单元素

作者: 不睡觉呀 | 来源:发表于2018-04-20 21:08 被阅读0次

Bootstrap表单元素
Bootstrap美化表单元素
Bootstrap（ui框架）
bootstrapValidator
bootstrap表单
2019-04-09 表单（5）
bootstrap表单
Html表单元素及表单元素详解
bootstrap 时间控件
bootstrap-form表单

一、基础表单

1.基本实例

<div class="container">
        <div class="form-group">
            <label for="txtUserName">用户名</label>
            <input type="text" class="form-control" id="txtUserName" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="txtPassWord">密码</label>
            <input type="password" class="form-control" id="txtPassWord" placeholder="请输入密码">
        </div>
    </div>

image.png
在Bootstrap中，单独的表单控件会自动赋予全局样式，但是在form-control中的表单元素做了特殊处理，包含在form-control中的input，textarea，select都会默认设置宽度width=100%（随视窗大小改变）。

2. 内联表单

<!-- 2.内联表单 -->
    <div class="container form-inline">
        <div class="form-group">
            <label for="txtUserName">用户名</label>
            <input type="text" class="form-control" id="txtUserName" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="txtPassWord">密码</label>
            <input type="password" class="form-control" id="txtPassWord" placeholder="请输入密码">
        </div>
    </div>

image.png

2.内联表单

<!-- 2.内联表单 -->
    <div class="container form-inline">
        <div class="form-group">
            <label for="txtUserName">用户名</label>
            <input type="text" class="form-control" id="txtUserName" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="txtPassWord">密码</label>
            <input type="password" class="form-control" id="txtPassWord" placeholder="请输入密码">
        </div>
    </div>

image.png

image.png

设置class=form-inline,当视窗大小大于768px的时候显示在同一行，小于则分两行

3.水平表单

<!-- 3.水平表单 -->
    <div class="form-horizontal">
        <div class="form-group">
            <label for="" class="control-label col-lg-1">用户名</label>
            <div class="col-lg-3">
                <input type="text" id="txtUserName" class="form-control" placeholder="请输入用户名" value=""/>
            </div>
        </div>
        <div class="form-group"></div>
        <label for="" class="control-label col-lg-1" >密码</label>
        <div class="col-lg-3">
            <input type="password" id="txtPassWord" class="form-control" placeholder="请输入密码" value="">
        </div>
    </div>

image.png
使用class=form-horizontal实现label表单和表单元素显示在同一行，联合网格系统使用，class=form-group此刻相当于网格系统中的class=row

二、输入框

在HTML5中，输入框（input）标签中的type支持ile更多的类型。
类型有：text password datetime datetime-local date month time week number email URL search tel color
input上只有赋值了特定的type才能够显示正确的样式。

三、下拉框

<!-- 4.下拉框 -->
    <div class="a"> </div>
    <div class="form-horizontal">
        <div class="form-group">
            <label for="" class="control-label col-lg-1">select</label>
            <div class="col-lg-3">
                <select name="" id="" class="form-control">
                    <option value="">Javascript</option>
                    <option value="">Html</option>
                    <option value="">CSS</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="" class="control-label col-lg-1">select</label>
            <div class="col-lg-3">
                <select name="" id="" class="form-control " multiple="multiple">
                    <option value="">Javascript</option>
                    <option value="">Html</option>
                    <option value="">CSS</option>
                </select>
            </div>
        </div>
    </div>

image.png
下拉框也是表单中的基本组件，Bootstrap中的下拉菜单和HTML中的保持一致，在使用时也需要在select中添加class=form-control。
如果需要实现多选，可以设属性multiple=multiple。
上图两个select组件，上一个是单选，第二个是多选。

四、文本域

<div class="form-horizontal">
        <div class="form-group">
            <label for="" class="control-label col-lg-1">textarea</label>
            <div class="col-lg-3">
                <textarea class="form-control" rows="3" name="" id="" cols="30" rows="10"></textarea>
            </div>
        </div>
    </div>

image.png
与HTML中的默认用法一致。
form-control默认设置宽度为100%，我们可以使用rows设置高度，使用cols设置长度

五、多选框和单选框

<div class="radio">
        <label for="" class="radio-inline">
            <input type="radio" value="">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" value="">女
        </label>
    </div>
    <div class="checkbox">
        <label for="" class="checkbox-inline">
            <input type="checkbox" value="">HTML&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
        <label for="" class="checkbox-inline">
            <input type="checkbox" value="">CSS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
        <label for="" class="checkbox-inline">
            <input type="checkbox" value="">Jacescript&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
            
            
    </div>

image.png
class=checkbox-inline/class=radio-inline
可以使CheckBox和radio显示在一行。

六、表单焦点

<div class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-1" for="">Name:</label>
            <div class="col-lg-3">
                <input id="txtUserName" class="form-control" placeholder="请输入用户名" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-1" for="">Password:</label>
            <div class="col-lg-3">
                <input type="password" id="txtPassWord" class="form-control " placeholder="请输入密码">
            </div>
        </div>
    </div

image.png
单击input获得焦点，让元素突出显示

七、表单禁用

<!-- 表单禁用 -->
        <div class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-1" for="">Name:</label>
            <div class="col-lg-3">
                <input id="txtUserName" class="form-control" placeholder="请输入用户名" type="text" disabled="disabled">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-1" for="">Password:</label>
            <div class="col-lg-3">
                <input type="password" id="txtPassWord" class="form-control " placeholder="请输入密码">
            </div>
        </div>

image.png
使用disabled=disabled，实现表单禁用，bootstrap禁用同样适用于select radio CheckBox button
如果表单元素被包含在filedset中，对filed设置了禁用，则里面所有的表单元素都将被禁用。但filedset并不是所有的浏览器都能支持，所以不建议这样使用。

八、验证样式

1. 颜色提示

<!-- 验证样式-颜色提示 -->
    <div class="form-horizontal">
        <div class="form-group has-warning">
            <label for="" class="control-label col-lg-1">has-warning</label>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="has-warning" value="">
            </div>
        </div>
        <div class="form-group has-error">
            <label for="" class="control-label col-lg-1">has-error</label>
            <div class="col-lg-3">
                <input type="text" class="form-control " placeholder="has-error">
            </div>
        </div>
        <div class="form-group has-success">
            <label for="" class="control-label col-lg-1">has-success</label>
            <div class="col-lg-3">
                <input type="text" class="form-control " placeholder="has-success">
            </div>
        </div>

    </div>

image.png
has-warning 警告状态，显示黄色
has-error 错误状态，显示红色
has-success 成功状态，显示绿色
只需在form-group容器标签上添加对应样式即可

2. 图标提示

<div class="form-horizontal ">
        <div class="form-group has-warning has-feedback">
            <label for="" class="control-label col-lg-1">has-warning</label>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="has-warning" value="">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>

            </div>
        </div>
        <div class="form-group has-error has-feedback">
            <label for="" class="control-label col-lg-1">has-error</label>
            <div class="col-lg-3">
                <input type="text" class="form-control " placeholder="has-error">
                <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group has-success has-feedback">
            <label for="" class="control-label col-lg-1">has-success</label>
            <div class="col-lg-3">
                <input type="text" class="form-control " placeholder="has-success">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>

    </div>

image.png
在颜色提示的基础上如果需要显示一些图标，只需在验证样式的容器上添加class=has-feedback,在input标签后面添加一个span标签，并且指定其对应的样式即可。
其中要显示图标需要确保引入文件路径的正确性。

3. 文字提示

<!-- 验证样式-文字提示 -->
    <div class="form-group has-error has-feedback">
        <label for="" class="control-label col-lg-1">has-error</label>
        <div class="col-lg-3">
            <input type="text" class="form-control " placeholder="has-error">
            <span class="glyphicon glyphicon-remove form-control-feedback " aria-hidden="true"></span>
            <span>验证失败</span>
        </div>
    </div>

    <div class="form-group has-success has-feedback">
        <label for="" class="control-label col-lg-1">has-success</label>
        <div class="col-lg-3">
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control">
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span class="sr-only">验证成功</span>
        </div>
    </div>

image.png
在input后面添加一个span标签用于显示提示文本的信息
第一个输入框显示了文本信息，第二个没有显示，主要是使用了class=sr-only，使用这个样式可以隐藏该提示信息“验证成功”的元素。
第二个组件是一个输入框组。

九、元素大小

1. 高度

<div class="form-group has-warning">
        <label for="" class="control-label col-lg-1">has-warning</label>
        <div class="col-lg-3">
            <input type="text" class="form-control input-sm" placeholder="has-warning">
        </div>
    </div>
    <div class="form-group has-error">
        <label for="" class="control-label col-lg-1">has-error</label>
        <div class="col-lg-3">
            <input type="text" class="form-control " placeholder="has-error">
        </div>
    </div>
    <div class="form-group has-success">
        <label for="" class="control-label col-lg-1">has-success</label>
        <div class="col-lg-3">
            <input type="text" class="form-control input-lg" placeholder="has-success">
        </div>
    </div>

image.png
input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大
但是上面的代码只能改变输入框的大小，label标签的大小并没有发生改变，Bootstrap中提供了两类“form-group-sm、form-group-sm”可以快速设置容器中表单元素的大小。

2. 宽度

<div class="container">
        <div class="row">
            <div class="col-sm-1">
                <input type="text" class="form-control" value="col-sm-1">
            </div>
            <div class="col-sm-2">
                <input type="text" class="form-control" value="col-sm-2">
            </div>
            <div class="col-sm-3">
                <input type="text" class="form-control" value="col-sm-3">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="col-sm-4">
            </div>
        </div>
    </div>

image.png

修改输入框的宽度有两种方式：
（1）.使用width来限制其宽度
（2）.利用网格系统来限制其宽度。

十、按钮

1. 基本按钮

<div class="container">
        <button class="btn">基础按钮</button>
        <a href="" class="btn" role="button">A标签按钮</a>
        <input type="button" class="btn"  value="input按钮">
    </div>

image.png
bootstrap中的基础按钮非常简单，只需要在按钮上添加class=btn即可。
role的作用是描述一个非标准标签的实际作用，这里的a标签就是当做按钮使用，但在这a标签的按钮风格和其他两个还是有一定的差别，解决这个问题需要使用其他的样式，我们往往不会单独使用btn，这里我们使用了默认样式class=btn-default，使用这个样式可以解决上面的问题。

<div class="container">
        <button class="btn">基础按钮</button>
        <a href="" class=" btn btn-default" role="button">A标签按钮</a>
        <input type="button" class="btn"  value="input按钮">
    </div>

image.png

2. 多标签

<div class="container">
        <button class="btn btn-default">基础按钮</button>
        <a href="" class=" btn btn-default" role="button">A标签按钮</a>
        <input type="button" class="btn btn-default"  value="input按钮">
        <span class="btn btn-default" >span按钮</span>
        <div class="btn btn-default">div按钮</div>
        <input type="submit" class="btn btn-default" value="submit按钮">
        <input type="reset" class="btn btn-default" value="reset按钮">


    </div>

image.png
尽管bootstrap支持多标签按钮模式，但是为了更好的兼容性不建议这样使用，尽量使用button来完成按钮的制作。

3.按钮风格

<div class="container">
        <button class="btn btn-default">btn-default</button>
        <button class="btn btn-priary">btn-primary</button>
        <button class="btn btn-success">btn-success</button>
        <button class="btn btn-info">btn-info</button>
        <button class="btn btn-warning">btn-warning</button>
        <button class="btn btn-danger">btn-danger</button>
        <button class="btn btn-link">btn-link</button>
    </div>

image.png
btn-default:默认样式。
btn-paimary：首选项样式
btn-success：成功样式
btn-info：一般信息样式
-btn-warning：警告样式
btn-danger:危险样式
btn-link：链接样式-----和其他样式稍微有些区别，不能很好的看出按钮风格。

4.按钮大小

<div class="container">
        <button class="btn btn-paimary">btn-parmary</button>
        <button class="btn btn-paimary btn-lg">btn-parmary</button>
        <button class="btn btn-paimary btn-sm">btn-parmary</button>
        <button class="btn btn-paimary btn-xs">btn-parmary</button>
    </div>

image.png
btn-lg：大型按钮
btn-sm：小型按钮
btn-xs：超小型按钮

5.块状按钮

<div class="container">
        <button class="btn btn-paimary btn-block">btn-parmary</button>
        <button class="btn btn-paimary btn-lg btn-block">btn-parmary</button>
        <button class="btn btn-paimary btn-sm btn-block">btn-parmary</button>
        <button class="btn btn-paimary btn-xs btn-block">btn-parmary</button>
    </div>

image.png
bootstrap中的按钮也可以100%填充父容器，称之为块状按钮，只需要添加class=btn-block即可。

6.激活和禁用

<div class="container">
        <button class="btn btn-default">btn-default</button>
        <button class="btn btn-default hover">btn-default</button>
        <button class="btn btn-default active">btn-default</button>
        <button class="btn btn-default focus">btn-default</button>
    </div>

<div class="container">
        <button class="btn  btn-default disabled" disabled="disabled">btn-default</button>
        <button class="btn btn-default " disabled="disabled">btn-default</button>
        <button class="btn btn-default disabled" >btn-default</button>

    </div>

image.png
当按钮处于激活状态时分为三种情况：
（1）.悬停状态（hover）
（2）.鼠标点击状态（active）
（3）.焦点状态（focus）
如果要禁用按钮则需要使用disabled，如果是button按钮则可以使用disabled=disabled实现。

十一、图片

<div class="container">
        <div class="row">
            <div class="col-sm-4 ">
                <img src="1.jpg" alt="">
                <div>默认图片</div>

            </div>
            <div class="col-sm-4 ">
                <img class="img-rounded" src="1.jpg" alt="">
                <div>圆角图片</div>

            </div>
            <div class="col-sm-4 ">
                <img src="1.jpg" class="img-circle" alt="">
                <div>圆形图片</div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 ">
                <img src="1.jpg" class="img-thumbnail" alt="">
                <div>缩略图</div>
            </div>
            <div class="col-sm-6 ">
                <img src="1.jpg" class="img-responsive" alt="">
                <div>响应式图片</div>
            </div>
        </div>

    </div>

image.png
img-responsive：响应式图片，主要针对响应式设计
img-rounded：圆角图片
img-circle：圆形图片
img-thumbnail：缩略图
如果涉及图片展示大小的问题可控制容器大小，而不是使用样式直接修改图片大小。

十二、图标

<div class="container">
        <span class="glyphicon glyphicon-search">1</span>
        <span class="glyphicon glyphicon-star">2</span>
        <span class="glyphicon glyphicon-music">3</span>
        <span class="glyphicon glyphicon-tag">4</span>
        <span class="glyphicon glyphicon-tags">5</span>
        <span class="glyphicon glyphicon-barcode">6</span>
        <span class="glyphicon glyphicon-volume-up">7</span>
        <span class="glyphicon glyphicon-volume-down">8</span>
        <span class="glyphicon glyphicon-volume-off">9</span>
        <span class="glyphicon glyphicon-headphones">10</span>
        <span class="glyphicon glyphicon-flag">11</span>
        <span class="glyphicon glyphicon-lock">12</span>
        <span class="glyphicon glyphicon-list-alt">13</span>
        <span class="glyphicon glyphicon-refresh">14</span>
        <span class="glyphicon glyphicon-repeat">15</span>
        <span class="glyphicon glyphicon-play-circle">16</span>
        <span class="glyphicon glyphicon-upload">17</span>
        <span class="glyphicon glyphicon-cog">18</span>
        <span class="glyphicon glyphicon-trash">19</span>
        <span class="glyphicon glyphicon-home">20</span>
        <span class="glyphicon glyphicon-file">22</span>
        <span class="glyphicon glyphicon-time">23</span>
        <span class="glyphicon glyphicon-road">24</span>
        <span class="glyphicon glyphicon-download-alt">25</span>
        <span class="glyphicon glyphicon-download">26</span>
        <span class="glyphicon glyphicon-signal">27</span>
        <span class="glyphicon glyphicon-off">28</span>
        <span class="glyphicon glyphicon-zoom-out">29</span>
        <span class="glyphicon glyphicon-zoom-in">30</span>
        <span class="glyphicon glyphicon-remove">31</span>
        <span class="glyphicon glyphicon-ok">32</span>
        <span class="glyphicon glyphicon-list">33</span>
        <span class="glyphicon glyphicon-th">34</span>
        <span class="glyphicon glyphicon-th-large">35</span>
        <span class="glyphicon glyphicon-film">36</span>
        <span class="glyphicon glyphicon-user">37</span>
        <span class="glyphicon glyphicon-star-empty">38</span>
        <span class="glyphicon glyphicon-heart">39</span>
        <span class="glyphicon glyphicon-glass">40</span>
        <span class="glyphicon glyphicon-pencil">41</span>
        <span class="glyphicon glyphicon-envelope">42</span>
        <span class="glyphicon glyphicon-cloud">43</span>
        <span class="glyphicon glyphicon-minus">44</span>
        <span class="glyphicon glyphicon-euro">45</span>
        <span class="glyphicon glyphicon-plus">46</span>
        <span class="glyphicon glyphicon-asterisk">47</span>
    </div>

image.png

十三、输入框组

1.基本输入框组

<div class="container">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="用户名">
            <span class="input-group-addon" id="basic-addon2">@gmail.com</span>
        </div>
        <br><br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </div>

image.png
一个输入框组有下拉框，输入框和按钮组合而成，通过在文本框input前面或者后面或者两边加上文字或者按钮，实现对控件的扩展，我们称之为输入框组。
实现这样的效果需要在class=input-group类新增class=input-group-addon，就可以在form-control的前面或者后面添加额外的元素。

2. 改变框组大小

<div class="container">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" placeholder="passerName">
            <span class="input-group-addon" @gmail.com></span>
        </div>
        <br><br>
        <div class="input-group" >
            <input type="text" class="form-control" placeholder="passerName">
            <span class="input-group-addon">@gmail.com</span>
        </div>
        <br><br>
        <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="passerName">
            <span class="input-group-addon">@gmail.com</span>
        </div>
    </div>

image.png
效果如图所示，通过修改input-group类的值实现，分别可以是input-group-lg或者input-group-sm

3. 额外增加单选或多选按钮作为元素

<div class="container">
        <div class="input-group">
            <span class="input-group-addon"  ><input type="checkbox"></span>
            <input type="text" class="form-control " placeholder="passerName">
        </div>
        <br><br>
        <div class="input-group">
            <span class="input-group-addon"><input type="radio"></span>
            <input type="text" class="form-control" placeholder="passerName">
        </div>
    </div>