Bootstrap系列之初始化

2022年10月23日 187点热度 0人点赞 0条评论

1、引入 CSS 文件

复制以下 <link> 标签并粘贴到 <head> 标签内,注意,务必放到其它所有 CSS 样式前面

<link rel="stylesheet" href="./css/bootstrap.min.css" />

2、引入 JS 文件

Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说,这些组件依赖 jQueryPopper 以及我们自己开发的 JavaScript 插件。

复制下面的 <script> 标签 粘贴到页面底部,并且是在 </body> 标签之前,就能起作用了。

2.1、集成包

Bootstrap包含Popper

<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/bootstrap.bundle.min.js" integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi" crossorigin="anonymous"></script>

2.2、分开加载

务必按如下顺序加载。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IjeXbuVdL81ilB5LykkImU8JN0WPja/i9uZAt2qjo2TnYk9NJ2MPfN3vzMH0R8n3" crossorigin="anonymous"></script>

3、HTML5 文档类型(doctype)

Bootstrap 要求文档类型(doctype)是 HTML5。

<!doctype html>
<html lang="zh-CN">
  ...
</html>

4、响应式布局相关的标签

Bootstrap 采用的是 移动设备优先(mobile first) 的开发策略,因此,我们首先为移动设备优化代码,然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放,请务必在 <head> 标签中 添加让 viewport(视口)支持响应式布局的标签。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

5、CSS 盒模型

为了让 CSS 中的尺寸设置更加直观,我们将全局的 box-sizing 从 content-box 调整为 border-box。

在为数不多的情况下,你需要专门覆盖这一些设置,可以使用如下示例代码:

.selector-for-some-widget {
  box-sizing: content-box;
}

6、支持的浏览器

支持 Internet Explorer 10-11 / Microsoft Edge 浏览器。

89550Bootstrap系列之初始化

这个人很懒,什么都没留下

文章评论