bootstrap5.x基础语法(一)

jayLog

已于 2022-01-27 19:16:07 修改

阅读量1.7k

点赞数 1

分类专栏：蓝桥web 文章标签： bootstrap 前端 css

于 2022-01-21 16:35:55 首次发布

本文链接：https://blog.csdn.net/jayLog/article/details/122624221

版权

蓝桥web 专栏收录该内容

29 篇文章 5 订阅

订阅专栏

内容主要包括以下三个大块

布局
页面内容
表单

前置准备:到官网或者中文网下载好bootstrap5.x的包。其次是页面的基本文件引入，css文件在头部引入，js文件在底部引入确保能读取到节点。如下：

<!doctype html>
<html lang="en">
  <head>
    <!-- 必须要引入 viewport的规则 确保实现正确的响应式布局行为 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- 方式 1: 直接引入打包后的文件 ,确保路径是正确  -->
    <script src="dist/js/bootstrap.bundle.min.js" ></script>

    <!-- O方式2: 分开引入文件，最终的效果和方式1一样 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

一、布局

断点（熟记）

断点即临界点。例如说手机端屏幕分辨率最大为576px，那么576px就是一个断点，一旦超过了576px，那么就判定设备不是手机。

响应式不是逐渐变化的，而是达到临界点瞬间变化的。倘若我们某个单元格占12个位置，设置了临界值sm(屏幕大小>=576px)时单元格6个位置。那么在576px之前，单元格默认占12个位置，一旦超过了576px，单元格就变为占用6个格子

bootstrap中定义了如下几个临界点：

断点	中缀	范围(px)
Small（小，平板或者老笔记本）	sm	>=576
Medium（中，窄屏电脑）	md	>=768
Large（大，宽屏电脑）	lg	>=992
Extra large（超大，宽屏电脑）	xl	>=1200
Extra extra large（特大，高清电脑或广告设备）	xxl	>=1400

容器（了解一下）

容器是bootstrap最基本的布局元素。它的容器类型有以下三种：

container, 默认容器，其宽度为在每个响应断点处之前，都是前一个断点的最大宽度。
container-fluid, 流式容器，始终占浏览器宽度的100%
container-{breakpoint}, 断点容器，在到达该断点前，其宽度始终占浏览器宽度的100%，在到达断电后，其宽度始终为断点最大宽度。其中断点值为以下几个值

{breakpoint}: 断点中缀。可用值： sm、md、lg、xl、xxl

栅格系统（重点来了）

首先，栅格系统需要包裹在容器内！<div class="container"></div>

栅格系统把容器横切为了一个或个行<div class="row"></div>

然后！每个行被划分为了12个位置，根据需要对单元格进行划分，比如说一个单元格要占3个位置，那么就是:<div class="col-6"></div>，当然，我们也可以做响应式，小屏幕设备(sm)占6个位置,中设备上占3个位置那么:<div class="col-sm-6 col-md-3"></div>

具体上个代码容易理解一点

...
<style type="text/css">
div{
    border:1px solid red;
}        
    </style>

<div class="container">
    <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
    </div>
    <div class="row">
        <div class="col-4">4</div>
        <div class="col-4">4</div>
          <!-- 没有的话规定占用多少则自动填充剩下部分 -->
        <div class="col">4</div>
    </div>
<!-- 单元格里可以嵌套行,行的宽度取决于父级单元格的大小 -->
    <div class="row">
        <div class="col-4">
            <div class="row">
                <div class="col-1">1</div>
                <div class="col-2">2</div>
                <div class="col-9">9</div>
             </div>
        </div>
    </div>
</div>
...

效果如下，（栅格布局的高度是有内容撑起的）

在这里插入图片描述

间隙

这部分我没搞懂，待续~~

布局通用类

元素显示方式

语法： d-{value},d-{break-point}-{value}

value可用值： none``inline``inline-block``block``grid``table``table-cell``table-row``flex``inline-flex

例子：

// 默认隐藏，到中屏幕设备时显示
<div class="d-none d-md-block"></div>

边距

语法设定： {m|p}{r|l|b|t|x|y|}-{size} (例如：mr-4、m-4、mt-4…)

翻译一下：m：margin，p：padding，r：right ，l：left，t:top，b:bottom，x：(r+l)，y：（t+b）

