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 doctype

Bootstrap 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 động

Vớ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ết

Bootstrap 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.

Containers

Dễ 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ệu

Cá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.

Media query

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ưới

Hã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 ngang

Sử 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-8

.col-md-4

.col-md-6

<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 container

Chuyể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àn

Bạ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

<!-- 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àn

Bạ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

<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 responsive

Khi 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

<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ột

Di 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-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

<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ột

Dễ 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 Less

Ngoà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;

Mixins

Mixin đượ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ụng

Bạ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ẻ <h1> tới <h6>, đều sẵn có. Các class từ .h1 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.

h1. 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

<h1>h1. Bootstrap heading</h1>

<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.

h1. 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

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<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>

Body

font-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.

<p>...</p>

Làm nổi bật đoạn văn

Bạ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.

<p class="lead">...</p>

Xây dựng với Less

Tỉ 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ạnh

Hã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ỉnh

Dễ 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ắt

Sử 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ản

Sử 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>

Initialism

Thê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
first.last@example.com

<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:#">first.last@example.com</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 định

Hã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ẫn

Bạ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ồn

Hã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.

Someone famous in Source Title

<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.

Someone famous in Source Title

<blockquote class="blockquote-reverse">

  ...

</blockquote>

Danh sách

Danh 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

<ul>

  <li>...</li>

</ul>

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

<ol>

  <li>...</li>

</ol>

Danh sách không được style

Loạ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ết

Một danh sách các thuật ngữ với thông tin đi kèm.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>

  <dt>...</dt>

  <dd>...</dd>

</dl>

Chi tiết theo hàng ngang

Hã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 lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce 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ắn

Danh 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òng

Khi 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>&lt;section&gt;</code> should be wrapped as inline.

Đầu vào từ người dùng

Sử 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ản

Sử 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>&lt;p&gt;Sample text here...&lt;/p&gt;</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ọc

Hã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ệt

Bả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ền

Thê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
1	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 hover

Thê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ặt

Thê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ảnh

Sử 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ản

Cá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.

Form trên cùng dòng

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ến

Input, 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ãn

Trì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>

Form dàn hàng ngang

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-groups 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.

Input

Input 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ểu

Cá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">

Các nhóm input

Để thêm text hoặc các nút vào đằng trước hoặc đằng sau của <input>, hãy tham khảo thành phần nhóm input.

Textarea

Textarea 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à radio

Checkbox đượ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&mdash;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&mdash;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òng

Hã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>

Select

Sử 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>

Các form-control tĩnh

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@example.com</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>

Input đang được focus

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` state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Input đang bị vô hiệu hóa

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óa

Hã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ưởng

Class 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ệt

Mặ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>

Readonly inputs

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ận

Bootstrap 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ọn

Nế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 input

Việ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` labels

For 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>

Thay đổi kích thước của form-control

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 cao

Tạ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ộng

Bọ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ọn

Sử 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ạt

Cá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.

Phần tử `<button>`

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óa

Là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%.

Phần tử `<button>`

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ệt

Nế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ưởng

Class 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.

Các thẻ dạng nút

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ệt

Chú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 ảnh

Thê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.

A generic square placeholder image with rounded corners

A generic square placeholder image where only the portion within the circle circumscribed about said square is visible

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

<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ảnh

Bootstrap 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ảnh

Tươ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">&times;</span><span class="sr-only">Close</span></button>

Dấu caret

Sử 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>

Float

Bạ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 dung

Thiế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();

}

Clearfix

Clear 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 dung

Bạ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ình

Bạ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ế ảnh

Sử 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.

<h1 class="text-hide">Custom heading</h1>

// 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 ấn

Tươ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 test

Thay đổ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.

Extra small ✔ Hidden on x-small

Small ✔ Hidden on small

Medium ✔ Hidden on medium

Large ✔ Hidden on large

Extra small and small ✔ Hidden on x-small and small

Medium and large ✔ Hidden on medium and large

Extra small and medium ✔ Hidden on x-small and medium

Small and large ✔ Hidden on small and large

Extra small and large ✔ Hidden on x-small and large

Small and medium ✔ Hidden on small and medium

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ữ. Để hiểu rõ hơn, hãy đọc mục tùy chỉnh Less.

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;

}

Sự biến dạng (Transformation)

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.

.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ẻ.

.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);

}

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

CSS

Tổng quan

HTML5 doctype

Ưu tiên các thiết bị di động

Typography và các liên kết

Normalize.css

Containers

Hệ thống lưới

Giới thiệu

Media query

Các tùy chọn của lưới

Ví dụ: Chồng theo hàng ngang

Ví dụ: Fluid container

Ví dụ: Điện thoại di động và máy tính để bàn

Ví dụ: Điện thoại, máy tính bảng, máy tính để bàn

Reset cột responsive

Di chuyển cột

Các cột lồng nhau

Thứ tự cột

Các biến số và mixin Less

Biến số

Mixins

Ví dụ áp dụng

Typography

Tiêu đề

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

h1. 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

Body

Làm nổi bật đoạn văn

Xây dựng với Less

Nhấn mạnh

Text có kích thước nhỏ

In đậm

In nghiêng

Các phần tử thay thế

Các class căn chỉnh

Tên viết tắt

Tên viết tắt cơ bản

Initialism

Địa chỉ

Khối trích dẫn

Khối trích dẫn mặc định

Các tùy chọn cho khối trích dẫn

Đặt tên một nguồn

Các dạng hiển thị thay thế

Danh sách

Danh sách không có thứ tự

Danh sách có thứ tự

Danh sách không được style

Danh sách cùng dòng

Thông tin chi tiết

Chi tiết theo hàng ngang

Tự động cắt ngắn

Code

Cùng dòng

Đầu vào từ người dùng

Khối cơ bản

Biến số

Đầu ra mẫu

Bảng

Ví dụ cơ bản

Bảng có dòng kẻ sọc

Tương thích với hầu hết các loại trình duyệt

Bảng có viền

Bảng có dòng đổi màu khi hover

Bảng bó chặt

Các class theo ngữ cảnh

Bảng responsive

Forms

Ví dụ cơ bản

Demo `:focus` state

Chức năng liên kết của thẻ `<a>` không bị ảnh hưởng

Optional icons with hidden `.sr-only` labels

Phần tử `<button>`

Phần tử `<a>`

Phần tử `<button>`

Phần tử `<a>`