前端學習筆記

時間 2020-01-23

標籤前端學習筆記简体版

原文原文鏈接

1.Bootstrap

1.1 Bootstrap 包的內容

基本結構：Bootstrap 提供了一個帶有網格系統、連接樣式、背景的基本結構。這將在 Bootstrap 基本結構部分詳細講解。css
CSS：Bootstrap 自帶如下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。這將在 Bootstrap CSS 部分詳細講解。html
組件：Bootstrap 包含了十幾個可重用的組件，用於建立圖像、下拉菜單、導航、警告框、彈出框等等。這將在佈局組件部分詳細講解。html5
JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您能夠直接包含全部的插件，也能夠逐個包含這些插件。這將在 Bootstrap 插件部分詳細講解。jquery
定製：您能夠定製 Bootstrap 的組件、LESS 變量和 jQuery 插件來獲得您本身的版本。bootstrap

1.2 Bootstrap 環境安裝

本站實例採用的是百度的靜態資源庫(http://cdn.code.baidu.com/)上的Bootstrap資源。app

百度的靜態資源庫的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費，引入代碼就能夠直接使用，也能夠從CDN下載代碼，示例以下：less

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
 
<!-- 可選的Bootstrap主題文件（通常不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap-theme.min.css"></script>
 
<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

HTML 模板（使用百度CDN，支持IE8)

一個使用了 Bootstrap 的基本的 HTML 模板以下所示：佈局

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap v3.2 Template</title>
  
    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  
    <!-- 引入下面兩個庫讓 IE8 支持 HTML5 元素 -->
    <!-- 警告: Respond.js 經過 file:// 瀏覽的時候不能正常工做！-->
    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
  
    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>
</html>

在這裏，您能夠看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用於讓一個常規的 HTML 文件變爲使用了 Bootstrap 的模板。字體

官網下載 Bootstrap

您能夠從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。ui

您會看到兩個按鈕：

Download Bootstrap：下載 Bootstrap。點擊該按鈕，您能夠下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。
Download Source：下載源代碼。點擊該按鈕，您能夠直接從 from 上獲得最新的 Bootstrap LESS 和 JavaScript 源代碼。

若是您使用的是未編譯的源代碼，您須要編譯 LESS 文件來生成可重用的 CSS 文件。對於編譯 LESS 文件，Bootstrap 官方只支持 Recess，這是 Twitter 的基於 less.js 的 CSS 提示。

因爲文件是被編譯過和壓縮過的，在獨立的功能開發中，您沒必要每次都包含這些獨立的文件。

文件結構

預編譯的 Bootstrap

當您下載了 Bootstrap 的已編譯的版本，解壓縮 ZIP 文件，您將看到下面的文件/目錄結構：

Bootstrap 源代碼

若是您下載了 Bootstrap 源代碼，那麼文件結構將以下所示：

less/、js/ 和 fonts/ 下的文件分別是 Bootstrap CSS、JS 和圖標字體的源代碼。
dist/ 文件夾包含了上面預編譯下載部分中所列的文件和文件夾。
docs-assets/、examples/ 和全部的 *.html 文件是 Bootstrap 文檔。

實例

如今讓咱們嘗試使用使用Bootstrap輸出"Hello, world!"：

<!DOCTYPE html>
<html>
<head>
   <title>在線嘗試 Bootstrap 實例</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
      <h1>Hello, world!</h1>
 
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。