Bootstrap5学习笔记

糖糖小朋友1229

已于 2022-04-15 00:16:23 修改

阅读量1.2k

点赞数

文章标签： bootstrap

于 2021-10-20 14:59:14 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48778425/article/details/120866396

版权

这篇博客详细介绍了Bootstrap5的各个核心部分，包括布局、页面内容、表单、组件和助手工具的使用。从网格系统、表单控件到警告框、模态框等组件的创建，再到背景颜色、定位等工具的使用，全面覆盖Bootstrap5的主要功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、布局

1.1 网格

先div.container，再div.row + div.col，例如col-6，col-md-2代表当宽度大于md≥768px才生效

1.2 列

掌握垂直对齐 + 水平对齐 + offset列偏移 + 独立列的示例（演示图片+环绕文字）

1.3 列填充

写在row上，gx-5 水平方向，gy-5 垂直方向间隙，g-5 水平垂直同时都有列间隙，g-0 是无间隙

二、页面内容

2.1 排版

标题 + 显示标题（比h1-h6还大）+ 内联文本元素（下划线，删除线，斜体等）+ 列表无样式和列表在一行显示 + lean 是对p标签的加强

2.2 图片

w-50（图片宽度50%）+ img-fluid 响应式图片 + img-thumbnail 提供包框和圆角 + 图片排列左中右 

<img src="..." class="rounded">		这是图片带圆角
<img src="..." class="rounded-circle">	这是圆形图片，可用于头像
<img src="..." class="rounded-pill">	这是椭圆形图片

2.3 表

table-hover悬停效果 + table-bordered 有边框 + align-middle 居中对齐 + table-striped 条纹表 + tfoot + caption 表格标题

2.4 画像

这是图片 + 图片底下一行说明文字，直接复制第二个示例并修改成text-center

三、表单

label与input，for与id一样，所以点标题，输入框就响应了

aria-label是残障人士，可删除

表单组件，都要有form标签

3.1 表单控件

文件上传 + 搜索框用的数据列表

3.2 表单选择

看第一个示例就行

3.3 单选多选框

多选框 + 单选框 + 开关（只是样式更好看） + 在一行显示单多选 + 按钮实现单多选

3.4 范围

表单的进度条,最小值，最大值，步长，value是起始位置

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

3.5 输入组

看第一个示例就行

3.6 浮动标签

这个只是做的好看点，可用可不用

看第一个示例 + 文本区域

textarea要加placeholder，高度不要row要style="height:100px"

3.7 表单验证

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href=".//css/bootstrap.min.css">
  <script src=".//js/jquery.js"></script>
  <script src=".//js/bootstrap.bundle.min.js"></script>
  <title>表单验证简单页面</title>
</head>

<body>
  <div class="container mt-3">
    <form class="form" action="#" method="post">
      <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">用户名：</label>
        <input type="text" class="form-control username flag" id="exampleFormControlInput1" name="username" placeholder="请输入用户名">
        <div class="invalid-feedback"></div>
      </div>

      <div class="mb-3">
        <label for="exampleFormControlInput2" class="form-label">密码：</label>
        <input type="password" class="form-control password flag" id="exampleFormControlInput2" name="password" placeholder="请输入密码">
        <div class="invalid-feedback"></div>
      </div>

      <div class="form-check">
        <label class="form-check-label" for="flexCheckDefault">我已经阅读并接受该协议</label>
        <input class="form-check-input agree flag" type="checkbox" id="flexCheckDefault">
        <div class="invalid-feedback"></div>
      </div>

      <div class="mt-3">
        <input class="btn btn-outline-primary" type="submit" value="登录">
      </div>
    </form>
  </div>
</body>

<script>
  //验证用户名长度大于六位
  $('.username').on('blur', function () {
     
    var username = $(this).val();
    if (username.length < 6) {
     
      $(this).data({
     's':0});
      $(this).removeClass('is-valid').addClass('is-invalid');
      $(this).next('.invalid-feedback').html('用户名长度至少六位');
    } else {
     
      $(this).data({
     's':1});
      $(this).removeClass('is-invalid').addClass('is-valid');
    }
  });

  //验证密码长度大于六位
  $('.password').on('blur', function () {
     
    var password = $(this).val();
    if (password.length < 6) {
     
      $(this).data({
     's':0});
      $(this).removeClass('is-valid').addClass('is-invalid');
      $(this).next('.invalid-feedback').html('密码长度至少六位');
    } else {
     
      $(this).data({
     's':1});
      $(this).removeClass('is-invalid').addClass('is-valid');
    }
  });

  //是否同意协议验证
  $('.agree').on('change', function () {
     
    var agree = this.checked;
    if (agree==false) {
     
      $(this).data({
     's':0});
      $(this).removeClass('is-valid').addClass('is-invalid');
      $(this).next('.invalid-feedback').html('请勾选协议！');
    } else {
     
      $(this).data({
     's':1});
      $(this).removeClass('is-invalid').addClass('is-valid');
    }
  });

  //提交按钮，需要校验
  $('.form').on('submit', function () {
     
    var agree = this.checked;
    $('.username').blur();
    $('.password').blur();
    $('.agree').change();

    var t=0;
    $('.flag').each(function(){
     
      t=t+$(this).data('s');
    });
    if(t==3){
     
      $(this).attr({
     'action':'http://www.baidu.com'});
    }
  });
</script>

</html>

四、组件

组件的使用需要先引入jquery.js 和 bootstrap.bundle.min.js，对应的map文件都要放文件夹

4.1 手风琴

看第一个示例，在accordion-body上面的一行，看情况要不要把show删了
data-bs-target指向打开的列表内容
data-bs-parent指向最大的accordion

4.2 警告框

// 演示关闭警告框后的事件，此为弹出黑色背景页面


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href=".//css/bootstrap.min.css">
  <script src=".//js/jquery.js"></script>
  <script src=".//js/bootstrap.bundle.min.js"></script>

  <title>Document</title>
</head>

<body>
  <div class="container mt-3">

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Holy guacamole!</strong> You should check in on some of those fields below.
      <button type="button" class="btn-close

最低0.47元/天解锁文章