一、Bootstrap簡介
Bootstrap是Twitter於2011年8月在Github上發布的的開源產品,目前最受歡迎的HTML、CSS和JS框架,用於開發響應式布局、移動設備有限的WEB項目。將常見的CSS布局組件和JavaScript插件進行了整合並完善的封裝,能讓沒有經驗的前端工程師后后端工程師都迅速掌握和使用,大大提高開發效率。
二、常用版本介紹
目前使用較廣的是版本2、3和4,其中2的最新版本的是2.3.2,3的最新版本是3.4.1,4的最新版本是4.6,這里主要說一下4版本,在2018年1月下旬,Bootstrap團隊發布了Bootstrap 4 正式版,4的最主要變化包括以下方面:
- 從 Less 遷移到 Sass
- 改進網格系統
- 缺省彈性框支持
- Dropped wells, thumbnails, and panels for cards
- 合並所有 HTML resets 到一個新的模塊中:Reboot
- 全新自定義選項
- 不再支持 IE8
- 重寫所有的 JavaScript 插件
- 改進工具提示和 popovers 的自動定位
- 改進文檔
- 其他大量改進
三、bootstrap有什么優點?
瀏覽器支持:
- 目前主流的瀏覽器均支持bootstrap
容易上手:
- 只要您具備 HTML 和 CSS 的基礎知識,就可以學習使用Bootstrap。
快速開發:
- bootstrap給我提供了大量的樣式,布局解決方案和插件庫,可以讓程序員從基本的樣式設計和調試上解放,快速搭建項目.同時bootstrap還給我們提供了大量的常用網頁組件,可以讓我們直接復制代碼運行即可
響應式設計:
- Bootstrap的響應式 CSS 能夠自適應於台式機、平板電腦和手機。
注意:從 Bootstrap 3開始,框架包含了貫穿於整個庫的移動設備優先的樣式。
四、bootstrap下載
官網:http://getbootstrap.com/
中文網:http://www.bootcss.com
由於此插件基於Jquery,所以必須引入jQuery
Bootstrap:最小化完整版本
Source code:包含了Less、Javascript的source和一些fonts庫
HTML標准模版
使用Bootstrap的前提(按優先級)
-
標准HTML5文檔結構
-
移動設備優先
-
Bootstrap css引入
-
Jquery引入
-
Bootstrap js引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstarp</title> <!--Bootstrap--> <link rel="stylesheet" href="css/bootstrap.min.css"> <!--jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊)--> <script src="js/jquery-3.5.1.min.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --> <script src="js/bootstrap.min.js"></script> </head> <body> </body> </html>