การติดตั้ง Bootstrap 3 บนแอพ Rails

ฉันกำลังพยายามติดตั้ง Bootstrap 3.0 บนแอพ Rails ฉันเพิ่งจบบทช่วยสอนของ Michael Hartl และตอนนี้กำลังพยายามสร้างระบบของตัวเองโดยใช้ Bootstrap เวอร์ชันใหม่นี้ แต่ฉันมีคำถามสองสามข้อที่ไม่แน่ใจ

รายละเอียดระบบของฉัน:

• OS X Mountain Lion บน MBP
• Rails 4.0
• รูบี้ 2.0

คำถามที่ฉันมี:

1. อัญมณีใดที่ดีที่สุดที่จะใช้ใน Gemfile ของฉัน? ฉันได้พบพวกเขาสองสามคน
2. ฉันจะนำเข้าไฟล์ custom.css.scssอะไรได้บ้าง ฉันอ่านบางที่ว่ามันแตกต่างจาก 2.3.2
3. มีอะไรอีกบ้างที่ฉันต้องทำเพื่อให้ Bootstrap ทำงานได้หรือขั้นตอนที่เหลือเหมือนกับขั้นตอนที่ฉันติดตามสำหรับ Bootstrap 2.3.2 หรือไม่

แก้ไข

นี่คือสิ่งที่โครงการbootstrap-rail บน GitHubบอกว่าต้องทำก่อน:

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                              :github => 'anjlab/bootstrap-rails'

จากนั้นบอกว่าให้ทำ:

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

พวกเขาทำสิ่งเดียวกันหรือคุณต้องทำทั้งสองอย่าง?

จริงๆแล้วคุณไม่ต้องการอัญมณีสำหรับสิ่งนี้นี่คือขั้นตอนในการติดตั้ง Bootstrap 3 ใน RoR

• ดาวน์โหลด Bootstrap

• สำเนา:

  bootstrap-dist/css/bootstrap.css และ bootstrap-dist/css/bootstrap.min.css

  ถึง: vendor/assets/stylesheets

• สำเนา:

  bootstrap-dist/js/bootstrap.js และ bootstrap-dist/js/bootstrap.min.js

  ถึง: vendor/assets/javascripts

• อัปเดต: app/assets/stylesheets/application.cssโดยเพิ่ม:

  *= require bootstrap.min

• อัปเดต: app/assets/javascripts/application.jsโดยเพิ่ม:

  //= require bootstrap.min

ด้วยวิธีนี้คุณสามารถอัปเดต bootstrap ได้ทุกเมื่อที่คุณต้องการไม่ต้องรอให้อัญมณีอัปเดต นอกจากนี้ด้วยวิธีการนี้ไปป์ไลน์สินทรัพย์จะใช้เวอร์ชันย่อขนาดในการผลิต

อย่างที่หลายคนทราบดีว่าไม่จำเป็นต้องมีอัญมณี

ขั้นตอนในการดำเนินการ:

1. ดาวน์โหลด Bootstrap
   • ลิงค์ดาวน์โหลดโดยตรงBootstrap 3.1.1
   • หรือไปที่http://getbootstrap.com/

2. สำเนา

   bootstrap/dist/css/bootstrap.css
   bootstrap/dist/css/bootstrap.min.css 

   ถึง: app/assets/stylesheets

3. สำเนา

   bootstrap/dist/js/bootstrap.js
   bootstrap/dist/js/bootstrap.min.js 

   ถึง: app/assets/javascripts

4. ผนวกกับ: app/assets/stylesheets/application.css

   * = ต้องใช้ bootstrap

5. ผนวกกับ: app/assets/javascripts/application.js

   // = ต้องใช้ bootstrap

นั้นคือทั้งหมด. คุณพร้อมที่จะเพิ่มเทมเพลต Bootstrap ใหม่ ๆ

ทำไมapp/แทนที่จะเป็นvendor/ ?

สิ่งสำคัญคือต้องเพิ่มไฟล์ลงในแอพ / เนื้อหาดังนั้นในอนาคตคุณจะสามารถเขียนทับสไตล์ Bootstrap ได้

ในภายหลังคุณต้องการเพิ่มcustom.css.scssไฟล์ด้วยสไตล์ที่กำหนดเอง คุณจะมีสิ่งที่คล้ายกับสิ่งนี้ในapplication.css:

 *= require bootstrap                                                            
 *= require custom  

หากคุณวางไฟล์ bootstrap ไว้ในแอพ / เนื้อหาทุกอย่างจะทำงานตามที่คาดไว้ แต่ถ้าคุณวางไว้ในผู้ขาย / สินทรัพย์ไฟล์ Bootstrap จะโหลดเป็นครั้งสุดท้าย แบบนี้:

<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">

ดังนั้นการปรับแต่งบางอย่างของคุณจะไม่ถูกใช้เนื่องจากสไตล์ Bootstrap จะลบล้างการปรับแต่งเหล่านี้

เหตุผลเบื้องหลังนี้

Rails จะค้นหาทรัพย์สินในหลาย ๆ สถานที่ เพื่อรับรายชื่อสถานที่นี้คุณสามารถทำได้:

$ rails console
> Rails.application.config.assets.paths

ในผลลัพธ์คุณจะเห็นว่าแอป / เนื้อหามีความสำคัญเหนือกว่าดังนั้นจึงต้องโหลดก่อน

