Bootstrap表单元素
2018-04-20 本文已影响0人
不睡觉呀
一、基础表单
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="">男
<input type="radio" value="">女
</label>
</div>
<div class="checkbox">
<label for="" class="checkbox-inline">
<input type="checkbox" value="">HTML
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" value="">CSS
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" value="">Jacescript
</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>
-
image.png
