Bootstrap介紹


一、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的前提(按優先級)

  1. 標准HTML5文檔結構

  2. 移動設備優先

  3. Bootstrap css引入

  4. Jquery引入

  5. 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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM