读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
3.5.3 横向表单
2014-05-09 11:48:46     我来说两句 
收藏    我要投稿   

本文所属图书 > 深入理解Bootstrap

本书是目前Bootstrap领域技术版本最新、内容最全面、介绍最详细、实战性最强、最具深度的著作。它是资深Web技术专家多年工作经验的结晶,不仅授人以鱼,全面讲解了Bootstrap各个功能组件的使用方法,以及对现有插  立即去当当网订购

横向表单与内联表单的使用方式不太一样,其不能在form元素上简单应用一个.form-horizontal样式,这是因为.form-horizontal样式本身没有做什么特殊的设置,只简单设置了一下相关的padding和margin值。源码如下:
// 源码1959行
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline { /* 简单设置了一下padding和margin */
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}
.form-horizontal .radio,.form-horizontal .checkbox {  min-height: 27px;
      /* 设置最小高度 */}
.form-horizontal .form-group {  /* 简单设置了一下margin */
  margin-right: -15px;  margin-left: -15px;
}
.form-horizontal .form-control-static {  padding-top: 7px; }
  @media (min-width: 768px) {
  .form-horizontal .control-label {    text-align: right;
      /* 大屏幕下,label可以居右显示 */  }
}

运行效果如图3-22所示。

 

所以,要实现横向表单,不仅要应用上述样式,还要使用Bootstrap预置的栅格类,以便将label和控件水平并排布局。由于.form-horizontal样式改变了.form-group的行为,将其表现得像栅格系统中的行(row)一样,因此就无需再使用.row样式了。示例如下:
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="account" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id=" account "
              placeholder="请输入你的用户名">
        </div>
    </div>
    <div class="form-group">
        <label for=" password " class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="password"
              placeholder="请输入你的密码">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox"><label><input type="checkbox">记住密码</
              label></div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.5.2 内联表单
下一篇:3.5.4 表单控件
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站