Bootstrap学习笔记

1 总览
2 Bootstrap网格系统
3 Bootstrap基础组件
4 Bootstrap高级组件

本文是笔者在业余时间学习Bootstrap框架时整理的笔记，通过本文，读者可以初步了解该框架的基本用法和前端开发的大体思路。

1 总览

官方文档：https://getbootstrap.com/docs/5.3/getting-started/introduction/
中文教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html

Bootstrap和jQuery都是JavaScript库，它们提供了一系列的JavaScript函数和样式，可以帮助开发者更方便地开发网页和应用程序。它们的引入方式是类似的，可以通过下载文件本地引入，或通过CDN链接的方式引入，这样可以方便地在开发过程中使用它们提供的功能。

使用CDN来引入Bootstrap：

<html lang="en">
  <head>
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  </body>
</html>

web代码在线预览：examples/starter at main · twbs/examples (github.com)
- 本文中记录的所有html代码都可以在上述页面中查看其实际渲染样式

使用Bootstrap开发前端页面的一般流程可以概括为以下几个步骤：

确定页面布局：使用Bootstrap提供的网格系统来确定页面布局，包括页面的栅格、行和列等。
添加组件：根据页面需求，选择合适的组件，如导航栏、表格、表单等，添加到页面中。
调整样式：根据实际需求，调整组件的样式，包括大小、颜色、字体等。
配置交互：使用JavaScript编写脚本，配置组件与后端的交互响应逻辑，实现页面的交互功能。

2 Bootstrap网格系统

2.1 核心特性

【响应式断点】

Bootstrap网格系统中的响应式断点（responsive breakpoints）是指在不同的屏幕尺寸下，网格系统的列数和宽度会发生变化。Bootstrap支持六个响应式断点，分别是超小型 (xs)、小型 (sm)、中型 (md)、大型 (lg)、超大型 (xl) 和巨型 (xxl)

【响应式容器类】

Bootstrap网格系统中的响应式容器类主要有以下几种：

.container：固定宽度容器，宽度根据屏幕大小而变化。在小屏幕设备上宽度为100%，在大屏幕设备上宽度为固定值（默认为1140px）
- 适用于大多数情况，特别是当您不确定要使用哪个容器类时
.container-fluid：100%宽度容器，宽度根据屏幕大小而变化。在小屏幕设备上宽度为100%，在大屏幕设备上宽度为100%
- 适用于需要100%宽度的全屏背景或者需要将内容铺满整个屏幕的情况
.container-sm、.container-md、.container-lg、.container-xl：这几个容器类可以根据设备屏幕大小自动调整宽度，适用于其他不同大小的设备和不同的显示需求。

【行列交互】

Bootstrap网格系统中通常使用行（Row）来包裹列（Column）。在该模式下，我们可以使用Bootstrap提供的Gutter类来控制列之间的间隔大小，并可以在行级别上设置一些类，来控制该行下的单个或多个列的大小。

在每一个行容器中，Bootstrap提供了12个模板列（template columns），我们可以将它们组合在一起，以创建不同的布局。比如我们可以在某列的类属性中指定 col-4 来指示该列占用4个模板列的宽度，这些宽度都是以百分比的形式设置的，因此很容易控制它们的相对大小。举个例子，如果我们想将某行划分为不等宽的三列，那么我们可以设置：第一列占用4个模板列的宽度，第二列占用6个模板列的宽度，第三列占用2个模板列的宽度。

预定义的网格类无法满足需求，那么用户也可以使用Bootstrap网格系统中的高级功能源Sass 来创建更灵活的布局。

2.2 固定布局

示例：

一行三列：

<div class="container text-center">
    <div class="row">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
    </div>
</div>

使用模板列来调整列宽：

<div class="container text-center">
    <div class="row">
        <div class="col">1 of 3</div>
        <div class="col-6">2 of 3 (wider)</div>
        <div class="col">3 of 3</div>
    </div>
    <div class="row">
        <div class="col">1 of 3</div>
        <div class="col-5">2 of 3 (wider)</div>
        <div class="col">3 of 3</div>
    </div>
