大神帶你了解Bootstrap框架技術!

2020-12-11 上海千鋒教育

首先我們來說說 Bootstrap 是什麼。進入 Bootstrap 的網站(getbootstrap.com/),我們可以看到這樣一句話:Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

這句話的意思是:Bootstrap是受歡迎程度在首位的HTML、CSS和JS框架,用於開發響應式布局、行動裝置優先的Web項目。大家也可進入 Bootstrap 中文網學習 Bootstrap 的框架內容。

二、優勢

Bootstrap是由 Twitter 發布並開源的前端框架,使用非常火爆。據我們調查,目前在各大中小型公司和企業中,前端項目非常多的都在全面推行使用 Bootstrap。當然如此火爆自然有它的道理,下面為大家簡單分析一下:

首先,Bootstrap 出自 Twitter。由大公司發布,並且完全開源,自然久經考驗,減少了測試的工作量。這也就是我們經常說到的站在巨人的肩膀上,不重複造輪子。

其次,Bootstrap 的代碼有著非常良好的代碼規範。在使用 Bootstrap 時也有助於我們去養成良好的編碼習慣,在 Bootstrap 的基礎之上創建項目,日後代碼的維護也變得異常簡單清晰。

第三,Bootstrap 是基於 Less 打造的,並且也有 Sass版本。Less/Sass是CSS的預處理技術,因為這個原因,它一經推出就包含了一個非常實用的 Mixin 庫供我們調用,使得我們在開發過程中對CSS的處理更加簡單。

第四,響應式開發。Bootstrap響應式的柵格系統(Grid System)非常先進,它已經幫你搭建好了實現響應式設計的基礎框架,並且非常容易修改,如果你是一個新手,Bootstrap 可以幫你在非常短的時間內上手響應式布局的設計。

第五,豐富的組件與插件。Bootstrap 的 HTML組件和 JS組件非常豐富,並且代碼簡潔,非常易於修改,如果你覺得它設計的樣子不是你所想要的,你完全可以在其基礎之上修改成自己想要的任何樣子。由於 Bootstrap 的火爆,又出現了不少圍繞 Bootstrap 而開發的JS插件,這就使工作效率得到極大提升。

以上這些都是使用 Bootstrap 所帶來的優勢。當然 Bootstrap 並不能幫你完成所有事情,它只是一個的框架,在這個框架上面你依舊可以任意的發揮,並且發揮得更好,但是前提是你可以駕馭它。

