按钮：Bootstrap框架的按钮也是一个独立部分，我们同样在不同的版本之中能找到对应的代码：
LESS版本：查看源文件buttons.less Sass版本：查看源文件_buttons.scss 已编译版本：查看源文件bootstrap.css文件第1992行～第2353行
各种按钮代码如下：
<body> <button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <button class="btn btn-info" type="button">信息按钮.btn-info</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">链接按钮.btn-link</button> </body>
1.基本按钮
类（.btn）
<button class="btn" type="button">基本按钮</button>
2.默认按钮
在按钮的基础上增加类（.btn-default）
<button class="btn btn-default" type="button">默认按钮</button>
3.多标签支持制作按钮
<button class="btn btn-default" type="button">button标签按钮</button> <input type="submit" class="btn btn-default" value="input标签按钮"/> <a href="#" class="btn btn-default">a标签按钮</a> <span class="btn btn-default">span标签按钮</span> <div class="btn btn-default">div标签按钮</div>
4.定制按钮风格
<button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">链接按钮.btn-link</button> <button class="btn btn-info" type="button">信息按钮.btn-info</button>
5.按钮的大小
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>
6.块状按钮（btn-block）
<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>
7.按钮状态：活动状态（悬浮状态：hover，点击状态：active，焦点状态：focus）
8.按钮状态：禁用状态
<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button> <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>
时间： 2024-10-25 15:29:20