bootstrap4怎么设置按钮

了解Bootstrap4按钮

Bootstrap4是一个流行的HTML，CSS和JavaScript框架，用于构建快速响应式网站和Web应用程序。它具有许多功能，包括具有内置样式的按钮。在Bootstrap4中，按钮是非常实用的功能。通过自定义按钮样式，您可以增强Web界面的外观和易用性。

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

创建基本按钮

在Bootstrap4中，您可以创建各种样式的按钮。基本按钮是默认样式和行为的按钮。以下是创建基本按钮和使用样式的示例。

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>

创建自定义按钮

如果您想要根据特定需要创建自定义按钮，则可以使用Bootstrap4的自定义样式选项。您可以添加样式和颜色，以创建与默认样式不同的按钮。

<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
<button type="button" class="btn btn-outline-success">Success Outline Button</button>
<button type="button" class="btn btn-outline-danger">Danger Outline Button</button>
<button type="button" class="btn btn-outline-warning">Warning Outline Button</button>
<button type="button" class="btn btn-outline-info">Info Outline Button</button>
<button type="button" class="btn btn-outline-light">Light Outline Button</button>
<button type="button" class="btn btn-outline-dark">Dark Outline Button</button>

创建按钮组合

在Bootstrap4中，您可以创建按钮的组合。按钮组合允许您在一个区域中组合多个按钮。组合按钮包括工具栏，按钮工具栏和按钮下拉菜单。以下是创建按钮组合的示例。

<div class="btn-group">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Contact</button>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
    </div>
    <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
        <button type="button" class="btn btn-secondary">8</button>
    </div>
</div>

<div class="btn-group dropright">
    <button type="button" class="btn btn-primary">Dropdown</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropright</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">More actions</a>
    </div>
</div>