相關焦點

  • 推薦10 款基於 Bootstrap 框架的擴展
    它是一個CSS和HTML的集合,它使用了最新的瀏覽器技術,給你的Web開發提供了時尚的版式,表單,buttons,表格,網格系統等等。本文推薦 10 款基於 Bootstrap 框架的擴展,包括風格擴展以及功能方面的擴展:1.
  • Twitter BootStrap:前端框架利器
    而 「bootstrap-responsive.css」則可以根據你的愛好來選擇,如果想讓項目具有響應式布局的效果,就必須要調用這個樣式文件,而且調 用必須遵循先後順序,「bootstrap-responsive.css」必須放置在「bootstrap.css」之後,否則便不具有響應式布局功 能。
  • 前端框架bootstrap和layui有什麼區別
    做後臺框架。作者「閒心」都說了,開發這個框架的出發點是為了滿足服務端程式設計師的需求。所以你懂得,layui是提供給後端開發人員最好的ui框架,基於DOM驅動,在實現前端交互上比較麻煩,頁面的增刪改查都需要查詢DOM元素。
  • 開源前端框架Bootstrap中文翻譯版上線
    站長之家(chinaz.com)7月25日消息:知名開源WEB前端框架Bootstrap中文翻譯版昨日上線,該版本由wrongway開發者翻譯。據wrongway稱,翻譯Bootstrap的初衷是為其網站選擇一款能快速開發的前端框架,為了更廣泛的分享推廣Bootstrap,因此發布了中文版。
  • 入門bootstrap,簡潔清新的前端框架
    最近 寫項目用到bootstrap確實使用起來很方便,而且風格簡潔,很適合自己做項目時用來當作前端框架。下面是bootstrap介紹:2011年,twitter的「一小撮」工程師為了提高他們內部的分析和管理能力,用業餘時間為他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。
  • 如何使用框架Bootstrap 4框架來實現易於查看的UI
    一個框架,可以輕鬆查看易於閱讀的設計BootstrapBootstrap(bootstrap)是 一個有用的框架,可以輕鬆地在自己的網頁上準備易於使用且易於使用的設計和功能。如下所示,您可以使用導航欄,側欄,菜單項,按鈕類型連結,列布局等輕鬆地為PC和行動裝置創建頁面。
  • kuapingUI 2.0 版本發布,Bootstrap 4+ 大組件 UI 框架
    kuapingUI 2.0 版本發布,更新了基於bootstrap 4+的組件版本,增加了文本、巨幕、新聞、產品、聯繫、團隊、特徵等數幾十種常用
  • 前端框架bootstrap4.4入門教程,使用方法實例響應式布局實戰
    bootstrap是我最喜歡的前端框架,沒有之一,當前的最新版本是bootstrap4.4.1,和之前的3.X版本相比較有較大的變化,不過都是屬於各種標籤的分離,方法還是一樣的,在網上各種教程雖多,但是對於入門還不是不夠,很多入門教程講得雲裡霧裡,看不懂到底在說些什麼。我覺得使用具體的實例來結合相關的標籤使用才能真正的加深理解。
  • kuapingUI 1.6 版本發布,跨屏 UI-bootstrap 大組件 ui 框架
    關於kuapingUI框架如果說Boostrap提供了一個可靠的網頁元素UI組件,來構建一個網頁,那麼跨屏UI框架,則在bootstrap基礎上提供了更為完整的網頁組件已經有bootstrap為什麼還要kuapingUI?kuapingUI不是再造的一款框架,它只是對於bootstrap的小組件封裝成「大組件」,比如「關於我們」,「聯繫我們」,「產品列表」,「新聞列表」等等,它非常有意義的一點在於,把bootstrap製作頁面的時間縮短到了幾分鐘!
  • 前端框架 Bootstrap 5.0 alpha 發布 - OSCHINA - 中文開源技術...
    該團隊表示,刪除 jQuery 是框架多年來最大的變化之一。十多年來,jQuery 允許訪問複雜的 JavaScript 行為,但是隨著時間的推移,前端開發工具和瀏覽器支持有了新的進步,因此這變得不再需要。刪除 jQuery 依賴項將導致文件更小並提高頁面加載速度。
  • 使用Bootstrap重構學生管理系統界面(了解)
    問題或建議,請點擊下方閱讀原文留言Bootstrap介紹Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架,使得 Web 開發更加快捷。
  • 大神帶你玩轉matlab圖像處理(五)
    回復「微信」加入微信群;公眾號中回復「qq」加入QQ群;回復「共享」加入原創代碼共享QQ群;回復「投稿」與大家分享智慧;回復「下載」免費下載資源;回復「福利」即可了解公眾號的福利錦集往期回顧>>>>>>大神帶你玩轉matlab圖像處理(二)大神帶你玩轉matlab圖像處理(三)大神帶你玩轉matlab圖像處理(四)
  • 18 個漂亮的 Bootstrap 模板
    如果你正在閱讀本文,則意味著你與時俱進。根據預測,對模板的需求會不斷增長,這是基於當前全球新冠肺炎大流行的現狀而得出的,這是一個非常嚴重和悲慘的情況,我只想強調其後果:人們被迫待在家裡,從而線上活動至關重要。如果你有業務,請為此創建一個應用,如果你夢想開發某個特定的應用,請把你的想法付諸實踐!
  • H5開發app用什麼框架
    H5開發app經常用到的框架有:jquery mobile框架,bootstrap框架,ionic框架,Mobile Angular UI框架以及Sencha Touch框架等等。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫,而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。bootstrap框架Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。
  • DWZ + Bootstrap 整合應用(dwz for bootstrap v1.0.0)
    後續DWZ框架準備支持響應式。為了感謝大家多年來的支持,現推出DWZ+Bootstrap響應式臨時解決方案。
  • 前端插件之Bootstrap Dual Listbox使用
    工欲善其事,必先利其器對於很多非專業前端開發來說寫頁面是非常痛苦的,藉助框架或插件往往能夠達到事半功倍的效果,本系列文章會介紹我在運維系統開發過程中用到的那些順手的前端插件,如果你是想寫XX管理系統的學生、或是需要獨自做Dashboard的後端工程師、亦或是像我這樣半吊子的開發加運維,那麼這個系列的文章你一定不要錯過Bootstrap Dual Listbox
  • bootstrap響應式布局
    例如,您先在計算機顯示器上瀏覽一個網站,然後在智慧型手機上瀏覽,智慧型手機的屏幕尺寸遠小於計算機顯示器,但是你卻沒有感覺到任何差別,兩者的用戶體驗幾乎一樣,這說明這個網站在響應式設計方面做得很好。   我們已經在我們的流動布局實例中應用了響應性能,並請您在不同的屏幕尺寸下進行瀏覽。您可以通過 Chrome 或 FireFox 的窗口大小調整的擴展來調整瀏覽器。。
  • swagger-bootstrap-ui 應用擴展程序 1.0.0 發布
    隨著swagger-bootstrap-ui已經歷時兩年多,發布了26個版本,目前也得到的很多Java
  • Web-第五天 BootStrap學習
    1.2 相關技術介紹1.2.1 BootStrap概述1.2.1.1 什麼是BootStrapBootstrap,基於 HTML、CSS、JAVASCRIPT 的前端框架(半成品)。國內一些移動開發者較為熟悉的框架,如WeX5前端開源框架等,也是基於Bootstrap源碼進行性能優化而來中文官網:http://www.bootcss.com/ 1.2.1.2 什麼是響應式布局響應式布局:一個網站能夠兼容多個終端(手機、iPad等),而不需要為每個終端做一個特定的版本。
  • Bootstrap項目實訓乾貨:設計簡單登錄框
    頁面如下:二、實驗環境此登錄框採用bootstrap框架來實現,依賴的版本為3.3.7。我們可以直接引用cdn的資源,資源地址如下:<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">< src="//cdn.bootcss.com