97 lines
2.3 KiB
Markdown
97 lines
2.3 KiB
Markdown
|
---
|
|||
|
title: Buttons
|
|||
|
localeTitle: 纽扣
|
|||
|
---
|
|||
|
## 纽扣
|
|||
|
|
|||
|
Bootstrap框架为您提供各种按钮样式选项。这些样式可帮助您为用户提供按钮可能执行的操作的可视化表示。
|
|||
|
|
|||
|
#### 如何使用:
|
|||
|
|
|||
|
要使用引导按钮,请按照与在HTML中创建按钮相同的步骤进行操作,除了您还将适用的CSS类应用于按钮。下面提供了一个代码示例。
|
|||
|
|
|||
|
**代码示例:**
|
|||
|
|
|||
|
`<button type="button" class="btn btn-primary">Primary</button>`
|
|||
|
|
|||
|
主
|
|||
|
|
|||
|
您还可以使用带有`<a>`和`<input>`元素的引导按钮,如下面的示例所示。
|
|||
|
|
|||
|
`<a class="btn btn-primary" href="#" role="button">This button is a link</a>`
|
|||
|
|
|||
|
[这个按钮是一个链接](#)
|
|||
|
|
|||
|
`<input class="btn btn-primary" type="submit" value="Submit">`
|
|||
|
|
|||
|
#### 引导按钮类列表:
|
|||
|
|
|||
|
这是bootstrap为按钮提供的CSS类的列表。
|
|||
|
|
|||
|
`.btn`这是bootstrap的基本按钮。
|
|||
|
|
|||
|
基本
|
|||
|
|
|||
|
`.btn-default`这是bootstrap的默认按钮。
|
|||
|
|
|||
|
默认
|
|||
|
|
|||
|
`.btn-primary`这是bootstrap的主按钮。
|
|||
|
|
|||
|
主
|
|||
|
|
|||
|
`.btn-success`这是bootstrap的成功按钮。
|
|||
|
|
|||
|
成功
|
|||
|
|
|||
|
`.btn-info`这是bootstrap的信息按钮。
|
|||
|
|
|||
|
信息
|
|||
|
|
|||
|
`.btn-warning`这是bootstrap的警告按钮。
|
|||
|
|
|||
|
警告
|
|||
|
|
|||
|
`.btn-danger`这是bootstrap的危险按钮。
|
|||
|
|
|||
|
危险
|
|||
|
|
|||
|
`.btn-link`这是bootstrap的链接按钮。
|
|||
|
|
|||
|
链接
|
|||
|
|
|||
|
`.btn-light`这是bootstrap的灯按钮。
|
|||
|
|
|||
|
光
|
|||
|
|
|||
|
#### Bootstrap按钮尺寸:
|
|||
|
|
|||
|
这是针对不同大小的按钮的CSS类列表。
|
|||
|
|
|||
|
`.btn-lg`这是bootstrap的大按钮。
|
|||
|
|
|||
|
大
|
|||
|
|
|||
|
`.btn-sm`这是bootstrap的小按钮。
|
|||
|
|
|||
|
小
|
|||
|
|
|||
|
`.btn-xs`这是bootstrap的超小按钮。
|
|||
|
|
|||
|
超小
|
|||
|
|
|||
|
#### Bootstrap概述按钮:
|
|||
|
|
|||
|
也可以使用轮廓按钮而不是完全着色的按钮。这是通过将中间修复`outline`放在所需的按钮类之间来实现的。示例用法如下:
|
|||
|
|
|||
|
`<button type="button" class="btn btn-outline-primary">Primary</button>`
|
|||
|
|
|||
|
从版本4开始,概述按钮是Bootstrap的一部分,如果您无法使用它们,请确保使用正确的版本。
|
|||
|
|
|||
|
_注意:不要在HTML类属性中包含点,指的是带有点的类仅在调整CSS中的类时使用。_
|
|||
|
|
|||
|
#### 更多信息:
|
|||
|
|
|||
|
* [Bootstrap Buttons文档](https://getbootstrap.com/docs/4.0/components/buttons/)
|
|||
|
* [Bootstrap按钮组文档](http://getbootstrap.com/docs/4.0/components/button-group/)
|
|||
|
* [Bootstrap入门](/articles/bootstrap/bootstrap-get-started)
|