读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
3.6.2 按钮大小
2014-05-09 15:18:03     我来说两句 
收藏    我要投稿   

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

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

像input一样,Bootstrap也提供了控制button按钮大小的CSS样式。在2.x系列时提供了3种样式:.btn-large、.btn-small、btn-mini。当前最新版本将这些样式改名为.btn-lg、.btn-sm、.btn-xs。这些样式可以和btn颜色样式组合使用。示例如下:
<p>
    <button type="button" class="btn btn-default btn-lg">大型button</button>
    <button type="button" class="btn btn-primary btn-lg">大型button</button>
</p>
<p>
    <button type="button" class="btn btn-success">正常button</button>
    <button type="button" class="btn btn-info">正常button</button>
</p>
<p>
    <button type="button" class="btn btn-success btn-sm">小型button</button>
    <button type="button" class="btn btn-info btn-sm">小型button</button>
</p>
<p>
    <button type="button" class="btn btn-warning btn-xs">超小button</button>
    <button type="button" class="btn btn-danger btn-xs">超小button</button>
</p>

运行上述示例后的效果如图3-30所示。

 

这些不同尺寸按钮的主要差别是padding、font-size、line-height和border-radius,具体源码里的数值如下:
/* 源码 2314 行 */
.btn-lg { /* 大按钮*/  padding: 10px 16px;  font-size: 18px;  line-height: 1.33; 
    border-radius: 6px; }
.btn-sm { /* 小按钮*/  padding: 5px 10px;  font-size: 12px;  line-height: 1.5; 
    border-radius: 3px; }
.btn-xs {/* 超小按钮*/ padding: 1px 5px;  font-size: 12px;  line-height: 1.5; 
    border-radius: 3px; }

讲述到这里,我们发现一个问题,所有按钮的宽度都是根据文本的长短(再加上padding值)来决定的,而如果我们需要一个充满父容器的100%宽度的按钮,则无法实现。好在Bootstrap又单独为我们提供了一个block级的样式——.btn-block按钮,它不以文本多少自动伸缩,它没有padding和margin值,而是充满父容器。具体源码实现如下:
// 源码2332行
.btn-block {  /* 取消padding*/
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}
.btn-block + .btn-block {
  margin-top: 5px;  /* 多个按钮之间取消上下间隔*/
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;  /* 各种input按钮的宽度也要充满父容器*/
}

.btn-block样式和普通按钮的区别如图3-31所示。可以看出块级元素充满父容器,而不随字符宽度变化而变化。



 

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

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