Bootstrap CSS布局之按钮

2019-11-19 18:25:50

字体：大中小

来源：转载

供稿：网友

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Bootstrap CSS布局之图像

下一篇：Bootstrap CSS布局之表单