第四章 Bootstrap布局组件

最新推荐文章于 2024-05-30 15:07:12 发布

梦落繁辞

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量1.4k

点赞数 31

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

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

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

justify-content-between：

1.徽章(Badge)

Bootstrap 的 Badge（徽章）是用于显示小型信息或状态的组件，通常用于标记或突出显示某些内容。它是一个小型的可视化标记，可以与各种元素一起使用。

1.上下文相关类

Bootstrap 提供了一系列上下文相关的类，用于对徽章（Badges）进行上下文标记，让徽章显示不同的颜色，以便表示不同的状态或信息。这些类通常用于强调或突出显示内容。

下面是一些常见的徽章上下文类：

.badge-primary：表示主要信息，一般用于突出显示主要内容或信息。
.badge-secondary：表示次要信息，用于次要内容或信息的标记。
.badge-success：表示成功状态，用于标记成功或正面状态的信息。
.badge-danger：表示危险或错误状态，用于标记危险或否定状态的信息。
.badge-warning：表示警告状态，用于标记警告或需要注意的信息。
.badge-info：表示一般信息，用于一般性的提示或信息。

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>

2.圆角矩形类

在 Bootstrap 中，Pill Badges 是一种圆角矩形形状的徽章，通常用于显示标签、状态或计数等信息。为了创建 Pill Badges，你需要使用 .badge 类并添加 .rounded-pill 类。

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>

2.输入组(Input Group)

Bootstrap 的 Input Group 可以让输入框与其他元素结合在一起，形成更复杂、更具功能性的输入组件。它可以用于在输入框前后添加文本、按钮、下拉菜单等元素，以扩展输入框的功能。

1.前缀和后缀

在 Bootstrap 中，你可以使用 Input Group（输入组）来创建在输入框前后添加文本、按钮或其他元素的输入组合。这种组合可以扩展输入框的功能，增加额外的信息或操作。

<div class="input-group mb-3">
  <span class="input-group-text">First Name</span>
  <input type="text" class="form-control" placeholder="Enter your first name">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Enter your last name">
  <span class="input-group-text">Last Name</span>
</div>

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
  <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

2.复选框和单选按钮插件

在Bootstrap中，你可以使用复选框（checkboxes）和单选按钮（radio buttons）与输入组(input group)结合起来，为其添加附加元素。这样做可以使您在表单中创建更复杂和功能性的交互元素。

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

上面是复选框与输入组

<div class="input-group mb-3">
  <!-- 单选按钮包裹在 input-group-text 中 -->
  <div class="input-group-text">
    <!-- 这是一个单选按钮 -->
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio1" value="option1" checked>
    <label class="form-check-label" for="exampleRadio1">Option 1</label>
  </div>
  <!-- 输入框 -->
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

上面是单选按钮与输入组

3.多个输入框及其附加元素

<div class="input-group mb-3">
  <span class="input-group-text">First Name</span>
  <input type="text" class="form-control" placeholder="Enter your first name">
  
  <span class="input-group-text">Last Name</span>
  <input type="text" class="form-control" placeholder="Enter your last name">
</div>

上面是在一行内放置两个输入框及其附带元素的例子

4.在输入框两侧添加按钮

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <input type="text" class="form-control" placeholder="Enter text">
</div>

这是按钮在左侧，按钮在右侧需调换顺序

5.添加下拉框到输入框旁

这种组合能够让你在用户输入文本的同时，提供一个按钮来展示更多选项或者触发特定的操作。这种设计在需要展示相关操作选项或者提供更多交互性时特别有用。

<div class="input-group mb-3">

  <label>
    <input type="text" class="form-control" placeholder="Enter text">
  </label>

  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Option 1</a></li>
      <li><a class="dropdown-item" href="#">Option 2</a></li>
      <li><a class="dropdown-item" href="#">Option 3</a></li>
    </ul>
  </div>
</div>

上面是bootstrap4的版本。在 Bootstrap 4 中，使用 data-toggle="dropdown" 来表示下拉菜单的触发。然而，在 Bootstrap 5 中，需要使用 data-bs-toggle="dropdown"。

6.输入组高度

在 Bootstrap 中，你可以使用类来调整输入组（input group）的高度大小。Bootstrap 提供了一些类，可帮助你控制输入组的高度。

.input-group-lg：用于创建较大的输入组。
.input-group-sm：用于创建较小的输入组。

<div class="input-group input-group-lg">
  <span class="input-group-text">Large</span>
  <input type="text" class="form-control" aria-label="Large input group">
</div>

7.一些总结

基本类：

.input-group：创建基本的输入组容器。
.input-group-prepend：用于放置在输入组前面的元素（通常是添加在输入框之前的元素）。
.input-group-append：用于放置在输入组后面的元素（通常是添加在输入框之后的元素）。

尺寸类：

.input-group-lg：创建大尺寸的输入组。
.input-group-sm：创建小尺寸的输入组。

内联类：

.input-group-horizontal：使输入组中的元素水平排列。

样式类：

.input-group-text：为附加元素（通常是输入框之前或之后的文本或按钮）添加样式。
.form-control：用于样式化输入框。

边框和圆角类：

.rounded：添加圆角边框。
.rounded-start：添加左侧圆角。
.rounded-end：添加右侧圆角。
.border：添加边框。
.border-0：移除边框。

3.列表组(List Group)

1.用BootStrap创建列表组

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

2.带有链接的列表组

要创建一个带有链接项的列表组，你可以使用 Bootstrap 的 list-group 和 list-group-item 类来实现。下面是一个示例，展示了如何创建一个列表组，其中的每个项都是链接：

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Linked Item 1</a>
  <a href="#" class="list-group-item list-group-item-action">Linked Item 2</a>
  <a href="#" class="list-group-item list-group-item-action">Linked Item 3</a>
</div>

使用 list-group-item-action 类可以为链接项添加交互效果，让它们看起来更像可点击的链接。

3.带有上下文状态类的列表组

Bootstrap 的列表组（list group）允许你使用不同的上下文状态类（contextual state classes）来突出显示列表项的不同状态，比如成功（success）、警告（warning）、危险（danger）等。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success Item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning Item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger Item</a>
</div>

4.添加内容到列表组

你可以在 Bootstrap 的列表组（list group）中添加各种内容，包括文本、图片、按钮等。

下面是一个带有标题和文本的例子

<ul class="list-group">
  <li class="list-group-item">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Title 1</h5>
      <small>Subtitle</small>
    </div>
    <p class="mb-1">Description for item 1.</p>
  </li>
  <li class="list-group-item">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Title 2</h5>
      <small>Subtitle</small>
    </div>
    <p class="mb-1">Description for item 2.</p>
  </li>
</ul>