Bootstrap表单控件怎么用

内联的复选框和单选按钮的实例

 
  选项1
 

 
  选项2
 

 
  选项3
 

 
  选项1
 

 
  选项2
 

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

 
  选择列表
  
   1
   2
   3
   4
   5
  

  可多选的选择列表       1    2    3    4    5     

静态控件

需要在一个水平表单内的表单标签后放置纯文本时，请在

上使用 class .form-control-static。

 
  Email
  
   email@example.com

  
 

 
  密码
  
   
  
 

表单控件状态

（1）除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
（2）输入框焦点：当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
（3）禁用的输入框 input：如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
（4）禁用的字段集 fieldset：对

添加 disabled 属性来禁用

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

 
  聚焦
  
   
  
 

 
  禁用
  
   
  
 

 
  
   禁用输入（Fieldset disabled）
   
    
   
  

  
   禁用选择菜单（Fieldset disabled）
   
    
     禁止选择
    
   
  
 

    输入成功                 输入警告                 输入错误            

表单控件大小

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

关于“Bootstrap表单控件怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

文章标题：Bootstrap表单控件怎么用
分享路径：http://cqcxhl.com/article/ipepjh.html

其他资讯

• c语言怎样初始化函数,C语言如何初始化
• php抓取网站大量数据,php抓取网站大量数据的方法
• oracle怎么没落了,oracle在中国还有市场吗
• 如何让java代码前移,如何让java代码前移一个字符
• vb.net抽奖程序,vb抽奖程序代码

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4



在线咨询



服务热线

服务热线：028-86922220



TOP