bootstrap sass
v3.4.1
bootstrap-sass เป็น Bootstrap 3 เวอร์ชันที่ขับเคลื่อนด้วย Sass ซึ่งพร้อมที่จะส่งลงในแอปพลิเคชันที่ขับเคลื่อนด้วย Sass ของคุณโดยตรง
นี่คือ Bootstrap3 สำหรับ Bootstrap 4 ให้ใช้ Bootstrap rubygem หากคุณใช้ Ruby และ repo หลักเป็นอย่างอื่น
โปรดดูคำแนะนำที่เหมาะสมสำหรับสภาพแวดล้อมที่คุณเลือก:
รูบี้ออนเรลส์
โบว์เวอร์.
npm / Node.js
bootstrap-sass นั้นง่ายต่อการวางลงใน Rails ด้วยไปป์ไลน์สินทรัพย์
ใน Gemfile ของคุณ คุณต้องเพิ่ม bootstrap-sass gem และตรวจสอบให้แน่ใจว่ามี sass-rails gem อยู่ - จะถูกเพิ่มลงในแอปพลิเคชัน Rails ใหม่ตามค่าเริ่มต้น
อัญมณี 'bootstrap-sass', '~> 3.4.1'gem 'sassc-rails', '>= 2.1.0'
bundle install และรีสตาร์ทเซิร์ฟเวอร์ของคุณเพื่อให้ไฟล์พร้อมใช้งานผ่านไปป์ไลน์
นำเข้าสไตล์ Bootstrap ใน app/assets/stylesheets/application.scss :
// ต้องนำเข้า "bootstrap-sprockets" ก่อน "bootstrap" และ "bootstrap/variables"@import "bootstrap-sprockets";@import "bootstrap";
ต้องนำเข้า bootstrap-sprockets ก่อน bootstrap เพื่อให้แบบอักษรของไอคอนทำงานได้
ตรวจสอบให้แน่ใจว่าไฟล์มีนามสกุล .scss (หรือ .sass สำหรับไวยากรณ์ Sass) หากคุณเพิ่งสร้างแอป Rails ใหม่ แอปนั้นอาจมาพร้อมกับไฟล์ .css แทน หากมีไฟล์นี้อยู่ ไฟล์นั้นจะถูกนำมาใช้แทน Sass ดังนั้นให้เปลี่ยนชื่อใหม่:
แอป $ mv/assets/stylesheets/application.css แอป/assets/stylesheets/application.scss
จากนั้น ลบ *= require_self และ *= require_tree . ทั้งหมดออก คำสั่งจากไฟล์ sass ให้ใช้ @import เพื่อนำเข้าไฟล์ Sass แทน
อย่าใช้ *= require ใน Sass มิฉะนั้นสไตล์ชีตอื่น ๆ ของคุณจะไม่สามารถเข้าถึง Bootstrap mixins หรือตัวแปรได้
Bootstrap JavaScript ขึ้นอยู่กับ jQuery หากคุณใช้ Rails 5.1+ ให้เพิ่ม jquery-rails gem ลงใน Gemfile ของคุณ:
อัญมณี 'jquery-rails'
การติดตั้งมัด $
ต้องการ Bootstrap Javascripts ใน app/assets/javascripts/application.js :
//= ต้องการ jquery//= ต้องการ bootstrap-sprockets
ไม่ควรรวม bootstrap-sprockets และ bootstrap ไว้ใน application.js
bootstrap-sprockets จัดเตรียมไฟล์ Bootstrap Javascript แต่ละไฟล์ (เช่น alert.js หรือ dropdown.js ) ในขณะที่ bootstrap จัดเตรียมไฟล์ที่ต่อกันซึ่งมี Bootstrap Javascript ทั้งหมด
เมื่อใช้แพ็คเกจ bootstrap-sass Bower แทน gem ใน Rails ให้กำหนดค่าเนื้อหาใน config/application.rb :
# Bower สินทรัพย์ pathsroot.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path| config.sass.load_paths << bower_path
config.assets.paths << bower_pathend# พรีคอมไพล์ Bootstrap fontsconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# ความแม่นยำของจำนวน Sass ขั้นต่ำที่ต้องการโดย bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].สูงสุด แทนที่คำสั่ง Bootstrap @import ใน application.scss ด้วย:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
แทนที่ Bootstrap require คำสั่งใน application.js ด้วย:
//= ต้องการ bootstrap-sass/assets/javascripts/bootstrap-sprockets
โปรดตรวจสอบให้แน่ใจว่า sprockets-rails เป็นอย่างน้อย v2.1.4
bootstrap-sass เข้ากันไม่ได้กับ Rails 3 อีกต่อไป bootstrap-sass เวอร์ชันล่าสุดที่เข้ากันได้กับ Rails 3.2 คือ v3.1.1.0
แพ็คเกจ bootstrap-sass Bower เข้ากันได้กับ node-sass 3.2.0+ คุณสามารถติดตั้งได้ด้วย:
$ bower ติดตั้ง bootstrap-sass
Sass, JS และสินทรัพย์อื่นๆ ทั้งหมดอยู่ที่สินทรัพย์
ตามค่าเริ่มต้น ฟิลด์หลัก bower.json จะแสดงรายการเฉพาะ _bootstrap.scss หลักและเนื้อหาคงที่ทั้งหมด (แบบอักษรและ JS) สิ่งนี้เข้ากันได้กับผู้จัดการสินทรัพย์เช่น wireep โดยค่าเริ่มต้น
หากคุณใช้ mincer กับ node-sass ให้นำเข้า Bootstrap ดังนี้:
ใน application.css.ejs.scss (NB .css.ejs.scss ):
// นำเข้าตัวช่วยพาธสินทรัพย์ของเครื่องบดเนื้อ integrated@import "bootstrap-mincer";@import "bootstrap";
ใน application.js :
//= ต้องการ bootstrap-sprockets
ดูตัวอย่างนี้ manifest.js สำหรับเครื่องบดเนื้อ
$ npm ติดตั้ง bootstrap-sass
ตามค่าเริ่มต้น Bootstrap ทั้งหมดจะถูกนำเข้า
คุณยังสามารถนำเข้าส่วนประกอบได้อย่างชัดเจน หากต้องการเริ่มต้นด้วยรายการโมดูลทั้งหมด ให้คัดลอกไฟล์ _bootstrap.scss ลงในเนื้อหาของคุณเป็น _bootstrap-custom.scss จากนั้นใส่ความคิดเห็นส่วนประกอบที่คุณไม่ต้องการจาก _bootstrap-custom ในไฟล์ Sass ของแอปพลิเคชัน ให้แทนที่ @import 'bootstrap' ด้วย:
@import 'bootstrap-กำหนดเอง';
bootstrap-sass ต้องการความแม่นยำของหมายเลข Sass ขั้นต่ำที่ 8 (ค่าเริ่มต้นคือ 5)
ความแม่นยำถูกตั้งค่าสำหรับ Ruby โดยอัตโนมัติเมื่อใช้ sassc-rails gem เมื่อใช้เวอร์ชัน npm หรือ Bower กับ Ruby คุณสามารถตั้งค่าได้ด้วย:
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
Bootstrap ต้องใช้ Autoprefixer Autoprefixer เพิ่มคำนำหน้าผู้ขายให้กับกฎ CSS โดยใช้ค่าจาก Can I Use
เพื่อให้ตรงกับระดับความเข้ากันได้ของเบราว์เซอร์ของ Bootstrap อัปสตรีม ให้ตั้งค่าตัวเลือก browsers ของ Autoprefixer เป็น:
[ "Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]
assets/javascripts/bootstrap.js มี JavaScript ของ Bootstrap ทั้งหมด ซึ่งต่อกันตามลำดับที่ถูกต้อง
หากคุณใช้ 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!
@ นำเข้า "บูตสแตรป";
คุณยังสามารถรวมธีม Bootstrap เสริมได้:
@import "บูทสแตรป/ธีม";
สามารถดูรายการตัวแปร Bootstrap ทั้งหมดได้ที่นี่ คุณสามารถแทนที่สิ่งเหล่านี้ได้โดยกำหนดตัวแปรใหม่ก่อนคำสั่ง @import เช่น:
$navbar-default-bg: #312312;$light-orange: #ff8c00;$navbar-default-color: $light-orange;@import "bootstrap";
Bootstrap มีจำหน่ายในรูปแบบโมดูล Eyeglass หลังจากติดตั้ง Bootstrap ผ่าน NPM คุณสามารถนำเข้าไลบรารี Bootstrap ผ่านทาง:
@import "bootstrap-sass/bootstrap"
หรือนำเข้าเฉพาะส่วนของ Bootstrap ที่คุณต้องการ:
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
เวอร์ชัน Bootstrap สำหรับ Sass อาจแตกต่างจากเวอร์ชันอัปสตรีมในหมายเลขสุดท้ายที่เรียกว่า PATCH เวอร์ชันแพตช์อาจนำหน้าอัพสตรีมรองที่เกี่ยวข้อง สิ่งนี้เกิดขึ้นเมื่อเราต้องการเผยแพร่การเปลี่ยนแปลงเฉพาะของ Sass
ก่อนเวอร์ชัน 3.3.2 เวอร์ชัน Bootstrap สำหรับ Sass ใช้เพื่อแสดงถึงเวอร์ชันอัปสตรีม พร้อมด้วยหมายเลขเพิ่มเติมสำหรับการเปลี่ยนแปลงเฉพาะของ Sass สิ่งนี้มีการเปลี่ยนแปลงเนื่องจากปัญหาความเข้ากันได้ของ Bower และ npm
เวอร์ชันอัปสตรีมเทียบกับเวอร์ชัน Bootstrap สำหรับ 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 โปรดดูส่วนการติดตั้งด้านบน
ตอนนี้คุณสามารถดึงการเปลี่ยนแปลงต้นน้ำของโปรเจ็กต์ Bootstrap ได้โดยใช้งานคราด convert
นี่คือตัวอย่างการรันที่จะดึงสาขาหลักออกจาก repo twbs/bootstrap หลัก:
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
ตั้งค่า Bootstrap::BOOTSTRAP_SHA ใน version.rb เป็นสาขา sha
ตัวแปลงนี้จะแปลง LESS ดั้งเดิมเป็น SCSS อย่างสมบูรณ์ การแปลงเป็นไปโดยอัตโนมัติ แต่ต้องมีคำแนะนำสำหรับการแปลงบางอย่าง (ดูเอาต์พุตของตัวแปลง) โปรดส่งปัญหา GitHub ที่ติดแท็กด้วย conversion
bootstrap-sass มีผู้สนับสนุนหลักจำนวนหนึ่ง:
โทมัส แมคโดนัลด์
ทริสตัน ฮาร์วาร์ด
ปีเตอร์ กูเมสัน
เกลบ มาโซเวตสกี้
และผู้ร่วมสมทบอีกจำนวนมาก
bootstrap-sass ใช้เพื่อสร้างโปรเจ็กต์ที่ยอดเยี่ยมบนเว็บ รวมถึง Diaspora, rails_admin, Michael Hartl's Rails Tutorial, gitlabhq และ kandan
