一、简介
通过按钮(Button)插件,可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。
二、按钮
可作为按钮使用的标签或元素
为 <a>
、<button>
或 <input>
元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
效果图如下:
针对组件的注意事项
虽然按钮类可以应用到 <a>
和 <button>
元素上,但是,导航和导航条组件只支持 <button>
元素。
链接被作为按钮使用时的注意事项
如果 <a>
元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role="button"
属性。
跨浏览器展现
佳实践是:强烈建议尽可能使用 <button>
元素来获得在各个浏览器上获得相匹配的绘制效果。
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>
效果图如下;
尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs
就可以获得不同尺寸的按钮。
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<br>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
效果图如下:
激活状态
当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button>
元素,是通过 :active
状态实现的。对于 <a>
元素,是通过 .active
类实现的。然而,你还可以将 .active 应用到 上(包含 aria-pressed=“true” 属性)),并通过编程的方式使其处于激活状态。
【1】button 元素
由于 :active
是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active
类。
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
效果图如下:
【2】链接元素(< a >)
可以为基于 <a>
元素创建的按钮添加 .active
类。
<a href="#" class="btn btn-primary btn-lg active">Primary link</a>
<a href="#" class="btn btn-default btn-lg active">Link</a>
效果图如下:
禁用状态
通过为按钮的背景设置 opacity
属性就可以呈现出无法点击的效果。
【1】button 元素
为 <button>
元素添加 disabled
属性,使其表现出禁用状态。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
效果图如下:
【2】链接元素(< a >)
为基于 <a>
元素创建的按钮添加 .disabled
类。
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>
效果图如下:
三、总结
好好学习,天天向上。