第三章增强Bootstrap CSS

梦落繁辞

已于 2023-12-12 17:21:36 修改

阅读量786

点赞数 17

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

于 2023-12-12 15:25:54 首次发布

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

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

4.使用 .was-validated 类

5.JavaScript 可选

1.Bootstrap 表格

1.Table 类

table 类是 Bootstrap 中用于创建表格的基础类，它提供了一系列用于设计和排版表格的样式。

.table： 基本表格类，用于创建基本的表格结构。

.table-striped： 为表格的奇偶行添加条纹样式，增加区分度。

.table-bordered： 为表格添加边框。

.table-hover： 当鼠标悬停在表格行上时，增加悬停效果。

.table-sm： 创建紧凑型的表格，减小单元格的尺寸。

2.有边框的表格

Bordered table（有边框的表格）可以通过使用 Bootstrap 提供的 .table-bordered 类来创建。

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <!-- 更多的表格行 -->
  </tbody>
</table>

3.无边框的表格

要创建没有边框的表格，你可以使用 Bootstrap 提供的类.table-borderless。

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <!-- 更多的表格行 -->
  </tbody>
</table>

4.紧凑的表格

Bootstrap 提供了 .table-sm 类来创建紧凑型的表格，使得表格的行高和单元格的尺寸变小，从而在有限的空间内显示更多的内容。

<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <!-- 更多的表格行 -->
  </tbody>
</table>

5.响应式表格

Bootstrap 提供了响应式表格类 table-responsive，可确保在小屏幕设备上水平滚动表格，以便显示更宽的表格内容，提高用户体验。

<div class="table-responsive">
  <table class="table">
    <!-- 表格内容 -->
  </table>
</div>

将表格包裹在带有 .table-responsive 类的 <div> 内，这样就能够在小屏幕设备上水平滚动表格，并确保用户可以轻松查看到表格中超出屏幕宽度的内容。

6.条纹行

在 Bootstrap 中，可以使用 .table-striped 类来给表格的奇数行添加条纹样式，使其更易于区分。

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Product A</td>
      <td>In Stock</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Product B</td>
      <td>Out of Stock</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Product C</td>
      <td>In Stock</td>
    </tr>
    <!-- 更多的表格行 -->
  </tbody>
</table>

7.悬停行

在 Bootstrap 中，可以使用 .table-hover 类来使表格行在鼠标悬停时改变样式，增加交互性和视觉效果。

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Product A</td>
      <td>In Stock</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Product B</td>
      <td>Out of Stock</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Product C</td>
      <td>In Stock</td>
    </tr>
    <!-- 更多的表格行 -->
  </tbody>
</table>

8.强调

.text-primary, .text-secondary, 和 .text-success 是 Bootstrap 中用于设置文本颜色的类，它们分别用于强调不同类型的内容。

.text-primary： 这个类用于将文本设置为主要的、突出的颜色，通常是蓝色，用于突出显示页面中的重要信息或主要内容。

.text-secondary： 这个类用于将文本设置为次要的、辅助的颜色，通常是灰色，用于突出显示相对不那么重要的内容。

.text-success： 这个类用于将文本设置为成功的、积极的颜色，通常是绿色，用于突出显示成功或肯定的信息，比如操作成功或良好的状态。

这些类提供了一种简单的方式来改变文本的颜色，以便根据不同情况或语义对内容进行区分和突出显示。您可以根据具体需要将这些类应用到您的文本中。

2.表单

1.垂直表单布局

在 Bootstrap 中，垂直表单布局是一种将表单元素垂直排列的方法，而不是水平排列。

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

class="form-label" 是 Bootstrap 中用于标记表单标签样式的类。它用于定义表单元素的标签（label）的样式，使其符合 Bootstrap 的设计规范和风格。

class="form-control" 是 Bootstrap 框架中常用于表单元素的类。这个类为输入元素提供了一致的样式，并使其具备以下特征：

统一外观： 这个类定义了表单元素的默认样式，使得所有的表单元素（如输入框、下拉菜单等）都具有相似的外观，与 Bootstrap 设计风格保持一致。
相对宽度： 表单元素会占据其容器的100%宽度。这使得表单在不同尺寸的屏幕上都能够自动适应宽度。
边框和填充： 这个类为表单元素添加了合适的边框和填充，使其更加易于识别和操作。
配合其他样式使用： 这个类可以与其他 Bootstrap 类组合使用，比如 .form-group 用于包裹表单元素组，.col-* 用于栅格系统等等。

