深入学习Bootstrap表单

网络编程 2024/11/16 佚名

3 1 2

本文知识点借鉴来自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）

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>

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

Bootstrap,表单

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“深入学习Bootstrap表单”

暂无评论...

www.bgabc.com 风云阁资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

深入学习Bootstrap表单

js闭包用法实例详解

ThinkJS中如何使用MongoDB的CURD操作

评论“深入学习Bootstrap表单”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

深入学习Bootstrap表单

js闭包用法实例详解

ThinkJS中如何使用MongoDB的CURD操作

评论“深入学习Bootstrap表单”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存