第七篇.表单_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:15:02
原創
964 人瀏覽過

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

                   

               

               

                   

                       

                           

                                请记住我

                           

                       

                   

               

               

                   

                       

                   

               

           

     

     

     

    相關標籤:
    來源:php.cn
    上一篇:[HTML] 利用 Real Favicon Generator 制作 favicon_html/css_WEB-ITnose 下一篇:margin的BUG(2)_html/css_WEB-ITnose
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    最新問題
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板