Bootstrap5基础教程(一)

Bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的WEB项目。

1.BootStrap5

Bootstrap 是最风行的 CSS 库之一。它容许开发人员轻松应用丑陋的款式和组件并创立响应式网站。 Bootstrap5 于2021年5月公布,带来了大量的变动和改良，包含增加新组件、新类、旧组件的新款式、支持更新的浏览器等等。Bootstrap5相对于bootstrap4 有哪些调整呢？

放弃了对 jQuery 的依赖，需要 dom 操作的，也改为原生方法，比如：querySelector。
放弃了对 IE 浏览器的支持，没有了这个包袱，也能轻装上阵，用上一些比较新的 CSS 特性。
更新表单控件。
网格的调整，添加了 gutter 的支持。
增加了 offcanvas 组件，方便把菜单栏展示在页面左侧。
RTL 支持，这是对一些从右到左书写的文字支持。比如阿拉伯语。
data 属性命名空间修改，从 data- 改为 data-bs-，中间多了 bs，避免属性冲突。
Popper v1.x 升级到 Popper v2.x。
增加了 xxl container，container-xxl 对应的宽度为：1320px。
添加了新的手风琴组件。
ml 改为 ms，mr 改为 me，pl 改为 ps，pr 改为 pe，也就是之前的 left 改为 start，right 改为 end，所以缩写也改了。

其他还有一些没有一一列出，有兴趣的朋友可以到官网了解。

2.第一个bootstrap页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap5案例</title>
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.5.4/umd/popper.min.js"></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>这是一些文本。</p>
</div>
<style>
    .container{
        padding-top: .75rem;
        padding-bottom: .75rem;
        background-color: rgba(39,41,43,0.03);
        border: 1px solid rgba(39,41,43,0.1);
    }
    .row > .col, .row > [class^="col-"] {
        padding-top: .75rem;
        padding-bottom: .75rem;
        background-color: rgba(39,41,43,0.03);
        border: 1px solid rgba(39,41,43,0.1);
    }
</style>
</body>
</html>