class="form-text" 是 Bootstrap 中用于创建表单辅助文本样式的类。

这个类通常用于包裹在表单元素旁边的帮助文本或者描述性文字，用于提供有关该表单元素的额外说明或提示信息。具体来说，form-text 类将文本呈现为较小的字号，带有默认的颜色和间距，使其在表单中作为辅助性的文字信息展示。

在 Bootstrap 中，.form-check 类是用于自定义复选框和单选框样式的基本类。如果你想要使用 Bootstrap 提供的样式来美化你的复选框和单选框，你需要将其包裹在一个具有 .form-check 类的容器元素中。

class="form-check-input" 是 Bootstrap 中用于设置表单复选框或单选框样式的类。

这个类通常应用于 <input> 元素，特别是用于创建复选框或单选框。它帮助定义了这些输入元素的外观和样式，使其符合 Bootstrap 的设计规范。

class="form-check-label" 是 Bootstrap 中用于设置表单复选框或单选框标签样式的类。

这个类通常应用于 <label> 元素，它与表单中的复选框或单选框一起使用，帮助定义标签的样式，使其符合 Bootstrap 的设计规范。

class="btn btn-primary" 是 Bootstrap 中用于设置按钮样式的类。

btn： 这个类指定了元素为一个按钮。

btn-primary： 这个类定义了按钮的主要样式，通常是蓝色背景，用于突出显示主要的操作或提交按钮。

2.水平表单布局

在 Bootstrap 中，水平表单布局（Horizontal Form Layout）可以通过将表单元素标签（<label>）与输入框元素（<input> 或 <select>）放置在同一行来实现。

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

class="form-group row" 是 Bootstrap 中用于创建表单组的类组合。.form-group： 这个类用于包装表单元素组，为其添加样式并提供一致的外观。它为表单元素之间添加了一些间距，使得它们在垂直方向上有一定的距离。.row 用于包装一行内的表单组件，使其在水平方向上排列。

3.内联表单布局

内联表单布局（inline form layout）在Bootstrap中是通过添加.form-inline类来实现的。这种布局使表单元素水平排列，而不是默认的垂直堆叠。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputUsername">Username</label>
    <input type="text" class="form-control" id="exampleInputUsername" placeholder="Enter username">
  </div>
  
  <div class="form-group mx-sm-3">
    <label for="exampleInputPassword">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

4.Bootstrap表单控件

1.复选与单选

在 Bootstrap 中，你可以使用 .form-check 和 .form-check-input 类来创建自定义的复选框（checkbox）和单选框（radio button）。

下面是一个创建自定义复选框的示例：

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

单选框的创建方式类似于复选框，只需要将 <input> 元素的 type 属性设置为 radio，示例如下：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>

name相同代表它们是同一组的单选框

第一个单选框中的checked代表默认选中

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">Option 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">Option 2</label>
</div>

加入form-check-inline使单选框或复选框并排显示

2.下拉选择框

在 Bootstrap 中，使用 <select> 元素创建下拉选择框（select box）时，可以添加 .form-select 类，它会对选择框应用 Bootstrap 样式。

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

5.静态表单控件

在 Bootstrap 中，使用 .form-control-plaintext 类可以创建静态表单控件，这类表单控件看起来像是静态文本而不是可编辑字段。

<form>
  <div class="mb-3">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="mb-3">
    <label for="staticPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" readonly class="form-control-plaintext" id="staticPassword" value="Password123">
    </div>
  </div>
</form>

readonly 属性：用于使输入框只读，防止用户对其进行编辑。它适用于所有类型的输入框，包括文本框、密码框等。但它并不会改变输入框的样式或外观。

.form-control-plaintext 类：用于将输入框呈现为只读的纯文本形式，不可编辑，并且通常会改变输入框的样式，使其看起来更像静态文本而不是表单控件。这个类通常用于将输入框的外观改变成类似于普通文本的样式，适用于展示静态内容而不需要用户交互的情况。

