首頁 web前端 Bootstrap教程 Bootstrap的優點和缺點是什麼?

Bootstrap的優點和缺點是什麼?

Nov 10, 2020 am 10:08 AM
bootstrap

Bootstrap的優點:1、可提高開發效率;2、規範名稱定義,便於維護;3、擁有完善的文檔,有大量的組件樣式;缺點:1、學習成本提高,需要了解整個框架,需要閱讀框架的文檔;2、css框架對於一個小專案等頁面來說很臃腫;3、會有相容問題。

Bootstrap的優點和缺點是什麼?

推薦:《bootstrap教學

隨著CSS3和HTML5的流行,我們的WEB頁面不僅需要更人性化的設計理念,而且需要更酷的頁面特效和使用者體驗。作為開發者,我們需要了解一些寶貴的CSS UI開源框架資源,它們可以幫助我們更快、更好地實現一些現代化的介面,包括一些行動裝置的網頁介面風格設計。接下來就是要詳解Bootstrap框架:

首先,我們要知道為什麼要使用框架的原理。

CSS框架是一系列CSS檔案的集合體,包含了基本的元素重置,頁面排版,網頁佈局,表單樣式,通用規則等程式碼區塊。使用CSS框架,可以簡化工作,提高工作效率。

我們為什麼要使用Bootstrap框架,而不使用其他CSS框架?

隨著H5,CSS3的快速火起來,使用者體驗特別重要,行動裝置使用者的龐大,不容小視,而恰恰,Bootstrap就是為行動裝置而開發的框架。他雖然是以行動裝置優先,傾向Mobile,但不是行動裝置框架。
它由規範的CSS,JavaScript插件構成,其最大的優勢是響應式佈局,CSS媒體查詢(Media Query)的功勞,使得開發者可以方便的讓網頁無論在台式機,手機上都獲得最佳的體驗。

  1. 抽象化常用的css樣式,高再可用性,高移植性
  2. 有固有的定義,詳細的文檔及開發特點
  3. 高相容性,可以相容於流行的瀏覽器
  4. 以css為主,但不一定全部是css,可能有一些js(或其他)腳本用於相容瀏覽器

Bootstrap框架可以分為三類:

第一:預處理腳本:

Bootstrap的原始碼是基於最受歡迎的CSS預處理腳本-Less和Sass開發的。你可以採用預先編譯的CSS檔案快速開發,也可以從原始碼自訂自己需要的樣式。例如。如果你頁面上有很多同樣的效果。只需要寫一個效果類別。然後讓用到的地方去繼承他。就不需要再寫了。

第二:一個框架,多種設備

你的網站和應用程式能在Bootstrap的幫助下透過同一個程式碼快速,有效設配手機,平板、PC設備,這都是CSS媒體查詢的功勞。

第三:特效齊全

Bootstrap提供了全面、美觀的文檔、可以找到關於HTML元素,HTML和CSS元件、jQuery插件方面的所有詳細文檔。
Bootstrap元件: Bootstrap包含了豐富的網路元件,根據這些元件,可以快速的搭建一個漂亮、功能完整的網站。例如:下拉式選單、按鈕組、按鈕下拉式選單、導覽、導覽列、路徑導覽、分頁、排版、縮圖、警告對話方塊、進度列、媒體物件等。

bootstrap優缺點:

  • # 提高開發效率

  •  規格名稱定義,方便維護

  •  規格專案開發流程

  • ##css程式碼更清晰、簡單。 html程式碼更合理


  • bootstap最近發布了bootstrap4,擁有了box-flex佈局等更新,緊跟著最新的web技術的發展

  • #比較成熟,在大量的專案中充分的使用和測試

  • 擁有完善的文檔,使用起來更方便

  • 有大量的元件樣式,接受自訂

#缺點:

  • #學習成本提高。你需要了解整個框架,需要閱讀框架的文檔

  • css框架對於一個小專案等頁面來說很臃腫。框架中可能有大部分你用不到的程式碼。

  • 可能會無法幫助你的技術進步。太依賴框架,以至於很難排除bug。包括框架中本身就帶的bug。

  • 選擇自己需要的框架與開發框架都很痛苦。寫到後面發現越來越不靈活,越來越臃腫。

  • 如果有自己特殊的需求,就需要重新自訂樣式,如果一個網站中有大量的非bootstrap「風格」的樣式存在,那麼你就需要做大量的css重寫,因此也就失去了使用框架的意義。

  • 會有相容問題,雖然網路上有許多相容IE的辦法,但需要引進其他文件,有些還不小,勢必導致載入速度變慢,影響使用者體驗。

更多程式相關知識,請造訪:程式設計教學! !

以上是Bootstrap的優點和缺點是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

bootstrap搜索欄怎麼獲取 bootstrap搜索欄怎麼獲取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值:確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

bootstrap垂直居中怎麼弄 bootstrap垂直居中怎麼弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 實現垂直居中:flexbox 法:使用 d-flex、justify-content-center 和 align-items-center 類,將元素置於 flexbox 容器內。 align-items-center 類法:對於不支持 flexbox 的瀏覽器,使用 align-items-center 類,前提是父元素具有已定義的高度。

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼看日期 bootstrap怎麼看日期 Apr 07, 2025 pm 03:03 PM

答案:可以使用 Bootstrap 的日期選擇器組件在頁面中查看日期。步驟:引入 Bootstrap 框架。在 HTML 中創建日期選擇器輸入框。 Bootstrap 將自動為選擇器添加樣式。使用 JavaScript 獲取選定的日期。

See all articles