คำตอบนี้มีไว้สำหรับผู้ที่ต้องการติดตั้ง Bootstrap 3 ในแอป Rails โดยไม่ต้องใช้อัญมณี มีสองวิธีง่ายๆในการดำเนินการนี้ซึ่งใช้เวลาน้อยกว่า 10 นาที เลือกสิ่งที่ตรงกับความต้องการของคุณที่สุด Glyphicons และ Javascript ทำงานได้และฉันได้ทดสอบกับเบต้าล่าสุดของ Rails 4.1.0 เช่นกัน

1. การใช้ Bootstrap 3 กับ Rails 4 - ไฟล์ Bootstrap 3 จะถูกคัดลอกไปยังไดเร็กทอรีผู้จำหน่ายของแอปพลิเคชันของคุณ

2. การเพิ่ม Bootstrap จาก CDN ไปยังแอปพลิเคชัน Rails ของคุณ - มีเงินทุน 3 ไฟล์จะได้รับจากเงินทุน CDN

หมายเลข 2 ข้างต้นมีความยืดหยุ่นมากที่สุด สิ่งที่คุณต้องทำคือเปลี่ยนหมายเลขเวอร์ชันที่เก็บไว้ในตัวช่วยเลย์เอาต์ ดังนั้นคุณสามารถเรียกใช้ Bootstrap เวอร์ชันที่คุณเลือกได้ไม่ว่าจะเป็น 3.0.0, 3.0.3 หรือแม้แต่ Bootstrap 2 รุ่นเก่า

ขณะนี้ Twitter มีbootstrap เวอร์ชันที่พร้อมใช้งานพร้อมอัญมณีดังนั้นจึงง่ายกว่าที่เคยในการเพิ่มลงใน Rails

เพียงเพิ่ม gemfile ของคุณดังต่อไปนี้:

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

bundle install และรีสตาร์ทเซิร์ฟเวอร์ของคุณเพื่อให้ไฟล์พร้อมใช้งานผ่านไปป์ไลน์

นอกจากนี้ยังรองรับเข็มทิศและ sass เท่านั้น: https://github.com/twbs/bootstrap-sass

ฉันใช้https://github.com/yabawock/bootstrap-sass-rails

ซึ่งค่อนข้างตรงไปตรงมาการติดตั้งการอัปเดตอัญมณีและการติดตามอย่างรวดเร็วและการแก้ไขอย่างรวดเร็วในกรณีที่จำเป็น

gem bootstrap-sass

bootstrap-sass นั้นง่ายต่อการวางลงใน Rails ด้วยไปป์ไลน์สินทรัพย์

ใน Gemfile ของคุณคุณต้องเพิ่มอัญมณี bootstrap-sass และตรวจสอบให้แน่ใจว่ามีอัญมณีราง sass อยู่ - จะถูกเพิ่มในแอปพลิเคชัน Rails ใหม่ตามค่าเริ่มต้น

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2 gem 'bootstrap-sass', '~> 3.0.3.0'

bundle install และรีสตาร์ทเซิร์ฟเวอร์ของคุณเพื่อให้ไฟล์พร้อมใช้งานผ่านไปป์ไลน์

ที่มา: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

สำหรับฉันวิธีที่ง่ายที่สุดในการทำเช่นนี้คือ

1) ดาวน์โหลดและคลายซิป bootstrap เป็นไฟล์ vendor

2) เพิ่มเส้นทาง bootstrap ในการกำหนดค่าของคุณ

config.assets.paths << Rails.root.join("vendor/bootstrap-3.3.6-dist")

3) ต้องการพวกเขา

ใน css *= require css/bootstrap

ใน js //= require js/bootstrap

ทำ!

วิธีนี้ทำให้ฟอนต์โหลดโดยไม่มีการกำหนดค่าพิเศษอื่น ๆ และไม่จำเป็นต้องย้ายไฟล์ bootstrap ออกจากไดเร็กทอรีในตัว

หวังว่าการใช้สาขานี้จะช่วยแก้ปัญหาได้:

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'

ฉันคิดว่าอัญมณีที่ทันสมัยที่สุดสำหรับเวอร์ชั่น bootstrap ใหม่คือรูปแบบanjlab anjlab

แต่ฉันไม่รู้ว่ามันใช้งานได้ดีกับอัญมณีอื่น ๆ เช่น simple_form หรือไม่เมื่อคุณทำrails generate simple_form:install --bootstrapฯลฯ คุณอาจต้องแก้ไขตัวเริ่มต้นหรือการกำหนดค่าบางอย่างเพื่อให้เหมาะกับเวอร์ชัน bootstrap ใหม่

จริงๆแล้วฉันมีวิธีแก้ปัญหาง่ายๆในเรื่องนี้ซึ่งฉันเกือบจะเกาหัวว่าจะทำให้มันใช้งานได้อย่างไร hahah!

ก่อนอื่นฉันดาวน์โหลด Bootstrap (เวอร์ชัน css และ js ที่คอมไพล์แล้ว)

จากนั้นฉันวางไฟล์ bootstrap css ทั้งหมดลงในไฟล์app/assets/stylesheets/.

จากนั้นฉันวางไฟล์ bootstrap js ทั้งหมดลงในไฟล์app/assets/javascripts/.

ฉันโหลดหน้านี้ซ้ำแล้ววอลล่า! ฉันเพิ่งเพิ่ม bootstrap ใน RoR ของฉัน!