详解Bootstrap创建表单的三种格式（一）_javascript技巧

程序员文章站 2022-04-15 21:15:48

...

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。

垂直或基本表单(display:block;)

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父

元素添加 role="form"。

把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。

向所有的文本元素、和 <select> 添加 class .form-control。</select>

 
 
  
  BootstrapDemo 
    
     
     姓名 
     
 
     
     电话号码 
     
 
     
     请上传身份证 
     
 
     
     选择职业

效果如下：

详解Bootstrap创建表单的三种格式（一）_javascript技巧

如果我们将select的form-control去掉，并给input type = "file"加上form-control，看看效果如何。

详解Bootstrap创建表单的三种格式（一）_javascript技巧

是不是能看出和上面效果的区别了呢？这样您大概明白form-control的作用了，它是设置外围的边框效果，包括宽、高、获取
焦点时form的样式。

内联表单（全部在同一行，display为inline-block）

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向

显示效果：

详解Bootstrap创建表单的三种格式（一）_javascript技巧

默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用水平表单时，您需要在表单控件上设置一个宽度。

使用 class .sr-only，可以隐藏内联表单的标签。

注：sr-only是展示给屏幕阅读器，而非是普通的读者看的。

其它元素在form的class为form-inline时，display为inLine-block;但是input tyoe = "file"却仍是display:block，可以看出其布局是有问题的，此时可以单独设置其display为inline-block;

水平表单(label和input等表单元素在同一行)

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

1、向父

元素添加 class .form-horizontal。
2、把标签和控件放在一个带有 class .form-group 的

中。
3、向标签添加 class .control-label。
4、设置label和其兄弟div的宽度（因为input等默认宽度是100%）。

姓名

电话号码

请上传身份证

选择职业

效果：

详解Bootstrap创建表单的三种格式（一）_javascript技巧

以上内容给大家介绍了Bootstrap创建表单的相关内容，希望大家喜欢。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

专题推荐