Nhận thông tin chi tiết về các phần quan trọng trong cơ sở hạ tầng của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi để phát triển web tốt hơn, nhanh hơn, mạnh mẽ hơn.

Loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML và thuộc tính CSS nhất định yêu cầu sử dụng loại tài liệu HTML5. Bao gồm nó ở đầu tất cả các dự án của bạn.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Di động đầu tiên

Với Bootstrap 2, chúng tôi đã thêm các kiểu thân thiện với thiết bị di động tùy chọn cho các khía cạnh chính của khuôn khổ. Với Bootstrap 3, chúng tôi đã viết lại dự án để thân thiện với thiết bị di động ngay từ đầu. Thay vì thêm vào các kiểu di động tùy chọn, chúng được đưa ngay vào lõi. Trên thực tế, Bootstrap là thiết bị di động trước tiên . Kiểu đầu tiên dành cho thiết bị di động có thể được tìm thấy trong toàn bộ thư viện thay vì trong các tệp riêng biệt.

Để đảm bảo kết xuất phù hợp và phóng to chạm, hãy thêm thẻ meta chế độ xem vào của bạn <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Bạn có thể tắt khả năng thu phóng trên thiết bị di động bằng cách thêm user-scalable=novào thẻ meta chế độ xem. Điều này vô hiệu hóa tính năng thu phóng, có nghĩa là người dùng chỉ có thể cuộn và dẫn đến trang web của bạn giống một ứng dụng gốc hơn một chút. Nhìn chung, chúng tôi không khuyến nghị điều này trên mọi trang web, vì vậy hãy thận trọng!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Kiểu chữ và liên kết

Bootstrap thiết lập các kiểu hiển thị, kiểu chữ và liên kết toàn cầu cơ bản. Cụ thể, chúng tôi:

Đặt background-color: #fff;trênbody
Sử dụng các thuộc @font-family-basetính @font-size-basevà @line-height-baselàm cơ sở đánh máy của chúng tôi
Đặt màu liên kết toàn cầu qua @link-colorvà chỉ áp dụng gạch dưới liên kết trên:hover

Những phong cách này có thể được tìm thấy bên trong scaffolding.less.

Normalize.css

Để cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Normalize.css , một dự án của Nicolas Gallagher và Jonathan Neal .

Hộp đựng

Bootstrap yêu cầu một phần tử chứa để bao bọc nội dung trang web và chứa hệ thống lưới của chúng tôi. Bạn có thể chọn một trong hai vùng chứa để sử dụng trong các dự án của mình. Lưu ý rằng, do paddingvà hơn thế nữa, không có vùng chứa nào có thể lồng vào nhau.

Sử dụng .containercho vùng chứa có chiều rộng cố định đáp ứng.

<div class="container">
  ...
</div>

Sử dụng .container-fluidcho vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của chế độ xem của bạn.

<div class="container-fluid">
  ...
</div>

Bootstrap bao gồm một hệ thống lưới chất lỏng đầu tiên đáp ứng, di động, có thể điều chỉnh tỷ lệ thích hợp lên đến 12 cột khi kích thước thiết bị hoặc khung nhìn tăng lên. Nó bao gồm các lớp được xác định trước cho các tùy chọn bố cục dễ dàng, cũng như các mixin mạnh mẽ để tạo nhiều bố cục ngữ nghĩa hơn .

Giới thiệu

Hệ thống lưới được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột chứa nội dung của bạn. Đây là cách hệ thống lưới Bootstrap hoạt động:

Các hàng phải được đặt trong một .container(chiều rộng cố định) hoặc .container-fluid(toàn chiều rộng) để căn chỉnh và đệm thích hợp.
Sử dụng các hàng để tạo các nhóm cột theo chiều ngang.
Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.
Các lớp lưới được xác định trước thích .rowvà .col-xs-4có sẵn để tạo bố cục lưới một cách nhanh chóng. Ít mixin hơn cũng có thể được sử dụng cho nhiều bố cục ngữ nghĩa hơn.
Các cột tạo ra các rãnh (khoảng trống giữa các nội dung cột) qua padding. Khoảng đệm đó được bù đắp trong các hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên .rows.
Lợi nhuận âm là lý do tại sao các ví dụ dưới đây bị vượt qua. Đó là để nội dung trong các cột lưới được sắp xếp với nội dung không phải dạng lưới.
Cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Ví dụ, ba cột bằng nhau sẽ sử dụng ba .col-xs-4.
Nếu có nhiều hơn 12 cột được đặt trong một hàng, thì mỗi nhóm cột phụ, như một đơn vị, sẽ nằm trên một dòng mới.
Các lớp lưới áp dụng cho các thiết bị có chiều rộng màn hình lớn hơn hoặc bằng kích thước điểm ngắt và ghi đè các lớp lưới được nhắm mục tiêu đến các thiết bị nhỏ hơn. Do đó, ví dụ: việc áp dụng bất kỳ .col-md-*lớp nào cho một phần tử sẽ không chỉ ảnh hưởng đến kiểu dáng của nó trên các thiết bị trung bình mà còn trên các thiết bị lớn nếu một .col-lg-*lớp không có mặt.

Hãy xem các ví dụ để áp dụng các nguyên tắc này vào mã của bạn.

Truy vấn phương tiện truyền thông

Chúng tôi sử dụng các truy vấn phương tiện sau trong tệp Ít hơn của chúng tôi để tạo các điểm ngắt 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) { ... }

Đôi khi chúng tôi mở rộng các truy vấn phương tiện này để bao gồm max-widthCSS giới hạn cho một nhóm thiết bị hẹp hơn.

@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) { ... }

Tùy chọn lưới

Xem các khía cạnh của hệ thống lưới Bootstrap hoạt động như thế nào trên nhiều thiết bị bằng một bảng tiện dụng.

	Thiết bị cực nhỏ Điện thoại (<768px)	Máy tính bảng cho thiết bị nhỏ (≥768px)	Thiết bị trung bình Máy tính để bàn (≥992px)	Thiết bị lớn Máy tính để bàn (≥1200px)
Hành vi lưới	Ngang mọi lúc	Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt
Chiều rộng container	Không có (tự động)	750px	970px	1170px
Tiền tố lớp	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# cột	12
Chiều rộng cột	Tự động	~ 62px	~ 81px	~ 97px
Chiều rộng máng xối	30px (15px trên mỗi bên của cột)
Có thể lồng vào nhau	Đúng
Bù đắp	Đúng
Thứ tự cột	Đúng

Ví dụ: Xếp chồng lên nhau

Sử dụng một tập hợp các .col-md-*lớp lưới duy nhất, bạn có thể tạo một hệ thống lưới cơ bản bắt đầu được xếp chồng lên nhau trên thiết bị di động và thiết bị máy tính bảng (phạm vi cực nhỏ đến nhỏ) trước khi trở thành hệ thống ngang trên thiết bị máy tính để bàn (trung bình). Đặt các cột lưới vào bất kỳ .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ụ: Thùng chứa chất lỏng

Biến bất kỳ bố cục lưới có chiều rộng cố định nào thành bố cục có chiều rộng đầy đủ bằng cách thay đổi ngoài cùng của bạn .containerthà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 mình chỉ xếp chồng lên nhau trong các thiết bị nhỏ hơn? Sử dụng thêm các lớp lưới thiết bị vừa và nhỏ bằng cách thêm .col-xs-* .col-md-*vào các cột của bạn. Xem ví dụ dưới đây để biết rõ hơn về cách hoạt động của tất cả.

.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 di động, máy tính bảng, máy tính để bàn

Xây dựng dựa trên ví dụ trước bằng cách tạo bố cục năng động và mạnh mẽ hơn với .col-sm-*các lớp máy tính bảng.

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

Ví dụ: Gói cột

Nếu có nhiều hơn 12 cột được đặt trong một hàng, thì mỗi nhóm cột phụ, như một đơn vị, sẽ nằm trên một dòng mới.

.col-xs-9

.col-xs-4
Vì 9 + 4 = 13> 12, div rộng 4 cột này được bao bọc trên một dòng mới dưới dạng một đơn vị liền kề.

.col-xs-6
Các cột tiếp theo tiếp tục dọc theo dòng mới.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Đặt lại cột đáp ứng

