bootstrap怎么使用：两种引入方式实操

bootstrap怎么使用，主流分为CDN引入和本地文件引入两种路径，CDN适合快速做演示页面、临时原型，你只需要在HTML头部粘贴官方链接，不用下载文件，本地引入适合离线项目、内网站点、需要自定义源码样式的场景，两种方式都要求页面开头添加HTML5文档声明，搭配视口meta标签适配移动端，该方案的适用边界是面向前端页面开发人员，不适合服务端纯脚本、桌面客户端程序开发，且版本优先选择5.x系列，4.x系列部分类名和组件写法存在差异，不能直接混用。

bootstrap引入配置

CDN引入时，你要依次引入样式CSS文件、JS文件，搭配Popper.js用于弹窗、下拉菜单这类交互组件，CSS链接放在head标签内部，JS脚本放在body标签末尾，减少页面阻塞。直接复制Bootstrap官方提供的稳定CDN地址即可，不要随意使用第三方非官方镜像，避免资源加载不稳定。

本地引入的操作是前往Bootstrap官网下载编译好的dist压缩包，解压后把css文件夹、js文件夹放进项目根目录，在HTML中用相对路径引用文件，修改源码变量、覆盖默认样式时，推荐单独新建自定义css文件，放在bootstrap样式文件之后加载，样式优先级更高。

bootstrap栅格系统使用

栅格是bootstrap最常用的布局能力，三层结构固定为container容器、row行、col列。container会自带左右内边距，限制内容最大宽度，container-fluid则撑满整个浏览器宽度。一行row里面包裹多个col，列宽可以按屏幕断点设置，断点包含xs、sm、md、lg、xl，对应不同设备宽度。

写布局代码时，不要直接给col外层元素加外边距，容易破坏栅格对齐，间距控制优先使用框架自带的间距工具类，mt、mb、ms、me分别对应上、下、左、右外边距，数字代表间距档位。

bootstrap组件与工具类调用

内置组件直接添加对应class就能渲染，按钮用btn加btn-primary，卡片用card容器包裹卡片头、卡片主体内容，下拉框、模态框这类交互组件，必须保证JS文件正常加载，缺少JS会出现点击无响应的情况。你不用手写大量CSS，优先调用自带工具类完成排版、颜色、边框控制。

类名写错，组件样式会直接失效，这是高频出错点。

自定义样式覆盖bootstrap默认样式时，选择器权重需要高于框架原有选择器，你可以在自定义css里组合标签和类名提升权重，不建议直接修改原框架css文件，后续升级版本会覆盖修改内容，增加维护成本。

开发完成后，你可以使用W3CHTML验证服务检查页面代码结构，确认标签嵌套、资源引用路径没有语法错误，减少页面在不同浏览器里的渲染差异。