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)