Bootstrap CSS布局之按钮
按钮是任何系统都不能缺少的组件,设置到按钮的大小、颜色、状态等。
//btn源码 .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
按钮样式
btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、btn-link
按钮大小
btn-xs、btn-sm、btn-lg、btn-block
//源码 .btn-lg, .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-xs, .btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
所有按钮的宽度都是文本的长短再加上padding值来决定,若我们需要一个充满父容器的100%宽度的按钮,则无法实现。所以有btn-block
btn-block不根据文本收缩,也没有padding和margin值,而是充满父容器
//源码 .btn-block { display: block; width: 100%; } .btn-block + .btn-block { margin-top: 5px; } input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }
多标签支持
btn相关元素的强大之处,不仅能支持button元素,也能支持a元素和input元素
<a class="btn btn-default" href="#">链接</a> <button class="btn btn-default" type="submit">按钮</button> <input class="btn btn-default" type="submit" value="输入框">
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript 异步页面查询实现代码(asp.net)
异步页面查询,其实与自动完成时一样的原理,根据用户输入的关键词自动的与数据库中的匹配,并显示出来,提高用户体验,但主要搜索量大的话,增加服务器开销。2010-05-05javascript使用eval或者new Function进行语法检查
使用代码来实现分析代码的语法,这是一件极其痛苦的事情。简单的解决办法是:使用脚本引擎自己的语法检查,比方说eval( ) 或者new Function( )。2010-10-10
最新评论