读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
3.5.6 控件大小
2014-05-09 14:58:12     我来说两句 
收藏    我要投稿   

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

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

Bootstrap提供了两个样式用于设置稍大或者稍小的input输入框,分别是:.input-lg和.input-sm。使用方式如下:
    <input class="input-lg form-control" type="text" placeholder="较大">
    <input class="form-control" type="text" placeholder="正常大小">
    <input class="input-sm form-control" type="text" placeholder="较小">

运行上述样式后的效果如图3-28所示。

 

控件大小的实现思路是给input输入框设定不同大小的padding、font-size、border-radius值。从如下源码也可以看出,.input-lg和.input-sm样式不仅适用于input,也适用于select和textarea元素。
/* 源码1794 行*/
.input-sm {   /* 设置小的输入框input*/
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-sm {   /* 设置小的选择框select*/
  height: 30px;
  line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm { /* 设置小的文本框textarea*/
  height: auto;
}
.input-lg {   /* 设置大的输入框input*/
  height: 46px;  padding: 10px 16px;  font-size: 18px;  line-height: 1.33; 
      border-radius: 6px;
}
select.input-lg {  height: 46px;  line-height: 46px; /* 设置大的选择框select*/}
textarea.input-lg,select[multiple].input-lg {  height: auto; /* 设置大的文本框
    textarea*/}

注意

根据上述源码,也可以按照类似规则,为上述3种元素定义其他大小的样式,比如,.input-mini。

再仔细看一下上述代码,发现上述代码在设置大小的时候只设置了高度,并没有设置宽度。所以,在实际设计过程中,对于不同尺寸的元素还要进行相应宽度的调整。好在这些元素默认都是100%显示,而且还有栅格系统提供的支持。所以对于控制宽度,可以按照如下方式设置:
    <div class="row">
        <div class="col-xs-2">
            <input type="text" class="form-control" placeholder=".col-xs-2">
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder=".col-xs-3">
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" placeholder=".col-xs-4">
        </div>
    </div>

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

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