</div>

2.3 响应式布局

示例：

使用响应式断点搭配 col-md-auto 来根据不同的屏幕尺寸自动化调整列宽：

<div class="row justify-content-md-center">
    <div class="col col-lg-2">1 of 3</div>
    <div class="col-md-auto">Variable width content</div>
    <div class="col col-lg-2">3 of 3</div>
</div>
<div class="row">
    <div class="col">1 of 3</div>
    <div class="col-md-auto">Variable width content</div>
    <div class="col col-lg-2">3 of 3</div>
</div>

第一个 div 使用了 justify-content-md-center 类来在中等屏幕大小时使其内容居中，第二个 div 使用了 col-md-auto 类来让其内容宽度自适应。

更多响应式布局示例可参考：https://v5.bootcss.com/docs/layout/grid/#responsive-classes

2.4 行列对齐

参考：https://v5.bootcss.com/docs/layout/columns/#alignment

行靠上/居中/靠下<div class="row align-items-start/center/end">

3 Bootstrap基础组件

Reboot（https://v5.bootcss.com/docs/content/reboot/）

Reboot是Bootstrap中的一组预定义的CSS样式，它们可以用于许多常见的HTML元素，以提供更一致、更简单的基础样式。
Reboot中包含的内容如下：
- 全局设置：包括全局字体大小、行高、颜色等。
- 排版：包括标题、段落、列表、引用等。
- 表单：包括表单控件、表单布局等。
- 按钮：包括按钮样式、大小、状态等。
- 图像：包括响应式图像、缩略图等。
- 响应式工具：包括显示和隐藏、断点等。

Typography（https://v5.bootcss.com/docs/content/typography/）

Bootstrap中的Typography是一种用于设置文本样式的CSS类集合
- 全局设置：包括基本的全局显示、排版和链接样式。例如，您可以使用.lead类设置段落的样式，使用.text-muted类设置文本的颜色等。
- 标题：包括六个级别的标题，从<h1>到<h6>。例如，您可以使用.h1类设置一级标题的样式，使用.h2类设置二级标题的样式等。
- 正文文本：包括正文文本、段落、引用和列表等。例如，您可以使用.text-center类将文本居中对齐，使用.blockquote类设置引用的样式等。
- 列表：包括无序列表和有序列表。例如，您可以使用.list-unstyled类将无序列表去除默认样式，使用.list-inline类将无序列表变为行内元素等。

除以上内容外，Bootstrap还实现了响应式图片、响应式表格等基础组件，这里暂时先不展开了。

4 Bootstrap高级组件

List group（https://getbootstrap.com/docs/5.3/components/list-group/#custom-content）

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
</div>

这段代码构造了一个自定义的 .list-group 列表组件，我们接下来具体分析一下它的代码：
- 第一行的类组合是：list-group-item list-group-item-action active，这里：
  - list-group-item：将元素渲染为列表组件的一个项（item），可以是文本、图像、按钮等
  - list-group-item-action：将元素渲染为提示可交互的列表项，当用户指针指向该项时会触发高亮效果
  - active：将元素渲染为当前激活状态的列表项，即该项被选中或处于当前页面的状态
- 第一行中包含了一个类为：d-flex w-100 justify-content-between 的div，这个类组合的作用是使列表项中的标题和时间戳分别靠左和靠右对齐，并且标题和时间戳之间的间距相等
  - d-flex 启用Flexbox Container，该容器可以对齐项目并管理项目之间的空间
  - w-100 表示设置元素的宽度为 100%
  - justify-content-between 表示在弹性盒子容器中，将子元素沿主轴方向（横向）进行分布，两端对齐，并且子元素之间的间隔相等
- 接下来的代码使用了bootstrap中 mb-1 这个类，该类用于设置元素的下边距（margin-bottom），以在相应元素的下方留出一定的空白，使得页面看起来更加美观、整洁。mb-1 中的“1”表示设置一个单位的下边距

posted @ 2023-05-03 17:20 云野Winfield 阅读(154) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

云野Winfield

抓住本质，看大做小，持之以恒