擴展·引導繁體中文

Bootstrap 以 LESS 為核心，這是一種由我們的好朋友Alexis Sellier創建的動態樣式表語言。它使開發基於系統的 CSS 更快、更容易、更有趣。

為什麼少？

Bootstrap 的一位創建者寫了一篇關於此的快速博客文章，總結如下：

與 Sass 相比，使用 Less 的 Bootstrap 編譯速度快 6 倍
Less 是用 JavaScript 編寫的，與使用 Sass 的 Ruby 相比，我們更容易深入研究和修補。
少即是多; 我們想要感覺就像我們正在編寫 CSS 並使 Bootstrap 對所有人都平易近人。

包括什麼？

作為 CSS 的擴展，LESS 包括變量、用於可重用代碼片段的 mixin、用於簡單數學的操作、嵌套，甚至顏色函數。

學到更多

訪問官方網站http://lesscss.org/了解更多信息。

由於我們的 CSS 是用 Less 編寫的，並且使用了變量和 mixin，因此需要對其進行編譯以用於最終的生產實現。就是這樣。

注意：如果您使用修改後的 CSS 向 GitHub 提交拉取請求，則必須通過這些方法中的任何一種重新編譯 CSS。

編譯工具

命令行

按照GitHub 上項目自述文件中的說明通過命令行進行編譯。

JavaScript

下載最新的 Less.js並在<head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

要重新編譯 .less 文件，只需保存它們並重新加載您的頁面。Less.js 編譯它們並將它們存儲在本地存儲中。

非官方 Mac 應用

非官方的 Mac 應用程序會監視 .less 文件的目錄，並在每次保存監視的 .less 文件後將代碼編譯為本地文件。如果您願意，您可以在應用程序中切換首選項以自動縮小以及編譯文件最終位於哪個目錄。

設置文件結構

下載最新編譯的 Bootstrap 並放入您的項目中。例如，您可能有這樣的事情：

  應用程序/
      佈局/
      模板/
  上市/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      圖片/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

使用入門模板

複製以下基本 HTML 以開始使用。

<html>
  <頭部>
    <title> Bootstrap 101 模板</title>
    <!-- 引導程序 -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <正文>
    <h1>你好，世界！</h1>
    <!-- 引導程序 -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </正文>
</html>

自定義代碼層

根據需要使用您的自定義 CSS、JS 等，以使用您自己的單獨 CSS 和 JS 文件製作您自己的 Bootstrap。

<html>
  <頭部>
    <title> Bootstrap 101 模板</title>
    <!-- 引導程序 -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- 項目 -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <正文>
    <h1>你好，世界！</h1>
    <!-- 引導程序 -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- 項目 -->
    <script src = "public/js/application.js" ></script> 
  </正文>
</html>

擴展引導程序

用 LESS 構建