bootstrap sass下載 - bootstrap sass原始碼下載

bootstrap sass

其他源碼

v3.4.1

下載

Sass 的 Bootstrap 3

bootstrap-sass是 Bootstrap 3 的 Sass 支援版本，可以直接放入 Sass 支援的應用程式中。

這是 Bootstrap 3 。對於 Bootstrap 4，如果您使用 Ruby，請使用 Bootstrap ruby，否則使用主儲存庫。

安裝

請參閱適合您選擇的環境的指南：

Ruby on Rails。
鮑爾。
npm / Node.js。

一個。紅寶石 on Rails

bootstrap-sass很容易透過 asset pipeline 放入 Rails 中。

在 Gemfile 中，您需要新增bootstrap-sass gem，並確保sass-rails gem 存在 - 預設情況下它會新增到新的 Rails 應用程式中。

 gem 'bootstrap-sass', '~> 3.4.1' gem 'sassc-rails', '>= 2.1.0'

bundle install並重新啟動伺服器以使檔案可以透過管道使用。

在app/assets/stylesheets/application.scss中匯入 Bootstrap 樣式：

 // "bootstrap-sprockets" 必須在 "bootstrap" 和 "bootstrap/variables" 之前導入@import "bootstrap-sprockets";@import "bootstrap";

bootstrap-sprockets必須在bootstrap之前導入，圖示字體才能運作。

確保檔案具有.scss副檔名（或.sass用於 Sass 語法）。如果您剛剛產生了一個新的 Rails 應用程序，它可能會附帶一個.css檔案。如果這個檔案存在，它將取代 Sass 被提供，所以重命名它：

 $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

然後，刪除所有*= require_self和*= require_tree . sass 檔案中的語句。相反，使用@import導入 Sass 檔案。

不要在 Sass 中使用*= require ，否則你的其他樣式表將無法存取 Bootstrap mixin 或變數。

Bootstrap JavaScript 依賴 jQuery。如果您使用的是 Rails 5.1+，請將jquery-rails gem 加入到 Gemfile 中：

寶石'jquery-rails'

 $ 捆綁安裝

需要app/assets/javascripts/application.js中的 Bootstrap Javascript：

 //= 需要 jquery//= 需要 bootstrap-sprockets

bootstrap-sprockets和bootstrap不應同時包含在application.js中。

bootstrap-sprockets提供單獨的 Bootstrap Javascript 檔案（例如， alert.js或dropdown.js ），而bootstrap提供包含所有 Bootstrap Javascript 的串聯檔案。

帶導軌的涼亭

當使用 bootstrap-sass Bower 套件而不是 Rails 中的 gem 時，請在config/application.rb中設定資產：

 # Bower asset pathsroot.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|  config.sass.load_paths << Bower_path
  config.assets.paths << Bower_pathend# 預先編譯Bootstrap 字型config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2? )$ )# bootstrap-sass::Sass::Script::Value::Number. precision 所需的最小 Sass 數字精度 = [8, ::Sass::Script::Value::Number. precision].max

將application.scss中的 Bootstrap @import語句替換為：

 $icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";

將application.js中的 Bootstrap require指令替換為：

 //= 需要 bootstrap-sass/assets/javascripts/bootstrap-sprockets

導軌 4.x

請確保sprockets-rails至少為 v2.1.4。

導軌 3.2.x

bootstrap-sass 不再與 Rails 3 相容。

b.鮑爾

bootstrap-sass Bower 套件與 node-sass 3.2.0+ 相容。您可以使用以下命令安裝它：

 $ Bower 安裝 bootstrap-sass

Sass、JS 和所有其他資產都位於 asset 處。

預設情況下， bower.json main 欄位僅列出主_bootstrap.scss和所有靜態資源（字體和 JS）。預設情況下，它與wiredep等資產管理器相容。

Node.js 絞肉機

如果您將 mincer 與 node-sass 一起使用，請像這樣匯入 Bootstrap：

在application.css.ejs.scss （注意.css.ejs.scss ）：

 // 導入 mincer 資源路徑幫助程式整合@import "bootstrap-mincer";@import "bootstrap";

在application.js中：

 //= 需要引導鏈輪

另請參閱 mincer 的清單.js 範例。

c. npm / Node.js

 $ npm 安裝 bootstrap-sass

配置

薩斯

預設情況下導入所有 Bootstrap。

您也可以明確匯入元件。要從完整的模組清單開始，請將_bootstrap.scss檔案作為_bootstrap-custom.scss複製到您的資產中。然後從_bootstrap-custom中註解掉您不需要的元件。在應用程式 Sass 檔案中，將@import 'bootstrap'替換為：

 @import 'bootstrap-custom';

Sass：數字精度

bootstrap-sass 要求 Sass 數字精度最小為 8（預設為 5）。

