深入学习Bootstrap表单


Posted in Javascript onDecember 13, 2016

本文知识点借鉴来自http://www.runoob.com/bootstrap/bootstrap-forms.html,里面写的比较详细还给出了例子,这里总结一下重点方便记忆。

一、表单布局

1.垂直表单(默认)

        向父 <form> 元素添加 role="form"。
        把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
        向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<form action="#" role="form"> 
  <div class="form-group"> 
   <lable>姓名:<input class="form-control" type="text"/></lable> 
   <lable>性别:<input class="form-control" type="text"/></lable> 
  </div> 
 </form>

2.内联表单

向 <form> 标签添加 class .form-inline;       
默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
使用 class .sr-only,您可以隐藏内联表单的标签。

 3.水平表单        

    向父 <form> 元素添加 class .form-horizontal。       
    把标签和控件放在一个带有 class .form-group 的 <div> 中。       
    向标签添加 class .control-label。

<form action="#" role="form" class="form-horizontal"> 
  <div class="form-group"> 
   <lable class="control-label col-lg-2">姓名:</lable> 
   <div class=" col-lg-10"><input class="form-control" type="text"/></div> 
 
   <lable class="control-label col-lg-2">性别:</lable> 
   <div class="col-lg-10"><input class="form-control " type="text"/></div> 
  </div> 
 </form>

 二、支持的表单控件

1.输入框(Input)

<lable>姓名:<input class="form-control" type="text"/></lable> 

2.文本框(Textarea)  可改变 rows 属性

<div class="form-group"> 
  <textarea rows="8" class="form-control"> 
 
   </textarea> 
 
 </div>

3.复选框(Checkbox)和单选框(Radio)        
    当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio。       
    对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

<div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>篮球</lable> 
   </div> 
   <div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>音乐</lable> 
   </div> 
   <div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>绘画</lable> 
   </div> 
   <div class="radio"> 
    <lable><input type="radio"/>男</lable> 
   </div> 
   <div class="radio"> 
    <lable><input type="radio"/>女</lable> 
   </div>

 4.选择框(Select)        

    使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。       
    使用 multiple="multiple" 允许用户选择多个选项。

<div class="form-group"> 
     <select name="" id="" class="form-control" multiple> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
     </select> 
    </div>

 5.静态控件        

当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static。

<div class="form-group"> 
  <label class="col-sm-2 control-label">Email</label> 
  <div class="col-sm-10"> 
  <p class="form-control-static">email@example.com</p> 
  </div> 
 </div>

三、表单控件状态

1.输入框焦点        

当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。   

2.禁用的输入框 input        

如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框还,会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

<div> 
  <lable>姓名:<input type="text" disabled class="form-control"/></lable> 
 </div>

3.禁用的字段集 fieldset        

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

4.验证状态        

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

<div class="has-error"> 
  <lable class="control-label"> 
   姓名:<input type="text" class="form-control" placeholder="has-error"/> 
  </lable> 
</div> 
<div class="has-warning"> 
  <lable class="control-label"> 
   姓名:<input type="text" class="form-control" placeholder="has-warning"/> 
  </lable> 
</div>

 5.表单控件大小    

分别使用 class .input-lg(或.input-sm) 和 .col-lg-* 来设置表单的高度和宽度

<div class="form-group"> 
  姓名:<input type="text" class="form-control input-lg" placeholder="input-lg"/> 
  姓名:<input type="text" class="form-control input-sm" placeholder="input-sm"/> 
  姓名:<input type="text" class="form-control " placeholder="normal"/> 
</div>

 6.表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。    为了添加一个占用整个宽度的内容块,请在 <input> 后使用 .help-block。

<div class="form-grounp"> 
  <input type="text"/> 
  <span class="help-block"> 
   Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。 
  </span> 
</div>

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

Javascript 相关文章推荐
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
javascript如何实现create方法
Nov 04 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
js里面的变量范围分享
Jul 18 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 #Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 #Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 #Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 #Javascript
AngularJS自定义控件实例详解
Dec 13 #Javascript
Node.js中process模块常用的属性和方法
Dec 13 #Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 #Javascript
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
python实现画圆功能
2018/01/25 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
3的组成教学反思
2014/04/30 职场文书
国庆节演讲稿
2014/05/27 职场文书
班训口号大全
2014/06/18 职场文书
电影建党伟业观后感
2015/06/01 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书