![Bootstrap从入门到项目实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/95/27738095/b_27738095.jpg)
上QQ阅读APP看书,第一时间看更新
2.3.1 本地安装
移动设备优先,Bootstrap 4不同于历史版本,它首先为移动设备优化代码,然后用CSS媒体查询来扩展组件。为了确保所有设备的渲染和触摸效果,必须在网页的<head>区添加响应式的视图标签,代码如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P26_11391.jpg?sign=1738839144-g3STNJouUQwWC6Q6V0rZAydVXSveyNpz-0-63984fa57b1316294f7a5fb1fa31ed34)
接下来安装Bootstrap,需要以下两步。
第1步:安装Bootstrap的基本样式,在<head>标签中,使用<link>标签调用CSS样式,这是常见的一种调用方法。另外还需要包含一个viewportmeta标记来进行适当的响应行为。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P26_1091.jpg?sign=1738839144-D87RBDF3Qh5rpSNuuGVkiW2c789I77jn-0-1aa310e83cb7a0450e00f32c9d5719dc)
其中bootstrap.css是Bootstrap的基本样式,style.css是项目自定义的样式。
注意
调用必须遵从先后顺序。style.css是项目中的自定义样式,用来覆盖Bootstrap中的一些默认设置,便于开发者定制本地样式,所以必须在bootstrap.css文件后面引用。
第2步:CSS样式安装完成后,开始安装bootstrap.js文件。方法很简单,按照与CSS样式相似的引入方式,把bootstrap.js和jquery.js引入页面代码中即可。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P26_1095.jpg?sign=1738839144-rMULvkfNRYgzn6AbKRqLkWXSdWYup8pc-0-28c429398659ea7364fa7be6fa462ccb)
其中jquery.js是jQuery库基础文件;Popper.js是一些Bootstrap插件依赖的文件,例如,弹窗插件、工具提示插件、下拉菜单插件等;bootstrap.js是Bootstrap的jQuery插件的源文件。JavaScript脚本文件建议置于文档尾部,即放置在</body>标签的前面。