Bootstrap CSS布局之按钮
按钮是任何系统都不能缺少的组件，设置到按钮的大小、颜色、状态等。
//btn源码
.btn{
display:inline-block;
padding:6px12px;
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:1pxsolidtransparent;
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:10px16px;
font-size:18px;
line-height:1.3333333;
border-radius:6px;
}
.btn-sm,
.btn-group-sm>.btn{
padding:5px10px;
font-size:12px;
line-height:1.5;
border-radius:3px;
}
.btn-xs,
.btn-group-xs>.btn{
padding:1px5px;
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元素
<aclass="btnbtn-default"href="#">链接</a> <buttonclass="btnbtn-default"type="submit">按钮</button> <inputclass="btnbtn-default"type="submit"value="输入框">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。