Bootstrap是什麼，有什麼特色？-html教學-PHP中文網

首頁

web前端

html教學

Bootstrap是什麼，有什麼特色？

青灯夜游

Sep 19, 2018 pm 04:14 PM

bootstrap

本章要跟大家介紹Bootstrap是什麼，有什麼特色？讓大家對Bootstrap框架有初步的認知。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一． Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩位技術工程師研發的一個基於
HTML、CSS、JavaScript 的開源框架。此框架程式碼簡潔、視覺優美，可用於快速、簡單地
建立基於 PC 及行動裝置的 Web 頁面需求。
2010 年 6 月，Twitter 內部的工程師為了解決前端開發任務中的協作統一問題。經歷
各種方案後，Bootstrap 最終被確定下來，並於 2011 年 8 月發布。經過很長時間的迭代升
級，由最初的 CSS 驅動專案發展成為內建許多 JavaScript 外掛程式和圖示的多功能 Web 前端
的開源框架。
Bootstrap 最重要的部分就是它的響應式佈局，透過這種佈局可以相容於 PC 端、PAD
以及手機行動端的頁面存取。
Bootstrap 下載及示範：
國內文件翻譯官網：http://www.bootcss.com

二． Bootstrap 特色
Bootstrap 非常流行，得益於它非常實用的功能和特點。主要核心功能特點如下：
(1).跨裝置、跨瀏覽器
可以相容於所有現代瀏覽器，包括比較詬病的 IE7、8。當然，本課程不再考慮 IE9 以下
瀏覽器。
(2).響應式佈局
不但可以支援 PC 端的各種解析度的顯示，還支援行動端 PAD、手機等螢幕的響應式切割
換顯示。
(3).提供的全面的元件
Bootstrap 提供了實用性很強的元件，包括：導航、標籤、工具列、按鈕等一系列群組
件，方便開發者呼叫。
(4).內建 jQuery 外掛
Bootstrap 提供了許多實用性的 jquery 插件，這些插件方便開發者實現 Web 中各種
常規特效。
(5).支援 HTML5、CSS3
HTML5 語意化標籤和 CSS3 屬性，都得到很好的支援。
(6).支援 LESS 動態樣式
LESS 使用變數、巢狀、操作混合編碼，編寫更快、更靈活的 CSS。它和 Bootstrap 能
很好的配合開發。

三． Bootstrap 結構

首先，想要了解 Boostrap 的文件結構，就需要在官網先把它下載到本機。 Bootstrap
下載網址如下：
Bootstrap 下載位址：http://v3.bootcss.com/ (選擇生產環境即可，v3.3.4)
解壓縮後，目錄呈現這樣的結構：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min. css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons- halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
主要分為三大核心目錄：css(樣式)、js(腳本)、fonts(字體)。
1.css 目錄中有四個css 後綴的文件，其中包含min 字樣的，是壓縮版本，一般使用
這個；不包含的屬於沒有壓縮的，可以學習了解css 程式碼的檔案；而map 後綴的檔案則是
css 原始碼映射表，在一些特定的瀏覽器工具中使用。
2.js 目錄包含兩個文件，是未壓縮和壓縮的 js 文件。
3.fonts 目錄包含了不同後綴的字體檔案。

建立第一個bootstrap頁面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>bootstrap初体验</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body>
        <button class="btn btn-default">bootstrap初体验之按钮</button>
    </body>
</html>

Bootstrap 將全域font-size 設定為14px，line-height 行高設定為1.428(即20px);段落元素被設定等於1/2 行高(即10px)；顏色被設定為#333。

以上是Bootstrap是什麼，有什麼特色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles