栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

Bootstrap表单Form全面解析

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Bootstrap表单Form全面解析

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVAscript 的,它简洁灵活,使得 Web 开发更加快捷。

在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布局,一切都是那么的完整与完美!

普通表单

我们需要将表单元素包裹到form-group类里,一般以...来进行存放,而在它内容表单元素名称一般放在label标签里,而input标签的类名为form-control,值得注意的是,你的checkbox和radio等元素需要写在自己的div里。

例如下面的表单



运行之后的效果

 

水平排放的表单

需要你的表单元素需要水平排放,可以在表单上添加类.form-inline,这种表单一般在元素比较少时比较适用

例如



普通表单+元素水平排放

这种表单用的是最多的,在一般用户注册,填写资料时,经常可以见到如下的表单效果

实现这种表单使用了.form-horizontal类,每行元素被包裹在 ...即可

form class="form-horizontal">
 
  
  
   
  
 
 
  
  
   
  
 
 
  
   
    
   
  
 
 
  
   
  
 

我们通过代码也可以看到,在进行表单布局时,也可以用col-sm和col-sm-offset进行栅格布局

以上所述是小编给大家介绍的Bootstrap表单Form全面解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/96218.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号