size范围设定：

值	范围
0	0
1	$spacer * .25
2	$spacer * .5
3	$spacer
4	$spacer * .1.5
5	$spacer * 3

例子：

// 左右外边距为3
<div class="mx-3"></div>
// 四边的外边距为3
<div class="m-3"></div>

显示和隐藏

带有.invisible类别的元素，属性将都在视觉上与屏幕阅读器的用户中隐藏。只是隐藏，还是会占着位置

语法： invisible|visible

例子：

// 隐藏
<div class="invisible">...</div>
// 隐藏反的反操作
<div class="visible">...</div>

堆叠层级（z-index）（这部分要求我们熟知，但不鼓励定制这些数值）

我们需要在我们的分层组件（工具提示、弹出框、导航栏、下拉菜单、模式）中使用这些标准集，以便我们可以在行为上保持合理一致。bootstra给这些组件定义了不同的层级：

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

二、页面内容

reboot（了解即可）

当你引入bootstrap.css后发现页面发生了写微妙的变化， bootstrap为页面的将页面的基础元素做了一些优化，使得它更加更能为我们接受。

它重写了包括但不限于p、div、ul、li、input、form、section的标签样式

文字排版（Typography）重要

标题

h1-h6 例如：<h1>最大标题</h1>。除此之外，如果你想突出标题，可以考虑用display heading以获得更大、更细、稍具有风格化的标题样式

语法： display-{size}

size范围： 1-6 （数值越大字体越小）

例如： <div class="display-1">display head</div>

前导主题

使用.lead让一个段落脱颖而出。

<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>

内联文本元素【这里不做多演示】

.mark 高亮
.small 小字体
.text-decoration-underline下划线
.text-decoration-line-through 删除线

来源引用【例如引用了鲁迅先生的话】

语法：用

来包裹引用</blockquo class=“blockquote”>和作者

例子：

<figure>
<blockquote class="blockquote">
我没有说过这话，不过确实有理
</blockquote>
<figcaption class="blockquote-footer">
鲁迅
</figcaption>
</figure>

效果：
在这里插入图片描述

列表

a. 去除列表项符号

语法： .list-unstyled

例子： <ul class=”list-unstyled“><li></li></ul>

b. 去除ul的列表项符号，并添加少许margin

例子：

<ul class="list-inline">
    <li class="list-inline-item"></li>
    <li class="list-inline-item"></li>
    <li class="list-inline-item"></li>
</ul>

图片

通过 Bootstrap 所提供的.img-fluid 类让图片支持响应式布局。其原理是将max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放

例子：

