bootstrapcss样式之表单

本文实例为大家分享了bootstrap表单的具体代码，供大家参考，具体内容如下

创新互联建站专注于网站建设、做网站、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户，用严谨的态度对待客户，用专业的服务创造价值，成为客户值得信赖的朋友，为客户解除后顾之忧。

1、表单基本用法

bootstrap css样式之表单


 
 Email address
 
 
 
 Password
 
 
 
 File input
 
 Example block-level help text here.
 
 
 
   Check me out

2、内联表单

为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。

bootstrap css样式之表单


 
 Email address
 
 
 
 
  @
  
 
 
 
 Password
 
 
 
 
   Remember me

3、水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

bootstrap css样式之表单


 
 Email
 
  
 
 
 
 Password
 
  
 
 
 
 
  
  
    Remember me

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

新闻名称：bootstrapcss样式之表单
链接URL：http://kswjz.com/article/ipecie.html

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

行业动态