Bootstrap每天必学之按钮

Bootstrap是一个广受欢迎的前端开发框架，提供了一套可重用的UI组件，使开发者能够快速构建漂亮且高效的网站和应用程序。按钮是Bootstrap中最基本的组件之一，本文将为您介绍Bootstrap按钮的完整攻略。

Bootstrap按钮的基本用法

Bootstrap按钮有多种样式，可以通过不同的类名进行选择和应用。最基本的按钮用法是添加 .btn 类。例如：

<button type="button" class="btn btn-primary">Primary Button</button>

这会创建一个具有基本样式和蓝色背景的按钮。可以使用 btn-secondary、btn-success、btn-warning、btn-danger、btn-info 和 btn-light 等类来创建不同样式的按钮。

默认情况下，按钮大小为中等尺寸。您还可以添加其他类来调整按钮大小，例如 btn-lg 用于大按钮， btn-sm 用于小按钮， btn-block 用于块级按钮。例如：

<button type="button" class="btn btn-success btn-lg">Large Success Button</button>

这会创建一个绿色背景、较大尺寸的、带有文本”Large Success Button”的成功按钮。使用 btn-block 类时，将使按钮占满其容器的全部宽度。

Bootstrap按钮的进阶用法

按钮组合

将一组相关按钮组合在一起，可以使用 .btn-group 类和 .btn-group-* 类来实现不同的排列方式。例如：

<div class="btn-group">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

这将把三个按钮放在一起以形成一个按钮组。 如果要横向排列，你可以使用 .btn-group-horizontal 类。此外，您可以使用 .btn-group-* 类（如 .btn-group-vertical）在垂直方向上堆叠按钮。

按钮下拉菜单

Bootstrap的下拉菜单是很有用的组件，当你有需要一个按钮打开一个弹出框时，这很容易通过添加 .dropdown 和 .dropdown-toggle 类来实现。例如：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" 
            aria-haspopup="true" aria-expanded="false">
        Dropdown Menu
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Item 1</a>
        <a class="dropdown-item" href="#">Item 2</a>
        <a class="dropdown-item" href="#">Item 3</a>
    </div>
</div>

这会创建一个下拉菜单按钮，并在点击时显示一个下拉菜单。使用.dropdown-menu 类可以创建该下拉菜单的容器，在容器中添加.dropdown-item 类的选项，使得这些选项看起来像是一个普通的菜单项。

示例说明

示例1：Bootstrap一个基本的按钮

<button type="button" class="btn btn-primary">Primary Button</button>

上述代码创建一个基本的蓝色主题按钮。

示例2：按钮组合

<div class="btn-group">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

上述代码将三个按钮放在一起，形成一个组合，其中一个背景为灰色的中间按钮。

以上是完整的Bootstrap按钮攻略。希望这些信息有助于您快速掌握Bootstrap按钮的用法和技巧。