Bootstrap框架如何安裝

今天小編給大家分享一下Bootstrap框架如何安裝的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

Bootstrap簡介

Bootstrap 是基于 HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，所以它要求開發者具備 HTML、CSS、Javascript 的基礎知識。其最大的優勢是響應式布局，使得開發者可以方便的讓網頁無論在臺式機、平板設備、手機上都獲得最佳的體驗。

Bootstrap的安裝

通過官網下載 https://v3.bootcss.com，這里需要注意三種不同的下載方式針對具有不同技能等級的開發者和不同的使用場景，這里我們通常使用第一種下載方式用于生產環境的 Bootstrap

在以往的開發過程中，我常用到的安裝方式就是以上這種方式，其余的幾種安裝方式在用到的時候會補充的

包含的內容

Bootstrap 提供了兩種形式的壓縮包，在下載下來的壓縮包內可以看到以下目錄和文件，這些文件按照類別放到了不同的目錄內，并且提供了壓縮與未壓縮兩種版本。下載包包含 CSS、JS、Font 三種文件夾

解壓后的目錄結構如下：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── 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文件夾如圖：

Font文件夾如圖：

注意：帶有 min 的文件是壓縮文件，我們在項目中一般引用的是壓縮文件。帶有 map 的文件是 CSS 源碼映射表，可以在某些瀏覽器的開發工具中使用。

基本應用模板

Bootstrap 框架的使用就是把它的 CSS 文件和 JS 文件引入到所寫的網頁中去，這里我引用的是兩種文件的壓縮格式。圖中可以清楚的看到我在引入 Bootstrap 的 JS 文件之前就引用了 jQuery 庫，是因為 Bootstrap 的所有 JavaScript 插件都依賴  jQuery，所以 jQuery 必須在 Bootstrap 之前引入，還有需要注意的是 Bootstrap 支持引入的 jQuery 庫的版本必須是1.9.1以上的版本

工具

1、一般常見的 IDE 開發工具就可以編寫 bootstrap 響應式頁面，例如VS Code,WebStorm 

2、Bootlint: Bootstrap 官方所支持的 HTML檢測工具,Bootlint 檢測你的頁面上的 Bootstrap 組件是否符合 Bootstrap 的 HTML 結構規則。

以上就是“Bootstrap框架如何安裝”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。