botstrap4(自带轮播) · PHP笔记

popper.min.js 用于设置弹窗、提示、下拉菜单，是第三方插件，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 [Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库 (bootcss.com)](https://icons.bootcss.com/) ```  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` bootstrap.bundle.min.js它里面包含bootstrap.min.js和popper.min.js ~~~bash <link rel="stylesheet" href="app/style/css/bootstrap.min.css" >  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <script src="app/style/js/jquery-3.4.1.min.js"></script> <script src="app/style/js/bootstrap.bundle.min.js"></script> ~~~ ## JS 文件[](https://v4.bootcss.com/docs/getting-started/contents/#js-%E6%96%87%E4%BB%B6) 类似的，我们还提供了一些选择，你可以引入部分或全部的预编译 JavaScript。 | JS 文件 | Popper | jQuery | | --- | --- | --- | | bootstrap.bundle.js、bootstrap.bundle.min.js| 已包含 | 未包含 | | bootstrap.js、bootstrap.min.js| 未包含 | 未包含 | ## CSS 文件[](https://v4.bootcss.com/docs/getting-started/contents/#css-%E6%96%87%E4%BB%B6) Bootstrap 为你提供了一些选择，你可以引入部分或全部预编译的 CSS。 | CSS 文件 | Layout([布局](https://v4.bootcss.com/docs/layout/overview/)) | Content([页面内容](https://v4.bootcss.com/docs/content/reboot/)) | Components([组件](https://v4.bootcss.com/docs/components/alerts/)) | Utilities([工具类](https://v4.bootcss.com/docs/utilities/borders/)) | | --- | --- | --- | --- | --- | |bootstrap.css、bootstrap.min.css| 已包含 | 已包含 | 已包含 | 已包含 | | bootstrap-grid.css、bootstrap-grid.min.css| [Only grid system](https://v4.bootcss.com/docs/layout/grid/) | 未包含 | 未包含 | [Only flex utilities](https://v4.bootcss.com/docs/utilities/flex/) | | bootstrap-reboot.css、bootstrap-reboot.min.css| 未包含 | [Only Reboot](https://v4.bootcss.com/docs/content/reboot/) | 未包含 | 未包含 | [布局](https://v4.bootcss.com/docs/layout/overview/) * [栅格系统](https://v4.bootcss.com/docs/layout/grid/) * [布局工具](https://v4.bootcss.com/docs/layout/utilities-for-layout/) [页面内容](https://v4.bootcss.com/docs/content/reboot/) * [Reboot(统一初始css)](https://v4.bootcss.com/docs/content/reboot/) * [排版](https://v4.bootcss.com/docs/content/typography/) * [代码（Code）](https://v4.bootcss.com/docs/content/code/) * [图片（Images）](https://v4.bootcss.com/docs/content/images/) * [表格（Tables）](https://v4.bootcss.com/docs/content/tables/) * [画像（Figures）](https://v4.bootcss.com/docs/content/figures/) [组件](https://v4.bootcss.com/docs/components/alerts/) * [警告框（Alerts）](https://v4.bootcss.com/docs/components/alerts/) * [徽章（Badge）](https://v4.bootcss.com/docs/components/badge/) * [面包屑导航（Breadcrumb）](https://v4.bootcss.com/docs/components/breadcrumb/) * [按钮（Buttons）](https://v4.bootcss.com/docs/components/buttons/) * [按钮组（Button group）](https://v4.bootcss.com/docs/components/button-group/) * [卡片（Card）](https://v4.bootcss.com/docs/components/card/) * [轮播（Carousel）](https://v4.bootcss.com/docs/components/carousel/) * [折叠（Collapse）](https://v4.bootcss.com/docs/components/collapse/) * [下拉菜单（Dropdowns）](https://v4.bootcss.com/docs/components/dropdowns/) * [表单（Forms）](https://v4.bootcss.com/docs/components/forms/) * [输入组（Input group）](https://v4.bootcss.com/docs/components/input-group/) * [巨幕（Jumbotron）](https://v4.bootcss.com/docs/components/jumbotron/) * [列表组（List group）](https://v4.bootcss.com/docs/components/list-group/) * [媒体对象（Media object）](https://v4.bootcss.com/docs/components/media-object/) * [模态框（Modal）](https://v4.bootcss.com/docs/components/modal/) * [导航（Navs）](https://v4.bootcss.com/docs/components/navs/) * [导航条（Navbar）](https://v4.bootcss.com/docs/components/navbar/) * [分页（Pagination）](https://v4.bootcss.com/docs/components/pagination/) * [弹出框（Popovers）](https://v4.bootcss.com/docs/components/popovers/) * [进度条（Progress）](https://v4.bootcss.com/docs/components/progress/) * [滚动监听（Scrollspy）](https://v4.bootcss.com/docs/components/scrollspy/) * [旋转图标（Spinners）](https://v4.bootcss.com/docs/components/spinners/) * [轻量弹框（Toasts）](https://v4.bootcss.com/docs/components/toasts/) * [工具提示框（Tooltips）](https://v4.bootcss.com/docs/components/tooltips/) [工具类](https://v4.bootcss.com/docs/utilities/borders/) * [边框（Borders）](https://v4.bootcss.com/docs/utilities/borders/) * [清除浮动（Clearfix）](https://v4.bootcss.com/docs/utilities/clearfix/) * [关闭图标](https://v4.bootcss.com/docs/utilities/close-icon/) * [颜色（Colors）](https://v4.bootcss.com/docs/utilities/colors/) * [Display 属性](https://v4.bootcss.com/docs/utilities/display/) * [内嵌](https://v4.bootcss.com/docs/utilities/embed/) * [Flex 布局](https://v4.bootcss.com/docs/utilities/flex/) * [浮动（Float）](https://v4.bootcss.com/docs/utilities/float/) * [图片替换](https://v4.bootcss.com/docs/utilities/image-replacement/) * [交互（Interactions）](https://v4.bootcss.com/docs/utilities/interactions/) * [溢出（Overflow）](https://v4.bootcss.com/docs/utilities/overflow/) * [定位（Position）](https://v4.bootcss.com/docs/utilities/position/) * [屏幕识读器](https://v4.bootcss.com/docs/utilities/screen-readers/) * [阴影（Shadows）](https://v4.bootcss.com/docs/utilities/shadows/) * [尺寸（Sizing）](https://v4.bootcss.com/docs/utilities/sizing/) * [间隔（Spacing）](https://v4.bootcss.com/docs/utilities/spacing/) * [延伸链接（Stretched link）](https://v4.bootcss.com/docs/utilities/stretched-link/) * [文本（Text）](https://v4.bootcss.com/docs/utilities/text/) * [垂直对齐](https://v4.bootcss.com/docs/utilities/vertical-align/) * [可见性](https://v4.bootcss.com/docs/utilities/visibility/) # Bootstrap3和Bootstrap4区别首先引入Bootstrap3和4官网连接； Bootstrap3 VS Bootstrap4. 不同点 Bootstrap3 Bootstrap4 Less Sass语言编写 4种栅格类 5种栅格类使用px为单位使用rem和em为单位（除部分margin和padding使用px）使用push和pull向左右移动偏移列通过offset-类设置使用float的布局方式选择弹性盒模型（flexbox）注：Bootstrap3的4种栅格：特小（col-xs-）适配手机(<768px) 小（col-sm-）适配平板(≥768px) 中（col-md-）适配电脑(≥992px) 大（col-lg-）适配宽屏电脑(≥1200px) Bootstrap4的5种栅格：特小（col-）(<576px) 小（col-sm-）(≥576px) 中（col-md-）(≥768px) 大（col-lg-） (≥992px) 特大（col-xl-）（≥1200px） **混用案例：** >[info]当屏幕尺寸小于 768px 的时候，用 col-xs-12 类对应的样式；在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；大于 1200px 的时候，用 col-lg-3 类对应的样式； ~~~ <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> </div> ~~~ **Bootstrap4特点** 新增网格层适配了移动端；全面引入ES6新特性（重写所有JavaScript插件）； css文件减少了至少40%；所有文档都用Markdown编辑器重写； Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用[Bootstrap3](https://www.runoob.com/bootstrap/bootstrap-tutorial.html)。推荐框架[Free Bootstrap Admin Template - AdminLTE.IO](https://adminlte.io/) [Treeview Plugin | AdminLTE v3 Documentation](https://adminlte.io/docs/3.1//javascript/treeview.html)