脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap表单控件

Bootstrap表单控件学习使用

 更新时间：2017年03月07日 14:56:43   作者：Dannii_  
这篇文章教大家学习使用Bootstrap表单控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Bootstrap表单控件的学习使用，供大家参考，具体内容如下

输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

<form role="form">
 <div class="form-group">
  <label for="name">标签</label>
  <input type="text" class="form-control" id="name" placeholder="文本输入">
 </div>
</form>

这里写图片描述

文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。
必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。（超过这个值就会产生滚动条）

<form role="form">
 <div class="form-group">
  <label for="name">文本框</label>
  <textarea class="form-control" id="name" rows="3"></textarea>
 </div>
</form>

这里写图片描述

复选框（Checkbox）和单选框（Radio）

（1）复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
（2）当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
（3）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
 <label>
  <input type="checkbox" value="">选项1
 </label>
</div>

<div class="checkbox">
 <label>
  <input type="checkbox" value="">选项2
 </label>
</div>

<div class="checkbox">
 <label>
  <input type="checkbox" value="">选项3
 </label>
</div>

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>选项1
 </label>
</div>

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>选项2- 选择它将会取消选择选项 1
 </label>
</div>

这里写图片描述

<label for="name">内联的复选框和单选按钮的实例</label>
<div>
 <label class="checkbox-inline">
  <input type="checkbox" value="">选项1
 </label>

 <label class="checkbox-inline">
  <input type="checkbox" value="">选项2
 </label>

 <label class="checkbox-inline">
  <input type="checkbox" value="">选项3
 </label>

 <label class="radio-inline">
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>选项1
 </label class="radio-inline">

 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>选项2
 </label>
</div>

这里写图片描述

选择框（Select）
（1）当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
（2）使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
（3）使用 multiple=”multiple” 允许用户选择多个选项。

<form role="form">
 <div class="form-group>
  <label for="name">选择列表</label>
  <select class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>

  <label for="name">可多选的选择列表</label>
  <select class="form-control" multiple>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
 </div>
</form>

这里写图片描述

静态控件

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

<form class="form-horizontal" role="form">
 <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>

 <div class="form-group">
  <label for="inputPassword" class="col-sm-2 control-label">密码</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
 </div>
</form>

这里写图片描述

表单控件状态

（1）除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
（2）输入框焦点：当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
（3）禁用的输入框 input：如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
（4）禁用的字段集 fieldset：对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
（5）验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">聚焦</label>
  <div class="col-sm-10">
   <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
  </div>
 </div>

 <div class="form-group">
  <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
  <div class="col-sm-10">
   <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
  </div>
 </div>

 <fieldset disabled>
  <div class="form-group">
   <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）</label>
   <div class="col-sm-10">
    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
   </div>
  </div>

  <div class="form-group">
   <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label>
   <div class="col-sm-10">
    <select id="disabledSelect" class="form-control">
     <option>禁止选择</option>
    </select>
   </div>
  </div>
 </fieldset>

 <div class="form-group has-success">
  <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputSuccess">
  </div>
 </div>

 <div class="form-group has-warning">
  <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputWarning">
  </div>
 </div>

 <div class="form-group has-error">
  <label class="col-sm-2 control-label" for="inputError">输入错误</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputError">
  </div>
 </div>
</form>

这里写图片描述

表单控件大小

可以分别使用 class .input-lg 和 .col-lg-* (<input>)来设置表单的高度和宽度。

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

您可能感兴趣的文章:

相关文章

  • Javascript中Microtask和Macrotask鲜为人知的知识点

    Javascript中Microtask和Macrotask鲜为人知的知识点

    这篇文章主要为大家介绍了Javascript中Microtask和Macrotask鲜为人知的知识点讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
    2022-04-04
  • js显示世界时间示例(包括世界各大城市)

    js显示世界时间示例(包括世界各大城市)

    这篇文章主要介绍了js显示世界时间的方法,可现实世界各大城市的当前时间,涉及JavaScript针对时间的获取与运算操作技巧,需要的朋友可以参考下
    2016-04-04
  • 详解如何webpack使用DllPlugin

    详解如何webpack使用DllPlugin

    这篇文章主要介绍了详解如何webpack使用DllPlugin，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Web开发中使用SVG图标的7种方法举例总结

    Web开发中使用SVG图标的7种方法举例总结

    这篇文章主要介绍了7种嵌入SVG图标的方法,包括内联SVG、img标签、object标签、CSS背景图像、SVG图标字体、use元素和JavaScript动态加载,每种方法都有其优势和限制,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    由于项目上的需要，要用一个iframe高度自适应的功能，在google上搜了很久，找了一些修改了下。大家可以测试下。
    2010-03-03
  • 基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片

    基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片

    本文通过php jquery和mysql三者相结合，实现web版在线拍照上传并可在线浏览，下面给大家分享基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片，需要的朋友可以参考下
    2015-09-09
  • webpack搭建脚手架打包TypeScript代码

    webpack搭建脚手架打包TypeScript代码

    本文主要介绍了webpack搭建脚手架打包TypeScript代码，文中通过示例代码介绍的非常详细,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 微信小程序之高德地图多点路线规划过程示例详解

    微信小程序之高德地图多点路线规划过程示例详解

    这篇文章主要介绍了微信小程序之高德地图多点路线规划过程示例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • Bootstrap轮播插件使用代码

    Bootstrap轮播插件使用代码

    这篇文章主要为大家详细介绍了Bootstrap轮播插件使用代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript实现翻页功能(附效果图)

    JavaScript实现翻页功能(附效果图)

    这篇文章主要介绍了JavaScript实现翻页功能(附效果图)，在项目需求中经常遇到，今天小编抽时间给大家分享JavaScript实现翻页功能实例代码，需要的朋友参考下吧
    2017-02-02

最新评论