Bootstrap có phải là một Sass không?

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

7 là phiên bản Bootstrap 3 do Sass hỗ trợ, sẵn sàng đưa ngay vào các ứng dụng do Sass hỗ trợ của bạn

Đây là Bootstrap 3. Đối với Bootstrap 4, hãy sử dụng Bootstrap rubygem nếu bạn sử dụng Ruby và nếu không thì repo chính

Cài đặt

Vui lòng xem hướng dẫn thích hợp cho môi trường bạn chọn

• .
• .
• .

a. Viên ngọc trên tay vịn

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

7 dễ dàng tham gia Rails với đường dẫn nội dung

Trong Gemfile của bạn, bạn cần thêm đá quý

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

7 và đảm bảo rằng có đá quý

gem 'jquery-rails'

0 - nó được thêm vào các ứng dụng Rails mới theo mặc định

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

gem 'jquery-rails'

1 và khởi động lại máy chủ của bạn để cung cấp các tệp thông qua kênh dẫn

Nhập các kiểu Bootstrap trong

gem 'jquery-rails'

2

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

gem 'jquery-rails'

3 phải được nhập trước

gem 'jquery-rails'

4 để phông chữ biểu tượng hoạt động

Đảm bảo tệp có phần mở rộng

gem 'jquery-rails'

5 (hoặc

gem 'jquery-rails'

6 cho cú pháp Sass). Nếu bạn vừa tạo một ứng dụng Rails mới, nó có thể đi kèm với tệp

gem 'jquery-rails'

7 thay thế. Nếu tệp này tồn tại, nó sẽ được phục vụ thay vì Sass, vì vậy hãy đổi tên nó

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

Sau đó, xóa tất cả các câu lệnh

gem 'jquery-rails'

8 và

gem 'jquery-rails'

9 khỏi tệp sass. Thay vào đó, hãy sử dụng

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

60 để nhập tệp Sass

Không sử dụng

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

61 trong Sass nếu không các biểu định kiểu khác của bạn sẽ không phải là biến hoặc hỗn hợp Bootstrap

Bootstrap JavaScript phụ thuộc vào jQuery. Nếu bạn đang sử dụng Rails 5. 1+, thêm đá quý

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

62 vào Gemfile của bạn

gem 'jquery-rails'

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

6

Yêu cầu Bootstrap Javascript trong ________ 163

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

2

gem 'jquery-rails'

3 và

gem 'jquery-rails'

4 trong

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

66

gem 'jquery-rails'

3 cung cấp các tệp Javascript Bootstrap riêng lẻ (ví dụ: ____168 hoặc

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

69), trong khi

gem 'jquery-rails'

4 cung cấp một tệp được nối có chứa tất cả các Javascript Bootstrap

Bower với Rails

Khi sử dụng thay vì đá quý trong Rails, hãy định cấu hình nội dung trong

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

21

gem 'jquery-rails'

1

Thay thế các câu lệnh Bootstrap

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

60 trong

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

23 bằng

gem 'jquery-rails'

4

Thay thế chỉ thị Bootstrap

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

24 trong

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

66 bằng

gem 'jquery-rails'

7

đường ray 4. x

Vui lòng đảm bảo rằng

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

26 ít nhất là v2. 1. 4

đường ray 3. 2. x

bootstrap-sass không còn tương thích với Rails 3. Phiên bản mới nhất của bootstrap-sass tương thích với Rails 3. 2 là v3. 1. 1. 0

b. người cúi đầu

gói Bower bootstrap-sass tương thích với nút-sass 3. 2. 0+. Bạn có thể cài đặt nó với

gem 'jquery-rails'

9

Sass, JS và tất cả các tài sản khác được đặt tại tài sản

Theo mặc định, trường chính của

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

27 chỉ liệt kê

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

28 chính và tất cả các nội dung tĩnh (phông chữ và JS). Điều này tương thích theo mặc định với các trình quản lý tài sản như wiredep

Nút. công cụ khai thác js

Nếu bạn sử dụng công cụ khai thác với nút-sass, hãy nhập Bootstrap như vậy

Năm

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

29 (NB. css. ejs. scss)

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

0

Trong

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

66

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

1

Xem thêm ví dụ này manifest. js cho công cụ khai thác

c. npm / Nút. js

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

2

Cấu hình

ngổ ngáo

Theo mặc định, tất cả Bootstrap được nhập

Bạn cũng có thể nhập các thành phần một cách rõ ràng. Để bắt đầu với danh sách đầy đủ các mô-đun, hãy sao chép tệp

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

28 vào nội dung của bạn dưới dạng

gem 'jquery-rails'

12. Sau đó nhận xét các thành phần bạn không muốn từ

gem 'jquery-rails'

13. Trong tệp Sass của ứng dụng, thay thế

gem 'jquery-rails'

14 bằng

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

3

ngổ ngáo. Số chính xác

bootstrap-sass yêu cầu tối thiểu là 8 (mặc định là 5)

Độ chính xác được đặt tự động cho Ruby khi sử dụng đá quý

gem 'jquery-rails'

15. Khi sử dụng phiên bản npm hoặc Bower với Ruby, bạn có thể đặt nó bằng

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

4

ngổ ngáo. tự động sửa lỗi

Bootstrap yêu cầu sử dụng Autoprefixer. Autoprefixer thêm tiền tố của nhà cung cấp vào các quy tắc CSS bằng cách sử dụng các giá trị từ Tôi có thể sử dụng không

Để khớp , hãy đặt tùy chọn

gem 'jquery-rails'

16 của Autoprefixer thành

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

5

JavaScript

gem 'jquery-rails'

