Nắm được những phần chính trong kết cấu của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi tới việc phát triển web tốt hơn, nhanh hơn và mạnh hơn.HTML5 doctypeBootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những thứ yêu cầu phải sử dụng HTML5 doctype. Vì thế, hãy thêm nó vào dòng đầu tiên trong các dự án của bạn. <!DOCTYPE html>
<html lang="en">
...
</html>
Ưu tiên các thiết bị di độngVới Bootstrap 2, chúng tôi
đã thêm các style thân thiện với các thiết bị di động như một phần chính của framework. Tuy nhiên trong Bootstrap 3, chúng tôi đã viết lại dự án để có thể tương thích với các thiết bị di động ngay từ khi bắt đầu. Thay vì phải thêm các style tùy chọn cho các thiết bị, chúng tôi đã gắn trực tiếp vào core. Các style dành cho thiết bị di động nằm xuyên suốt trong cả thư viện thay vì nằm trong các tập tin riêng lẻ. Để đảm bảo việc render và "chạm phóng to", hãy thêm thẻ meta
viewport vào <head> của bạn. <meta name="viewport" content="width=device-width, initial-scale=1">
Bạn có thể vô hiệu hóa tính năng phóng to trên các thiết bị di động bằng cách thêm user-scalable=no vào thẻ meta viewport. Thuộc tính này sẽ vô hiệu hóa tính năng phóng to, điều đó có nghĩa là người dùng chỉ có thể cuộn trang, tạo cảm giác như người dùng đang sử dụng một ứng dụng điện thoại thuần túy. Nhìn chung, chúng tôi không đề xuất sử dụng thuộc tính này trên tất cả các site, vì vậy hãy cân nhắc trước khi sử dụng. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Typography và các liên kếtBootstrap thiết lập các style chung cho việc hiển thị, typography và các liên kết. Cụ thể, chúng tôi: - Thiết lập
background-color: #fff; trên thẻ body - Sử dụng các thuộc tính
@font-family-base , @font-size-base , and @line-height-base làm cơ sở của typography - Thiết lập màu sắc chung của liên kết bằng thuộc tính
@link-color và áp dụng hiệu ứng gạch dưới khi :hover
Những style này nằm trong tập tin scaffolding.less . Normalize.cssĐể cải thiện việc render đối với các trình duyệt, chúng tôi sử dụng Normalize.css, một dự án được thực hiện bởi Nicolas Gallagher và Jonathan Neal. ContainersDễ dàng căn giữa nội dung
của một trang bằng cách bọc nội dung của nó bên trong một .container . Container thiết lập thuộc tính width trên tất cả các kích thước được áp dụng vào media query để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do padding và chiều rộng cố định nên container mặc định không thể bị lồng. Sử dụng class .container cho một container responsive có chiều rộng cố định. <div class="container">
...
</div>
Sử dụng class .container-fluid cho container có chiều rộng tối đa, bằng chiều rộng khung nhìn của
bạn.
<div class="container-fluid">
...
</div>
Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố
cục theo ngữ nghĩa.. Giới thiệuCác hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của Bootstrap hoạt động: - Các hàng được đặt bên trong một
.container (fixed-width) hoặc .container-fluid (full-width) để căn chỉnh và thiết lập padding một cách thích hợp. - Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang.
- Nội dung cần phải được đặt trong các cột,
và chỉ có duy nhất các cột là phần tử con trực tiếp của các hàng.
- Các class được định nghĩa trước như
.row và .col-xs-4 luôn sẵn có để dựng lên các bố cục lưới một cách nhanh nhất. Một số ít các mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa. - Các cột tạo nên các gutter (khoảng trắng nằm giữa nội dung cột) bằng
padding . Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong các hàng do giá trị margin âm trên các .row . - Các cột của lưới
được tạo ra bằng cách chỉ định số các cột mà bạn muốn sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class
.col-xs-4 .
Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của bạn. Chúng tôi sử dụng các media query sau trong các tập tin Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng tôi. /* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Để tương thích với
một số ít các thiết bị, thi thoảng chúng tôi mở rộng các media query này bằng cách thêm thuộc tính max-width . @media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Các tùy chọn của lướiHãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
---|
Grid behavior | Horizontal at all times
| Collapsed to start, horizontal above breakpoints
|
---|
Container width | None (auto)
| 750px
| 970px
| 1170px
|
---|
Class prefix | .col-xs-
| .col-sm-
| .col-md-
| .col-lg-
|
---|
# of columns | 12
|
---|
Column width | Auto
| ~62px
| ~81px
| ~97px
|
---|
Gutter width | 30px (15px on each side of a column)
|
---|
Nestable | Yes
|
---|
Offsets | Yes
|
---|
Column ordering | Yes
|
---|
Ví dụ: Chồng theo hàng ngangSử dụng một tập hợp các class .col-md-* , bạn có thể tạo ra một hệ thống lưới cơ bản. Hệ thống này sẽ hiển thị chồng lên nhau trên các thiết bị di động và tablet (kích thước nhỏ) trước khi hiển thị dưới dạng hàng ngang trên màn hình máy tính (kích thước trung bình). Hãy đặt các cột của lưới vào bên trong các .row . .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1
.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-4 .col-md-4 .col-md-4 <div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
Ví dụ: Fluid containerChuyển đổi bất kỳ một bố cục lưới fixed-width nào thành một bố cục full-width bằng cách thay đổi .container ngoài cùng thành .container-fluid . <div class="container-fluid">
<div class="row">
...
</div>
</div>
Ví dụ: Điện thoại di động và máy tính để bànBạn
không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm .col-xs-* .col-md-* vào các cột của bạn. Hãy xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động. .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Ví
dụ: Điện thoại, máy tính bảng, máy tính để bànBạn có thể tạo ra các bố cục cơ động hơn nữa bằng cách sử dụng các class dành cho máy tính bảng .col-sm-* . .col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 <div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
Reset cột responsiveKhi sử dụng 4 bậc (tương ứng với 4 mốc kích thước của màn hình) của hệ thống lưới,
bạn sẽ gặp phải một vấn đề, đó là tại một mốc kích thước xác định, có thể sẽ có một cột cao hơn các cột khác trong cùng một hàng. Để sửa lỗi này, hãy sử dụng một class .clearfix cùng với các class responsive tiện ích của chúng tôi. .col-xs-6 .col-sm-3 Resize your viewport or check it out on your phone for an example. .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Ngoài việc clear các cột tại các mốc Responsive, có thể bạn cần thực hiện reset offset, push, hooặc pull. Hãy tham khảo the grid example để hiểu rõ hơn. <div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
Di chuyển cộtDi chuyển cột sang phía bên phải bằng cách sử dụng các class .col-md-offset-* . Các class này làm tăng khoảng lề trái (margin-left) của một cột lên bằng * cột. Ví
dụ, .col-md-offset-4 dịch .col-md-4 sang bên phải một khoảng cách bằng 4 lần chiều rộng của một cột. .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3 <div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
Các cột lồng nhauĐể tạo ra các cột lồng nhau, Hãy thêm một .row mới và một tập các cột .col-md-* bên trong cột .col-md-* đã tồn tại. Các hàng nằm bên trong có thể
chứa một tập hợp các cột, tối đa là 12 hoặc ít hơn. Level 1: .col-md-9 Level 2: .col-md-6 Level 2: .col-md-6 <div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>
Thứ tự cộtDễ dàng thay đổi thứ tự của các cột trong hệ thống lưới bằng cách sử dụng các class .col-md-push-* và .col-md-pull-* . .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9 <div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Các biến số và mixin LessNgoài
các class của lưới được xây dựng sẵn để thuận tiện cho việc dựng bố cục một cách nhanh chóng, Bootstrap còn sử dụng các biến số và mixin Less để tạo ra các bố cục ngữ nghĩa đơn giản của riêng bạn. Biến sốCác biến số xác định số lượng cột, độ rộng và mốc kích thước media query. Chúng tôi sử dụng những biến này để tạo ra các class lưới (đã đề cập ở phía trên) cũng như là các mixin được liệt kê bên
dưới đây. @grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
MixinsMixin được sử dụng để liên kết với các biến số , mục đích là để tạo ra CSS ngữ nghĩa cho các cột riêng lẻ trong hệ thống lưới. // Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
Ví dụ áp dụngBạn có thể thay đổi giá trị các biến số về các giá trị tùy biến của riêng bạn, nếu không hãy sử dụng các mixin cùng với các giá trị mặc định của nó.Đây là một ví dụ về việc sử dụng các thiết lập mặc định để tạo ra một bố cục 2 cột với khoảng trắng ở giữa. .wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
Tiêu đềTất cả các thẻ tiêu đề của HTML, từ thẻ <h2> tới <h6> , đều sẵn có. Các class từ .h2 tới .h6 được sử dụng khi bạn muốn style các thẻ tiêu đề nhưng vẫn muốn text của bạn hiển thị trên cùng dòng.
h2. Bootstrap heading
| Semibold 36px
| h2. Bootstrap heading
| Semibold 30px
| h3. Bootstrap heading
| Semibold 24px
| h4. Bootstrap heading
| Semibold 18px
| h5. Bootstrap heading
| Semibold 14px
| h6. Bootstrap heading
| Semibold 12px
|
<h2>h2. Bootstrap heading</h2>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
Bạn cũng có thể tạo ra các text khác đi kèm trong tiêu đề bằng thẻ <small> hoặc class .small .
h2. Bootstrap heading Secondary text
| h2. Bootstrap heading Secondary text
| h3. Bootstrap heading Secondary text
| h4. Bootstrap heading Secondary text
| h5. Bootstrap heading Secondary text
| h6. Bootstrap heading Secondary text
|
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
Bodyfont-size mặc định của Bootstrap là 14px, với line-height có tỷ lệ 1.428. Các thuộc tính này được áp dụng cho phần <body> và tất cả các đoạn văn. Hơn nữa, <p> (các đoạn văn) sẽ nhận khoảng căn lề dưới (margin-bottom) bằng một nửa line-height của chúng (mặc định là 10px).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget
metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Làm nổi bật đoạn vănBạn có thể làm một đoạn văn trở nên nổi bật hơn bằng cách thêm class .lead . Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Xây dựng với LessTỉ lệ typograghy trong Bootstrap dựa trên 2 biến trong Less trong variables.less: @font-size-base và @line-height-base . Biến thứ
nhất là font-size cơ sở được sử dụng rất phổ biến, còn biến thứ hai là line-height cơ sở. Chúng tôi sử dụng những biến này và một số phép toán cơ bản để tạo ra margin, padding và line-height. Tùy biến chúng và Bootstrap sẽ tự động điều chỉnh. Nhấn mạnhHãy sử dụng các thẻ nhấn mạnh mặc định của HTML với những style đơn giản. Text có kích thước nhỏĐể giảm tính nhấn mạnh cho các đoạn text hoặc khối text, hãy sử dụng thẻ <small> để thay đổi kích
thước của những text đó bằng 85% so với kích thước của phần tử cha. Các phần tử tiêu đề nhận những font-size của riêng chúng khi nằm trong thẻ <small> . Bạn cũng có thể sử dụng một phần tử có class .small trên cùng dòng thay vì <small> . This line of text is meant to be treated as fine print. <small>This line of text is meant to be treated as fine print.</small>
In đậmĐược sử dụng để nhấn mạnh một đoạn text với giá trị font-weight cao. The following snippet of text is rendered as bold
text. <strong>rendered as bold text</strong>
In nghiêngĐược sử dụng để nhấn mạnh một đoạn text với chữ in nghiêng. The following snippet of text is rendered as italicized text. <em>rendered as italicized text</em>
Các phần tử thay thếBạn có thể tự do sử dụng các thẻ <b> và <i> in HTML5. Thẻ <b> được sử dụng để in đậm một từ hoặc cụm từ trong khi thẻ <i> được sử dụng phổ biến cho các thuật ngữ về kỹ thuật, âm thanh,...
Các class căn chỉnhDễ dàng căn chỉnh lại các text với các thành phần khác bằng các class căn chỉnh text. Left aligned text. Center aligned text. Right aligned text. Justified text. <p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
Tên viết tắtSử dụng thẻ <abbr> của HTML để hiển thị tên viết tắt, và sẽ hiển thị tên đầy đủ khi hover qua. Các thẻ này có thuộc tính title đi kèm, có đường viền bên dưới ở dạng các dấu chấm liền nhau và khi
hover qua sẽ hiển thị con trỏ dạng trợ giúp. Tên viết tắt cơ bảnSử dụng thuộc tính title có giá trị là tên đầy đủ của tên viết tắt trên thẻ <abbr> An abbreviation of the word attribute is attr. <abbr title="attribute">attr</abbr>
InitialismThêm class .initialism vào thẻ <abbr> để thiết lập font-size nhỏ hơn một chút. HTML is the best thing since sliced bread. <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Địa chỉHiển thị thông tin liên hệ cho phần tử cha gần nhất hoặc cả <body> . Để bảo toàn định dạng, hãy kết thúc tất cả các dòng bằng thẻ <br> . Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890 Full Name
[email protected]<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
Khối trích dẫnĐể trích dẫn một khối nội dung từ một nguồn khác trong tài liệu của bạn. Khối trích dẫn mặc địnhHãy bọc một khối HTML bất kỳ mà bạn muốn trích dẫn bằng thẻ <blockquote> . ưu
tiên sử dụng thẻ <p> bên trong <blockquote> . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Các tùy chọn cho khối trích dẫnBạn có thể tùy chọn thay đổi nội dung và style của khối <blockquote> . Đặt tên một nguồnHãy thêm một <footer> để xác định nguồn trích dẫn đến từ đâu. Bọc tên của source-work bằng thẻ <cite> . Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Các dạng hiển thị thay thếĐể căn phải nội dung trích dẫn, hãy sử dụng class .blockquote-reverse . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote-reverse">
...
</blockquote>
Danh sáchDanh sách không có thứ tựMột danh sách các hạng mục được sắp xếp không theo một thứ tự nào cả.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Danh sách có thứ tự
Một danh sách các hạng mục được sắp xếp theo một thứ tự nhất định. - Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Danh sách không được styleLoại bỏ thuộc tính list-style mặc định của danh sách và khoảng căn
lề trái (margin-left) trên tất cả các hạng mục của danh sách. Lưu ý rằng, việc này chỉ áp dụng cho các thẻ <li> là con trực tiếp của <ul> hoặc <ol> , điều đó có nghĩa là bạn có thể sẽ cần thêm class cho các danh sách khác nằm sâu bên trong. - Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>
Danh sách cùng dòngĐặt tất cả các hạng mục trong danh sách trên cùng một dòng bằng cách sử dụng thuộc tính display: inline-block; cùng thuộc tính padding có giá trị nhỏ. - Lorem ipsum
- Phasellus iaculis
- Nulla
volutpat
<ul class="list-inline">
<li>...</li>
</ul>
Thông tin chi tiếtMột danh sách các thuật ngữ với thông tin đi kèm. Description listsA description list is perfect for defining terms.EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod. <dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Chi
tiết theo hàng ngangHãy đặt các thuật ngữ và thông tin đi kèm bên trong các thẻ <dl> nằm sát nhau. Bình thường bạn chỉ cần sử dụng những thẻ <dl> mặc định, tuy nhiên khi thanh điều hướng mở rộng ra, bạn hãy sử dụng <dl> dạng này. Description listsA description list is perfect for defining terms.EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget
metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod.Felis euismod semper eget laciniaFusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. <dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Tự động cắt ngắnDanh sách các thông tin theo hàng ngang sẽ tự động cắt ngắn các thuật ngữ quá dài để nằm vừa vặn trong cột bên trái bằng cách sử dụng thuộc tính text-overflow . Để tương thích với các khung
nhìn hẹp, chúng sẽ thay đổi về dạng xếp chồng mặc định. Cùng dòngKhi bạn muốn sử dụng những đoạn mã gợi ý trên cùng 1 dòng, hãy đóng gói nó bằng thẻ <code> . For example, <section> should be wrapped as inline. For example, <code><section></code> should be wrapped as inline.
Đầu vào từ người dùngSử dụng thẻ <kbd> để chỉ rõ đầu vào mà người dùng có thể nhập được từ bàn phím. To switch directories, type cd followed by the name of
the directory. To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
Khối cơ bảnSử dụng thẻ <pre> khi bạn muốn hiển thị code trên nhiều dòng. Nhưng hãy nhớ thay thế những dấu ngoặc nhọn (<,>) trong đoạn code của bạn bằng những ký tự đặc biệt tương ứng. <p>Sample text here...</p> <pre><p>Sample text here...</p></pre>
Bạn cũng có thể thêm class .pre-scrollable để thiết lập max-height bằng 350px và cho phép người dùng cuộn nội dung theo chiều dọc. Biến sốĐể chỉ rõ đâu là biến số, hãy sử
dụng thẻ <var> . y = mx + b <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Đầu ra mẫuĐể chỉ rõ đầu ra mẫu của một chương trình, hãy sử dụng thẻ <samp> . This text is meant to be treated as sample output from a computer program. <samp>This text is meant to be treated as sample output from a computer program.</samp>
Ví dụ cơ bảnĐối với các style đơn giản —chỉ cần các dòng kẻ phân chia giữa các dòng—bạn chỉ cần thêm class cơ sở .table vào
bất kỳ thẻ <table> mà bạn muốn sử dụng. Điều này dường như là thừa thãi, tuy nhiên để có thể sử dụng rộng rãi bảng cho các plugin khác như calendar và date pickers, chúng tôi đã lựa chọn để tách biệt với các style tùy biến của bảng.
# | First Name | Last Name | Username |
---|
1
| Mark
| Otto
| @mdo
| 2
| Jacob
| Thornton
| @fat
| 3
| Larry
| the Bird
| @twitter
|
<table class="table">
...
</table>
Bảng có dòng kẻ sọcHãy sử dụng class .table-striped để thêm kiểu style dạng dòng kẻ sọc cho bất kỳ bảng nào mà bạn muốn. Tương thích với hầu hết các loại trình duyệtBảng kẻ sọc được style thông qua selector :nth-child của CSS(Không được hỗ trợ trong Internet Explorer 8).
# | First Name | Last Name | Username |
---|
1
| Mark
| Otto
| @mdo
| 2
| Jacob
| Thornton
| @fat
| 3
| Larry
| the Bird
| @twitter
|
<table class="table table-striped">
...
</table>
Bảng có viềnThêm class .table-bordered để hiển thị đường viền cho bảng và các ô trong bảng.
# | First Name | Last Name | Username |
---|
1
| Mark
| Otto
| @mdo
| Mark
| Otto
| @TwBootstrap
| 2
| Jacob
| Thornton
| @fat
| 3
| Larry the Bird
| @twitter
|
<table class="table table-bordered">
...
</table>
Bảng có dòng đổi màu khi hoverThêm class .table-hover để kích hoạt trạng thái hover trên các dòng của bảng bên trong thẻ <tbody> .
# | First Name | Last Name | Username |
---|
1
| Mark
| Otto
| @mdo
| 2
| Jacob
| Thornton
| @fat
| 3
| Larry the Bird
| @twitter
|
<table class="table table-hover">
...
</table>
Bảng bó chặtThêm class .table-condensed để làm cho các ô trong bảng gần nhau hơn.
# | First Name | Last Name | Username |
---|
1
| Mark
| Otto
| @mdo
| 2
| Jacob
| Thornton
| @fat
| 3
| Larry the Bird
| @twitter
|
<table class="table table-condensed">
...
</table>
Các class theo ngữ cảnhSử dụng các class theo ngữ cảnh để tô màu cho các dòng hoặc các ô trong bảng.
Class | Description |
---|
.active
| Áp dụng màu hover cho một dòng hoặc một ô trong bảng
| .success
| Biểu thị sự thành công hoặc một hành động tích cực
| .info
| Biểu thị sự thay đổi và hành động mang tính thông báo
| .warning
| Biểu thị sự cảnh báo hoặc nhắc nhở
| .danger
| Biểu thị sự nguy hiểm hoặc một hành động mang tính tiêu cực
|
# | Column heading | Column heading | Column heading |
---|
1
| Column content
| Column content
| Column content
| 2
| Column content
| Column content
| Column content
| 3
| Column content
| Column content
| Column content
| 4
| Column content
| Column content
| Column content
| 5
| Column content
| Column content
| Column content
| 6
| Column content
| Column content
| Column content
| 7
| Column content
| Column content
| Column content
| 8
| Column content
| Column content
| Column content
| 9
| Column content
| Column content
| Column content
|
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Bảng responsiveĐể tạo ra bảng responsive, hãy bọc phần tử có class .table bằng một phần tử khác có class .table-responsive , khi đó bảng sẽ tự động điều chỉnh kích thước cho phù hợp và cho phép người dùng cuộn ngang trên các thiết bị di động (độ phân dải dưới 768px)
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|
1
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| 2
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| 3
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
|
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|
1
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| 2
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| 3
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
| Table cell
|
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Ví dụ cơ bảnCác thành phần của form (form-control) tự động nhận một số style chung. Toàn bộ các form-control <input> , <textarea> , và <select> với class .form-control được thiết lập mặc định width: 100%; . Bọc các nhãn và các form-control bằng một thẻ có class .form-group để tối ưu hóa khoảng trắng. <form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Đừng nhầm lẫn giữa form groups với input groupsĐừng lẫn lộn giữa form group
với input groups, hãy đặt input group vào bên trong của form group. Hãy thêm class .form-inline vào thẻ <form> của bạn nếu bạn muốn form-control của bạn hiển thi dưới dạng inline-block và được căn lề trái. Lưu ý rằng, class này chỉ hoạt động với những form nằm bên trong khung nhìn có độ rộng tối thiểu bằng 768 pixel. Yêu cầu độ
rộng tùy biếnInput, select và textarea có độ rộng mặc định là 100% trong Bootstrap. Để sử dụng form trên cùng dòng, bạn sẽ phải thiết lập độ rộng trên các form-control nằm bên trong nó. Luôn luôn thêm nhãnTrình đọc của màn hình sẽ gặp vấn đề với form của bạn nếu bạn không gắn nhãn cho từng input. Khi sử dụng form cùng dòng, bạn có thể ẩn các nhãn đi bằng cách sử dụng class .sr-only . <form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Hãy
sử dụng các class của lưới của Bootstrap để căn chỉnh các nhãn và nhóm các form-control dàn hàng ngang bằng cách thêm class .form-horizontal vào form. Class này sẽ làm cho các .form-group s hoạt động giống như các dòng của lưới, vì vậy không cần phải sử dụng class .row . <form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Các control được hỗ trợSau đây là ví dụ về các form control được hỗ trợ trên cùng một layout. InputInput là form-control dựa text phổ biến nhất, bao gồm toàn bộ các kiểu
input của HTML5: text , password , datetime , datetime-local , date , month , time , week , number , email , url , search , tel , và color . Yêu cầu khai báo kiểuCác input sẽ chỉ được style đầy đủ nếu thuộc tính type của chúng được khai báo rõ ràng. <input type="text" class="form-control" placeholder="Text input">
TextareaTextarea là một dạng form-control hỗ trợ nhiều dòng text. Khi cần thiết, hãy thay đổi thuộc tính rows . <textarea class="form-control" rows="3"></textarea>
Checkbox và radioCheckbox
được sử dụng cho việc lựa chọn một hoặc nhiều tùy chọn trong một danh sách. Trong khi đó, radio được sử dụng cho việc lựa chọn 1 tùy chọn duy nhất. Mặc định (xếp chồng)<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
Checkbox trên cùng dòngHãy sử dụng class .checkbox-inline hoặc .radio-inline để hiển thị danh sách các checkbox/radio trên cùng một dòng. <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
SelectSử dụng tùy chọn mặc định hoặc thêm multiple để hiển thị nhiều tùy chọn cùng một lúc. <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Khi bạn cần đặt một dòng text thuần bên cạnh một nhãn bên trong một form dàn hàng ngang, hãy sử dụng class .form-control-static trên thẻ <p> . <form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
Chúng tôi loại bỏ outline mặc định trên một số form-control và sử dụng box-shadow để hiển thị input như đang được :focus . Demo :focus stateThe above example input uses custom styles in our documentation to
demonstrate the :focus state on a .form-control . Hãy thêm thuộc tính disabled vào một input để ngăn cản người dùng nhập dữ liệu và làm cho input hiển thị giống như là đã bị vô hiệu hóa. <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Fieldset đang bị vô hiệu hóaHãy thêm thuộc tính disabled vào một <fieldset> để vô hiệu hóa toàn bộ các form-controll nằm bên trong <fieldset> . Chức năng liên kết của thẻ
<a> không bị ảnh hưởngClass này sẽ chỉ làm thay đổi hình thức của các nút <a class="btn btn-default"> chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa chức năng liên kết, hãy sử dụng Javascript. Tính tương thích với các trình duyệtMặc dù Bootstrap sẽ áp dụng các style này trên tất cả các trình duyệt, tuy nhiên Internet Explorer 9 (và các phiên bản thấp hơn) không hoàn toàn hỗ trợ thuộc tính disabled trên một <fieldset> . Vì thế, hãy sử dụng
Javascript để vô hiệu hóa fieldset trên các trình duyệt này. <form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Add the readonly boolean attribute on an input to prevent user input and style the input as disabled. <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Trạng thái xác nhậnBootstrap cung cấp các style xác nhận biểu thị các trạng thái lỗi, cảnh báo và thành công áp dụng trên các form-control. Để sử dụng, hãy thêm các class .has-warning , .has-error ,
hoặc .has-success vào phần tử cha. Bất kỳ phần tử nào có class .control-label , .form-control , và .help-block bên trong phần tử cha đó sẽ được áp dụng style xác nhận. <div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
Các biểu tượng tùy chọnNếu bạn muốn tăng tính trực quan, hãy sử dụng các biểu tượng tùy chọn bằng cách sử dụng các class đi kèm. Biểu tượng, nhãn và nhóm các inputViệc thiết lập vị trí cho các biểu tượng là cần thiết cho các input không gắn nhãn và cho các
input groups bằng cách thêm một add-on vào phía bên phải. Đối với các input không gắn nhãn, hãy điều chỉnh giá trị top. Đối với nhóm input, hãy điều chỉnh giá trị right một cách thích hợp tùy thuộc vào bề rộng của add-on. <div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
Các biểu tượng tùy chọn cũng hoạt động trên các form cùng dòng và form dàn hàng ngang.<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
Optional icons with hidden
.sr-only labelsFor form controls with no visible label, add the .sr-only class on the label. Bootstrap will automatically adjust the position of the icon once it's been added. <div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
Hãy sử dụng các class tương tự như .input-lg để thiết lập chiều cao, và sử dụng các class tương tự như .col-lg-* để thiết lập chiều rộng của form-control (tương tự như các cột của lưới). Thay đổi chiều
caoTạo ra các form-control cao hơn hoặc thấp hơn tương ứng với các kích thước của nút. <input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
Thay đổi chiều rộngBọc các input bằng các cột của lưới hoặc bất kỳ phần tử cha tùy biến nào để dễ dàng điều chỉnh về độ rộng mong muốn (xem ví dụ bên dưới để biết thêm chi tiết). <div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
Text trợ giúpĐể thêm text trợ giúp cho form-control, hãy bọc text đó bằng một thẻ <span> có class .help-block <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
Các tùy chọnSử dụng bất cứ class nào sẵn có của nút để style cho nút. <!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
Các kích cỡBạn muốn nút to hay nút nhỏ? Hãy sử dụng các class .btn-lg , .btn-sm , hoặc .btn-xs cho các kích thước khác nhau. <p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
Nếu bạn muốn tạo ra một nút có chiều rộng bằng chiều rộng của phần tử cha (full-width), hãy sử dụng class .btn-block . <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
Trạng thái kích hoạtCác
nút sẽ hiển thị dưới hình thức giống như là đã được bấm (với màu nền tối, đường viền tối hoặc bóng đổ vào phía trong) khi được kích hoạt. Hãy sử dụng :active với thẻ <button> và .active với thẻ <a> . Tuy nhiên, bạn cũng có thể sử dụng .active trên thẻ <button> nếu bạn muốn tái tạo trạng thái kích hoạt. Không nhất thiết phải thêm :active như một class giả, nhưng nếu bạn muốn 2 nút hiển thị giống nhau, hãy sử dụng class .active . <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
Phần
tử <a>Hãy sử dụng class .active trên các nút dạng <a> . Primary link Link <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
Trạng thái vô hiệu hóaLàm cho nút trông giống như không thể click vào được bằng cách làm mờ chúng đi 50%. Hãy sử dụng thuộc tính disabled trên các nút dạng
<button> . <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
Tính tương thích của trình duyệtNếu bạn thêm thuộc tính disabled vào một <button> , trình duyệt Internet Explorer 9 (và các phiên bản thấp hơn) sẽ sinh ra text màu xám cùng với bóng của nó. Rất tiếc là chúng tôi vẫn chưa sửa được lỗi này. Phần tử <a>Hãy sử dụng class .disabled trên các nút dạng <a> . Primary link
Link <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
Chúng tôi sử dụng .disabled như một class tiện ích trong trường hợp này, tương tự như class .active class, vì vậy không nhất thiết phải có tiền tố đi kèm. Chức năng liên kết không bị ảnh hưởngClass này sẽ chỉ thay đổi về mặt hình thức của thẻ code><a> chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa liên kết trên thẻ <a> , hãy sử dụng
Javascript. Sử dụng theo ngữ cảnh cụ thểMặc dù các class chỉ được sử dụng trên các phần tử <a> và <button> nhưng chỉ có các phần tử <button> là được hỗ trợ bên trong các thành phần điều hướng như nav và navbar. Hãy sử dụng các class của nút trên một trong các loại thẻ <a> , <button> , hoặc <input> . <a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Tính tương thích với các trình duyệtChúng tôi đề xuất sử dụng phần tử <button> bất cứ khi nào có
thể để đảm báo tính tương thích với các trình duyệt. Ngoài ra, trình duyệt Firefox có một lỗi ngăn cản việc thiết lập line-height trên các nút dạng <input> . Điều này sẽ làm cho các nút có chiều cao không chính xác khi hiển thị trên Firefox.. Ảnh responsive Hình ảnh trong Bootstrap 3 có thể hiển thị tương thích với các thiết bị di
động bằng cách sử dụng class .img-responsive class. Class này sẽ thiết lập max-width: 100%; và height: auto; lên ảnh để chúng có thể co giãn theo tỷ lệ tương đối với phần tử cha của chúng. <img src="..." class="img-responsive" alt="Responsive image">
Các hình dạng của ảnhThêm các class vào thẻ <img> để style ảnh một cách dễ dàng. Tính tương thích với các trình duyệt Hãy nhớ rằng trình duyệt Internet Explorer 8 không hỗ trợ góc bo tròn. <img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Các màu sắc theo ngữ cảnhBootstrap có một tập hợp các class tiện ích hỗ trợ người dùng trong việc truyền tải ý nghĩa bằng màu sắc. Những class này cũng có thể áp dụng vào các liên kết và cũng có tác dụng làm tối màu liên kết khi hover qua như style mặc định của liên kết. Fusce dapibus, tellus ac cursus commodo, tortor mauris
nibh. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. <p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Xử lý với tính đặc hiệuĐôi khi các class này không thể áp dụng do tính đặc hiệu của selector khác. Trong nhiều trường hợp, có một giải
pháp thay thế là bọc text của bạn bằng một thẻ <span> gắn với một trong các class này. Các màu nền theo ngữ cảnhTương tự như các class dành cho màu sắc của text theo ngữ cảnh, bạn cũng dễ dàng thiết lập màu nền của bất kỳ phần tử nào bằng các class ngữ cảnh cho màu nền. Các phần tử <a> sẽ bị tối màu đi khi hover vào giống như các class áp dụng với text. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis,
est non commodo luctus, nisi erat porttitor ligula. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. <p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
Xử lý với tính đặc hiệuĐôi khi các class này không thể áp dụng do tính đặc hiệu của selector khác. Trong nhiều trường hợp, có một giải pháp thay thế là bọc text của bạn bằng một thẻ <div> gắn với một trong các class
này. Biểu tượng "đóng"Sử dụng biểu tượng "đóng" chung cho việc xóa bỏ (hoặc đóng lại) các hộp modal hay các thông điệp. <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
Dấu caretSử dụng các dấu caret để chỉ rõ chức năng sổ xuống và hướng sổ xuống. Lưu ý rằng caret mặc định sẽ tự động đổi chiều trong trình đơn sổ lên. <span class="caret"></span>
FloatBạn có thể áp dụng hiệu ứng float vào một phần tử (trái hoặc phải) bằng cách sử dụng một class tương ứng. !important được thêm vào để tránh các vấn đề liên quan đến tính đặc hiệu. Các class cũng có thể được sử dụng như các mixin. <div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
Không sử dụng cho thanh điều hướngĐể căn chỉnh các thành phần trong thanh điều hướng với các class tiện ích, hãy sử dụng .navbar-left hoặc .navbar-right .
Hãy đọc tài liệu về thanh điều hướng để biết thêm chi tiết. Căn giữa các khối nội dungThiết lập thuộc tính display: block vào một phần tử và căn giữa bằng margin . Tiện ích này có thể được sử dụng bằng mixin hoặc class. <div class="center-block">...</div>
// Classes
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as mixins
.element {
.center-block();
}
ClearfixClear thuộc tính float trên một phần tử bất kỳ
bằng cách sử dụng class .clearfix , được lấy từ micro clearfix của Nicolas Gallagher. Class này cũng có thể được sử dụng như một mixin. <!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a Mixin
.element {
.clearfix();
}
Ẩn và hiện nội dungBạn có thể làm cho một phần tử ẩn đi hoặc hiện ra (hỗ trợ cả các thiết bị đọc màn hình) bằng cách sử dụng các class .show và .hidden . Những class này
sử dụng !important để tránh sự xung đột về tính đặc hiệu, giống như float. Chúng chỉ được áp dụng lên các phần tử dạng block (display:block) và cũng có thể sử dụng như các mixin. Class .hide thi thoảng không có tác dụng trên các thiết bị đọc màn hình, Do đó class này đã bị loại bỏ ở phiên bản 3.0.1 và được thay thế bằng .hidden và .sr-only . Ngoài ra, class .invisible được sử dụng để ẩn/hiện một phần
tử, điều đó có nghĩa là thuộc tính display của nó không bị thay đổi và có thể vẫn ảnh hưởng đến luồng của document. <div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
Nội dung thiết bị đọc màn hìnhBạn có thể ẩn một phần tử bằng class .sr-only trên tất cả các thiết bị ngoại trừ trình đọc màn hình. Kết hợp class .sr-only cùng với class .sr-only-focusable để hiển thị phần tử một lần nữa khi được focus (chẳng hạn như đối với người dùng chỉ dùng bàn phím).
Bạn nên tham khảo các bài thực hành tốt nhất về khả năng truy nhập. Class này cũng được sử dụng như mixin. <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a Mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
Thay thế ảnhSử dụng class .text-hide hoặc mixin để thay thế nội dung text của một phần tử bằng một ảnh nền. <h2 class="text-hide">Custom heading</h2>
// Usage as a Mixin
.heading {
.text-hide();
}
Đối với nhu cầu phát triển các ứng dụng thân thiện với
thiết bị di động, chúng tôi sử dụng những class tiện ích này để ẩn và hiện nội dung trên các thiết bị khác nhau thông qua media query. Ngoài ra, các class tiện ích dành cho việc đóng/mở nội dung để in ra cũng được thêm vào. Hãy cố gắng sử dụng những class này một cách giới hạn và tránh việc tạo ra quá nhiều các phiên bản hoàn toàn khác nhau trên cùng một trang. Thay vì thế, hãy sử dụng chúng để bổ sung cho việc hiển thị trên mỗi thiết bị. Các tiện ích responsive hiện tại chỉ có tác dụng
đối với các phần tử dạng khối (display:block hoặc display:inline-block) và bảng. Việc sử dụng các phần tử cùng dòng (display:inline) và các phần tử nằm trong bảng (<tr> , <td> ,...) sẽ không được hỗ trợ responsive. Các class sẵn cóSử dụng đơn lẻ hoặc kết hợp các class sẵn có để ẩn/hiện nội dung tương ứng với các mốc kích thước của khung nhìn.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
---|
.visible-xs-* | Visible
| Hidden
| Hidden
| Hidden
|
---|
.visible-sm-* | Hidden
| Visible
| Hidden
| Hidden
|
---|
.visible-md-* | Hidden
| Hidden
| Visible
| Hidden
|
---|
.visible-lg-* | Hidden
| Hidden
| Hidden
| Visible
|
---|
.hidden-xs | Hidden
| Visible
| Visible
| Visible
|
---|
.hidden-sm | Visible
| Hidden
| Visible
| Visible
|
---|
.hidden-md | Visible
| Visible
| Hidden
| Visible
|
---|
.hidden-lg | Visible
| Visible
| Visible
| Hidden
|
---|
As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.
Group of classes | CSS display |
---|
.visible-*-block
| display: block;
| .visible-*-inline
| display: inline;
| .visible-*-inline-block
| display: inline-block;
|
So, for extra small (xs ) screens for example, the available .visible-*-* classes are: .visible-xs-block , .visible-xs-inline , and .visible-xs-inline-block . The classes .visible-xs , .visible-sm , .visible-md , and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block , except with additional special cases for toggling <table> -related elements. Các class dành cho in ấnTương tự như các class
responsive thông thường, sử dụng các class sau để ẩn/hiện nội dung phục vụ cho việc in ấn.
Classes | Browser | Print |
---|
.visible-print-block .visible-print-inline .visible-print-inline-block | Hidden
| Visible
|
---|
.hidden-print | Visible
| Hidden
|
---|
Class .visible-print cũng tồn tại nhưng đã bị loại bỏ trong phiên bản 3.2.0. Class này sử dụng tương tự như class .visible-print-block , ngoại trừ một số trường hợp đặc biệt như đối với các thành phần liên quan đến <table> . Các trường hợp testThay đổi kích thước trình duyệt của bạn hoặc tải trang trên các thiết bị khác nhau để test các class responsive tiện ích. Hiển thị trên...Dấu tích màu xanh chỉ
định phần tử nào đang hiển thị trên khung nhìn hiện tại của bạn. Extra small ✔ Visible on x-small Small ✔ Visible on small Medium ✔ Visible on medium Large ✔ Visible on large Extra small and small ✔ Visible on x-small and small Medium and large ✔ Visible on medium and large
Extra small and medium ✔ Visible on x-small and medium Small and large ✔ Visible on small and large Extra small and large ✔ Visible on x-small and large Small and medium ✔ Visible on small and medium Ẩn đi trên...Và ở đây, dấu tích màu xanh cũng chỉ định phần tử nào đang bị ẩn đi trên khung nhìn hiện tại của bạn. 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
BootstrapBootstrap 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ữ. Để hiểu rõ hơn, hãy đọc mục tùy chỉnh Less. Màu sắcDễ 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;
}
ScaffoldingMộ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ếtDễ 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 . TypographyDễ 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-h2: 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ượngCó 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ầnCá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 mixinVerdor 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-sizingKhở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ònNgà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óngNế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([email protected]{opacity-ie})";
}
PlaceholderCung 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ộtTự độ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;
}
GradientBạ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 íchCá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. ClearfixHã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 ngangNhanh 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ướcDễ 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ướcDễ 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 textDễ 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 RetinaXá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);
}
Mặc dù Bootstrap được xây dựng dựa trên Less, nhưng nó cũng hỗ trợ Sass. Chúng tôi duy trì nó trong một kho Github riêng biệt và quản lý các bản cập nhật bằng mã biến đổi (conversion script). Bên trong đó có gì?Vì cổng Sass có một kho riêng
biệt và hướng tới các đối tượng khác (so với Bootstrap thông thường) nên nội dung của nó khác biệt hoàn toàn so với Bootstrap thông thường. Điều này đảm bảo rằng cổng Sass của Bootstrap sẽ tương thích với hầu hết các hệ thống dựa trên Sass.
Đường dẫn | Nội dung |
---|
lib/ | mã Ruby gem (cấu hình của Sass, tích hợp Rails và Compass)
|
---|
tasks/ | mã chuyển đổi (chuyển đổi ngược Less về Sass)
|
---|
test/ | test trình dịch
|
---|
templates/ | thực hiện đóng gói
|
---|
vendor/assets/ | Sass, Javascript và các tập tin về font
|
---|
Rakefile | Các nhiệm vụ bên trong, ví dụ như rake và convert
|
---|
Để hiểu rõ hơn về những file này, hãy truy cập kho GitHub của Sass. Cài đặtĐể biết cách cài đặt và sử dụng Bootstrap cho Sass, hãy đọc kỹ tập tin readme trong kho GitHub. Đó là nguồn thông tin về cách sử dụng Bootstrap với Rails, Compass và Sass được cập nhật liên tục.
Bootstrap for Sass |