搜尋
首頁web前端Bootstrap教程bootstrap 怎麼安裝

bootstrap 怎麼安裝

Jan 19, 2021 am 09:09 AM
bootstrap

bootstrap的安裝方法:1、在Bootstrap官網下載Bootstrap文件,然後使用和<script>來引用;2、透過Bower進行安裝;3、透過npm進行安裝;4、透過Composer進行安裝即可。 </script>

bootstrap 怎麼安裝

本教學操作環境:windows7系統,bootstrap3.3.7版本,Dell G3電腦。

相關教學推薦:《bootstrap教程

Bootstrap是前端開發中比較受歡迎的框架,簡潔且靈活。它是基於HTML、CSS和JavaScript,HTML定義頁面元素,CSS定義頁面佈局,而JavaScript負責頁面元素的回應。 Bootstrap將HTML、CSS和JavaScript封裝成一個個功能元件,用起來簡單,粗獷。

Bootstrap 怎麼安裝?

1、在Bootstrap官網下載Bootstrap文件,然後使用和<script>來引用</script>

登入Bootstrap官網

bootstrap 怎麼安裝

下載Bootstrap

bootstrap 怎麼安裝

Download Bootstrap:下載預編譯和壓縮版Bootstrap(不含文件和原始碼)。

Download code:Bootstrap原始碼,如官網介紹,需要編譯Less檔案 和一些安裝。

剛接觸Bootstrap的話建議下載第一個,下載下來直接用。

檔案結構

下載下來的檔案是壓縮包,我們解壓縮之後可以看到檔案的結構。

bootstrap 怎麼安裝

html使用Bootstrap

html使用Bootstrap需要引用jquery.js、bootstrap.min.js 和bootstrap.min.css 文件,引用這幾個文件可以讓一個常規的HTML 檔案變成使用了Bootstrap 的模板。

方式一:html與Bootstrap資料夾放在一起

我們前面已經下載了預先編輯的Bootstrap解壓縮出來得到了Bootstrap資料夾,只要把html與Bootstrap資料夾放在一起,然後用相對路徑引用jquery.js、bootstrap.min.js 和bootstrap.min.css 檔案即可。

方式二:html引用CDN中的jquery.js、bootstrap.min.js 和bootstrap.min.css

很多CDN服務已經上傳有這幾個檔案了,直接呼叫就好。

例如:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>在线尝试 Bootstrap 实例</title> 
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
  
  <h1 id="Hello-nbsp-world">Hello, world!</h1> 
  
</body> 
</html>

此外,你還可以使用以下的CDN 服務:

國內推薦使用:https://www.staticfile.org/

國際建議使用:https://cdnjs.com/

2、透過Bower 進行安裝

也可以透過Bower 安裝並管理Bootstrap 的Less、CSS、JavaScript 和字型檔。

$ bower install bootstrap

3、透過npm 進行安裝

你也可以利用npm 工具來安裝Bootstrap:

$ npm install bootstrap@3

require('bootstrap') 程式碼的作用是載入Bootstrap 的所有jQuery 插件。其中,bootstrap 模組本身並不會匯出任何內容。你可以透過載入安裝包頂級目錄下的 /js/*.js 檔案的方式手動載入單一的 Bootstrap 插件。

Bootstrap 的package.json 檔案包含了一些額外的元資料:

less - Bootstrap 原始碼的入口Less 檔案的路徑

##style - Bootstrap 的未壓縮CSS 文件的路徑

4、透過Composer 進行安裝

透過Composer (中文官網:Composer 中文網)也可以安裝Bootstrap 安裝包,其中包含Less、CSS、JavaScript 和fonts 檔案:

$ composer require twbs/bootstrap

編譯Less/Sass 原始碼需要注意的事項

Bootstrap 利用Autoprefixer 自動為某些CSS 屬性新增針對特定廠商的前綴。如果你是從 Less/Sass 原始碼編譯 Bootstrap 的,並且沒有使用 Bootstrap 自帶的 Gruntfile 文件,那你就必須將 Autoprefixer 整合到你的編譯工具和編譯過程中。如果你使用的是我們預先編譯好的 Bootstrap 文件或使用的是我們提供的 Gruntfile 文件,那就無需操心了,我們已經將這些工作替你搞定了。

以上是bootstrap 怎麼安裝的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Bootstrap與其他框架:比較概述Bootstrap與其他框架:比較概述Apr 18, 2025 am 12:06 AM

Bootstrap優於TailwindCSS、Foundation和Bulma,因為它易用且快速開發響應式網站。 1.Bootstrap提供豐富的預定義樣式和組件庫。 2.其CSS和JavaScript庫支持響應式設計和交互功能。 3.適合快速開發,但自定義樣式可能較複雜。

在React中集成引導樣式:方法和技術在React中集成引導樣式:方法和技術Apr 17, 2025 am 12:04 AM

在React項目中整合Bootstrap可以通過兩種方法:1)使用CDN引入,適合小型項目或快速原型設計;2)使用npm包管理器安裝,適用於需要深度定制的場景。通過這些方法,你可以在React中快速構建美觀且響應式的用戶界面。

React的引導:優勢和最佳實踐React的引導:優勢和最佳實踐Apr 16, 2025 am 12:17 AM

將Bootstrap集成到React項目中的優勢包括:1)快速開發,2)一致性和可維護性,3)響應式設計。通過直接引入CSS文件或使用React-Bootstrap庫,可以在React項目中高效使用Bootstrap的組件和样式。

Bootstrap:網絡框架的快速指南Bootstrap:網絡框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter開發的框架,幫助快速搭建響應式、移動優先的網站和應用。 1.易用性和豐富組件庫使開發更快。 2.龐大社區提供支持和解決方案。 3.通過CDN引入並使用類名控製樣式,如創建響應式網格。 4.可自定義樣式和擴展組件。 5.優點包括快速開發和響應式設計,缺點是樣式一致性和學習曲線。

打破bootstrap:是什麼以及為什麼重要打破bootstrap:是什麼以及為什麼重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree,開放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem,流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap:使網頁設計更容易Bootstrap:使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼;2)內置網格系統簡化了響應式佈局的創建;3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響:加速網絡開發Bootstrap的影響:加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發,通過提供預定義的樣式和組件,開發者可以快速搭建響應式網站。 1)它縮短了開發時間,例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins,Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能,提高加載速度。

理解引導:核心概念和功能理解引導:核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架,主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件,方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件,通過媒體查詢實現響應式設計。 3)使用示例包括基本用法,如創建按鈕,以及高級用法,如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件,建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現,最佳實踐包括使用語義化HTML和Bootstrap的預定義

See all articles

熱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.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。