Bài 4: Customize Bootstrap
Bài cuối trong series giới thiệu về boostrap tôi sẽ giúp các bạn cài đặt lại những thông số mặc định mà bootstrap đã đặt ra. Đó là mục thứ 6 của trang boostrap.
Có 2 cách bạn có thể làm việc với Customize:
Cách 1: Tôi tạm gọi là customize online
Bạn truy cập vào mục customize trong trang bootstrap http://getbootstrap.com/customize/ và tích vào các thuộc tính mà các bạn muốn chỉnh sửa css theo ý muốn của bạn.
Có nhiều mục để bạn thể thay đổi, nói chung là tất cả các thành phần bạn đều có thể thây đổi các thuộc tính mặc định như là: Css, components, javascript components.
Các thuộc tính như color, typography, padding,….. được khai báo bởi các biến Less, chúng cũng được gắn với từng thành phần riêng như button, form, tables, nav, navbar, tooltip,….( @ giá trị ).
Vì mình chưa đụng sâu vào trong code nên không cần quan tâm nhiều đến less, bạn chỉ cần thay đổi các giá trị ở các ô tương ứng với giá trị trong less là được. ví dụ:
Ở hệ thống grid thì ta có thể đặt số cột tùy ý, bạn có thể đặt 10 hay 16 cột cho lưới, (tất nhiên lúc đó độ rộng của cột sẽ thay đổi) hay khoảng đệm cũng vậy .
Còn nhiều thứ khác để bạn customize.
Sau khi đã thay đổi xong, bạn kéo xuống cuối trang và click vào complile và download về và thay thế vào tất cả các file của boostrap ban đầu.
Cách customize online này thích hợp với những người không muốn xem và chỉnh sửa vào những file code phức tạp, khó nhìn. Tuy nhiên nó có một nhược điểm là bạn phải thật sự biết chắc chắn mình muốn sửa ra sao, tức là bạn có một template định hình sẵn rồi (hoặc đang chuyển từ PSD sang HTML) . Đơn giản vì khi chỉnh sửa chúng, bạn sẽ không được thấy ngay kết quả.
Cách 2: Cách này dành cho những người làm việc theo cảm hứng nhiều hơn, hay nói cách khác bạn chưa định hình và chỉ ra được website sẽ như thế nào thì cách offline là hợp lý. Bạn tải file Less và Sass hoặc là file css bình thường về và vào trong từng dòng code để chỉnh sửa.
Nếu bạn hiểu biết về less hay sass thì bạn sẽ tải về và chỉnh sửa. Nhưng các bạn phải nhớ dùng trình biên dịch để dịch file less hoặc sass sang ngon ngữ css thì web mới đọc được.
Ở đây tôi sẽ giới thiệu cho các bạn chỉnh sửa file less:
Trước hết bạn vào http://getbootstrap.com/getting-started/ lấy về bản đầy đủ của Bootstrap chứa các file Less cần thiết.
Cách code và compile với Less chắc nhiều bạn cũng đã biết rồi, và sử dụng phần mềm prepros
Trước hết phải hiểu cấu trúc thư mục của nó. Về cơ bản, Less trong Bootstrap có ba thành phần chính:
- Các file less của các component , javascript hay css như
form.less, dropdown.less, navbar.less, alert.less,……. Và file variables.less - Thứ hai là các file mixins trong thư mục mixins/ của các thành phần trên. Các file này được import trong file
mixins.less. - Cuối cùng là file
bootstrap.lessimport tất cả các file ở 2 thành phần trên. Đây chính là file mà ta cần compile cuối cùng.
Để chỉnh sửa, bạn chú ý tới 2 file chính.
- Đầu tiên là file
variables.less, nó chứa tất cả các biến được dùng trong các file khác, và tất nhiên là các biến củaform, button hay panels,…..
Ví dụ đây là các biến về màu sắc:
@gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @gray-light: lighten(#000, 60%); // #999 @gray-lighter: lighten(#000, 93.5%); // #eee @brand-primary: #428bca; @brand-success: #5cb85c; @brand-info: #5bc0de; @brand-warning: #f0ad4e; @brand-danger: #d9534f; @body-bg: #fff; //** Global text color on ``. @text-color: @gray-dark; //** Global textual link color. @link-color: @brand-primary; @link-hover-color: darken(@link-color, 15%);
@gray-$ là màu sắc set theo độ sáng tối và tính chất màu còn $brand-$, như bạn đã biết, đại diện cho các màu theo ngữ cảnh. Bạn có thể xóa chúng và dùng các biến của riêng bạn. Ví dụ :
//đặt giá trị cơ bản @primary: mc(202, 100%, 50%); // tạo các biến thể theo ý mình @primaryLight: mc(basic(@primary), 100%, 70%); @primaryDark: mc(basic(@primary), 60%, 40%); @primaryFaded: mc(basic(@primary), 60%, 65%);
Nếu bạn muốn đặt lại tên biến cho toàn bộ hệ thống thì hãy bắt đầu từ variables.less. Và nhớ nên đặt biến cho những giá trị mà bạn hay dùng và hãy đặt tên theo quy luật để dễ bảo trì và mở rộng về sau.
- File thứ 2 mà bạn cần chú ý là bootstrap.less. Đây là file import 2 file cơ bản là mixins.less, variables.less và các file về css, javascript, component.
Ví dụ:
// Components @import "component-animations.less"; @import "dropdowns.less"; @import "button-groups.less"; @import "input-groups.less"; @import "navs.less"; @import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less";
Thành phần nào bạn không dùng đến thì hãy bỏ nó đi, và tất nhiên trong file mixins.less bạn cũng không cần import thành phần đó. Những file như form.less, grid.less, tables.less….. là thành phần cơ bản rồi, bạn chỉ nên sửa nó.
Nếu bạn nào thành thạo về Less rồi thì customize Bootstrap sẽ dễ dàng thôi. Một điều nữa là nếu customize bạn nên đi từng phần một để dễ theo dõi. Tránh chỉnh loạn xạ lên rồi không biết chỗ nào mà lần cả.
Customize bằng file Css
Còn nếu bạn không thích làm việc với less hoặc chưa hiểu biết nhiều về less thì bạn có thể mở file boostrap.css để chỉnh sửa tùy vào ý mình.
Vì bootstrap.css là file sau khi biên dịch của file less và đã bị compile nên tất cả code sẽ nằm trên một hàng và rất khó nhìn, khi chỉnh sửa các bạn cần chú ý nhìn kĩ từng thành phần.
Vậy là tôi đã giới thiệu xong cả series về bootstrap rùi, vì sự tiện ích của nó nên bootstrap là sự lựa chọn hàng đầu của các coder hiện nay, tôi cũng không ngoại lệ 🙂 . Mong là sau series này thì các bạn có những sản phẩm đẹp mắt với bootstrap. Nếu thấy hay nhớ like và comment nhiệt tình vào nhé!
