Số 10, Ngõ 12, Khuất Duy Tiến, Nhân Chính, Thanh Xuân, TP Hà Nội
096 803 1388

Hướng dẫn cài đặt gem “bootstrap-sass” trong Ruby on Rails

ruby

1. Bootstrap-sass là gì?

Bootstrap-sass là một phiên bản Sass-powered của Bootstrap 3. Bootstrap-sass giúp bạn thiết kế giao diện website nhanh chóng và dễ dàng hơn

2. Tại sao nên dùng Bootstrap trong thiết kế giao diện

 Bootstrap ngày càng được sử dụng nhiều, các nhà tuyển dụng cũng đã bắt đầu săn lùng web developer có kinh nghiệm về Bootstrap. Bạn có thể nhanh chóng tạo giao diện web bằng cách sử dụng các component của bootstrap, giúp bạn tránh việc lặp đi lặp lại quá trình viết ra các class CSS và những đoạn mã HTML

3. Đánh giá tổng quan Bootstrap

 Các tính năng nổi bật của Bootstrap:

  1. Phát triển ứng dụng web nhanh chóng
  2. Nền tảng dễ sử dụng
  3. Giao diện sang trọng và đầy đủ
  4. Responsive
  5. Dễ dàng tùy biến

Hạn chế:

  1. Khi ứng dụng đòi hỏi độ tối ưu cao
  2. Yêu cầu có kinh nghiệm về html, css và js

4. Hướng dẫn cài đặt gem bootstrap-sass cho ứng dụng ruby on rails

B1: Tìm tới tệp tin GemFile trong ứng dụng website của bạn để thêm thư viện bootstrap-sass

Ví dụ:  D:\Working\Tutorial-BL\GemFile

Mở tệp tin GemFile của bạn lên (Để có thể mở tệp tin bạn có thể sử dụng các công cụ như notepad++, notepad, rubymine,…)

Thêm vào cuối nội dung dòng lệnh

gem ‘bootstrap-sass’, ‘~> 3.3.6’

bootstrap-sass

Lưu ý: Hãy chắc chắn rằng thư viện sass-rails đã có sẵn trong tệp tin GemFile của bạn, nếu chưa có thì bạn phải sử dụng 2 dòng lệnh sau:

gem ‘bootstrap-sass’, ‘~> 3.3.6’

gem ‘sass-rails’, ‘>= 3.2’

B2: Mở cửa sổ dòng lệnh gõ bunble install và khởi động lại server (gõ rails s) để kiểm tra xem bạn đã cài đặt thành công thư viện bootstrap-sass chưa?

bootstrap-sass-1

B3: Thêm “Bootstrap styles” vào tệp tin application.scss (app/assets/stylesheets/application.scss )

@import “bootstrap-sprockets”;

@import “bootstrap”;

bootstrap-sass-2

Lưu ý: @bootstrap-sprockets phải được thêm vào trước @bootstrap. Thông thường nếu bạn khởi tạo project  bằng cú pháp generate new projectname thì application của bạn sẽ có phần mở rộng là .css thay vì .scss vì vậy bạn cần phải đổi lại phần mở rộng là .scss

Click chuột phải vào application.css chọn Refactor -> Rename để đuôi tệp tin thành .scss sau đó nhấn Refactor -> Do refactor

bootstrap-sass-3bootstrap-sass-4
bootstrap-sass-5

 

bootstrap-sass-6

 

Cập nhật application.scss thành công ^^!

Xóa các dòng lệnh *= require_self*= require_tree, không được sử dụng *= require trong sass hay những tệp tương tự trong thư mục stylesheet vì nó không có khả năng xử lý Bootstrap mixins hay là biến thay vào đó sử dụng cú pháp @import để import vào tệp tin sass

B4: Yêu cầu Bootstrap Javascripts trong tệp tin application.js (app/assets/javascripts/application.js) bằng cách thêm vào cuối tệp tin dòng lệnh sau:

//= require bootstrap-sprockets

bootstrap-sass-7

Lưu ý: bootstrap-sprockets and bootstrap không nên cùng được chưa trong application.js do bootstrap-sprockets cung cấp tệp tin Bootstrap Javascript một cách riêng biệt trong khi bootstrap cung cấp một tệp tin nối chưa tất cả Bootstrap Javascripts

 

Đến đây là đã cài đặt thành công “gem bootstrap-sass” cho ứng dụng ruby on rails của bạn rồi đó

bootstrap-sass-8

~TOANDK 24/11/2016~

Để lại phản hồi