當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Bootstrap前端组件库+构建管理

發布時間：2023/12/14 HTML 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

@media media-type and (media-feature-rule) {/* CSS rules go here */ }@media screen and (width: 600px) {body {color: red;} }

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元素內，列放在行里面

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Media Queries: a simple mobile first design, adding a grid component</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;}.grid {list-style: none;margin: 0;padding: 0;display: grid;gap: 20px;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}.grid li {border: 1px solid #666;padding: 10px;}@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;}}@media screen and (min-width: 70em) {main {display: grid;grid-template-columns: 3fr 1fr;column-gap: 20px;}article {margin-bottom: 0;}footer {border-top: 1px solid #ccc;margin-top: 2em;}}</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>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabiwelsh onion daikon amaranth tatsoi tomatillo melon azuki beangarlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallotcourgette tatsoi pea sprouts fava bean collard greens dandelionokra wakame tomato. Dandelion cucumber earthnut pea peanut sokozucchini.</p><ul class="grid"><li><h2>Card 1</h2><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sealettuce kohlrabi amaranth water spinach avocado daikon napacabbage asparagus winter purslane kale.</p></li><li><h2>Card 2</h2><p>Celery potato scallion desert raisin horseradish spinachcarrot soko.</p></li><li><h2>Card 3</h2><p>Lotus root water spinach fennel kombu maize bamboo shoot greenbean swiss chard seakale pumpkin onion chickpea gram corn pea.</p></li><li><h2>Card 4</h2><p>Brussels sprout coriander water chestnut gourd swiss chardwakame kohlrabi beetroot carrot watercress.</p></li><li><h2>Card 5</h2><p>Corn amaranth salsify bunya nuts nori azuki bean chickweedpotato bell pepper artichoke.</p></li></ul></div><aside class="related"><p>All these veggies are brought to you by the<a href="https://veggieipsum.com/">Veggie Ipsum generator</a>.</p></aside></article><aside class="sidebar"><h2>External vegetable-based links</h2><ul><li><ahref="https://www.thekitchn.com/how-to-cook-broccoli-5-ways-167323">How to cook broccoli</a></li><li><a href="https://www.bbcgoodfood.com/glossary/swiss-chard">Swiss Chard</a></li><li><ahref="https://www.bbcgoodfood.com/recipes/collection/christmas-parsnip">Christmas Parsnip Recipes</a></li></ul></aside></main><footer><p>©2019</p></footer></div></body> </html>

總結

以上是生活随笔為你收集整理的Bootstrap前端组件库+构建管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java鱼眼相机标定_鱼眼相机标定方法及
下一篇： Web前端开发配色表及标准颜色表

HTML

Bootstrap前端组件库+构建管理

目錄

構建管理

Grunt

Sass

JavaScript

Bootstrap作為前端組件庫

一些語法

媒體查詢

輔助類

柵欄系統

補充

代碼示例

媒體查詢

網格系統

總結