Bootstrap CSS布局之按钮
时间：2021-04-23 09:29:14|栏目：JavaScript代码|点击： 次
按钮是任何系统都不能缺少的组件，设置到按钮的大小、颜色、状态等。
//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类型系统_正则表达式RegExp类型详解
栏 目：JavaScript代码
下一篇：JavaScript中使用Math.floor()方法对数字取整
本文标题：Bootstrap CSS布局之按钮
本文地址：http://www.codeinn.net/misctech/107142.html
