Bootstrap CSS布局之按钮

Bootstrap CSS布局之按钮

按钮是任何系统都不能缺少的组件，设置到按钮的大小、颜色、状态等。

//btn源码

.btn {

display: inline-block;

padding: 6px 12px;cYDwO

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;

http:// 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元素

链接

按钮

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。