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

Bootstrap 表单控件

Bootstrap 表单控件

Bootstrap表单控件

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


表单布局

Bootstrap 提供了下列类型的表单布局:

  • 垂直表单(默认)

  • 内联表单

  • 水平表单


垂直或基本表单

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

  • 向父        


    结果如下所示:


    内联表单

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

    结果如下所示:

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

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


    水平表单

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

    • 向父        

      结果如下所示:


      支持的表单控件

      Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。


      input输入框

      最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。

      
      
      
         Bootstrap 实例 - 输入框
         
         
         
       
       

      结果如下所示:

      textarea文本框

      当您需要进行多行输入的时,则可以使用文本框 textarea。必要时可以改变 rows 属性(较少的行 = 较小的盒子,较多的行 = 较大的盒子)。

      
      
      
         Bootstrap 实例 - 文本框
         
         
         
        
        

      结果如下所示:


      复选框((Checkbox)和单选框(Radio)

      复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

      • 当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio。

      • 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

      下面的实例演示了这两种类型(默认和内联):

      
      
      
         Bootstrap 实例 - 复选框和单选按钮
         
         
         默认的复选框和单选按钮的实例
         
         
         
         内联的复选框和单选按钮的实例
         
             选项 1   
         
             选项 2   
         
             选项 3   
         
             选项 1   
         
             选项 2   
       
       

      结果如下所示:

      选择框(Select)

      当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。

      • 使用 后使用 .help-block。下面的实例演示了这点:

        
        
        
           Bootstrap 实例 - 表单帮助文本
           
           
           
        
        

        结果如下所示:

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

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

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