<img src="..." class="img-fluid" alt="...">`

除了它提供的 border-radius utilities 外，我们还可以使用.img-thumbnail 使图片的外观具有 1px 宽度的圆形边框。

<img src="..." class="img-thumbnail" alt="...">

表格(熟练)

由于<table>横跨其他第三方套件广泛的使用，像是calendars和date pickers，因此可选择使用Bootstrap的表格。在任何<table>加上基本类别 .table，接着使用我们的可选修饰类别或是自定义样式进行扩展。

给表格定义颜色

语法： table-{style}

style：可用值：

primary、secondary、success、danger、warning、info、light、dark

例子： <table class="table table-primary"></table>

表格的条纹（一行深色一行浅色)，可与style搭配食用

语法： table-striped

例子：<table class="table table-danger table striped"></table>

表格行悬停效果（hover）

语法: table-hover

例子： <table class="table table-hover"></table>

通过添加.table-active高亮显示表行或单元格

例子：

<table class="table">
<thead>
...
</thead>
<tbody>
<tr class="table-active">
...
</tr>
<tr>
...
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

三、表单（重要）

bootstrap在表单上为我们分了以下几大类：控件类、下拉列表、范围选择。功能上：有输入组合、浮动标签、表单验证

控件类(包括：文本框、文本域、数字、文件、颜色、邮箱、手机号)

a. 基础类： form-control

b. 设置大小(大小是额外的类)：form-control-{size}

size取值：lg、sm、{默认，即不加}

例如：<input class="form-control form-control-sm" />

其他属性：禁用和只读文本

禁用使用原生的disabled属性、只读使用readonly只读输入看起来更轻（就像禁用的输入一样）。只读文本的话，除了加上只读属性还要添加form-control-plaintext类名

例子：

<div class="mb-3">
<!-- 普通控件 -->
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<!-- 只读文本 -->
    <input type="email" class="form-control-plaintext"  readonly/>
</div>
<div class="mb-3">
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

c. 文件：也是控件类

d. 颜色：

颜色和大小一样，是属于额外的类。颜色选择器type要改为color

基础类：form-control-color

例如：

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

下拉列表

基础类： form-select

例子：

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

-设置大小

语法： form-select-{size code}。取值: sm、lg(设置大小是额外的类)

例子：如上例子

-禁用

标签加入disabled属性即可

单选和多选

基类： form-check

先看案例：

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

是否有点疑惑？前面的控件直接加类名即可，这里为什么需要多一层div呢？答案是：因为引入了开关组件（switch）【本质上还是多选\单选】。如下

<div class="form-check form-switch">
     <input class="form-check-input" name="ckb[]" type="checkbox" value="" id="defaultCheck1">
     <label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
 <div class="form-check form-switch">
     <input class="form-check-input"  name="ckb[]" type="checkbox" value="" id="defaultCheck1">
     <label class="form-check-label" for="defaultCheck1">
Checked switch
</label>

效果大概是这样的

在这里插入图片描述

-内联，假如说你希望单选个多选再同一行上(bootstrap默认改为了块级元素)，那么：

通过将.form-check-inline添加到.form-check，将复选框或单选框在同一水平行上分组显示。

例如：

<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">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">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

总结就是：需要一个外层的form-check，input还需要添加form-check-input类名，关联文本需要添加form-check-label类名

范围选择（Range）

语法：使用 <input type="range"> 创建自定义控件。需要添加类名form-range

禁用：一样是添加添加disabled属性
最大值、最小值和间距：max设置最大值，min设置最小值，step设置间距

需要说明的是间距,间距就是每次滑动选择器的最小增量或减量。看一个完整案例：

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

效果如下：
在这里插入图片描述

输入组合

输入组合是把一个或活个表单元素组合到一块。每个表单组件都是有四边圆角的，组合后会消除掉除了多余圆角。

效果如下,示例中每行都是一个组合：

在这里插入图片描述

定义一个组合的语法类名为：input-group

组合内直接放入表单元素即可。如果需要添加组合文本，需要添加组合文本类input-group-text，上面示例中，灰色背景的字体即组合文本。

定义输入组合的大小，定义大小是额外的类名

语法：input-group-{size}

size取值： sm、lg

例子：<div class="input-group input-group-sm"></div>

看一个案例来消化一下:

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>

效果如下:

在这里插入图片描述

浮动标签

在.form-floating 中包装一对<input class="form-control">和<label>元素，以启用带有Bootstrap文本表单字段的浮动标签。<input>必须放在第一位！！！

可使用的地方：文本域、下拉框、布局中

例子：

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>

表单的验证

验证类：

用于input提示：is_valid(正确提示)、is_invalid(错误提示)
用于输入框下边的提示框的： invalid-feedback、valid-feedback。注意：必须跟在input之后

  <form class="row g-3"> 
   <div class="col-md-4"> 
    <label for="validationServer01" class="form-label">First name</label> 
    <input type="text" class="form-control is-invalid" id="validationServer01" value="Mark" required="" /> 
    <div class="valid-feedback">
      Looks good! 
    </div> 
    <div class="invalid-feedback">
      invalid! 
    </div> 
   </div> 
  </form>

关于验证类，需要说明一下，文档里面距离挺多看的挺复杂的。bootstrap为我们提供的是验证的静态样式，动态的样式还需要添加一点js。

input提示类和文本提示类两者的同步关联是通过input的验证类来实现的。

流程是：判断input中的验证类是is-invalid还是is-valid。假如说使用了is-valid，input边框变为绿色，还会追加成功的icon，在输入框之后有文本提示类valid-feedback,的话，会显示出来；另一种情况，is-invalid，input边框变为警告色，追加警告icon，在输入框之后有文本提示类invalid-feedback的话，会将该该提示显示出来，然后隐藏掉valid-feedback

end：第一部分结束，后续还有第二部分：组件和统用类

jayLog

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录