bootstrap5初体验

学习链接

使用Bootstrap5编写网页，达到快速入门

注意

本文章不会写学到了什么，只会写学习bootstap5过程中遇到的问题，如想快速入门请看以上视频链接。

文档

英文文档
中文文档

引入

css

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

js

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

使用

直接使用bootstrap定义好的类名，甚至可以达到自适应效果

设计模式

代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。
同样的，bootstrap也有自己的设计模式，比如颜色：

还有字体大小，屏幕尺寸等等。

学到的小技巧

lorem 是自动填充一段文本
lorem2 自动两个单词
lorem*2 自动填充两端文本

遇到的问题

没有蓝色间隔。

因为card外层没有包裹