Maison > interface Web > tutoriel HTML > le corps du texte

第七篇.表单_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:15:02
original
964 Les gens l'ont consulté

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="请输入姓">

                   

               

               

                   

                       

                           

                                请记住我

                           

                       

                   

               

               

                   

                       

                   

               

           

     

     

     

    Étiquettes associées:
    source:php.cn
    Article précédent:[HTML] 利用 Real Favicon Generator 制作 favicon_html/css_WEB-ITnose Article suivant:margin的BUG(2)_html/css_WEB-ITnose
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal