HTML5技术

bootstrap 基础(二) - 许大仙(4)

字号+ 作者:H5之家 来源:H5之家 2017-09-13 12:06 我要评论( )

4.5 响应式表单 表单由纵向变为横向(不用) 在form标签上添加class="form-inline" bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0

4.5 响应式表单
  • 表单由纵向变为横向(不用)
  • 在form标签上添加class="form-inline"
  • bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]邮箱密码手机号唱歌跳舞写代码分享男 女 搜索查询内容 带有搜索图标的 glyphicon 图标,默认 glyphicon-search 搜索图标

     

  • 给form标签添加class="form-horizontal" ,而且要结合栅格系统,形成响应式表单。
  • bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]邮箱密码手机号唱歌跳舞写代码分享男 女 搜索查询内容 带有搜索图标的 glyphicon 图标,默认 glyphicon-search 搜索图标

  • 结合栅格系统的响应式表单
  • 传统方式:  
  • bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]姓名密码

  • 其实,和表单结合的话,不需要些<div></div>  
  • bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]姓名密码

     

    5 按钮
  • 可以加按钮效果的标签:
  • bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]新增删除

    bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]新增删除

  • class="btn"是按钮样式的基类。
  • bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]新增删除

    bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]新增删除1234567

  • class="btn active"按钮激活
  • bootstrap学习 屏幕和设备的宽度保持一致,初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]新增删除1234567成功?必须成功

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • Java基础精选,你答对了几道? - 小柒2012

      Java基础精选,你答对了几道? - 小柒2012

      2017-09-09 17:11

    • 【前端笔记】 CSS 基础 - 专注精彩

      【前端笔记】 CSS 基础 - 专注精彩

      2017-09-04 14:01

    • 负载均衡基础知识 - coderbinbin

      负载均衡基础知识 - coderbinbin

      2017-09-01 15:05

    • canvas基础 - 一颗快乐心

      canvas基础 - 一颗快乐心

      2017-08-03 15:00

    网友点评
    8