Với bốn tầng lưới có sẵn, bạn nhất định gặp phải các vấn đề trong đó, tại một số điểm ngắt nhất định, các cột của bạn không rõ ràng hoàn toàn vì cột này cao hơn cột kia. Để khắc phục điều đó, hãy sử dụng kết hợp a .clearfixvà các lớp tiện ích đáp ứng của chúng tôi .

.col-xs-6 .col-sm-3
Thay đổi kích thước khung nhìn của bạn hoặc xem thử trên điện thoại của bạn để làm ví dụ.

.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 xóa cột tại các điểm ngắt đáp ứng, bạn có thể cần đặt lại các hiệu ứng bù, đẩy hoặc kéo . Xem điều này hoạt động trong ví dụ lưới .

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

Các cột bù trừ

Di chuyển các cột sang bên phải bằng cách sử dụng .col-md-offset-*các lớp. Các lớp này tăng lề trái của một cột theo *các cột. Ví dụ: .col-md-offset-4di chuyển .col-md-4qua bốn 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>

Bạn cũng có thể ghi đè các hiệu số từ các tầng lưới thấp hơn với .col-*-offset-0các lớp.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Lồng các cột

Để lồng nội dung của bạn với lưới mặc định, hãy thêm một .rowtập hợp các .col-sm-*cột mới trong một .col-sm-*cột hiện có. Các hàng lồng nhau phải bao gồm một tập hợp các cột có tối đa 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng tất cả 12 cột có sẵn).

Cấp độ 1: .col-sm-9

Cấp độ 2: .col-xs-8 .col-sm-6

Cấp độ 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Thứ tự cột

Dễ dàng thay đổi thứ tự của các cột lưới tích hợp của chúng tôi với .col-md-push-*và .col-md-pull-*các lớp bổ trợ.

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

Ít mixin và biến

Ngoài các lớp lưới được tạo sẵn để có bố cục nhanh, Bootstrap bao gồm Ít biến và hỗn hợp để nhanh chóng tạo bố cục đơn giản, ngữ nghĩa của riêng bạn.

Biến

Các biến xác định số lượng cột, chiều rộng rãnh và điểm truy vấn phương tiện để bắt đầu cột nổi. Chúng tôi sử dụng chúng để tạo các lớp lưới được xác định trước được nêu ở trên, cũng như cho các mixin tùy chỉnh được liệt kê bên dưới.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixin

Mixin được sử dụng cùng với các biến lưới để tạo CSS ngữ nghĩa cho các cột lưới riêng lẻ.

// 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ụ sử dụng

Bạn có thể sửa đổi các biến thành các giá trị tùy chỉnh của riêng mình hoặc chỉ sử dụng các mixin với các giá trị mặc định của chúng. Dưới đây là một ví dụ về việc sử dụng cài đặt mặc định để tạo bố cục hai cột có khoảng cách 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>

Đề mục

Tất cả các tiêu đề HTML, <h1>thông qua <h6>, đều có sẵn. .h1thông qua .h6các lớp cũng có sẵn, khi bạn muốn phù hợp với kiểu phông chữ của tiêu đề nhưng vẫn muốn văn bản của bạn được hiển thị nội dòng.

h1. Tiêu đề Bootstrap	Dấu bán nguyệt 36px
h2. Tiêu đề Bootstrap	Dấu bán nguyệt 30px
h3. Tiêu đề Bootstrap	Dấu bán nguyệt 24px
h4. Tiêu đề Bootstrap	Dấu bán nguyệt 18px
h5. Tiêu đề Bootstrap	Dấu chấm phẩy 14px
h6. Tiêu đề Bootstrap	Dấu bán nguyệt 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>

Tạo văn bản phụ, nhẹ hơn trong bất kỳ tiêu đề nào bằng <small>thẻ chung hoặc .smalllớp.

h1. Tiêu đề Bootstrap Văn bản phụ

h2. Tiêu đề Bootstrap Văn bản phụ

h3. Tiêu đề Bootstrap Văn bản phụ

h4. Tiêu đề Bootstrap Văn bản phụ

h5. Tiêu đề Bootstrap Văn bản phụ

h6. Tiêu đề Bootstrap Văn bản phụ

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

Bản sao nội dung

Mặc định toàn cầu của Bootstrap font-sizelà 14px , với 1.428 . Điều này được áp dụng cho và tất cả các đoạn văn. Ngoài ra, (đoạn văn) nhận được lề dưới bằng một nửa chiều cao dòng tính toán của chúng (10px theo mặc định).line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng. Nullam id dolor id nibh ultricies xe cộ.

Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non rowo luctus, nisi erat porttitor ligula, eget lacinia odio sem perf 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 tại eget metus. Duis mollis, est non rowo luctus, nisi erat porttitor ligula, eget lacinia odio sem perf elit.

<p>...</p>

Bản sao nội dung chính

Làm cho một đoạn văn nổi bật bằng cách thêm vào .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, không phải hàng hóa luctus.

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

Được xây dựng với ít hơn

Thang đo kiểu chữ dựa trên hai biến Ít hơn trong các biến . Không có : @font-size-basevà @line-height-base. Đầu tiên là kích thước phông chữ cơ sở được sử dụng xuyên suốt và thứ hai là chiều cao dòng cơ sở. Chúng tôi sử dụng các biến đó và một số phép toán đơn giản để tạo lề, khoảng đệm và chiều cao dòng của tất cả các loại của chúng tôi và hơn thế nữa. Tùy chỉnh chúng và điều chỉnh Bootstrap.

Các phần tử văn bản nội tuyến

Văn bản được đánh dấu

Để làm nổi bật một loạt văn bản do mức độ liên quan của nó trong ngữ cảnh khác, hãy sử dụng <mark>thẻ.

Bạn có thể sử dụng thẻ đánh dấu đểĐiểm nổi bậtchữ.

You can use the mark tag to <mark>highlight</mark> text.

Văn bản đã xóa

Để chỉ ra các khối văn bản đã bị xóa, hãy sử dụng <del>thẻ.

~~Dòng văn bản này được coi là văn bản đã xóa.~~

<del>This line of text is meant to be treated as deleted text.</del>

Văn bản gạch ngang

Để chỉ ra các khối văn bản không còn phù hợp, hãy sử dụng <s>thẻ.

~~Dòng văn bản này được coi là không còn chính xác nữa.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Đã chèn văn bản

Để chỉ ra các bổ sung cho tài liệu, hãy sử dụng <ins>thẻ.

Dòng văn bản này được coi như một phần bổ sung cho tài liệu.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Văn bản được gạch chân

Để gạch dưới văn bản, hãy sử dụng <u>thẻ.

Dòng văn bản này sẽ hiển thị như được gạch chân

<u>This line of text will render as underlined</u>

Sử dụng các thẻ nhấn mạnh mặc định của HTML với các kiểu nhẹ.

Văn bản nhỏ

Để khử nhấn mạnh nội dòng hoặc khối văn bản, hãy sử dụng <small>thẻ để đặt văn bản ở kích thước 85% của văn bản gốc. Các phần tử tiêu đề nhận của riêng chúng font-sizecho các phần tử lồng nhau <small>.

Ngoài ra, bạn có thể sử dụng một phần tử nội dòng .smallthay cho bất kỳ <small>.

Dòng văn bản này được coi là bản in đẹp.

<small>This line of text is meant to be treated as fine print.</small>

In đậm

Để nhấn mạnh một đoạn văn bản có trọng lượng phông chữ nặng hơn.

Đoạn văn bản sau được hiển thị dưới dạng văn bản in đậm .

<strong>rendered as bold text</strong>

Chữ in nghiêng

Để nhấn mạnh một đoạn văn bản bằng chữ in nghiêng.

Đoạn văn bản sau được hiển thị dưới dạng văn bản in nghiêng .

<em>rendered as italicized text</em>

Các yếu tố thay thế

Hãy thoải mái sử dụng <b>và <i>trong HTML5. <b>được dùng để làm nổi bật các từ hoặc cụm từ mà không truyền tải thêm tầm quan trọng trong khi <i>chủ yếu là về giọng nói, thuật ngữ kỹ thuật, v.v.

Các lớp căn chỉnh

Dễ dàng sắp xếp lại văn bản cho các thành phần với các lớp căn chỉnh văn bản.

Căn trái văn bản.

Căn giữa văn bản.

Văn bản được căn phải.

Văn bản hợp lý.

Không có văn bản bao bọc.

<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>
<p class="text-nowrap">No wrap text.</p>

