BootStrap安裝--樂字節大數據

時間 2020-06-29

標籤 bootstrap 安裝字節數據欄目 Bootstarp 简体版

原文原文鏈接

BootStrap

主要內容

BootStrap的安裝和使用

BootStrap 介紹

官網：http://getbootstrap.com/javascript

中文網：http://www.bootcss.com/css

Bootstrap 是一套現成的 CSS 樣式集合（作得仍是很友好的）。是兩個推特的員工幹出來的。html

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。前端

2011年，twitter 的"一小撮"工程師爲了提升他們內部的分析和管理能力，用業餘時間爲他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集 -- BootStrap。Bootstrap 由 MARK OTTO 和 Jacob Thornton 所設計和創建，在 github上開源以後，迅速成爲該站上最多人 watch&fork 的項目。大量工程師踊躍爲該項目貢獻代碼，社區驚人地活躍，代碼版本進化很是快速，官方文檔質量極其高(能夠說是優雅)，同時涌現了許多基於Bootstrap 建設的網站：界面清新、簡潔;要素排版利落大方。html5

Bootstrap特別適合那種沒有設計師的團隊（甚至說沒有前端的團隊），能夠快速的出一個網頁。java

BootStrap 特色

簡潔、直觀、強悍的前端開發框架，html、css、javascript 工具集，讓 web 開發更速、簡單。
基於html五、css3的bootstrap，具備大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式嚮導文檔。
自定義 JQuery 插件，完整的類庫，bootstrap3 基於Less，bootstrap4 基於 Sass 的 CSS 預處理技術
Bootstrap 響應式佈局設計,讓一個網站能夠兼容不一樣分辨率的設備。Bootstrap 響應式佈局設計，給用戶提供更好的視覺使用體驗。
豐富的組件

下載與使用

下載：http://v3.bootcss.com/getting-started/jquery
下載完成後css3

拷貝 dist/css 中的 bootstrap.min.css 到項目 css 中 git

拷貝 dist/js 中的 bootstrap.min.js 到項目的 js 中github
下載 jquery.js

http://jquery.com/
在 html 中模板爲:

<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <!--使用X-UA-Compatible來設置IE瀏覽器兼容模式 最新的渲染模式-->   
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--
        viewport表示用戶是否能夠縮放頁面；
        width指定視區的邏輯寬度；
        device-width指示視區寬度應爲設備的屏幕寬度；
        initial-scale指令用於設置Web頁面的初始縮放比例
        initial-scale=1則將顯示未經縮放的Web文檔
     -->
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bootstrap的HTML標準模板</title>   
     <!-- 載入Bootstrap 的css -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>     

    <!-- 若是要使用Bootstrap的js插件，必須先調入jQuery -->
    <script src="js/jquery-3.4.1.js"></script>
    <!-- 包括全部bootstrap的js插件或者能夠根據須要使用的js插件調用　-->
    <script src="js/bootstrap.min.js"></script> 
  </body>    
</html>

注意：

<font color="red">目前暫時不使用 jquery 的插件能夠不用引入 js 文件,這裏是爲了保證模板的完整性。</font>

說明：

viewport <meta>標記用於指定用戶是否能夠縮放Web頁面
width 和 height 指令分別指定視區的邏輯寬度和高度。他們的值要麼是以像素爲單位的數字，要麼是一個特殊的標記符號。
width 指令使用 device-width 標記能夠指示視區寬度應爲設備的屏幕寬度。
height 指令使用 device-height 標記指示視區高度爲設備的屏幕高度。
initial-scale 指令用於設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不一樣而有所差別。一般狀況下設備會在瀏覽器中呈現出整個Web頁面，設爲1.0則將顯示未經縮放的Web文檔。