第五章 Bootstrap的按钮和下菜单

梦落繁辞

已于 2023-12-19 17:10:27 修改

阅读量1.9k

点赞数 30

分类专栏：前端学习文章标签： bootstrap 前端 html

于 2023-12-19 17:09:53 首次发布

本文链接：https://blog.csdn.net/mlfc0422/article/details/135086394

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Bootstrap 提供了按钮（Button）和下拉菜单（Dropdown）的组件，允许你创建具有交互性的按钮和下拉选择菜单。

(本章内如与之前内容皆为bootstrap4的教程，偶尔有5的内容作为对照)

1.按钮

1.样式

默认样式

<button type="button" class="btn btn-secondary">Default</button>

不同类型的样式

<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-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-link">Link Button</button>

在 Bootstrap 4 中，btn-outline-* 类可以用于创建带有轮廓边框的按钮，这种按钮没有背景色，默认是透明的，边框和文本颜色根据类名设置。以下是一些示例：

<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-info">Info Outline Button</button>
<button type="button" class="btn btn-outline-warning">Warning Outline Button</button>
<button type="button" class="btn btn-outline-danger">Danger Outline Button</button>
<button type="button" class="btn btn-outline-dark">Dark Outline Button</button>
<button type="button" class="btn btn-outline-light">Light Outline Button</button>

2.尺寸

下面是一些例子

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary">Regular Button</button>
<button type="button" class="btn btn-success btn-sm">Small Button</button>
<button type="button" class="btn btn-danger btn-block">Block Level Button</button>

这些类可以根据需要为按钮设置不同的大小。.btn-lg 可以使按钮更大，.btn-sm 可以使按钮更小，而 .btn-block 则可以让按钮宽度填满其父元素的宽度。

3.状态

在 Bootstrap 4 中，按钮有不同的状态类，用于标记按钮的不同状态，例如激活、禁用等。

<button type="button" class="btn btn-primary active">Active Button</button>
<button type="button" class="btn btn-secondary" disabled>Disabled Button</button>

.active 类将按钮标记为激活状态，显示为按下（被选中）状态。disabled 属性或类将按钮标记为禁用状态，使其无法点击。这些状态类和属性可以根据需要为按钮添加不同的状态，以反映用户交互或应用功能。

2.按钮组

Bootstrap 的按钮组（Button Group）允许将一组按钮放置在同一个容器内，并以一种组合的方式呈现。这使得按钮之间的布局更加整洁，并且可以在一定程度上组合它们的功能。

1.工具栏

在 Bootstrap 4 中，按钮组可以被用作工具栏（Toolbar），将一组按钮排列在一行上，形成一个工具栏样式。以下是一个示例，展示了如何使用按钮组创建一个简单的工具栏：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1st Button</button>
    <button type="button" class="btn btn-secondary">2nd Button</button>
    <button type="button" class="btn btn-secondary">3rd Button</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">4th Button</button>
    <button type="button" class="btn btn-secondary">5th Button</button>
  </div>
</div>

在这个例子中，使用了 btn-toolbar 类来创建一个工具栏。工具栏中有两个按钮组，每个按钮组中有若干个按钮。按钮组使用了 btn-group 类，内部的每个按钮使用了 btn 和 btn-secondary 类，分别表示按钮组和按钮的样式。

2.按钮组尺寸

在 Bootstrap 4 中，按钮组（Button Group）可以设置不同尺寸的样式，以适应不同的布局需求。

<div class="btn-group btn-group-lg" role="group" aria-label="Large button 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>

<div class="btn-group" role="group" aria-label="Regular button 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>

<div class="btn-group btn-group-sm" role="group" aria-label="Small button 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-lg）、默认尺寸和小尺寸（.btn-group-sm）。你可以根据布局需要选择合适的按钮组尺寸类应用到按钮组容器上。

role="group" 和 aria-label="Small button group" 这两个属性是辅助性质的，用于提供给辅助技术（例如屏幕阅读器）的额外信息，以确保这些组件在无障碍环境下能够正确地被解释和使用。

3.下拉菜单

Bootstrap 的下拉菜单（Dropdown Menu）是一个常用的交互组件，允许你在按钮或链接点击时显示一个可折叠的菜单。

1.单个按钮

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

btn 类定义了一个按钮的样式。
btn-secondary 类指定了按钮的次要样式。
dropdown 类定义了一个下拉菜单容器。
dropdown-toggle 类使按钮拥有了下拉菜单的功能，并通过 data-toggle="dropdown" 属性指示点击按钮时显示菜单。
dropdown-menu 类定义了菜单的样式。
dropdown-item 类定义了菜单中每个选项的样式。