Các lớp chuyển đổi

Chuyển đổi văn bản trong các thành phần với các lớp viết hoa văn bản.

Chữ viết thường.

Văn bản viết hoa.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Các từ viết tắt

Triển khai cách điệu phần tử của HTML <abbr>cho các từ viết tắt và từ viết tắt để hiển thị phiên bản mở rộng khi di chuột. Các từ viết tắt của một titlethuộc tính có đường viền dưới cùng chấm sáng và con trỏ trợ giúp khi di chuột, cung cấp ngữ cảnh bổ sung khi di chuột và cho người dùng công nghệ hỗ trợ.

Viết tắt cơ bản

Từ viết tắt của thuộc tính từ là attr .

<abbr title="attribute">attr</abbr>

Chủ nghĩa ban đầu

Thêm .initialismvào một chữ viết tắt cho kích thước phông chữ nhỏ hơn một chút.

HTML là thứ tốt nhất kể từ khi cắt lát bánh mì.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Địa chỉ

Trình bày thông tin liên lạc của tổ tiên gần nhất hoặc toàn bộ cơ quan làm việc. Giữ nguyên định dạng bằng cách kết thúc tất cả các dòng bằng <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Tên đầy đủ
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Dấu ngoặc kép

Để trích dẫn các khối nội dung từ một nguồn khác trong tài liệu của bạn.

Blockquote mặc định

Bao <blockquote>quanh bất kỳ HTML nào dưới dạng trích dẫn. Đối với báo giá thẳng, chúng tôi khuyên bạn nên a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Tùy chọn trích dẫn khối

Thay đổi phong cách và nội dung cho các biến thể đơn giản trên một tiêu chuẩn <blockquote>.

Đặt tên nguồn

Thêm một <footer>để xác định nguồn. Gộp tên của công việc nguồn vào <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

Ai đó nổi tiếng trong Tiêu đề nguồn

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

Màn hình thay thế

Thêm .blockquote-reversecho một trích dẫn khối với nội dung được căn phải.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

Ai đó nổi tiếng trong Tiêu đề nguồn

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Danh sách

Không theo thứ tự

Danh sách các mục mà thứ tự không quan trọng .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer moltie lorem tại massa
Facilisis trong pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat tại
Faucibus porta lacus fringilla vel
Aenean ngồi amet erat nunc
Bỏ qua lorem porttitor

<ul>
  <li>...</li>
</ul>

Đã đặt hàng

Một danh sách các mục trong đó thứ tự quan trọng rõ ràng.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer moltie lorem tại massa
Facilisis trong pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean ngồi amet erat nunc
Bỏ qua lorem porttitor

<ol>
  <li>...</li>
</ol>

Chưa được xếp lớp

Loại bỏ lề trái và lề mặc định list-styletrên các mục danh sách (chỉ dành cho phần con ngay lập tức). Điều này chỉ áp dụng cho các mục danh sách con ngay lập tức , có nghĩa là bạn cũng sẽ cần thêm lớp cho bất kỳ danh sách lồng nhau nào.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer moltie lorem tại massa
Facilisis trong pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat tại
Faucibus porta lacus fringilla vel
Aenean ngồi amet erat nunc
Bỏ qua lorem porttitor

<ul class="list-unstyled">
  <li>...</li>
</ul>

Nội tuyến

Đặt tất cả các mục trong danh sách trên một dòng duy nhất display: inline-block;và một số đệm nhẹ.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Sự mô tả

Một danh sách các thuật ngữ với các mô tả liên quan của chúng.

Danh sách mô tả: Một danh sách mô tả là hoàn hảo để xác định các thuật ngữ.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem num peit.; Donec id elit non mi porta gravida tại eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Mô tả ngang

Xếp các thuật ngữ và mô tả <dl>song song với nhau. Bắt đầu xếp chồng như mặc định <dl>, nhưng khi thanh điều hướng mở rộng, hãy làm như vậy.

Danh sách mô tả: Một danh sách mô tả là hoàn hảo để xác định các thuật ngữ.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem num peit.; Donec id elit non mi porta gravida tại eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, Tellus ac cursus rowo, rùa bò mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Tự động cắt bớt

Danh sách mô tả ngang sẽ cắt bớt các cụm từ quá dài để vừa với cột bên trái text-overflow. Trong các cửa sổ xem hẹp hơn, chúng sẽ thay đổi thành bố cục xếp chồng mặc định.

Nội tuyến

Gói các đoạn mã nội tuyến bằng <code>.

Ví dụ, <section>nên được bọc dưới dạng nội tuyến.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Đầu vào của người dùng

Sử dụng <kbd>để biểu thị thông tin đầu vào thường được nhập qua bàn phím.

Để chuyển đổi các thư mục, hãy nhập cdtheo sau là tên của thư mục.
Để chỉnh sửa cài đặt, nhấn ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Khối cơ bản

Sử dụng <pre>cho nhiều dòng mã. Đảm bảo thoát khỏi bất kỳ dấu ngoặc nhọn nào trong mã để hiển thị phù hợp.

<p> Văn bản mẫu tại đây ... </p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Bạn có thể tùy chọn thêm .pre-scrollablelớp, lớp này sẽ đặt chiều cao tối đa là 350px và cung cấp thanh cuộn trục y.

Biến

Để chỉ ra các biến, hãy sử dụng <var>thẻ.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Đầu ra mẫu

Để chỉ ra khối đầu ra mẫu từ một chương trình, hãy sử dụng <samp>thẻ.

Văn bản này được coi là đầu ra mẫu từ một chương trình máy tính.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Ví dụ cơ bản

Đối với kiểu cơ bản — đệm nhẹ và chỉ các đường phân cách ngang — hãy thêm lớp cơ sở .tablevào bất kỳ <table>. Nó có vẻ hơi thừa, nhưng với việc sử dụng rộng rãi các bảng cho các plugin khác như lịch và bộ chọn ngày, chúng tôi đã chọn tách riêng các kiểu bảng tùy chỉnh của mình.

Chú thích bảng tùy chọn.
#	Họ	Họ	tên tài khoản
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table">
  ...
</table>

Hàng sọc

Sử dụng .table-stripedđể thêm dải mã vằn vào bất kỳ hàng nào của bảng trong <tbody>.

Khả năng tương thích trên nhiều trình duyệt

Bảng sọc được tạo kiểu thông qua :nth-childbộ chọn CSS, công cụ này không có sẵn trong Internet Explorer 8.

#	Họ	Họ	tên tài khoản
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table table-striped">
  ...
</table>

Bảng có viền

Thêm .table-borderedđường viền trên tất cả các cạnh của bảng và các ô.

#	Họ	Họ	tên tài khoản
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table table-bordered">
  ...
</table>

Di chuột các hàng

Thêm .table-hoverđể bật trạng thái di chuột trên các hàng của bảng trong a <tbody>.

#	Họ	Họ	tên tài khoản
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table table-hover">
  ...
</table>

Bảng ngưng tụ

Thêm .table-condensedđể làm cho bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô.

#	Họ	Họ	tên tài khoản
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class="table table-condensed">
  ...
</table>

Các lớp theo ngữ cảnh

Sử dụng các lớp ngữ cảnh để tô màu các hàng trong bảng hoặc các ô riêng lẻ.

Lớp	Sự mô tả
`.active`	Áp dụng màu di chuột cho một hàng hoặc ô cụ thể
`.success`	Cho biết một hành động thành công hoặc tích cực
`.info`	Cho biết một hành động hoặc thay đổi mang tính thông tin trung tính
`.warning`	Cho biết một cảnh báo có thể cần chú ý
`.danger`	Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực

#	Tiêu đề cột	Tiêu đề cột	Tiêu đề cột
1	Nội dung cột	Nội dung cột	Nội dung cột
2	Nội dung cột	Nội dung cột	Nội dung cột
3	Nội dung cột	Nội dung cột	Nội dung cột
4	Nội dung cột	Nội dung cột	Nội dung cột
5	Nội dung cột	Nội dung cột	Nội dung cột
6	Nội dung cột	Nội dung cột	Nội dung cột
7	Nội dung cột	Nội dung cột	Nội dung cột
số 8	Nội dung cột	Nội dung cột	Nội dung cột
9	Nội dung cột	Nội dung cột	Nội dung cột

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

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa cho một hàng trong bảng hoặc ô riêng lẻ chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (văn bản hiển thị trong hàng / ô của bảng có liên quan) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .sr-onlylớp.

