W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 按钮



预定义样式

Bootstrap 一共提供了7种按钮预定义样式:

为了实现上面的按钮样式,Bootstrap的类如下:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

使用下面列出的实例可以快速创建一个带有预定义样式的按钮。

Example

<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>
尝试一下 »

按钮类通常也可以用于 <a>, <button>, 或者 <input> 元素:

Example

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
尝试一下 »
Note 为什么我们把一个#号放在链接的href属性?

Since 因为我们没有任何页面的链接,我们不希望得到一个“404”的消息,我们把#为纽带。在现实生活中,它当然应该是一个真正的网址“搜索”页面。

尺寸

Bootstrap 提供了4种按钮尺寸:

定义不同尺寸的类是:

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

下面的示例显示了不同按钮大小的代码:

Example

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
尝试一下 »

块级元素

块级按钮会横跨父元素的全部宽度。

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

Example

<button type="button" class="btn btn-primary btn-block">Button 1</button>
尝试一下 »

激活/禁用状态

一个按钮可以设置为激活(显示被按下)或禁用(无法点击)状态:

.active 类时按钮显示被按下状态, .disabled 类时按钮显示被禁用状态:

Example

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
尝试一下 »

完整的 Bootstrap 按钮手册

对于所有按钮类的完整引用,请转到我们的完整 Bootstrap 按钮手册