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://dzwzjz.com/article/ipepjh.html

其他资讯

• 腾讯云485配置服务器 腾讯云485配置服务器连接失败
• 怎么保证云服务器安全性能 怎么保证云服务器安全性能提升
• go语言字典 go语言guan方中文文档
• 阿里云虚拟服务器建站 阿里云虚拟服务器怎么用
• 帝国cms二级栏目导航 帝国cms二级栏目导航怎么用

分享至：

   

关于我们

公司简介 发展历程

服务项目

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

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都 达州



电话：028-86922220



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



电话：028-86922220



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

友情链接： 成都网站建设哪家好   虚拟主机购买   眉山托管服务器   成都酒店服定制   成都商城网站建设   网站建设报价方案   四川主机托管   成都电信光华数据中心   成都网站建设报价   小谭建站   

版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14



在线咨询



服务热线

服务热线：028-86922220



TOP