← 返回首页
Bootstrap5基础教程(一)
发表时间:2022-06-09 23:29:58
Bootstrap5简介

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

1.BootStrap5

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

  1. 放弃了对 jQuery 的依赖,需要 dom 操作的,也改为原生方法,比如:querySelector。
  2. 放弃了对 IE 浏览器的支持,没有了这个包袱,也能轻装上阵,用上一些比较新的 CSS 特性。
  3. 更新表单控件。
  4. 网格的调整,添加了 gutter 的支持。
  5. 增加了 offcanvas 组件,方便把菜单栏展示在页面左侧。
  6. RTL 支持,这是对一些从右到左书写的文字支持。比如阿拉伯语。
  7. data 属性命名空间修改,从 data- 改为 data-bs-,中间多了 bs,避免属性冲突。
  8. Popper v1.x 升级到 Popper v2.x。
  9. 增加了 xxl container,container-xxl 对应的宽度为:1320px。
  10. 添加了新的手风琴组件。
  11. 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>