Bootstrap-按钮
时间：2020-02-23 14:29:46 来源:igfitidea点击:
在本教程中，我们将学习在Bootstrap中设置按钮样式。
按钮类
我们可以在 <a>， <button>和 <input>元素上使用.btn类。
<a class="btn btn-default" href="#" role="button">Link Button</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input Button"> <input class="btn btn-default" type="submit" value="Submit Button">
按钮样式
我们可以使用以下类来执行按钮。
使用这些类为用户提供视觉帮助。
| 类 | 描述 |
|---|---|
.btn-default | 这将创建一个默认按钮。 |
.btn-primary | 这将创建一个主要操作按钮。 |
.btn-success | 将创建一个按钮来显示成功或者积极的行动。 |
.btn-alert | 将创建一个警报按钮。 |
.btn-warning | 这将创建一个警告按钮，以表示警告或者警告。 |
.btn-danger | 将创建一个表示潜在危险的危险按钮。 |
.btn-link | 将使按钮看起来像链接，并不再强调它。 |
<!-- default button --> <button type="button" class="btn btn-default">Default</button> <!-- primary action button --> <button type="button" class="btn btn-primary">Primary</button> <!-- button to indicate success or positive result --> <button type="button" class="btn btn-success">Success</button> <!-- button for alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- button to indicate caution or warning --> <button type="button" class="btn btn-warning">Warning</button> <!-- button to indicate potential danger --> <button type="button" class="btn btn-danger">Danger</button> <!-- make a button look like a link and de-emphasize it --> <button type="button" class="btn btn-link">Link</button>
按键尺寸
我们可以使用以下类来更改按钮的大小。
| 类 | 描述 |
|---|---|
.btn-lg | 这将成为一个大按钮。 |
.btn-sm | 这将成为一个小按钮。 |
.btn-xs | 这将使按钮变小。 |
<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>
阻止按钮
为了创建一个覆盖父对象整个宽度的按钮，我们使用.btn-block类。
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
活跃状态
如果将.active类添加到按钮，则它将看起来已按下。
<button type="button" class="btn btn-default btn-lg active">Button</button> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
禁用状态
如果我们将.disabled类添加到链接中，则它将看起来不可点击。
而且，如果我们将" disabled"属性添加到按钮，则它也将变为不可点击。
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