Bảng đáp ứng

Tạo các bảng đáp ứng bằng cách cuộn bất kỳ .tablevào .table-responsiveđể làm cho chúng cuộn theo chiều ngang trên các thiết bị nhỏ (dưới 768px). Khi xem trên bất kỳ thứ gì có chiều rộng lớn hơn 768px, bạn sẽ không thấy bất kỳ sự khác biệt nào trong các bảng này.

Cắt / cắt dọc

Các bảng đáp ứng tận dụng overflow-y: hidden, loại bỏ bất kỳ nội dung nào vượt ra ngoài các cạnh dưới cùng hoặc trên cùng của bảng. Đặc biệt, điều này có thể loại bỏ các menu thả xuống và các tiện ích khác của bên thứ ba.

Firefox và các bộ trường

Firefox có một số kiểu thiết lập trường khó xử liên quan đến widthviệc can thiệp vào bảng đáp ứng. Không thể ghi đè điều này nếu không có bản hack dành riêng cho Firefox mà chúng tôi không cung cấp trong Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Để biết thêm thông tin, hãy đọc câu trả lời Stack Overflow này .

#	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng
1	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng
2	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng
3	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng

#	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng
1	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng
2	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng
3	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng	Ô bảng

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Ví dụ cơ bản

Các điều khiển biểu mẫu riêng lẻ tự động nhận một số kiểu chung. Tất cả các phần tử văn bản <input>và <textarea>với <select>được .form-controlđặt thành width: 100%;theo mặc định. Gói các nhãn và điều khiển vào .form-groupđể có khoảng cách tối ưu.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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>

Không trộn các nhóm biểu mẫu với các nhóm đầu vào

Không trộn trực tiếp các nhóm biểu mẫu với các nhóm đầu vào . Thay vào đó, hãy lồng nhóm đầu vào bên trong nhóm biểu mẫu.

Mẫu nội tuyến

Thêm .form-inlinevào biểu mẫu của bạn (không nhất thiết phải là a <form>) cho các điều khiển khối nội dòng và căn trái. Điều này chỉ áp dụng cho các biểu mẫu trong cửa sổ xem có chiều rộng ít nhất là 768px.

Có thể yêu cầu chiều rộng tùy chỉnh

Các đầu vào và lựa chọn đã width: 100%;được áp dụng theo mặc định trong Bootstrap. Trong các biểu mẫu nội tuyến, chúng tôi đặt lại điều đó để width: auto;nhiều điều khiển có thể nằm trên cùng một dòng. Tùy thuộc vào bố cục của bạn, có thể yêu cầu thêm chiều rộng tùy chỉnh.

Luôn thêm nhãn

Trình đọc màn hình sẽ gặp khó khăn với biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi đầu vào. Đối với các biểu mẫu nội tuyến này, bạn có thể ẩn các nhãn bằng cách sử dụng .sr-onlylớp. Có nhiều phương pháp thay thế khác để cung cấp nhãn cho các công nghệ hỗ trợ, chẳng hạn như aria-labelhoặc aria-labelledbythuộc titletính. Nếu không có thuộc tính nào trong số này, trình đọc màn hình có thể sử dụng placeholderthuộc tính, nếu có, nhưng lưu ý rằng không nên sử dụng thuộc placeholdertính thay thế cho các phương pháp ghi nhãn khác.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" 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 class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Dạng ngang

Sử dụng các lớp lưới được xác định trước của Bootstrap để căn chỉnh các nhãn và nhóm điều khiển biểu mẫu trong một bố cục ngang bằng cách thêm .form-horizontalvào biểu mẫu (không nhất thiết phải là a <form>). Làm như vậy thay đổi .form-groups để hoạt động như các hàng lưới, vì vậy không cần .row.

<form class="form-horizontal">
  <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 điều khiển được hỗ trợ

Ví dụ về các điều khiển biểu mẫu chuẩn được hỗ trợ trong bố cục biểu mẫu mẫu.

Đầu vào

Điều khiển biểu mẫu phổ biến nhất, các trường đầu vào dựa trên văn bản. Bao gồm hỗ trợ cho tất cả các loại HTML5 : ,,,,,,, và . text_passworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

Loại khai báo bắt buộc

Đầu vào sẽ chỉ được tạo kiểu đầy đủ nếu chúng typeđược khai báo đúng cách.

<input type="text" class="form-control" placeholder="Text input">

Nhóm đầu vào

Để thêm văn bản hoặc nút tích hợp trước và / hoặc sau bất kỳ dựa trên văn bản nào <input>, hãy kiểm tra thành phần nhóm đầu vào .

Textarea

Điều khiển biểu mẫu hỗ trợ nhiều dòng văn bản. Thay đổi rowsthuộc tính khi cần thiết.

<textarea class="form-control" rows="3"></textarea>

Hộp kiểm và đài

Hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio để chọn một tùy chọn trong số nhiều tùy chọn.

Hộp kiểm và radio bị tắt được hỗ trợ, nhưng để cung cấp con trỏ "không được phép" khi di chuột của cha mẹ <label>, bạn sẽ cần thêm .disabledlớp vào cha mẹ .radio, hoặc ..radio-inline.checkbox.checkbox-inline

Mặc định (xếp chồng lên nhau)

<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="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </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>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Hộp kiểm nội tuyến và radio

Sử dụng .checkbox-inlinehoặc .radio-inlinecác lớp trên một loạt hộp kiểm hoặc radio cho các điều khiển xuất hiện 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>

Hộp kiểm và đài không có văn bản nhãn