17 chứa tất cả JavaScript của Bootstrap, được nối theo đúng thứ tự

JavaScript với Sprockets hoặc Mincer

Nếu bạn sử dụng Sprockets hoặc Mincer, thay vào đó, bạn có thể yêu cầu

gem 'jquery-rails'

3 để tải các mô-đun riêng lẻ

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

6

Bạn cũng có thể tải các mô-đun riêng lẻ, miễn là bạn cũng yêu cầu bất kỳ phụ thuộc nào. Bạn có thể kiểm tra các phụ thuộc trong

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

7

Phông chữ

Các phông chữ được tham chiếu như

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

8

gem 'jquery-rails'

19 mặc định là

gem 'jquery-rails'

40 nếu sử dụng trình trợ giúp đường dẫn nội dung và

gem 'jquery-rails'

41 nếu không

Ví dụ, khi sử dụng bootstrap-sass với Compass, Sprockets hoặc Mincer, bạn phải nhập trình trợ giúp đường dẫn có liên quan trước chính Bootstrap

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

9

Cách sử dụng

ngổ ngáo

Nhập Bootstrap vào tệp Sass (ví dụ:

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

23) để nhận tất cả các kiểu, mixin và biến của Bootstrap

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

0

Bạn cũng có thể bao gồm chủ đề Bootstrap tùy chọn

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

1

Có thể tìm thấy danh sách đầy đủ các biến Bootstrap. Bạn có thể ghi đè những điều này bằng cách xác định lại biến trước chỉ thị

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

60, e. g

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

2

kính mắt

Bootstrap có sẵn dưới dạng mô-đun Eyeglass. Sau khi cài đặt Bootstrap qua NPM, bạn có thể nhập thư viện Bootstrap qua

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

3

hoặc chỉ nhập các phần của Bootstrap mà bạn cần

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

4

Phiên bản

Phiên bản Bootstrap cho Sass có thể khác với phiên bản ngược dòng ở số cuối cùng, được gọi là PATCH. Phiên bản vá lỗi có thể đi trước phiên bản phụ ngược dòng tương ứng. Điều này xảy ra khi chúng tôi cần phát hành các thay đổi dành riêng cho Sass

Trước v3. 3. 2, Phiên bản Bootstrap cho Sass được sử dụng để phản ánh phiên bản ngược dòng, với một số bổ sung cho các thay đổi dành riêng cho Sass. Điều này đã được thay đổi do vấn đề tương thích với Bower và npm

Các phiên bản ngược dòng so với các phiên bản Bootstrap cho Sass là

Thượng nguồnSass3. 3. 4+giống3. 3. 23. 3. 3<=3. 3. 13. 3. 1. x

Luôn tham khảo CHANGELOG. md khi nâng cấp

---

Phát triển và Đóng góp

Nếu bạn muốn trợ giúp phát triển bootstrap-sass, hãy đọc phần này

Bộ chuyển đổi ngược dòng

Giữ cho bootstrap-sass đồng bộ với các thay đổi ngược dòng từ Bootstrap từng là một quy trình thủ công dễ xảy ra lỗi và tốn thời gian. Với Bootstrap 3, chúng tôi đã giới thiệu một trình chuyển đổi tự động hóa việc này

Ghi chú. nếu bạn chỉ muốn sử dụng Bootstrap 3, hãy xem phần bên trên

Các thay đổi ngược dòng đối với dự án Bootstrap giờ đây có thể được đưa vào bằng cách sử dụng tác vụ rake

gem 'jquery-rails'

44

Đây là một ví dụ chạy sẽ kéo xuống nhánh chính từ repo twbs/bootstrap chính

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

5

Điều này sẽ chuyển đổi LESS mới nhất sang Sass và cập nhật lên JS mới nhất. Để chuyển đổi một nhánh hoặc phiên bản cụ thể, hãy chuyển tên nhánh hoặc hàm băm cam kết làm đối số tác vụ đầu tiên

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

6

Tập lệnh chuyển đổi mới nhất được đặt tại đây và thực hiện như sau

• Chuyển đổi các tệp Bootstrap LESS ngược dòng thành tệp SCSS phù hợp của nó
• Sao chép tất cả JavaScript ngược dòng vào

  gem 'jquery-rails'

  45, bảng kê khai Sprockets tại

  gem 'jquery-rails'

  46 và phần nối tại

  gem 'jquery-rails'

  17
• Sao chép tất cả các tệp phông chữ ngược dòng vào

  gem 'jquery-rails'

  48
• Bộ

  gem 'jquery-rails'

  49 trong phiên bản. rb đến chi nhánh sha

Bộ chuyển đổi này chuyển đổi hoàn toàn LESS gốc sang SCSS. Chuyển đổi là tự động nhưng yêu cầu hướng dẫn cho một số chuyển đổi nhất định (xem đầu ra của bộ chuyển đổi). Vui lòng gửi các vấn đề về GitHub được gắn thẻ

gem 'jquery-rails'

70

Tín dụng

bootstrap-sass có một số người đóng góp chính

• Thomas McDonald
• Tristan Harward
• Peter Gumeson
• Gleb Mazovetskiy

và một số lượng lớn các cộng tác viên khác

Bạn đang ở trong một công ty tốt

bootstrap-sass được sử dụng để xây dựng một số dự án tuyệt vời trên web, bao gồm Diaspora, rails_admin, Michael Hartl's Rails Tutorial, gitlabhq và kandan

Sass có phải là một phần của Bootstrap không?

Bootstrap và Sass có giống nhau không?

Bootstrap 4 có hỗ trợ Sass không?

Sass và LESS trong Bootstrap là gì?