天天看點

bootstrap深入學習

什麼是bootstrap

Bootstrap 是一個用于快速開發 Web 應用程式和網站的前端架構。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上釋出的開源産品。

bootstrap深入學習

用處

Bootstrap 就是這樣一個簡潔、直覺、強悍的前端開發架構,隻要學習并遵守它的标準,即使是沒有學過網頁設計的開發者,也能做出很專業、美觀的頁面,極大地提高了工作效率。像Bootstrap中文就是基于 Bootstrap 來開發的。

由于Bootstrap的普及率非常之高,至少在CSS UI庫這個領域的地位是至今沒有任何UI庫可以撼動的。而且它本身就是基于CSS編寫的,對于一個Web前端開發工程師來說Bootstrap是我們必須要學習了解的一個UI庫。

Bootstrap 允許以兩種方式顯示代碼:

​<code>​

​ 标簽。

Bootstrap是一個做網頁的架構(目前最流行的WEB前端架構之一),就是說你隻需要寫HTML标簽調用它的類你就可以很快速的做一個高大上的網頁,你不用擔心相容問題,提供了很多樣式供你選擇!

結構

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 檔案。