Nếu bạn không có văn bản nào bên trong <label>, đầu vào sẽ được định vị như bạn mong đợi. Hiện chỉ hoạt động trên các hộp kiểm và radio không trực tuyến. Hãy nhớ vẫn cung cấp một số dạng nhãn cho các công nghệ hỗ trợ (ví dụ: sử dụng aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Lựa chọn

Lưu ý rằng nhiều menu chọn gốc — cụ thể là trong Safari và Chrome — có các góc tròn không thể sửa đổi thông qua border-radiusthuộc tính.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Đối với <select>các điều khiển có multiplethuộc tính, nhiều tùy chọn được hiển thị theo mặc định.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Kiểm soát tĩnh

Khi bạn cần đặt văn bản thuần túy bên cạnh nhãn biểu mẫu trong biểu mẫu, hãy sử dụng .form-control-staticlớp trên a <p>.

<form class="form-horizontal">
  <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>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Tiêu điểm trạng thái

Chúng tôi loại bỏ các kiểu mặc định outlinetrên một số điều khiển biểu mẫu và áp dụng một box-shadowkiểu thay thế cho :focus.

`:focus`Trạng thái demo

Đầu vào ví dụ trên sử dụng các kiểu tùy chỉnh trong tài liệu của chúng tôi để chứng minh :focustrạng thái trên a .form-control.

Trạng thái bị vô hiệu hóa

Thêm disabledthuộc tính boolean vào đầu vào để ngăn người dùng tương tác. Các đầu vào bị vô hiệu hóa xuất hiện nhẹ hơn và thêm một not-allowedcon trỏ.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Bộ trường bị vô hiệu hóa

Thêm disabledthuộc tính vào a <fieldset>để vô hiệu hóa tất cả các điều khiển trong <fieldset>cùng một lúc.

Cảnh báo về chức năng liên kết của`<a>`

Theo mặc định, các trình duyệt sẽ coi tất cả các điều khiển biểu mẫu gốc ( <input>và <select>các <button>phần tử) bên trong <fieldset disabled>là bị vô hiệu hóa, ngăn chặn cả tương tác bàn phím và chuột trên chúng. Tuy nhiên, nếu biểu mẫu của bạn cũng bao gồm <a ... class="btn btn-*">các phần tử, thì những phần tử này sẽ chỉ có kiểu là pointer-events: none. Như đã lưu ý trong phần về trạng thái bị vô hiệu hóa cho các nút (và cụ thể là trong phần phụ cho các phần tử neo), thuộc tính CSS này chưa được chuẩn hóa và không được hỗ trợ đầy đủ trong Opera 18 trở xuống hoặc trong Internet Explorer 11, và đã chiến thắng 'không ngăn người dùng bàn phím có thể lấy nét hoặc kích hoạt các liên kết này. Vì vậy, để an toàn, hãy sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết như vậy.

Khả năng tương thích trên nhiều trình duyệt

Mặc dù Bootstrap sẽ áp dụng các kiểu này trong tất cả các trình duyệt, nhưng Internet Explorer 11 trở xuống không hỗ trợ đầy đủ disabledthuộc tính trên a <fieldset>. Sử dụng JavaScript tùy chỉnh để vô hiệu hóa tập trường trong các trình duyệt này.

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

Trạng thái chỉ đọc

Thêm readonlythuộc tính boolean trên một đầu vào để ngăn việc sửa đổi giá trị của đầu vào. Đầu vào chỉ đọc có vẻ nhẹ hơn (giống như đầu vào bị vô hiệu hóa), nhưng vẫn giữ lại con trỏ tiêu chuẩn.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Văn bản trợ giúp

Văn bản trợ giúp mức khối cho các điều khiển biểu mẫu.

Liên kết văn bản trợ giúp với các điều khiển biểu mẫu

Văn bản trợ giúp phải được liên kết rõ ràng với điều khiển biểu mẫu mà nó liên quan đến việc sử dụng aria-describedbythuộc tính. Điều này sẽ đảm bảo rằng các công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình - sẽ thông báo văn bản trợ giúp này khi người dùng tập trung hoặc vào điều khiển.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Trạng thái xác thực

Bootstrap bao gồm các kiểu xác thực cho các trạng thái lỗi, cảnh báo và thành công trên các điều khiển biểu mẫu. Để sử dụng, hãy thêm .has-warninghoặc .has-errorvào .has-successphần tử mẹ. Bất kỳ .control-label, .form-controlvà .help-blocktrong phần tử đó sẽ nhận được các kiểu xác thực.

Truyền đạt trạng thái xác thực cho các công nghệ hỗ trợ và người dùng mù màu

Việc sử dụng các kiểu xác thực này để biểu thị trạng thái của điều khiển biểu mẫu chỉ cung cấp chỉ báo trực quan dựa trên màu sắc, sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình - hoặc cho người dùng mù màu.

Đảm bảo rằng một chỉ báo thay thế về trạng thái cũng được cung cấp. Ví dụ: bạn có thể bao gồm gợi ý về trạng thái trong <label>chính văn bản của điều khiển biểu mẫu (như trường hợp trong ví dụ mã sau), bao gồm một Glyphicon (với văn bản thay thế thích hợp bằng cách sử dụng .sr-onlylớp - xem các ví dụ về Glyphicon ) hoặc bằng cách cung cấp khối văn bản trợ giúp bổ sung . Đặc biệt đối với các công nghệ hỗ trợ, các điều khiển biểu mẫu không hợp lệ cũng có thể được gán một aria-invalid="true"thuộc tính.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</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>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Với các biểu tượng tùy chọn

Bạn cũng có thể thêm các biểu tượng phản hồi tùy chọn với việc bổ sung .has-feedbackvà biểu tượng bên phải.

Biểu tượng phản hồi chỉ hoạt động với <input class="form-control">các yếu tố văn bản.

Biểu tượng, nhãn và nhóm đầu vào

Cần định vị thủ công các biểu tượng phản hồi cho các đầu vào không có nhãn và cho các nhóm đầu vào có tiện ích bổ sung ở bên phải. Bạn được khuyến khích cung cấp nhãn cho tất cả các đầu vào vì lý do trợ năng. Nếu bạn muốn ngăn các nhãn được hiển thị, hãy ẩn chúng với .sr-onlylớp. Nếu bạn phải làm mà không có nhãn, hãy điều chỉnh topgiá trị của biểu tượng phản hồi. Đối với các nhóm đầu vào, hãy điều chỉnh rightgiá trị thành giá trị pixel thích hợp tùy thuộc vào chiều rộng của phần bổ trợ của bạn.

Truyền đạt ý nghĩa của biểu tượng đến các công nghệ hỗ trợ

Để đảm bảo rằng các công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình - truyền đạt chính xác ý nghĩa của một biểu tượng, văn bản ẩn bổ sung phải được bao gồm trong .sr-onlylớp và được liên kết rõ ràng với điều khiển biểu mẫu mà nó liên quan đến việc sử dụng aria-describedby. Ngoài ra, hãy đảm bảo rằng ý nghĩa (ví dụ: thực tế là có một cảnh báo cho một trường nhập văn bản cụ thể) được chuyển tải dưới một số hình thức khác, chẳng hạn như thay đổi văn bản của thực tế được <label>liên kết với điều khiển biểu mẫu.

Mặc dù các ví dụ sau đây đã đề cập đến trạng thái xác thực của các điều khiển biểu mẫu tương ứng của chúng trong <label>chính văn bản, nhưng kỹ thuật trên (sử dụng .sr-onlyvăn bản và aria-describedby) đã được đưa vào cho các mục đích minh họa.

<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" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</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" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</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" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Các biểu tượng tùy chọn ở dạng ngang và dạng nội tuyến

<form class="form-horizontal">
  <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" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <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" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Các biểu tượng tùy chọn có ẩn`.sr-only`Các biểu tượng tùy chọn với các nhãn

Nếu bạn sử dụng .sr-onlylớp để ẩn điều khiển biểu mẫu <label>(thay vì sử dụng các tùy chọn gắn nhãn khác, chẳng hạn như aria-labelthuộc tính), Bootstrap sẽ tự động điều chỉnh vị trí của biểu tượng sau khi nó được thêm vào.

<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" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Kiểm soát kích thước

Đặt chiều cao bằng cách sử dụng các lớp như .input-lgvà đặt chiều rộng bằng cách sử dụng các lớp cột lưới như.col-lg-* .

Kích thước chiều cao

Tạo điều khiển biểu mẫu cao hơn hoặc ngắn hơn phù hợp với kích thước 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>

Kích thước nhóm biểu mẫu ngang

Nhanh chóng định kích thước nhãn và điều khiển biểu mẫu bên trong .form-horizontalbằng cách thêm .form-group-lghoặc .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Định cỡ cột

Bao bọc các đầu vào trong các cột lưới hoặc bất kỳ phần tử mẹ tùy chỉnh nào, để dễ dàng thực thi các chiều rộng mong muốn.

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

Thẻ nút

Sử dụng các lớp nút trên một <a>, <button>hoặc <input>phần tử.

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

Sử dụng theo ngữ cảnh cụ thể

Mặc dù các lớp nút có thể được sử dụng trên <a>và <button>các phần tử, nhưng chỉ <button>các phần tử được hỗ trợ trong các thành phần điều hướng và thanh điều hướng của chúng tôi.

Các liên kết hoạt động như các nút

Nếu các <a>phần tử được sử dụng để hoạt động như các nút - kích hoạt chức năng trong trang, thay vì điều hướng đến một tài liệu hoặc phần khác trong trang hiện tại - thì chúng cũng nên được cung cấp một phần thích hợp role="button".

Hiển thị trên nhiều trình duyệt

Như một phương pháp hay nhất, chúng tôi thực sự khuyên bạn nên sử dụng <button>phần tử bất cứ khi nào có thể để đảm bảo hiển thị trên nhiều trình duyệt phù hợp.

Trong số những thứ khác, có một lỗi trong Firefox <30 ngăn chúng tôi thiết lập các line-heightnút <input>dựa trên cơ sở, khiến chúng không khớp chính xác với chiều cao của các nút khác trên Firefox.

Tùy chọn

Sử dụng bất kỳ lớp nút nào có sẵn để nhanh chóng tạo một nút theo kiểu.

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

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa cho một nút chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (văn bản hiển thị của nút) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .sr-onlylớp.

Kích thước

Các nút lớn hơn hoặc nhỏ hơn lạ mắt? Thêm .btn-lg, .btn-smhoặc .btn-xscho các kích thước bổ sung.

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

Tạo các nút cấp khối — những nút kéo dài toàn bộ chiều rộng của một nút chính — bằng cách thêm .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 hoạt động

Các nút sẽ xuất hiện khi được nhấn (với nền tối hơn, đường viền tối hơn và bóng chìm) khi hoạt động. Đối với <button>các phần tử, điều này được thực hiện thông qua :active. Đối với <a>các phần tử, nó được thực hiện với .active. Tuy nhiên, bạn có thể sử dụng .activetrên <button>s (và bao gồm aria-pressed="true"thuộc tính) nếu bạn cần sao chép trạng thái hoạt động theo chương trình.

Phần tử nút

Không cần phải thêm :activevì đó là lớp giả, nhưng nếu bạn cần bắt buộc ngoại hình giống nhau, hãy tiếp tục và thêm .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ử neo

Thêm .activelớp vào các <a>nút.

Liên kết chính Liên kết

<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 bị vô hiệu hóa

Làm cho các nút trông không thể nhấp được bằng cách làm mờ chúng trở lại với opacity.

Phần tử nút

Thêm disabledthuộc tính vào các <button>nút.

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

Khả năng tương thích trên nhiều trình duyệt

Nếu bạn thêm disabledthuộc tính vào a <button>, Internet Explorer 9 trở xuống sẽ hiển thị văn bản màu xám với bóng văn bản khó chịu mà chúng tôi không thể khắc phục.

Phần tử neo

Thêm .disabledlớp vào các <a>nút.

Liên kết chính Liên kết

<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 .disablednhư một lớp tiện ích ở đây, tương tự như .activelớp chung, vì vậy không cần tiền tố.

Báo trước chức năng liên kết

Lớp này sử dụng pointer-events: noneđể cố gắng vô hiệu hóa chức năng liên kết của <a>s, nhưng thuộc tính CSS đó chưa được chuẩn hóa và không được hỗ trợ đầy đủ trong Opera 18 trở xuống hoặc trong Internet Explorer 11. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ pointer-events: none, bàn phím điều hướng vẫn không bị ảnh hưởng, có nghĩa là người dùng bàn phím có tầm nhìn và người dùng công nghệ hỗ trợ vẫn có thể kích hoạt các liên kết này. Vì vậy, để an toàn, hãy sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết như vậy.

Hình ảnh đáp ứng

Hình ảnh trong Bootstrap 3 có thể được làm cho thân thiện với phản hồi thông qua việc bổ sung .img-responsivelớp. Điều này áp dụng max-width: 100%;và height: auto;cho display: block;hình ảnh để nó có tỷ lệ phù hợp với phần tử mẹ.

Để căn giữa các hình ảnh sử dụng .img-responsivelớp, hãy sử dụng .center-blockthay vì .text-center. Xem phần lớp trợ giúp để biết thêm chi tiết về .center-blockcách sử dụng.

Hình ảnh SVG và IE 8-10

Trong Internet Explorer 8-10, hình ảnh SVG có .img-responsivekích thước không cân đối. Để khắc phục điều này, hãy thêm vào width: 100% \9;những nơi cần thiết. Bootstrap không tự động áp dụng điều này vì nó gây ra các biến chứng cho các định dạng hình ảnh khác.

<img src="..." class="img-responsive" alt="Responsive image">

Hình dạng hình ảnh

Thêm các lớp vào một <img>phần tử để dễ dàng tạo kiểu cho hình ảnh trong bất kỳ dự án nào.

Khả năng tương thích trên nhiều trình duyệt

Hãy nhớ rằng Internet Explorer 8 không hỗ trợ các góc tròn.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Màu sắc theo ngữ cảnh

Truyền tải ý nghĩa thông qua màu sắc với một số lớp tiện ích nhấn mạnh. Chúng cũng có thể được áp dụng cho các liên kết và sẽ tối khi di chuột giống như các kiểu liên kết mặc định của chúng tôi.

Fusce dapibus, Tellus ac cursus rowo, rùa mauris nibh.

Nullam id dolor id nibh ultriciesectorsula ut id elit.

Duis mollis, est non rowo 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>

Đối phó với tính cụ thể

Đôi khi không thể áp dụng các lớp nhấn mạnh do tính đặc thù của một bộ chọn khác. Trong hầu hết các trường hợp, một cách giải quyết phù hợp là bọc văn bản của bạn trong một <span>với lớp.

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (màu sắc theo ngữ cảnh chỉ được sử dụng để củng cố ý nghĩa đã có trong văn bản / đánh dấu) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .sr-onlylớp .

Nền theo ngữ cảnh

Tương tự như các lớp màu văn bản theo ngữ cảnh, dễ dàng đặt nền của một phần tử thành bất kỳ lớp ngữ cảnh nào. Các thành phần neo sẽ tối khi di chuột, giống như các lớp văn bản.

Nullam id dolor id nibh ultriciesectorsula ut id elit.

Duis mollis, est non rowo 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>

Đối phó với tính cụ thể

Đôi khi không thể áp dụng các lớp nền theo ngữ cảnh do tính đặc thù của một bộ chọn khác. Trong một số trường hợp, cách giải quyết phù hợp là bọc nội dung phần tử của bạn trong a <div>với lớp.

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Cũng như với màu sắc theo ngữ cảnh , hãy đảm bảo rằng bất kỳ ý nghĩa nào được truyền tải thông qua màu sắc cũng được chuyển tải ở một định dạng không thuần túy mang tính trình bày.

Đóng biểu tượng

Sử dụng biểu tượng đóng chung để loại bỏ nội dung như phương thức và cảnh báo.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

Sử dụng dấu mũ để biểu thị chức năng và hướng thả xuống. Lưu ý rằng dấu mũ mặc định sẽ tự động đảo ngược trong các menu thả xuống .

<span class="caret"></span>

Phao nhanh

Làm nổi một phần tử sang trái hoặc phải với một lớp. !importantđược đưa vào để tránh các vấn đề về tính cụ thể. Các lớp cũng có thể được sử dụng làm 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ối nội dung trung tâm

Đặt một phần tử thành display: blockvà căn giữa qua margin. Có sẵn dưới dạng mixin và đẳng cấp.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Dễ dàng xóa floats bằng cách thêm .clearfix vào phần tử mẹ . Sử dụng micro clearfix được phổ biến bởi Nicolas Gallagher. Cũng có thể được sử dụng như một hỗn hợp.

<!-- 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();
}

