BootStrap--CSS布局--按钮

来源：互联网发布：usb编程案例编辑：程序博客网时间：2024/06/05 20:38

1 按钮

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

//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="输入框">

0 0