编程 Javascript

第一次接触神奇的Bootstrap表单

Posted in Javascript onJuly 27, 2016

本篇将主要介绍Bootstrap表单的使用技巧。

1.Bootstrap基础表单

表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

我们先来看一个基础表单：

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

效果图如下所示：

第一次接触神奇的Bootstrap表单

我们还可以通过为form添加不同的类名达成不同的效果，form的具体规则如下表所示：

第一次接触神奇的Bootstrap表单

例如：

2.Bootstrap表单控件

1）输入框input

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

2）下拉选择框select

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

3）文本域textarea

文本域和原始使用方法一样，设置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>

4）复选框checkbox

垂直排列：

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

5）单选择按钮radio

垂直排列：

<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”的容器内。

3.Bootstrap表单控件状态

1）焦点状态

焦点状态是通过为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>

2）禁用状态

只需要在需要禁用的表单控件上加上“disabled”即可：

3）验证状态

做表单验证，同样也需要提供验证状态样式，在Bootstrap中同样提供这几种效果：

第一次接触神奇的Bootstrap表单

使用的时候只需要在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>

效果图如下：

第一次接触神奇的Bootstrap表单

如果你想让表单在对应的状态下显示icon出来，只需要在对应的状态下添加类名“has-feedback”（此类名要与“has-error”、“has-warning”和“has-success”在一起）。

4.Bootstrap表单-按钮

1）定制风格按钮

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

效果图如下：

第一次接触神奇的Bootstrap表单

2）Bootstrap按钮支持多标签，其他标签制作的按钮如下：

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

3）按钮大小

通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。

第一次接触神奇的Bootstrap表单

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

4）块状按钮（移动端用的多）

块状按钮：按钮宽度充满整个父容器（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>

效果图如下：

第一次接触神奇的Bootstrap表单

5.Bootstrap表单-按钮状态

在Bootstrap中针对按钮的状态效果主要分为两种：活动状态和禁用状态。

1）活动状态：主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。

2）禁用状态

要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”

两者的主要区别是：
“.disabled”样式不会禁止按钮的默认行为。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

6.Bootstrap图像

在Bootstrap中对于图像的样式风格提供以下几种风格：

第一次接触神奇的Bootstrap表单

使用方法：只需要在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">

运行效果如下或查看右侧结果窗口：

第一次接触神奇的Bootstrap表单

7.Bootstrap图标

Bootstrap提供了200个不同的icon，如下：

第一次接触神奇的Bootstrap表单

使用方法：只需要在标签上添加对应的图标类名，如下代码：

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

系列文章：

第一次接触神奇的Bootstrap基础排版https://3water.com/article/89278.htm
第一次接触神奇的Bootstrap网格系统https://3water.com/article/89333.htm

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

第一次接触神奇的Bootstrap表单

- Author -

smartbetter

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

获取HTML DOM节点元素的方法的总结

Aug 21 Javascript

学习JS面向对象成果借国庆发布个最新作品与大家交流

Oct 03 Javascript

toggle一个div显示或隐藏且可扩展成自定义下拉框

Sep 12 Javascript

带左右箭头图片轮播的JS代码

Dec 18 Javascript

js读取json的两种常用方法示例介绍

Oct 19 Javascript

jquery.zclip轻量级复制失效问题

Jan 08 Javascript

从零开始学习Node.js系列教程四：多页面实现数学运算的client端和server端示例

Apr 13 Javascript

在Vue组件化中利用axios处理ajax请求的使用方法

Aug 25 Javascript

详解Vue用自定义指令完成一个下拉菜单（select组件）

Oct 31 Javascript

Vue.js获取被选择的option的value和text值方法

Aug 24 Javascript

vue中rem的配置的方法示例

Aug 30 Javascript

JavaScript使用localStorage存储数据

Sep 25 Javascript

AngularJS 表达式详细讲解及实例代码

Jul 26 #Javascript

基于jQuery实现页面搜索功能

Mar 26 #Javascript

JS中的数组方法笔记整理

Jul 26 #Javascript

jQuery实现日期联动效果实例

Jul 26 #Javascript

一种基于浏览器的自动小票机打印实现方案(js版)

Jul 26 #Javascript

深入理解JavaScript函数参数(推荐)

Jul 26 #Javascript

JavaScript从0开始构思表情插件

Jul 26 #Javascript