Hiển thị và ẩn nội dung

Buộc hiển thị hoặc ẩn một phần tử ( kể cả đối với trình đọc màn hình ) bằng cách sử dụng .showvà .hiddencác lớp. Các lớp này sử dụng !importantđể tránh xung đột về tính cụ thể, giống như các lớp nổi nhanh . Chúng chỉ có sẵn cho chuyển đổi cấp độ khối. Chúng cũng có thể được sử dụng làm mixin.

.hidekhả dụng, nhưng nó không phải lúc nào cũng ảnh hưởng đến trình đọc màn hình và không được chấp nhận kể từ v3.0.1. Sử dụng .hiddenhoặc .sr-onlythay thế.

Hơn nữa, .invisiblecó thể được sử dụng để chỉ chuyển đổi chế độ hiển thị của một phần tử, có nghĩa là phần tử đó displaykhông bị sửa đổi và phần tử vẫn có thể ảnh hưởng đến luồng tài liệu.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Trình đọc màn hình và nội dung điều hướng bàn phím

Ẩn một phần tử đối với tất cả các thiết bị ngoại trừ trình đọc màn hình có .sr-only. Kết hợp .sr-onlyvới .sr-only-focusableđể hiển thị lại phần tử khi nó được lấy tiêu điểm (ví dụ: bởi người dùng chỉ sử dụng bàn phím). Cần thiết để làm theo các phương pháp hay nhất về khả năng tiếp cận . Cũng có thể đượ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ế hình ảnh

Sử dụng .text-hidelớp hoặc mixin để giúp thay thế nội dung văn bản của phần tử bằng hình nền.

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

// Usage as a mixin
.heading {
  .text-hide();
}

Để phát triển thân thiện với thiết bị di động nhanh hơn, hãy sử dụng các lớp tiện ích này để hiển thị và ẩn nội dung theo thiết bị thông qua truy vấn phương tiện. Ngoài ra còn có các lớp tiện ích để chuyển đổi nội dung khi in.

Cố gắng sử dụng chúng một cách hạn chế và tránh tạo các phiên bản hoàn toàn khác nhau của cùng một trang web. Thay vào đó, hãy sử dụng chúng để bổ sung cho bản trình bày của mỗi thiết bị.

Các lớp học có sẵn

Sử dụng một hoặc kết hợp các lớp có sẵn để chuyển đổi nội dung giữa các điểm ngắt chế độ xem.

	Các thiết bị cực nhỏĐiện thoại (<768px)	Thiết bị nhỏMáy tính bảng (≥768px)	Thiết bị trung bìnhMáy tính để bàn (≥992px)	Thiết bị lớnMáy tính để bàn (≥1200px)
