Home  >  Article  >  Web Front-end  >  第七篇.表单_html/css_WEB-ITnose

第七篇.表单_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:15:02958browse

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单

创建垂直或基本表单:

  • ·向父
    元素添加 role="form"。
  • ·把标签和控件放在一个带有 class .form-group 的
    中。这是获取最佳间距所必需的。
  • ·向所有的文本元素
  •  

               

                   

                   

                           placeholder="请输入名称">

               

               

                   

                   

                   

    这里是块级帮助文本的实例。

               

               

                   

                        请打勾

                   

               

               

           

     

     

     

     

    内联表单:

    内联表单中所有元素都向左对齐,标签并排,要创建内联表单,需要在form标签中加入class

    .form-inline

               

                   

                   

                           placeholder="请输入名称">

               

               

                   

                   

               

               

                   

                         请打勾

                   

               

               

           

    显示效果如下:

     

     

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

    水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.

  • 向父
    元素添加 class .form-horizontal。
  • 把标签和控件放在一个带有 class .form-group 的
    中。
  • 向标签添加 class .control-label。
  • 例如:

               

                   

                   

                       

                               placeholder="请输入名字">

                   

               

               

                   

                   

                       

                               placeholder="请输入姓">

                   

               

               

                   

                       

                           

                                请记住我

                           

                       

                   

               

               

                   

                       

                   

               

           

     

     

     

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article:[HTML] 利用 Real Favicon Generator 制作 favicon_html/css_WEB-ITnoseNext article:margin的BUG(2)_html/css_WEB-ITnose

    Related articles

    See more