Bootstrap-按钮 - 芒果文档

📌 相关文章

📜 Bootstrap-按钮

📅 最后修改于: 2020-10-27 06:04:41 🧑 作者: Mango

本章通过示例介绍了Bootstrap按钮的使用年龄。赋予.btn类的所有内容都将继承带有圆角的灰色按钮的默认外观。但是，Bootstrap为样式按钮提供了一些选项，下表中对此进行了总结：

Sr.No.	Class & Description
1	btn Default/ Standard button.
2	btn-primary Provides extra visual weight and identifies the primary action in a set of buttons.
3	btn-success Indicates a successful or positive action.
4	btn-info Contextual button for informational alert messages.
5	btn-warning Indicates caution should be taken with this action.
6	btn-danger Indicates a dangerous or potentially negative action.
7	btn-link Deemphasize a button by making it look like a link while maintaining button behavior.

以下示例演示了上述所有按钮类-

按键尺寸

下表总结了用于获取各种大小的按钮的类-

Sr.No.	Class & Description
1	.btn-lg This makes the button size large.
2	.btn-sm This makes the button size small.
3	.btn-xs This makes the button size extra small.
4	.btn-block This creates block level buttons—those that span the full width of a parent.

以下示例演示了这一点-

Bootstrap提供了一些类，这些类使您可以将按钮的状态更改为活动，禁用等。以下各节将对每种状态进行讨论。

处于活动状态时，按钮将显示为按下状态(背景变深，边框变暗和阴影变暗)。下表总结了用于激活按钮元素和锚元素的类-

Element	Class
Button element	Use .active class to show that it is activated.
Anchor element	Use .active class to buttons to show that it is activated.

以下示例演示了这一点-

禁用按钮后，按钮的颜色将淡入50％，并失去渐变。

下表总结了用于禁用按钮元素和锚元素的类-

Element	Class
Button element	Add the disabled attribute to
Anchor element	Add the disabled class to buttons. Note − This class will only change the ’s appearance, not its functionality. You need to use custom JavaScript to disable links here.

以下示例演示了这一点-


   
   
   



   
   
   



   
      Link
   
   
   
      Disabled Link
   



   
      Primary link
   
   
   
      Disabled Primary link