`.visible-xs-*`	Dễ thấy	Ẩn giấu	Ẩn giấu	Ẩn giấu
`.visible-sm-*`	Ẩn giấu	Dễ thấy	Ẩn giấu	Ẩn giấu
`.visible-md-*`	Ẩn giấu	Ẩn giấu	Dễ thấy	Ẩn giấu
`.visible-lg-*`	Ẩn giấu	Ẩn giấu	Ẩn giấu	Dễ thấy
`.hidden-xs`	Ẩn giấu	Dễ thấy	Dễ thấy	Dễ thấy
`.hidden-sm`	Dễ thấy	Ẩn giấu	Dễ thấy	Dễ thấy
`.hidden-md`	Dễ thấy	Dễ thấy	Ẩn giấu	Dễ thấy
`.hidden-lg`	Dễ thấy	Dễ thấy	Dễ thấy	Ẩn giấu

Kể từ v3.2.0, các .visible-*-*lớp cho mỗi điểm ngắt có ba biến thể, một cho mỗi giá trị thuộc tính CSS displayđược liệt kê bên dưới.

Nhóm lớp	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Vì vậy, đối với các xsmàn hình () cực nhỏ, ví dụ, các .visible-*-*lớp có sẵn là .visible-xs-block:, .visible-xs-inlinevà .visible-xs-inline-block.

Các lớp và cũng tồn tại, nhưng không được .visible-xschấp nhận kể từ v3.2.0 . Chúng gần tương đương với , ngoại trừ các trường hợp đặc biệt bổ sung cho các phần tử có liên quan đến việc chuyển đổi..visible-sm.visible-md.visible-lg.visible-*-block<table>

In lớp học

Tương tự như các lớp đáp ứng thông thường, sử dụng các lớp này để chuyển đổi nội dung cho bản in.

Các lớp học	Trình duyệt	In
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Ẩn giấu	Dễ thấy
`.hidden-print`	Dễ thấy	Ẩn giấu

Lớp này .visible-printcũng tồn tại nhưng không được chấp nhận kể từ v3.2.0. Nó gần tương đương với .visible-print-block, ngoại trừ các trường hợp đặc biệt bổ sung cho <table>các phần tử liên quan.

Các trường hợp thử nghiệm

Thay đổi kích thước trình duyệt của bạn hoặc tải trên các thiết bị khác nhau để kiểm tra các lớp tiện ích đáp ứng.

Hiển thị trên ...

Dấu kiểm màu xanh lá cây cho biết phần tử được hiển thị trong chế độ xem hiện tại của bạn.

Rất nhỏ ✔ Hiển thị trên x-small

Nhỏ bé ✔ Có thể nhìn thấy trên nhỏ

Vừa phải ✔ Hiển thị trên phương tiện

Lớn ✔ Hiển thị trên diện rộng

Cực nhỏ và nhỏ ✔ Có thể nhìn thấy trên x-small và small

Vừa và lớn ✔ Hiển thị trên trung bình và lớn

Cực vừa và nhỏ ✔ Hiển thị trên x-nhỏ và vừa

Nhỏ và lớn ✔ Có thể nhìn thấy trên nhỏ và lớn

Cực nhỏ và lớn ✔ Hiển thị trên x-nhỏ và lớn

Vừa và nhỏ ✔ Hiển thị trên quy mô vừa và nhỏ

Ẩn trên ...

Tại đây, các dấu kiểm màu xanh lá cây cũng cho biết phần tử bị ẩn trong chế độ xem hiện tại của bạn.

Rất nhỏ ✔ Ẩn trên x-small

Nhỏ bé ✔ Ẩn trên nhỏ

Vừa phải ✔ Ẩn trên phương tiện

Lớn ✔ Ẩn trên lớn

Cực nhỏ và nhỏ ✔ Ẩn trên x-small và small

Vừa và lớn ✔ Ẩn trên trung bình và lớn

Cực vừa và nhỏ ✔ Hidden on x-small and medium

Small and large ✔ Ẩn trên nhỏ và lớn

Extra small and large ✔ Ẩn trên x-nhỏ và lớn

Vừa và nhỏ ✔ Hidden on small and medium

CSS của Bootstrap được xây dựng trên Less, một bộ tiền xử lý với các chức năng bổ sung như biến, mixin và các hàm để biên dịch CSS. Những người muốn sử dụng nguồn Ít tệp thay vì tệp CSS đã biên dịch của chúng tôi có thể sử dụng nhiều biến và hỗn hợp mà chúng tôi sử dụng trong toàn khung.

Biến lưới và mixin được đề cập trong phần Hệ thống lưới .

Biên dịch Bootstrap

Bootstrap có thể được sử dụng theo ít nhất hai cách: với CSS đã biên dịch hoặc với tệp nguồn Ít hơn. Để biên dịch các tệp Ít hơn, hãy tham khảo phần Bắt đầu để biết cách thiết lập môi trường phát triển của bạn để chạy các lệnh cần thiết.

Các công cụ biên dịch của bên thứ ba có thể hoạt động với Bootstrap, nhưng chúng không được nhóm cốt lõi của chúng tôi hỗ trợ.

Biến

Các biến được sử dụng trong toàn bộ dự án như một cách để tập trung và chia sẻ các giá trị thường được sử dụng như màu sắc, khoảng cách hoặc ngăn xếp phông chữ. Để biết phân tích đầy đủ, vui lòng xem Tùy chỉnh .

Màu sắc

Dễ dàng sử dụng hai cách phối màu: thang độ xám và ngữ nghĩa. Các màu thang độ xám cung cấp khả năng truy cập nhanh vào các sắc thái đen thường được sử dụng trong khi ngữ nghĩa bao gồm các màu khác nhau được gán cho các giá trị ngữ cảnh có ý nghĩa.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Sử dụng bất kỳ biến màu nào trong số này như hiện tại hoặc gán lại chúng cho các biến có ý nghĩa hơn cho dự án 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;
}

Đoạn đầu đài

Một số ít các biến để nhanh chóng tùy chỉnh các yếu tố chính của khung trang web của bạn.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Liên kết

Dễ dàng tạo kiểu cho các liên kết của bạn với màu sắc phù hợp chỉ với một giá trị.

// 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 nó @link-hover-colorsử dụng một chức năng, một công cụ tuyệt vời khác từ Less, để tự động tạo màu di chuột phù hợp. Bạn có thể sử dụng darken, và .lightensaturatedesaturate

Kiểu chữ

Dễ dàng đặt kiểu chữ, kích thước văn bản, hàng đầu, v.v. của bạn với một vài biến nhanh. Bootstrap cũng sử dụng những thứ này để cung cấp các bản mixins typographic dễ dàng.

@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

Hai biến nhanh để tùy chỉnh vị trí và tên tệp của các 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 một số biến mặc định để thiết lập các giá trị chung. Dưới đây là những cách thường được sử dụng nhất.

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

Mixin của nhà cung cấp

Mixin của nhà cung cấp là các mixin để giúp hỗ trợ nhiều trình duyệt bằng cách bao gồm tất cả các tiền tố của nhà cung cấp có liên quan trong CSS đã biên dịch của bạn.

Kích thước hộp

Đặt lại mô hình hộp các thành phần của bạn bằng một mixin duy nhất. Để biết ngữ cảnh, hãy xem bài viết hữu ích này từ Mozilla .

Mixin không được chấp nhận kể từ v3.2.0, với sự ra đời của Trình sửa lỗi tự động. Để duy trì khả năng tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến khi Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Các góc tròn

Ngày nay, tất cả các trình duyệt hiện đại đều hỗ trợ thuộc tính không có tiền tố border-radius. Như vậy, không có .border-radius()mixin, nhưng Bootstrap bao gồm các phím tắt để nhanh chóng làm tròn hai góc trên một mặt cụ thể 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 hộp (Drop)

Nếu đối tượng mục tiêu của bạn đang sử dụng các trình duyệt và thiết bị mới nhất và tốt nhất, hãy đảm bảo chỉ sử dụng thuộc box-shadowtính đó. Nếu bạn cần hỗ trợ cho các thiết bị Android (pre-v4) và iOS (trước iOS 5) cũ hơn, hãy sử dụng mixin không dùng nữa-webkit để nhận tiền tố bắt buộc.

