首页 > web前端 > html教程 > 第七篇.表单_html/css_WEB-ITnose

第七篇.表单_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:15:02
原创
999 人浏览过

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
    作者最新文章
    最新问题
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板