2021 Bootstrap 5 多屏幕自适应纯新手上路发车(1)

一个人懂得什么是真正的爱，才能够是一个真正成熟的人；否则你经常会看到很多人以爱的名义在伤害，控制，占有对方，，那么爱究竟是什么呢？为了促进自己和他人心智成熟，而不断拓展自我界限，实现自我完善的一种意愿，要看重心智成熟这件事情，心智成熟是我发生在你和被爱的那个人之间的两个人都需要达成心智成熟，这个是真正的爱；

2021 Bootstrap 5 多屏幕自适应纯新手上路发车(1) 这是一个不与人见面也能活的很好的年代，也能活得很好的年代，反而有点想与人相遇；选择Bootstrap从4开始抛弃float采用flex，到现在5 jq不见了之后好感度大增；

如果要说因为什么要选择Bootstrap，我相信大多数人都是因为目前它是主流的css框架之一，另外一个绝对是自适应多屏幕；当然除了Vue之外，因为百度对Vue不是很友好，相反如果我讨厌它呢？那一定是它的移动端菜单，越说越气

本文想通过基础的使用操作，能够快速熟悉多屏幕的自适应上手

注意

最开始的声明标签中要添加lang="en"，不然你在使用过程中会有奇奇怪怪的样式

<!doctype html>

<html lang="en">

</html>

导入文件

文件主要使用bootstrap.min.css和bootstrap.bundle.min.js，我们也可以使用在线的方式，但建议使用本地的版本；

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>

容器

容器样式文章最重重要的一个环境，因为他自适应由他控制；使用删格系统就必须在原始容器.container下

<div class="container"></div>

删格系统

Bootstrap把页面分成12个格子，也就是我们所说的删格系统；记住唯一的要点格子总和不能超过12，此外在用之前上一级必须要有rom标签

<div class="row"></div>

有了rom之后才可以使用格子，格子也有不同类型针对不同屏幕

2021 Bootstrap 5 多屏幕自适应纯新手上路发车(1)

对于一个在N年前一只脚小拇指踩入Bootstrap的人来说(到现在基本都不会了)，基本一套界面下来md足够了，如不不是有很特俗的需求之外

案例1:Bootstarp 扁平化风格个人/工作室/物品展示源码

案例2:红色小型新闻类网站源码基于Bootstrap框架

简单操作

<div class="row">
  <div class="col-md-4">
    <div class="card border-info md-3 ">
      <div class="card-header">Header</div>
      <div class="card-body text-info">
        <h5 class="card-title">Info card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
          card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-primary md-3">
      <div class="card-header">Header</div>
      <div class="card-body text-primary">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
          card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-success md-3">
      <div class="card-header">Header</div>
      <div class="card-body text-success">
        <h5 class="card-title">Success card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
          card's content.</p>
      </div>
    </div>
  </div>
</div>