Mixin không được chấp nhận kể từ v3.1.0, vì Bootstrap không chính thức hỗ trợ các nền tảng lỗi thời không hỗ trợ thuộc tính tiêu chuẩn. Để duy trì khả năng tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến khi Bootstrap v4.

Đảm bảo sử dụng rgba()màu sắc trong bóng hộp của bạn để chúng kết hợp nhuần nhuyễn nhất có thể với 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;
}

Chuyển tiếp

Nhiều mixin để linh hoạt. Đặt tất cả thông tin chuyển đổi bằng một hoặc chỉ định độ trễ và thời lượng riêng nếu cần.

Các mixin không được chấp nhận kể từ v3.2.0, với sự ra đời của Trình sửa lỗi tự động. Để duy trì khả năng tương thích ngược, Bootstrap sẽ tiếp tục sử dụng các mixin nội bộ cho đến khi Bootstrap v4.

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

Xoay, chia tỷ lệ, dịch (di chuyển) hoặc xiên 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;
}

Ảnh động

Một mixin duy nhất để sử dụng tất cả các thuộc tính hoạt ảnh của CSS3 trong một khai báo và 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;
}

Độ mờ

Đặt độ mờ cho tất cả các trình duyệt và cung cấp filterdự phòng cho IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Văn bản giữ chỗ

Cung cấp ngữ cảnh cho các điều khiển biểu mẫu 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ạo các cột thông qua CSS trong một phần tử duy nhất.

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

Độ dốc

Dễ dàng chuyển hai màu bất kỳ thành gradient nền. Nâng cao hơn và đặt hướng, sử dụng ba màu hoặc sử dụng gradient xuyên tâm. Với một mixin duy nhất, bạn sẽ nhận được tất cả các cú pháp có tiền tố mà bạn cần.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Bạn cũng có thể chỉ định góc của gradient tuyến tính, hai màu tiêu chuẩn:

#gradient > .directional(#333; #000; 45deg);

Nếu bạn cần một gradient kiểu sọc cắt tóc, điều đó cũng dễ dàng. Chỉ cần chỉ định một màu duy nhất và chúng tôi sẽ phủ một đường sọc trắng mờ.

#gradient > .striped(#333; 45deg);

Lên ante và sử dụng ba màu thay thế. Đặt màu đầu tiên, màu thứ hai, màu dừng của màu thứ hai (giá trị phần trăm như 25%) và màu thứ ba với các hỗn hợp sau:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Đứng lên! Nếu bạn cần xóa một gradient, hãy nhớ xóa mọi thứ dành riêng cho IE filtermà bạn có thể đã thêm vào. Bạn có thể làm điều đó bằng cách sử dụng .reset-filter()mixin cùng với background-image: none;.

Mixin tiện ích

Mixin tiện ích là các mixin kết hợp các thuộc tính CSS không liên quan khác nhau để đạt được một mục tiêu hoặc nhiệm vụ cụ thể.

Clearfix

Quên thêm class="clearfix"vào bất kỳ phần tử nào và thay vào đó thêm .clearfix()mixin nếu thích hợp. Sử dụng bản ghi rõ vi mô của Nicolas Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Căn giữa theo chiều ngang

Nhanh chóng căn giữa bất kỳ phần tử nào trong phần tử gốc của nó. Yêu cầu widthhoặc max-widthđược thiết lập.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Người trợ giúp định cỡ

Chỉ định kích thước của một đối tượng dễ dàng hơn.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Các vùng văn bản có thể thay đổi kích thước

Dễ dàng cấu hình các tùy chọn thay đổi kích thước cho bất kỳ vùng văn bản nào hoặc bất kỳ phần tử nào khác. Mặc định là hành vi trình duyệt bình thường ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Cắt bớt văn bản

Dễ dàng cắt ngắn văn bản bằng dấu chấm lửng chỉ với một lần trộn. Yêu cầu phần tử phải là blockhoặc inline-blockcấp.

// 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 võng mạc

Chỉ định hai đường dẫn hình ảnh và kích thước hình ảnh @ 1x và Bootstrap sẽ cung cấp truy vấn phương tiện @ 2x. Nếu bạn có nhiều hình ảnh để phân phát, hãy cân nhắc viết CSS hình ảnh võng mạc của bạn theo cách thủ công trong một truy vấn phương tiện duy nhất.

.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 trên Less nhưng nó cũng có cổng Sass chính thức . Chúng tôi duy trì nó trong một kho lưu trữ GitHub riêng biệt và xử lý các bản cập nhật bằng tập lệnh chuyển đổi.

Bao gồm những gì

Vì cổng Sass có một kho lưu trữ riêng biệt và phục vụ đối tượng hơi khác, nên nội dung của dự án khác rất nhiều so với dự án Bootstrap chính. Điều này đảm bảo cổng Sass tương thích với nhiều hệ thống dựa trên Sass nhất có thể.

Đường dẫn	Sự mô tả
`lib/`	Mã đá quý Ruby (cấu hình Sass, tích hợp Rails và La bàn)
`tasks/`	Tập lệnh chuyển đổi (chuyển ngược dòng Ít thành Sass)
`test/`	Kiểm tra tổng hợp
`templates/`	Bản kê khai gói la bàn
`vendor/assets/`	Các tệp Sass, JavaScript và phông chữ
`Rakefile`	Các tác vụ nội bộ, chẳng hạn như cào và chuyển đổi

Truy cập kho lưu trữ GitHub của cổng Sass để xem các tệp này đang hoạt động.

Cài đặt

Để biết thông tin về cách cài đặt và sử dụng Bootstrap cho Sass, hãy tham khảo readme của kho lưu trữ GitHub . Đây là nguồn cập nhật nhất và bao gồm thông tin để sử dụng với các dự án Rails, Compass và Sass tiêu chuẩn.

Bootstrap dành cho Sass

CSS

Tổng quan

Loại tài liệu HTML5

Di động đầu tiên

Kiểu chữ và liên kết

Normalize.css

Hộp đựng

Hệ thống lưới điện

Giới thiệu

Truy vấn phương tiện truyền thông

Tùy chọn lưới

Ví dụ: Xếp chồng lên nhau

Ví dụ: Thùng chứa chất lỏng

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

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

Ví dụ: Gói cột

Đặt lại cột đáp ứng

Các cột bù trừ

Lồng các cột

Thứ tự cột

Ít mixin và biến

Biến

Mixin

Ví dụ sử dụng

Kiểu chữ

Đề mục

h1. Tiêu đề Bootstrap

h2. Tiêu đề Bootstrap

h3. Tiêu đề Bootstrap

h4. Tiêu đề Bootstrap

h5. Tiêu đề Bootstrap

h6. Tiêu đề Bootstrap

h1. Tiêu đề Bootstrap Văn bản phụ

h2. Tiêu đề Bootstrap Văn bản phụ

h3. Tiêu đề Bootstrap Văn bản phụ

h4. Tiêu đề Bootstrap Văn bản phụ

h5. Tiêu đề Bootstrap Văn bản phụ

h6. Tiêu đề Bootstrap Văn bản phụ

Bản sao nội dung

Bản sao nội dung chính

Được xây dựng với ít hơn

Các phần tử văn bản nội tuyến

Văn bản được đánh dấu

Văn bản đã xóa

Văn bản gạch ngang

Đã chèn văn bản

Văn bản được gạch chân

Văn bản nhỏ

In đậm

Chữ in nghiêng

Các yếu tố thay thế

Các lớp căn chỉnh

Các lớp chuyển đổi

Các từ viết tắt

Viết tắt cơ bản

Chủ nghĩa ban đầu

Địa chỉ

Dấu ngoặc kép

Blockquote mặc định

Tùy chọn trích dẫn khối

Đặt tên nguồn

Màn hình thay thế

Danh sách

Không theo thứ tự

Đã đặt hàng

Chưa được xếp lớp

Nội tuyến

Sự mô tả

Mô tả ngang

Tự động cắt bớt

Mã số

Nội tuyến

Đầu vào của người dùng

Khối cơ bản

Biến

Đầu ra mẫu

Những cái bàn

Ví dụ cơ bản

Hàng sọc

Khả năng tương thích trên nhiều trình duyệt

`:focus`Trạng thái demo

Cảnh báo về chức năng liên kết của`<a>`

Các biểu tượng tùy chọn có ẩn`.sr-only`Các biểu tượng tùy chọn với các nhãn