01.Bootstrap入門

時間 2019-11-19

標籤 01.bootstrap bootstrap 入門欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap介紹：css

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它便是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。國內一些移動開發者較爲熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。html

如何將Bootstrap文檔引入本身的項目中前端

Step 1：打開官網 http://www.bootcss.com/（Bootstrap中文網），點擊藍色背景bootstrap3中文文檔jquery

Step 2: 點擊「下載Bootstrap」bootstrap

Step 3: 用於生產環境的Bootstrap性能優化

Step 4: 將下載的壓縮包解壓縮到本身開發項目的根目錄中前端框架

Step 5: 新建html文件，並將css，js相關的文件引入至html中框架

要將網站引入的地址改爲本地地址性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- 可選的Bootstrap主題文件（通常不用引入） -->
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">

    <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
    <script src="./js/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./js/bootstrap.min.js"></script>
    <title>bootstrap入門</title>
</head>
<body>

</body>
</html>

請注意，Bootstrap 的全部 JavaScript 插件都依賴 jQuery，所以 jQuery 必須在 Bootstrap 以前引入。 jQuery文件要從引入的地址下載下來 http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js放至js目錄下。測試

Step 6：添加div元素，引入類well

<body>
<div class="well">Hello World</div>
</body>

=======================測試成功==============================

如何添加響應式設置

在導航中選擇全局CSS樣式

將代碼複製到<head></head>中。