CSS của Bootstrap được xây dựng dựa trên Less, một bộ tiền xử lý với các chức năng được thêm vào như biến số, mixins và các chức năng dành cho việc dịch CSS. Việc sử dụng một số lượng lớn các biến và mixins trong cả framework sẽ giúp chúng ta sử dụng các tập tin Less thay vì các tập tin CSS đã được dịch sẵn.
Các biến số và mixin liên quan đến lưới sẽ được nói rõ hơn trong phần hệ thống lưới.
Dịch Bootstrap
Bootstrap có thể được sử dụng theo ít nhất 2 cách: bằng tập tin CSS đã được dịch sẵn hoặc bằng các tập tin Less. Để dịch các tập tin Less, hãy đọc README để hiểu cách cài đặt môi trường phát triển của bạn để có thể thực thi được những lệnh cần thiết.
Các công cụ biên dịch của bên thứ 3 có thể cũng làm việc với Bootstrap, tuy nhiên chúng sẽ không được hỗ trợ bởi đội ngũ nhân viên của chúng tôi.
Các biến số
Các biến số được sử dụng trong toàn bộ cả dự án như một cách để tập trung hóa và sử dụng chung những giá trị phổ biến như màu sắc, khoảng trắng hay font chữ.
Màu sắc
Dễ dàng sử dụng hai thang màu: đỏ-xám và ngữ nghĩa. Các màu sắc thuộc thang màu đỏ-xám cung cấp các sắc thái đen thường sử dụng trong khi thang màu ngữ nghĩa cung cấp màu sắc dựa trên ngữ nghĩa của nó.
@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;
Hãy sử dụng những biến số màu sắc này một cách trực tiếp hoặc gán chúng với các biến màu sắc mà bạn muốn trong project của bạn.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
Scaffolding
Một danh sách các biến hữu dụng được sử dụng để tùy biến nhanh các phần tử chính trong cấu trúc xương sống của site của bạn.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
Liên kết
Dễ dàng style cho các liên kết của bạn bằng màu phù hợp với chỉ một giá trị duy nhất.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
Lưu ý rằng @link-hover-color sử dụng một công cụ tuyệt vời của Less để tự động tạo ra màu sắc phù hợp nhất khi hover. Bạn có thể sử dụng darken, lighten, saturate, và desaturate.
Typography
Dễ dàng thiết lập kiểu font chữ, kích thước chữ, tiêu đề với một số ít các biến của Less. Ngoài ra, Bootstrap cũng tận dụng những biến này để cho phép người dùng sử dụng các typography mixin dễ dàng hơn.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
Biểu tượng
Có hai biến được sử dụng để tùy biến tên và nơi lưu trữ biểu tượng của bạn.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Các thành phần
Các thành phần trong Bootstrap sử dụng các biến số mặc định để thiết lập các giá trị chung. Dưới đây là danh sách các biến hay sử dụng.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
Vendor mixin
Verdor mixin là mixin giúp hỗ trợ các trình duyệt bằng cách thêm các tiền tố liên quan trong CSS đã được dịch của bạn.
Box-sizing
Khởi tạo lại box model của các thành phần bằng một mixin đơn. Đối với từng ngữ cảnh, hãy đọc bài viết hữu ích sau từ Mozilla.
mixin đã bị loại bỏ trong phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
Góc bo tròn
Ngày nay, hầu như toàn bộ các trình duyệt tiên tiến đều hỗ trợ thuộc tính border-radius (không cần tiền tố). Vì thế sẽ không có mixin .border-radius(), tuy nhiên Bootstrap cũng thêm những shortcut để nhanh chóng bo tròn 2 góc thuộc một cạnh bất kỳ của một đối tượng.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
Đổ bóng
Nếu đa số đối tượng người dùng mà bạn hướng đến đều sử dụng các trình duyệt và thiết bị tiên tiến, bạn có thể sử dụng thuộc tính box-shadow không tiền tố. Tuy nhiên để hỗ trợ cho các thiết bị Android (phiên bản nhỏ hơn 4) và iOS (phiên bản nhỏ hơn 5), hãy sử dụng mixin đã bị loại bỏ để thêm vào tiền tố -webkit.
Mixin này đã bị loại bỏ ở phiên bản 3.1.0, vì Bootstrap không chính thức hỗ trợ các nền tảng lỗi thời (các nền tảng không hỗ trợ các thuộc tính chuẩn). Để bảo toàn tính tương thích ngược, Bootstrap sẽ tiếp tục mixin này ở bên trong cho tới tận phiên bản 4 của Bootstrap.
Hãy chắc chắn sử dụng các màu rgba() trong giá trị box-shadow của bạn để chúng có thể hiển thị phù hợp nhất với màu nền.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Sự dịch chuyển (Transition)
Có 3 mixin của Less hỗ trợ transition một cách linh hoạt. Thiết lập tất cả các thông tin transition với chỉ duy nhất một mixin hoặc chỉ rõ thời gian thực hiện và thời gian trễ của transition nếu cần thiết.
Mixin này đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
Bạn có thể quay, chuyển đổi tỉ lệ, tịnh tiến hoặc kéo lệch bất kỳ đối tượng nào.
Mixin này đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
Sự chuyển động (Animation)
Bạn cót thể sử dụng một mixin để khai báo tất cả các thuộc tính chuyển động của CSS3 trong một lần hoặc các mixin khác cho các thuộc tính riêng lẻ.
Mixin này đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
Độ trong suốt (Opacity)
Thiết lập độ trong suốt cho toàn bộ các trình duyệt và cung cấp filter hỗ trợ trình duyệt IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Placeholder
Cung cấp ngữ cảnh cho các form-control nằm bên trong mỗi trường.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
Cột
Tự động sinh ra các cột bằng CSS bên trong một phần tử đơn lẻ.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
Gradient
Bạn có thể dễ dàng chuyển đổi 2 màu sắc thành màu nền theo hiệu ứng gradient. Bạn cũng có thể thiết lập hướng gradient, sử dụng tới 3 màu sắc khác nhau hoặc sử dụng gradient theo vòng tròn. Bạn chỉ cần duy nhất một mixin để thực hiện được tất cả những thứ mà bạn muốn.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
Bạn cũng có thể chỉ rõ góc của 2 màu cơ sở (gradient tuyến tính):
#gradient > .directional(#333; #000; 45deg);
Nếu bạn muốn gradient theo dạng kẻ sọc, bạn chỉ việc chỉ rõ một màu cơ sở và chúng tôi sẽ phủ các đường sọc trắng mờ lên cho bạn.
#gradient > .striped(#333; 45deg);
Ngoài ra, nếu bạn muốn thiết lập gradient theo 3 màu, hãy thiết lập theo thứ tự: Màu thứ nhất, màu thứ 2, điểm dừng của màu thứ 2 và màu thứ 3 với những mixin sau:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Hãy lưu ý rằng, bất cứ khi nào bạn xóa bỏ một gradient, hãy nhớ xóa cả thuộc tính filter (dành riêng cho IE) mà bạn đã thêm vào. Bạn có thể làm thế bằng cách sử dụng mixin .reset-filter() cùng với background-image: none;.
Các mixin tiện ích
Các mixin này kết hợp các thuộc tính CSS không liên quan đến nhau để đạt được mục tiêu.
Clearfix
Hãy thay thế việc thêm class="clearfix" bằng cách thêm mixin .clearfix() vào các phần tử thích hợp. Hãy sử dụng micro clearfix của Nicolas Gallager.
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Căn giữa theo hàng ngang
Nhanh chóng căn giữa bất kỳ phần tử nào bên trong phần tử cha của nó. Lưu ý rằng, các thuộc tính width và max-width yêu cầu phải được thiết lập.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Trợ giúp về kích thước
Dễ dàng chỉ rõ các chiều của một đối tượng.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Textarea cho phép thay đổi kích thước
Dễ dàng cấu hình các tùy chọn về thay đổi kích thước cho các textarea hoặc bất kỳ phần tử nào khác. Mặc định theo cách thức hoạt động thông thường của trình duyệt ( both ).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Cắt ngắn text
Dễ dàng cắt ngắn text bằng duy nhất một mixin. Lưu ý rằng, các phần tử phải được hiển thị ở dạng block hoặc inline-block.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Hình ảnh Retina
Xác định rõ hai đường dẫn ảnh và các chiều của ảnh @1x, và Bootstrap sẽ cung cấp một media query @2x. Nếu bạn có nhiều ảnh, hãy cân nhắc việc viết CSS cho hình ảnh của bạn bằng tay trong một media query.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}