Bootstrap前端组件库+构建管理
目錄
- 構建管理
- Grunt
- Sass
- JavaScript
- Bootstrap作為前端組件庫
- 一些語法
- 媒體查詢
- 輔助類
- 柵欄系統
- 補充
- 代碼示例
- 媒體查詢
- 網格系統
建立可伸縮的甚至是響應式組件的方式：彈性盒、網格和多欄布局、媒體查詢
為了建立響應式設計（已經廣受瀏覽器支持），我們一般最常探測的特征是視口寬度，而且我們可以使用min-width、max-width和width媒體特征，在視口寬度大于或者小于某個大小——或者是恰好處于某個大小——的時候，應用CSS。
為了讓 CSS 中的尺寸設置更加直觀，我們將全局的 box-sizing 從 content-box 調整為 border-box。這樣可以確保 padding 的設置不會影響計算元素的最終寬度，但是會導致某些第三方軟件（例如 Google Maps 和 Google Custom Search Engine）出現問題。
Bootstrap是基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。使用Grunt來構建CSS、JavaScript，并用Jekyll來寫作文檔。
Grunt是Node.js中一個JavaScript的任務管理器，可用來打造構建系統。也可以使用其他工具與技術來構建Bootstrap
Bootstrap的版本
默認版本、支持Flexbox的版本、僅包含網格系統的版本
Bootstrap內置一個移動優先、12欄布局的響應網格系統
Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入，就像在基本模版中所展示的一樣。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。
Bootstrap的功能有很多
構建管理
Grunt
安裝Node.js和npm之后系統全局安裝Grunt
Bootstrap的軟件包中自帶構建流程。
使用任務管理器創建Bootstrap項目的構建流程：將Sass代碼編譯為css代碼、處理JavaScript代碼、運行靜態web服務器來測試結果，可以把流程復用到自己的新項目中
Sass
Bootstrap v4 版本使用 Node Sass 工具將 Sass 源碼文件編譯為 CSS 文件（已包含在我們的構建流程中了）。如果你需要自己編譯 Sass 源碼的話，為了保證最終生成的 CSS 與官方保持一致，你所使用的 Sass 編譯器至少要支持 Node Sass 所支持的所有功能。推薦Dart Sass
https://sass.bootcss.com/
規則嵌套提供代碼效率
@變量
混入
操作：自帶一些顏色函數，e.g：darken
文件引入，模塊化css文件
JavaScript
幾乎所有的 Bootstrap 插件都可以通過帶有 data 屬性的 HTML 元素單獨開啟和配置（我們推薦 JavaScript API 為首選方式）。請確保 僅在單個 HTML 元素上使用同一個插件的 data 屬性 （例如，你不能通過同一按鈕觸發工具提示和模態框。）
$(document).off('.alert.data-api')使用 Bootstrap 自帶的 npm 腳本來構建文檔、編譯源碼、運行測試等。
Bootstrap 為大多數插件的獨特行為提供了自定義事件。
事件的命名以不定式或過去分詞形式出現，例如，在事件開始時觸發的事件名時不定式形式的（例如 show），在事件完成時觸發的事件名是過去分詞形式的（例如 shown）。
所有方法都可以接受三種參數形式：對象類型的參數、字符串類型的參數（將被當作是某個方法的名稱）或沒有參數（將以默認行為啟動插件）：
所有不定式形式命名的事件都提供 preventDefault() 功能。這就賦予了你在動作開始之前將其停止的能力。如果事件處理函數的返回值是 false，將自動調用 preventDefault()。
一旦 JavaScript 被禁用，Bootstrap 的插件沒有優雅降級的方案。如果你很關心在這種情況下的用戶體驗，請使用 標簽并向你的用戶解釋情況（以及重新啟用 JavaScript 的方法），和/或添加你自己的降級方案。
Bootstrap作為前端組件庫
前端開發選擇組件庫很重要，需要考慮是否含有所需組件、代碼量級、技術配合等因素
Bootstrap、element-UI、Ant Design的核心區別在于組件庫。
Bootstrap是基于jQuery的DOM操作的，Vue有VNode的概念不是很契合。
一篇很細節的jQuery的DOM操作博客
ps:現在有BootstrapVue
但是element-UI、Ant Design原生就是用Vue實現的組件庫。
也可以組合使用
react就選Bootstrap
一些語法
媒體查詢
CSS媒體查詢為你提供了一種應用CSS的方法，僅在瀏覽器和設備的環境與你指定的規則相匹配的時候CSS才會真的被應用
all
print
screen
speech
and、not、only、or 逗號
輔助類
Bootstrap 提供了一些幫助器類，以便更快地實現對移動設備友好的開發。這些可以通過媒體查詢結合大型、小型和中型設備，實現內容對設備的顯示和隱藏。
.visible-xs
.hidden
柵欄系統
使用行列構建頁面 超出最大列寬12會換行 行類可以寫多個表示不同分辨率下顯示
offset偏移和納入列寬，大于12也會換行
push/pull列的微調不受總和12的限制
bootstrap柵欄系統css中的col-xs-、col-sm-、col-md-* 的意義：
.col-xs- 超小屏幕 手機 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面顯示器 (≥992px)
.col-lg- 大屏幕 大桌面顯示器 (≥1200px)
補充
調整高度后 可以使用 div.clearfix避免影響下面的行
dl水平短語列表 下的dt dd 默認是分別占據一行的, 如果 有class=“dl-horizontal” 下dt dd在一行
table tr td 表格 使用class=table table-striped table-bordred添加樣式
striped 斑馬線 hove鼠標焦點 condensed 壓縮
給tr添加背景色class=active | success | info | warning | danger
表格字數超長默認換行,不換行滑動使用 外部容器+.table-responsive
form表單內部的提交的價值對添加form-group
代碼示例
媒體查詢
visible-md-8 hidden-xs pc端顯示手機端隱藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一個模板</title> <style> * {box-sizing: border-box; }body {width: 90%;margin: 2em auto;font: 1em/1.3 Arial, Helvetica, sans-serif; }a:link, a:visited {color: #333; }nav ul, aside ul {list-style: none;padding: 0; }nav a:link, nav a:visited {background-color: rgba(207, 232, 220, 0.2);border: 2px solid rgb(79, 185, 227);text-decoration: none;display: block;padding: 10px;color: #333;font-weight: bold; }nav a:hover {background-color: rgba(207, 232, 220, 0.7); }.related {background-color: rgba(79, 185, 227, 0.3);border: 1px solid rgb(79, 185, 227);padding: 10px; }.sidebar {background-color: rgba(207, 232, 220, 0.5);padding: 10px; }article {margin-bottom: 1em; } @media screen and (min-width: 40em) {article {display: grid;grid-template-columns: 3fr 1fr;column-gap: 20px;}nav ul {display: flex;}nav li {flex: 1;} } </style> </head> <body><div class="wrapper"><header><nav><ul><li><a href="">About</a></li><li><a href="">Contact</a></li><li><a href="">Meet the team</a></li><li><a href="">Blog</a></li></ul></nav></header><main><article><div class="content"><h1>Veggies!</h1><p>...</p></div><aside class="related"><p>...</p></aside></article><aside class="sidebar"><h2>External vegetable-based links</h2><ul><li>...</li></ul></aside></main><footer><p>©2019</p></footer></div></body> </html>網格系統
網格系統通過一系列包含內容的行和列來創建頁面布局
行必須放置在.container元素內，列放在行里面
總結
以上是生活随笔為你收集整理的Bootstrap前端组件库+构建管理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java鱼眼相机标定_鱼眼相机标定方法及
- 下一篇： Web前端开发配色表及标准颜色表