此处要插入一个提醒，如果这个代码的按钮在你的网页中无法点击出现下拉菜单，请引用正确的css和js。

<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

代码的具体路径每个人是不同的，我当前使用的是4.6.2版本，请确保你引用了这三个内容,jquery需要自己单独下载。js的先后顺序不能错。

2.对齐

<div class="dropleft">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        按钮
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">选项1</a>
        <a class="dropdown-item" href="#">选项2</a>
        <a class="dropdown-item" href="#">选项3</a>
    </div>
</div>

这是一个从左侧弹出下拉菜单的示例

同理还有dropright与dropup

3.标题与分割线

在 Bootstrap 下拉菜单中，你可以使用标题和分隔线来增强菜单的可读性。

添加标题

<div class="btn-group dropleft">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        按钮
    </button>
    <div class="dropdown-menu">
        <h6 class="dropdown-header">标题</h6>
        <a class="dropdown-item" href="#">选项1</a>
        <a class="dropdown-item" href="#">选项2</a>
        <a class="dropdown-item" href="#">选项3</a>
    </div>
</div>

这段代码中，<h6 class="dropdown-header">标题</h6> 创建了一个标题，用于区分下拉菜单中的内容，增强可读性。

添加分割线

<div class="btn-group dropleft">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        按钮
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">选项1</a>
        <a class="dropdown-item" href="#">选项2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">另一组选项</a>
        <a class="dropdown-item" href="#">更多选项</a>
    </div>
</div>

在这个例子中，<div class="dropdown-divider"></div> 创建了一个分隔线，将下拉菜单的内容分隔成两部分。

4.状态

在 Bootstrap 下拉菜单中，可以使用一些状态类来改变下拉菜单的外观，比如 disabled、active、show 等。

如果你想禁用某个下拉菜单项，可以为对应的 <a> 元素添加 disabled 类。这样的项将呈现为灰色且不可点击。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">可点击项</a>
    <a class="dropdown-item disabled" href="#">禁用项</a>
    <a class="dropdown-item" href="#">另一项</a>
  </div>
</div>

下拉菜单项在被选中时可能会呈现为激活状态。通常，激活状态取决于用户的交互或特定的页面状态。

如果需要手动控制下拉菜单的显示状态，可以使用 show 类。这可以让你在初始化时就显示下拉菜单。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu show" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">可点击项</a>
    <a class="dropdown-item" href="#">另一项</a>
  </div>
</div>

4.按钮下拉菜单

看到这里，你可能有些懵b。刚刚不就是点击按钮的下拉菜单吗？

那么区别是什么呢？

按钮下拉菜单： 使用按钮作为触发器，通常将按钮和下拉菜单组合在一起，点击按钮显示或隐藏菜单。这种方式更适合于将按钮和菜单作为一个整体呈现在界面上。
直接创建下拉菜单： 这种方式下拉菜单不一定与按钮直接相关联，可以独立于任何元素存在，触发方式可以是按钮、超链接、图标等，触发方式更加灵活。

1.按钮下拉菜单

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Option 1</a>
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
  </div>
</div>

这里用了按钮组

2.分裂按钮下拉菜单

Bootstrap 的分裂按钮下拉菜单（Split Button Dropdowns）是一种按钮，它的一部分可以触发下拉菜单，而另一部分则执行按钮的默认操作。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Option 1</a>
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
  </div>
</div>

第一个按钮(<button class="btn btn-primary">Action</button>)是按钮的主要部分，执行按钮的默认操作。
第二个按钮(<button class="btn btn-primary dropdown-toggle dropdown-toggle-split">...</button>)是分裂按钮的一部分，有一个小的三角图标指示下拉菜单的存在。

3.尺寸

<div class="btn-group">
  <button type="button" class="btn btn-lg btn-primary">Large Button</button>
  <button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Option 1</a>
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
  </div>
</div>

这是大按钮

你可以使用不同尺寸的按钮（.btn-sm、.btn-lg 等）以及对应的下拉菜单来满足不同按钮尺寸需求，并根据设计和布局选择合适的按钮大小。

本章学习到此结束，更多内容可以看一下我的前几章教程或等待我的更新。

梦落繁辞

关注

30
点赞
踩
38

收藏

觉得还不错? 一键收藏
1
评论
第五章 Bootstrap的按钮和下菜单

Bootstrap 提供了按钮（Button）和下拉菜单（Dropdown）的组件，允许你创建具有交互性的按钮和下拉选择菜单。(本章内如与之前内容皆为bootstrap4的教程，偶尔有5的内容作为对照)
复制链接

扫一扫

专栏目录