Ảnh responsive

Hình ảnh trong Bootstrap 3 có thể hiển thị tương thích với các thiết bị di động bằng cách sử dụng class .img-responsive class. Class này sẽ thiết lập max-width: 100%; và height: auto; lên ảnh để chúng có thể co giãn theo tỷ lệ tương đối với phần tử cha của chúng.

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

Các hình dạng của ảnh

Thêm các class vào thẻ <img> để style ảnh một cách dễ dàng.

  

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

Các class trợ giúp

Các màu sắc theo ngữ cảnh

Bootstrap có một tập hợp các class tiện ích hỗ trợ người dùng trong việc truyền tải ý nghĩa bằng màu sắc. Những class này cũng có thể áp dụng vào các liên kết và cũng có tác dụng làm tối màu liên kết khi hover qua như style mặc định của liên kết.

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

Các màu nền theo ngữ cảnh

Tương tự như các class dành cho màu sắc của text theo ngữ cảnh, bạn cũng dễ dàng thiết lập màu nền của bất kỳ phần tử nào bằng các class ngữ cảnh cho màu nền. Các phần tử <a> sẽ bị tối màu đi khi hover vào giống như các class áp dụng với text.

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

Biểu tượng "đóng"

Sử dụng biểu tượng "đóng" chung cho việc xóa bỏ (hoặc đóng lại) các hộp modal hay các thông điệp.

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

Dấu caret

Sử dụng các dấu caret để chỉ rõ chức năng sổ xuống và hướng sổ xuống. Lưu ý rằng caret mặc định sẽ tự động đổi chiều trong trình đơn sổ lên.

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

Float

Bạn có thể áp dụng hiệu ứng float vào một phần tử (trái hoặc phải) bằng cách sử dụng một class tương ứng. !important được thêm vào để tránh các vấn đề liên quan đến tính đặc hiệu. Các class cũng có thể được sử dụng như các mixin.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Căn giữa các khối nội dung

Thiết lập thuộc tính display: block vào một phần tử và căn giữa bằng margin. Tiện ích này có thể được sử dụng bằng mixin hoặc class.

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

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

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

Clearfix

Clear thuộc tính float trên một phần tử bất kỳ bằng cách sử dụng class .clearfix, được lấy từ micro clearfix của Nicolas Gallagher. Class này cũng có thể được sử dụng như một mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

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

// Usage as a Mixin
.element {
  .clearfix();
}

Ẩn và hiện nội dung

Bạn có thể làm cho một phần tử ẩn đi hoặc hiện ra (hỗ trợ cả các thiết bị đọc màn hình) bằng cách sử dụng các class .show và .hidden. Những class này sử dụng !important để tránh sự xung đột về tính đặc hiệu, giống như float. Chúng chỉ được áp dụng lên các phần tử dạng block (display:block) và cũng có thể sử dụng như các mixin.

Class .hide thi thoảng không có tác dụng trên các thiết bị đọc màn hình, Do đó class này đã bị loại bỏ ở phiên bản 3.0.1 và được thay thế bằng .hidden và .sr-only.

Ngoài ra, class .invisible được sử dụng để ẩn/hiện một phần tử, điều đó có nghĩa là thuộc tính display của nó không bị thay đổi và có thể vẫn ảnh hưởng đến luồng của document.

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

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

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

Nội dung thiết bị đọc màn hình

Bạn có thể ẩn một phần tử bằng class .sr-only trên tất cả các thiết bị ngoại trừ trình đọc màn hình. Kết hợp class .sr-only cùng với class .sr-only-focusable để hiển thị phần tử một lần nữa khi được focus (chẳng hạn như đối với người dùng chỉ dùng bàn phím). Bạn nên tham khảo các bài thực hành tốt nhất về khả năng truy nhập. Class này cũng được sử dụng như mixin.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a Mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Thay thế ảnh

Sử dụng class .text-hide hoặc mixin để thay thế nội dung text của một phần tử bằng một ảnh nền.

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

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