使用sassc-rails gem 時，Ruby 的精確度會自動設定。當將 npm 或 Bower 版本與 Ruby 一起使用時，您可以使用以下命令進行設定：

 ::Sass::Script::Value::Number. precision = [8, ::Sass::Script::Value::Number. precision].max

Sass：自動前綴器

Bootstrap 需要使用 Autoprefixer。 Autoprefixer 使用 Can I Use 中的值將供應商前綴新增至 CSS 規則。

若要符合上游 Bootstrap 的瀏覽器相容性級別，請將 Autoprefixer 的browsers選項設為：

 [“Android 2.3”、“Android >= 4”、“Chrome >= 20”、“Firefox >= 24”、“Explorer >= 8”、“iOS >= 6”、“Opera >= 12”、“Safari >= 6"]

JavaScript

assets/javascripts/bootstrap.js包含所有 Bootstrap 的 JavaScript，並以正確的順序連接。

JavaScript 與鏈輪或絞肉機

如果您使用 Sprockets 或 Mincer，則可以需要bootstrap-sprockets來載入各個模組：

 // 載入所有 Bootstrap JavaScript //= 需要 bootstrap-sprockets

您也可以載入單一模組，前提是您還需要任何依賴項。您可以在 Bootstrap JS 文件中檢查依賴關係。

 //= 需要 bootstrap/scrollspy//= 需要 bootstrap/modal//= 需要 bootstrap/dropdown

字體

字體引用為：

 “#{$icon-font-path}#{$icon-font-name}.eot”

若使用資源路徑助手， $icon-font-path預設為bootstrap/ ，否則為../fonts/bootstrap/ 。

當 bootstrap-sass 與 Compass、Sprockets 或 Mincer 一起使用時，您必須在 Bootstrap 本身之前匯入相關的路徑助手，例如：

 @import“bootstrap-compass”;@import“bootstrap”;

用法

薩斯

將 Bootstrap 匯入 Sass 檔案（例如application.scss ）以取得 Bootstrap 的所有樣式、mixin 和變數！

 @導入「引導程式」；

您還可以包含可選的 Bootstrap 主題：

 @import「引導程式/主題」；

可以在此處找到 Bootstrap 變數的完整清單。您可以透過簡單地在@import指令之前重新定義變數來覆寫它們，例如：

 $navbar-default-bg: #312312;$light-orange: #ff8c00;$navbar-default-color: $light-orange;@import "bootstrap";

眼鏡

Bootstrap 可作為 Eyeglass 模組。透過 NPM 安裝 Bootstrap 後，您可以透過以下方式匯入 Bootstrap 庫：

 @import“bootstrap-sass/bootstrap”

或僅匯入您需要的 Bootstrap 部分：

 @import“bootstrap-sass/bootstrap/variables”;@import“bootstrap-sass/bootstrap/mixins”;@import“bootstrap-sass/bootstrap/carousel”;

版本

Bootstrap for Sass 版本可能與最後一個數字中的上游版本不同，稱為 PATCH。補丁版本可能領先於相應的上游次要版本。當我們需要發布 Sass 特定的變更時，就會發生這種情況。

在 v3.3.2 之前，Bootstrap for Sass 版本用於反映上游版本，並帶有針對 Sass 特定更改的附加編號。由於 Bower 和 npm 相容性問題，這一點已更改。

上游版本與 Bootstrap for Sass 版本是：

上游	薩斯
3.3.4+	相同的
3.3.2	3.3.3
<= 3.3.1	3.3.1.x

升級時請務必參考 CHANGELOG.md。

發展與貢獻

如果您想幫助 bootstrap-sass 本身的開發，請閱讀本節。

上游轉換器

保持 bootstrap-sass 與 Bootstrap 的上游變更同步過去是一個容易出錯且耗時的手動過程。在 Bootstrap 3 中，我們引入了一個轉換器來自動執行此操作。

注意：如果您只是想使用Bootstrap 3，請參閱上面的安裝部分。

現在可以使用convert rake 任務引入對 Bootstrap 專案的上游變更。

下面是一個範例運行，它將從主 twbs/bootstrap 儲存庫中拉取 master 分支：

rake convert

這會將最新的 LESS 轉換為 Sass 並更新到最新的 JS。若要轉換特定分支或版本，請將分支名稱或提交雜湊作為第一個任務參數傳遞：

rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]

最新的轉換器腳本位於此處並執行以下操作：

將上游 Bootstrap LESS 檔案轉換為其相符的 SCSS 檔案。
將所有上游 JavaScript 複製到assets/javascripts/bootstrap中，Sprockets 清單位於assets/javascripts/bootstrap-sprockets.js中，並串連在assets/javascripts/bootstrap.js中。
將所有上游字體檔案複製到assets/fonts/bootstrap中。
將 version.rb 中的Bootstrap::BOOTSTRAP_SHA設定為分支 sha。

該轉換器將原始 LESS 完全轉換為 SCSS。轉換是自動的，但需要某些轉換的指令（請參閱轉換器輸出）。請提交標記有conversion GitHub 問題。