虽然两者都可以使输入框变为只读状态，但.form-control-plaintext 更多地关注于改变输入框的外观，使其看起来像是普通的纯文本而不是一个可编辑的表单控件。而 readonly 则更像是一种状态属性，只是简单地防止用户编辑输入框的内容。

6.from-control的大小

在 Bootstrap 中，你可以使用不同的类来调整表单控件的大小。通过应用不同的类，你可以改变表单控件（如输入框、下拉框等）的大小以适应你的设计需求。

以下是一些 Bootstrap 提供的调整表单控件大小的类：

.form-control-sm：使表单控件变小，适用于紧凑的布局和设计。
.form-control-lg：使表单控件变大，适用于需要更大输入框的情况，比如用于输入长文本或需要更显眼的输入框。

<input type="text" class="form-control form-control-sm" placeholder="Small input">
<select class="form-select form-select-lg" aria-label="Large select example">
  <option selected>Large select</option>
</select>

7.辅助文本

在 Bootstrap 中，表单元素可以附带辅助文本（Help Text），这些文本提供有关输入框内容或表单的额外说明信息。这些文本通常用于解释输入框中预期输入的内容或提供关于表单的其他指导。

<div class="mb-3">
  <label for="exampleInputPassword1" class="form-label">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword1">
  <div id="passwordHelp" class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</div>
</div>

在这个例子中，<div> 元素用作帮助文本的容器，它位于输入框后面。这个帮助文本提供了密码的要求和规范。你可以根据需要自定义帮助文本的样式或内容。

要创建表单帮助文本，你可以使用带有 .form-text 类的 <div> 元素，并将其放置在输入框后面。通过这种方式，你可以为每个输入框提供相关的辅助信息，帮助用户更好地理解他们需要输入的内容

8.表单验证

Bootstrap 提供了一套简单而强大的表单验证工具，帮助你在客户端验证用户输入的有效性。这些工具利用 HTML5 中的一些属性和类来实现验证，使得对用户输入的验证变得更加简单和直观。

1.必填字段验证

通过在 <input> 元素中添加 required 属性来标记必填字段。这将确保用户必须在提交表单之前填写这些字段。

<input type="text" class="form-control" required>

2.有效性验证

可以使用诸如 pattern、min、max 等属性在 HTML5 中进行有效性验证。Bootstrap 会利用这些属性来进行基本的有效性检查，比如输入是否匹配特定的模式或是否在指定范围内。

<input type="email" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
<input type="number" class="form-control" min="1" max="100">

3.自定义提示信息

使用 data- 属性为表单控件定义自定义的错误提示信息。通过设置 data-error 或 data-* 属性，你可以自定义错误信息。

<input type="text" class="form-control" required data-error="Please fill out this field">

4.使用 `.was-validated` 类

在提交表单后，为包含表单的父元素添加 .was-validated 类，这会触发 Bootstrap 的验证样式，显示出错误提示信息。

<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="validationCustom01" class="form-label">First name</label>
        <input type="text" class="form-control" id="validationCustom01" required>
        <div class="invalid-feedback">
            Please provide a valid first name.
        </div>
    </div>
    <div class="mb-3">
        <label for="validationCustom02" class="form-label">Last name</label>
        <input type="text" class="form-control" id="validationCustom02" required>
        <div class="invalid-feedback">
            Please provide a valid last name.
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
    var form = document.querySelector('.needs-validation');
    form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
            event.preventDefault(); // 阻止表单提交
            form.classList.add('was-validated'); // 添加 .was-validated 类以显示验证样式
        }
    });
</script>

在这个例子中，.needs-validation 类用于启用表单验证功能。当用户点击提交按钮并表单验证失败时，JavaScript 会检查表单的有效性，如果验证失败，则会阻止表单提交，并将 .was-validated 类添加到包含表单的 <form> 元素上。这样就会触发 Bootstrap 的验证样式，显示出验证错误信息。

5.JavaScript 可选

如果你需要更高级的自定义验证或更复杂的验证逻辑，可以使用 JavaScript 来完成。Bootstrap 提供了一些 JavaScript API 用于处理表单验证，比如使用 .checkValidity() 方法检查表单的有效性、或使用 .setCustomValidity() 方法自定义验证消息等。