当前位置：首页 > 资讯 > 技术文档

第一次接触神奇的Bootstrap表单

时间：2021-02-08 03:39 编辑：来源：阅读：
扫一扫，手机访问

摘要：第一次接触神奇的Bootstrap表单

本篇将主要介绍Bootstrap表单的使用技巧。 [b]1.Bootstrap基础表单[/b] 表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。我们先来看一个基础表单：

<!DOCTYPE HTML>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>基础表单</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
 <form role="form">
 <div class="form-group">
 <label for="exampleInputEmail1">邮箱：</label>
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">密码：</label>
 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的密码">
 </div>
 <div class="checkbox">
 <label><input type="checkbox">记住密码</label>
 </div>
 <button type="submit" class="btn btn-default">登录</button>
 </form> 
</body>
</html>

效果图如下所示： [img]http://files.jb51.net/file_images/article/201607/201607270845041.png[/img] 我们还可以通过为form添加不同的类名达成不同的效果，form的具体规则如下表所示： [img]http://files.jb51.net/file_images/article/201607/201672790444109.jpg?20166279455[/img] 例如： <form class="form-inline" role="form">...</form> [b]2.Bootstrap表单控件[/b] [b]1）输入框input[/b]

<form role="form">
 <div class="form-group">
 <!--必须添加type类型，如果没有指定type类型，将无法得到正确的样式-->
 <input type="email" class="form-control" placeholder="Enter email">
 </div>
</form>

[b]2）下拉选择框select[/b]

<form role="form">
 <div class="form-group">
 <!--单行下拉选择框-->
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 </select>
 </div>
 <div class="form-group">
 <!--多行选择框-->
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 </select>
 </div>
</form>

[b]3）文本域textarea[/b] 文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
 <div class="form-group">
 <!--rows="3"设置高度三行-->
 <textarea class="form-control" rows="3"></textarea>
 </div>
</form>

[b] 4）复选框checkbox[/b] 垂直排列：

<form role="form">
 <div class="checkbox">
 <label><input type="checkbox" value="">复选框</label>
 </div>
</form>

水平排列：

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline"><input type="checkbox" value="option1">复选框1</label>
 <label class="checkbox-inline"><input type="checkbox" value="option2">复选框2</label>
 </div>
</form>

[b]5）单选择按钮radio[/b] 垂直排列：

<form role="form">
 <div class="radio">
 <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>A</label>
 </div>
 <div class="radio">
 <!--不管是checkbox还是radio都使用label包起来了-->
 <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">B</label>
 </div>
</form>

水平排列：

<form role="form">
 <div class="form-group">
 <label class="radio-inline"><input type="radio" value="option1" name="sex">A</label>
 <label class="radio-inline"><input type="radio" value="option2" name="sex">B</label>
 </div>
</form>

注意：checkbox连同label标签放置在一个名为“.checkbox”的容器内；radio连同label标签放置在一个名为“.radio”的容器内。 [b]3.Bootstrap表单控件状态[/b] [b]1）焦点状态[/b] 焦点状态是通过为input添加类名form-control来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。

<!--form-horizontal实现水平表单效果-->
<form role="form" class="form-horizontal">
 <div class="form-group">
 <div class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦点状态">
 </div>
 </div> 
</form>

[b] 2）禁用状态[/b] 只需要在需要禁用的表单控件上加上“disabled”即可： <input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled> [b]3）验证状态[/b] 做表单验证，同样也需要提供验证状态样式，在Bootstrap中同样提供这几种效果： [img]http://files.jb51.net/file_images/article/201607/201672790508482.jpg?20166279515[/img] 使用的时候只需要在form-group容器上对应添加状态类名。

<form role="form">
 <div class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 </div>
 <div class="form-group has-error">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 </div>
 <div class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 </div>
</form>

效果图如下： [img]http://files.jb51.net/file_images/article/201607/201607270845042.png[/img] 如果你想让表单在对应的状态下显示icon出来，只需要在对应的状态下添加类名“has-feedback”（此类名要与“has-error”、“has-warning”和“has-success”在一起）。 [b]4.Bootstrap表单-按钮[/b] [b]1）定制风格按钮[/b]

<button class="btn" type="button">基础按钮</button> 
<button class="btn btn-default" type="button">默认按钮</button> 
<button class="btn btn-primary" type="button">主要按钮</button> 
<button class="btn btn-success" type="button">成功按钮</button> 
<button class="btn btn-info" type="button">信息按钮</button> 
<button class="btn btn-warning" type="button">警告按钮</button> 
<button class="btn btn-danger" type="button">危险按钮</button> 
<button class="btn btn-link" type="button">链接按钮</button>

效果图如下： [img]http://files.jb51.net/file_images/article/201607/201607270845043.png[/img] [b]2）Bootstrap按钮支持多标签，其他标签制作的按钮如下：[/b]

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
<a href="##" class="btn btn-default">a标签按钮</a>

[b]3）按钮大小[/b] 通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。 [img]http://files.jb51.net/file_images/article/201607/201672790525429.jpg?20166279532[/img]

<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-lg" type="button">大型按钮</button> 
<button class="btn btn-primary btn-sm" type="button">小型按钮</button>

[b]4）块状按钮（移动端用的多）[/b] 块状按钮：按钮宽度充满整个父容器（width:100%），不会有任何的padding和margin值。 Bootstrap提供了一个类名“btn-block”，按钮使用这个类名就可以实现块状按钮（具体源码请查阅bootstrap.css文件第2340行～第2353行）

<button class="btn-block btn-primary btn-lg" type="button">大型按钮</button> 
<button class="btn-block btn-primary" type="button">正常按钮</button>
<button class="btn-block btn-primary btn-sm" type="button">小型按钮</button>

效果图如下： [img]http://files.jb51.net/file_images/article/201607/201607270845044.png[/img] [b]5.Bootstrap表单-按钮状态[/b] 在Bootstrap中针对按钮的状态效果主要分为两种：活动状态和禁用状态。 [b]1）活动状态：[/b]主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。 [b]2）禁用状态[/b] 要禁用按钮有两种实现方式： [b]方法1：[/b]在标签中添加disabled属性 [b]方法2：[/b]在元素标签中添加类名“disabled” 两者的主要区别是： “.disabled”样式不会禁止按钮的默认行为。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。 [b]6.Bootstrap图像[/b] 在Bootstrap中对于图像的样式风格提供以下几种风格： [img]http://files.jb51.net/file_images/article/201607/201672790619249.jpg?20166279626[/img] 使用方法：只需要在img标签上添加对应的类名，如下代码：

<img class="img-rounded" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-circle" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-thumbnail" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-responsive" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">

运行效果如下或查看右侧结果窗口： [img]http://files.jb51.net/file_images/article/201607/201607270845045.png[/img] [b]7.Bootstrap图标[/b] Bootstrap提供了200个不同的icon，如下： [img]http://files.jb51.net/file_images/article/201607/201607270845046.jpg[/img] 使用方法：只需要在标签上添加对应的图标类名，如下代码： <span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 系列文章：第一次接触神奇的Bootstrap基础排版[url=http://www.1sucai.cn/article/89278.htm]http://www.1sucai.cn/article/89278.htm[/url] 第一次接触神奇的Bootstrap网格系统[url=http://www.1sucai.cn/article/89333.htm]http://www.1sucai.cn/article/89333.htm[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：用js读、写、删除Cookie代码分享及详细注释说明
下一篇：JS解决IOS中拍照图片预览旋转90度BUG的问题

资讯排行榜
更多>>