search

Hướng dẫn width trong bootstrap - width in bootstrap

Ngày đăng: 08/10/2022
Trả lời: 0
Lượt xem: 102

Mục lục

Show

Hướng dẫn width trong bootstrap - width in bootstrap
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hướng dẫn width trong bootstrap - width in bootstrap
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook
Hướng dẫn width trong bootstrap - width in bootstrap
Facebook

1- Bootstrap Sizing

Bootstrap Sizing là một tiện ích của Bootstrap, nó cung cấp một vài lớp giúp bạn thiết lập chiều rộng và chiều cao cho phần tử. là một tiện ích của Bootstrap, nó cung cấp một vài lớp giúp bạn thiết lập chiều rộng và chiều cao cho phần tử.

Class .w-*

Lớp Mô tả
w-25 Tương đương với sử dụng Css {width: 25%}. Css {width: 25%}.
w-50 Tương đương với sử dụng Css {width: 50%}. Css {width: 50%}.
w-75 Tương đương với sử dụng Css {width: 75%}. Css {width: 75%}.
w-100 Tương đương với sử dụng Css {width: 100%}. Css {width: 100%}.
w-auto Tương đương với sử dụng Css {width: auto}. Css {width: auto}.

w-example





   
Width 25%

   
Width 50%

   
Width 75%

   
Width 100%

   
Width auto

Class .h-*

Lớp Mô tả
w-25 Tương đương với sử dụng Css {width: 25%}. Css {height: 25%}.
w-50 Tương đương với sử dụng Css {width: 50%}. Css {height: 50%}.
w-75 Tương đương với sử dụng Css {width: 75%}. Css {height: 75%}.
w-100 Tương đương với sử dụng Css {width: 100%}. Css {height: 100%}.
w-auto Tương đương với sử dụng Css {width: auto}. Css {height: auto}.

h-example




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto

Class .h-*

Lớp Mô tả
w-25 Tương đương với sử dụng Css {width: 25%}. Css {max-width: 100%}.
w-50 Tương đương với sử dụng Css {width: 50%}. Css {max-height: 100%}.

mw-100-example



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap

Hướng dẫn width trong bootstrap - width in bootstrap

w-75

Tương đương với sử dụng Css {width: 75%}.

Nắm được những phần chính trong kết cấu của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi tới việc phát triển web tốt hơn, nhanh hơn và mạnh hơn.

HTML5 doctype

Bootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những thứ yêu cầu phải sử dụng HTML5 doctype. Vì thế, hãy thêm nó vào dòng đầu tiên trong các dự án của bạn.



 lang="en">

  ...

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

Với Bootstrap 2, chúng tôi đã thêm các style thân thiện với các thiết bị di động như một phần chính của framework. Tuy nhiên trong Bootstrap 3, chúng tôi đã viết lại dự án để có thể tương thích với các thiết bị di động ngay từ khi bắt đầu. Thay vì phải thêm các style tùy chọn cho các thiết bị, chúng tôi đã gắn trực tiếp vào core. Các style dành cho thiết bị di động nằm xuyên suốt trong cả thư viện thay vì nằm trong các tập tin riêng lẻ.

Để đảm bảo việc render và "chạm phóng to", hãy thêm thẻ meta viewport vào 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
25 của bạn.hãy thêm thẻ meta viewport vào 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
25 của bạn.

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

Bạn có thể vô hiệu hóa tính năng phóng to trên các thiết bị di động bằng cách thêm 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
26 vào thẻ meta viewport. Thuộc tính này sẽ vô hiệu hóa tính năng phóng to, điều đó có nghĩa là người dùng chỉ có thể cuộn trang, tạo cảm giác như người dùng đang sử dụng một ứng dụng điện thoại thuần túy. Nhìn chung, chúng tôi không đề xuất sử dụng thuộc tính này trên tất cả các site, vì vậy hãy cân nhắc trước khi sử dụng.

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

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

Bootstrap thiết lập các style chung cho việc hiển thị, typography và các liên kết. Cụ thể, chúng tôi:

  • Thiết lập 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    27 trên thẻ 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    28
  • Sử dụng các thuộc tính 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    29, 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    30, and 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    31 làm cơ sở của typography
  • Thiết lập màu sắc chung của liên kết bằng thuộc tính 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    32 và áp dụng hiệu ứng gạch dưới khi 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    33

Những style này nằm trong tập tin 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
34.

Normalize.css

Để cải thiện việc render đối với các trình duyệt, chúng tôi sử dụng Normalize.css, một dự án được thực hiện bởi Nicolas Gallagher và Jonathan Neal.

Containers

Dễ dàng căn giữa nội dung của một trang bằng cách bọc nội dung của nó bên trong một 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
35. Container thiết lập thuộc tính 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
36 trên tất cả các kích thước được áp dụng vào media query để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
37 và chiều rộng cố định nên container mặc định không thể bị lồng.

Sử dụng class 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
35 cho một container responsive có chiều rộng cố định.

 class="container">

  ...

Sử dụng class 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
39 cho container có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn.

 class="container-fluid">

  ...

Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa..

Giới thiệu

Các hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của Bootstrap hoạt động:

  • Các hàng được đặt bên trong một 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    35 (fixed-width) hoặc 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    39 (full-width) để căn chỉnh và thiết lập padding một cách thích hợp.
  • Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang.
  • Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là phần tử con trực tiếp của các hàng.
  • Các class được định nghĩa trước như 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    42 và 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    43 luôn sẵn có để dựng lên các bố cục lưới một cách nhanh nhất. Một số ít các mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa.
  • Các cột tạo nên các gutter (khoảng trắng nằm giữa nội dung cột) bằng 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    37. Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong các hàng do giá trị margin âm trên các 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    42.
  • Các cột của lưới được tạo ra bằng cách chỉ định số các cột mà bạn muốn sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class 
    

    
   
    
      .h-25
   
    
   
    
      .h-50
   
    
   
    
      .h-75
   
    
   
    
      .h-100
   
    
   
    
      .h-auto
    43.

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

Media query

Chúng tôi sử dụng các media query sau trong các tập tin Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng tôi.

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */



/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }



/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }



/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các media query này bằng cách thêm thuộc tính 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
47.

@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }

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

Hãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau.

Extra small devices Phones ( Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behaviorHorizontal at all times Collapsed to start, horizontal above breakpoints
Container widthNone (auto) 750px 970px 1170px
Class prefix



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
48 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
49 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
50 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
51
# of columns12
Column widthAuto ~62px ~81px ~97px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
OffsetsYes

Offsets

Column ordering

.col-md-1

.col-md-1

.col-md-1

.col-md-1

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

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-4

.col-md-4

.col-md-4




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
0

Sử dụng một tập hợp các class
.h-25
.h-50
.h-75
.h-100
.h-auto
52, bạn có thể tạo ra một hệ thống lưới cơ bản. Hệ thống này sẽ hiển thị chồng lên nhau trên các thiết bị di động và tablet (kích thước nhỏ) trước khi hiển thị dưới dạng hàng ngang trên màn hình máy tính (kích thước trung bình). Hãy đặt các cột của lưới vào bên trong các
.h-25
.h-50
.h-75
.h-100
.h-auto
42.

.col-md-1 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
1

Ví dụ: Fluid container

Chuyển đổi bất kỳ một bố cục lưới fixed-width nào thành một bố cục full-width bằng cách thay đổi 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
35 ngoài cùng thành 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
39.

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

Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
56 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
52 vào các cột của bạn. Hãy xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.

Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
56 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
52 vào các cột của bạn. Hãy xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.

Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
56 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
52 vào các cột của bạn. Hãy xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.

Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
56 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
52 vào các cột của bạn. Hãy xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
2

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

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

Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
56 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
52 vào các cột của bạn. Hãy xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.

.col-xs-12 .col-md-8

.col-xs-12 .col-md-8

.col-xs-12 .col-md-8




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
3

.col-xs-6 .col-md-4

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

Bạn có thể tạo ra các bố cục cơ động hơn nữa bằng cách sử dụng các class dành cho máy tính bảng 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
58.
Resize your viewport or check it out on your phone for an example.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-12 .col-sm-6 .col-md-8




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
4

.col-xs-6 .col-sm-4reset offset, push, hooặc pull. Hãy tham khảo the grid example để hiểu rõ hơn.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
5

Reset cột responsive

Khi sử dụng 4 bậc (tương ứng với 4 mốc kích thước của màn hình) của hệ thống lưới, bạn sẽ gặp phải một vấn đề, đó là tại một mốc kích thước xác định, có thể sẽ có một cột cao hơn các cột khác trong cùng một hàng. Để sửa lỗi này, hãy sử dụng một class 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
59 cùng với các class responsive tiện ích của chúng tôi.

.col-md-4

.col-xs-6 .col-sm-3 Resize your viewport or check it out on your phone for an example.

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

Ngoài việc clear các cột tại các mốc Responsive, có thể bạn cần thực hiện reset offset, push, hooặc pull. Hãy tham khảo the grid example để hiểu rõ hơn.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
6

Di chuyển cột

Di chuyển cột sang phía bên phải bằng cách sử dụng các class 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
60. Các class này làm tăng khoảng lề trái (margin-left) của một cột lên bằng 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
61 cột. Ví dụ, 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
62 dịch 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
63 sang bên phải một khoảng cách bằng 4 lần chiều rộng của một cột.

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
7

.col-md-6 .col-md-offset-3

Các cột lồng nhau

Để tạo ra các cột lồng nhau, Hãy thêm một 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
42 mới và một tập các cột 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
52 bên trong cột 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
52 đã tồn tại. Các hàng nằm bên trong có thể chứa một tập hợp các cột, tối đa là 12 hoặc ít hơn.

Level 1: .col-md-9 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
8

Level 2: .col-md-6

Thứ tự cột

Dễ dàng thay đổi thứ tự của các cột trong hệ thống lưới bằng cách sử dụng các class 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
67 và 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
68.

.col-md-9 .col-md-push-3




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
9

.col-md-3 .col-md-pull-9

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



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
0

Ngoài các class của lưới được xây dựng sẵn để thuận tiện cho việc dựng bố cục một cách nhanh chóng, Bootstrap còn sử dụng các biến số và mixin Less để tạo ra các bố cục ngữ nghĩa đơn giản của riêng bạn.

Biến số



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
1



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
2

Tiêu đề

Tất cả các thẻ tiêu đề của HTML, từ thẻ 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
69 tới 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
70, đều sẵn có. Các class từ 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
71 tới 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
72 được sử dụng khi bạn muốn style các thẻ tiêu đề nhưng vẫn muốn text của bạn hiển thị trên cùng dòng.

h2. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 36px

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading
Semibold 18px
h5. Bootstrap heading
Semibold 14px h6. Bootstrap heading 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
3

Semibold 12px

Bạn cũng có thể tạo ra các text khác đi kèm trong tiêu đề bằng thẻ
.h-25
.h-50
.h-75
.h-100
.h-auto
73 hoặc class
.h-25
.h-50
.h-75
.h-100
.h-auto
74.

Bạn cũng có thể tạo ra các text khác đi kèm trong tiêu đề bằng thẻ
.h-25
.h-50
.h-75
.h-100
.h-auto
73 hoặc class
.h-25
.h-50
.h-75
.h-100
.h-auto
74.

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
4

h6. Bootstrap heading Secondary text

Body14px, với 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
76 có tỷ lệ 1.428. Các thuộc tính này được áp dụng cho phần 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
77 và tất cả các đoạn văn. Hơn nữa, 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
78 (các đoạn văn) sẽ nhận khoảng căn lề dưới (margin-bottom) bằng một nửa line-height của chúng (mặc định là 10px).




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
75 mặc định của Bootstrap là 14px, với 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
76 có tỷ lệ 1.428. Các thuộc tính này được áp dụng cho phần 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
77 và tất cả các đoạn văn. Hơn nữa, 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
78 (các đoạn văn) sẽ nhận khoảng căn lề dưới (margin-bottom) bằng một nửa line-height của chúng (mặc định là 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

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

Bạn có thể làm một đoạn văn trở nên nổi bật hơn bằng cách thêm class 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
79.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Xây dựng với Lessvariables.less: 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
30 và 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
31. Biến thứ nhất là font-size cơ sở được sử dụng rất phổ biến, còn biến thứ hai là line-height cơ sở. Chúng tôi sử dụng những biến này và một số phép toán cơ bản để tạo ra margin, padding và line-height. Tùy biến chúng và Bootstrap sẽ tự động điều chỉnh.

Tỉ lệ typograghy trong Bootstrap dựa trên 2 biến trong Less trong variables.less:
.h-25
.h-50
.h-75
.h-100
.h-auto
30 và
.h-25
.h-50
.h-75
.h-100
.h-auto
31. Biến thứ nhất là font-size cơ sở được sử dụng rất phổ biến, còn biến thứ hai là line-height cơ sở. Chúng tôi sử dụng những biến này và một số phép toán cơ bản để tạo ra margin, padding và line-height. Tùy biến chúng và Bootstrap sẽ tự động điều chỉnh.

Nhấn mạnh

Hãy sử dụng các thẻ nhấn mạnh mặc định của HTML với những style đơn giản.

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

Để giảm tính nhấn mạnh cho các đoạn text hoặc khối text, hãy sử dụng thẻ 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
73 để thay đổi kích thước của những text đó bằng 85% so với kích thước của phần tử cha. Các phần tử tiêu đề nhận những 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
75 của riêng chúng khi nằm trong thẻ 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
73. Bạn cũng có thể sử dụng một phần tử có class 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
74 trên cùng dòng thay vì 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
73.



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
5

This line of text is meant to be treated as fine print.

In đậm

Được sử dụng để nhấn mạnh một đoạn text với giá trị font-weight cao.rendered as bold text. 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
6

The following snippet of text is rendered as bold text.

In nghiêng

Được sử dụng để nhấn mạnh một đoạn text với chữ in nghiêng.



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
7

The following snippet of text is rendered as italicized text.

Các phần tử thay thế

Bạn có thể tự do sử dụng các thẻ
.h-25
.h-50
.h-75
.h-100
.h-auto
87 và
.h-25
.h-50
.h-75
.h-100
.h-auto
88 in HTML5. Thẻ
.h-25
.h-50
.h-75
.h-100
.h-auto
87 được sử dụng để in đậm một từ hoặc cụm từ trong khi thẻ
.h-25
.h-50
.h-75
.h-100
.h-auto
88 được sử dụng phổ biến cho các thuật ngữ về kỹ thuật, âm thanh,...

Các class căn chỉnh

Dễ dàng căn chỉnh lại các text với các thành phần khác bằng các class căn chỉnh text.

Left aligned text.

Center aligned text.

Right aligned text.



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
8

Justified text.

Tên viết tắt

Sử dụng thẻ
.h-25
.h-50
.h-75
.h-100
.h-auto
91 của HTML để hiển thị tên viết tắt, và sẽ hiển thị tên đầy đủ khi hover qua. Các thẻ này có thuộc tính
.h-25
.h-50
.h-75
.h-100
.h-auto
92 đi kèm, có đường viền bên dưới ở dạng các dấu chấm liền nhau và khi hover qua sẽ hiển thị con trỏ dạng trợ giúp.

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

Sử dụng thuộc tính 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
92 có giá trị là tên đầy đủ của tên viết tắt trên thẻ 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
91



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
9

An abbreviation of the word attribute is attr.

Initialism

Thêm class 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
95 vào thẻ 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
91 để thiết lập font-size nhỏ hơn một chút.



 lang="en">

  ...
0

HTML is the best thing since sliced bread.

Địa chỉ

Hiển thị thông tin liên hệ cho phần tử cha gần nhất hoặc cả 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
77. Để bảo toàn định dạng, hãy kết thúc tất cả các dòng bằng thẻ 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
98.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
[email protected]



 lang="en">

  ...
1

Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890 Full Name[email protected]

Khối trích dẫn

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

Hãy bọc một khối HTML bất kỳ mà bạn muốn trích dẫn bằng thẻ 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
99. ưu tiên sử dụng thẻ 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
78 bên trong 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
99.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.



 lang="en">

  ...
2

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

Bạn có thể tùy chọn thay đổi nội dung và style của khối 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
99.

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

Hãy thêm một 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
03 để xác định nguồn trích dẫn đến từ đâu. Bọc tên của source-work bằng thẻ 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
04.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.



 lang="en">

  ...
3

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

Bạn có thể tùy chọn thay đổi nội dung và style của khối 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
99.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.



 lang="en">

  ...
4

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

Bạn có thể tùy chọn thay đổi nội dung và style của khối
.h-25
.h-50
.h-75
.h-100
.h-auto
99.

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

  • Hãy thêm một 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    03 để xác định nguồn trích dẫn đến từ đâu. Bọc tên của source-work bằng thẻ 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    04.
  • Các dạng hiển thị thay thế
  • Để căn phải nội dung trích dẫn, hãy sử dụng class 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    05.
  • Danh sách
  • Danh sách không có thứ tự
    • Một danh sách các hạng mục được sắp xếp không theo một thứ tự nào cả.
    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Phasellus iaculis neque

Purus sodales ultricies

Vestibulum laoreet porttitor sem

  1. Hãy thêm một 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    03 để xác định nguồn trích dẫn đến từ đâu. Bọc tên của source-work bằng thẻ 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    04.
  2. Các dạng hiển thị thay thế
  3. Để căn phải nội dung trích dẫn, hãy sử dụng class 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    05.
  4. Danh sách
  5. Danh sách không có thứ tự
  6. Facilisis in pretium nisl aliquet
  7. Nulla volutpat aliquam velit
  8. Phasellus iaculis neque

Purus sodales ultricies

Vestibulum laoreet porttitor semviệc này chỉ áp dụng cho các thẻ 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
07 là con trực tiếp của 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
08 hoặc 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
09, điều đó có nghĩa là bạn có thể sẽ cần thêm class cho các danh sách khác nằm sâu bên trong.

  • Hãy thêm một 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    03 để xác định nguồn trích dẫn đến từ đâu. Bọc tên của source-work bằng thẻ 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    04.
  • Các dạng hiển thị thay thế
  • Để căn phải nội dung trích dẫn, hãy sử dụng class 
    

    Image with max-width:100%
    


    Hướng dẫn width trong bootstrap - width in bootstrap
    05.
  • Danh sách
  • Danh sách không có thứ tự
    • Một danh sách các hạng mục được sắp xếp không theo một thứ tự nào cả.
    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Phasellus iaculis neque



 lang="en">

  ...
5

Purus sodales ultricies

Vestibulum laoreet porttitor sem

  • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc



 lang="en">

  ...
6

Eget porttitor lorem

Danh sách có thứ tự

Một danh sách các hạng mục được sắp xếp theo một thứ tự nhất định.



 lang="en">

  ...
7

Nulla volutpat aliquam velit

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

Loại bỏ thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
06 mặc định của danh sách và khoảng căn lề trái (margin-left) trên tất cả các hạng mục của danh sách. Lưu ý rằng, việc này chỉ áp dụng cho các thẻ 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
07 là con trực tiếp của 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
08 hoặc 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
09, điều đó có nghĩa là bạn có thể sẽ cần thêm class cho các danh sách khác nằm sâu bên trong.



 lang="en">

  ...
8

Danh sách cùng dòng

Đặt tất cả các hạng mục trong danh sách trên cùng một dòng bằng cách sử dụng thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
10 cùng thuộc tính padding có giá trị nhỏ.

Lorem ipsum

Phasellus iaculis

Nulla volutpat



 lang="en">

  ...
9

Thông tin chi tiết

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

Description listsA description list is perfect for defining terms.EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod.

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

Chi tiết theo hàng ngang

Hãy đặt các thuật ngữ và thông tin đi kèm bên trong các thẻ 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
11 nằm sát nhau. Bình thường bạn chỉ cần sử dụng những thẻ 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
11 mặc định, tuy nhiên khi thanh điều hướng mở rộng ra, bạn hãy sử dụng 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
11 dạng này.

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

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

Description listsA description list is perfect for defining terms.EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod.Felis euismod semper eget laciniaFusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Tự động cắt ngắn

Danh sách các thông tin theo hàng ngang sẽ tự động cắt ngắn các thuật ngữ quá dài để nằm vừa vặn trong cột bên trái bằng cách sử dụng thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
14. Để tương thích với các khung nhìn hẹp, chúng sẽ thay đổi về dạng xếp chồng mặc định.

Cùng dòng

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

Khi bạn muốn sử dụng những đoạn mã gợi ý trên cùng 1 dòng, hãy đóng gói nó bằng thẻ

Image with max-width:100%

Hướng dẫn width trong bootstrap - width in bootstrap
15.

For example, 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
16 should be wrapped as inline.

This text is meant to be treated as sample output from a computer program.

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

Ví dụ cơ bản

Đối với các style đơn giản —chỉ cần các dòng kẻ phân chia giữa các dòng—bạn chỉ cần thêm class cơ sở 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
22 vào bất kỳ thẻ 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
23 mà bạn muốn sử dụng. Điều này dường như là thừa thãi, tuy nhiên để có thể sử dụng rộng rãi bảng cho các plugin khác như calendar và date pickers, chúng tôi đã lựa chọn để tách biệt với các style tùy biến của bảng.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

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

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

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
24 để thêm kiểu style dạng dòng kẻ sọc cho bất kỳ bảng nào mà bạn muốn.

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

Bảng kẻ sọc được style thông qua selector 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
25 của CSS(Không được hỗ trợ trong Internet Explorer 8).

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

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

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

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
24 để thêm kiểu style dạng dòng kẻ sọc cho bất kỳ bảng nào mà bạn muốn.

#First NameLast NameUsername
1 Mark Otto @mdo
Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry @twitter 

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

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

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
24 để thêm kiểu style dạng dòng kẻ sọc cho bất kỳ bảng nào mà bạn muốn.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry @twitter 

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

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

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
24 để thêm kiểu style dạng dòng kẻ sọc cho bất kỳ bảng nào mà bạn muốn.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry @twitter 

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

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

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
24 để thêm kiểu style dạng dòng kẻ sọc cho bất kỳ bảng nào mà bạn muốn.

Tương thích với hầu hết các loại trình duyệtBảng kẻ sọc được style thông qua selector 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
25 của CSS(Không được hỗ trợ trong Internet Explorer 8).
Bảng có viềnThêm class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
26 để hiển thị đường viền cho bảng và các ô trong bảng.
@TwBootstrap Larry the Bird
Bảng có dòng đổi màu khi hoverThêm class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
27 để kích hoạt trạng thái hover trên các dòng của bảng bên trong thẻ 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
28.
Bảng bó chặtThêm class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
29 để làm cho các ô trong bảng gần nhau hơn.
Các class theo ngữ cảnhSử dụng các class theo ngữ cảnh để tô màu cho các dòng hoặc các ô trong bảng.

#ClassClassClass
1 DescriptionDescriptionDescription
2 DescriptionDescriptionDescription
3 DescriptionDescriptionDescription
4 DescriptionDescriptionDescription
5 DescriptionDescriptionDescription
6 DescriptionDescriptionDescription
7 DescriptionDescriptionDescription
8 DescriptionDescriptionDescription
9 DescriptionDescriptionDescription

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

Image with max-width:100%

Hướng dẫn width trong bootstrap - width in bootstrap
30

Áp dụng màu hover cho một dòng hoặc một ô trong bảng

# 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31
1 Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực
2 Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực
3 Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực

# 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
31
1 Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực
2 Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực
3 Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực Biểu thị sự thành công hoặc một hành động tích cực 

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

Ví dụ cơ bản



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
32 

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

Biểu thị sự thay đổi và hành động mang tính thông báo 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
33

Biểu thị sự cảnh báo hoặc nhắc nhở 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
34 Lưu ý rằng, class này chỉ hoạt động với những form nằm bên trong khung nhìn có độ rộng tối thiểu bằng 768 pixel.

Biểu thị sự nguy hiểm hoặc một hành động mang tính tiêu cực

Column heading

Column content

Bảng responsive

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

Để tạo ra bảng responsive, hãy bọc phần tử có class

Image with max-width:100%

Hướng dẫn width trong bootstrap - width in bootstrap
22 bằng một phần tử khác có class

Image with max-width:100%

Hướng dẫn width trong bootstrap - width in bootstrap
36 , khi đó bảng sẽ tự động điều chỉnh kích thước cho phù hợp và cho phép người dùng cuộn ngang trên các thiết bị di động (độ phân dải dưới 768px)

Table heading

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

Các control được hỗ trợ

Sau đây là ví dụ về các form control được hỗ trợ trên cùng một layout.

Input

Input là form-control dựa text phổ biến nhất, bao gồm toàn bộ các kiểu input của HTML5: 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
49, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
50, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
51, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
52, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
53, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
54, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
55, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
56, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
57, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
58, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
59, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
60, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
61, và 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
62.

Yêu cầu khai báo kiểu

Các input sẽ chỉ được style đầy đủ nếu thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
63 của chúng được khai báo rõ ràng.

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

Textarea

Textarea là một dạng form-control hỗ trợ nhiều dòng text. Khi cần thiết, hãy thay đổi thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
64.

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

Checkbox và radio

Checkbox được sử dụng cho việc lựa chọn một hoặc nhiều tùy chọn trong một danh sách. Trong khi đó, radio được sử dụng cho việc lựa chọn 1 tùy chọn duy nhất.

Mặc định (xếp chồng)

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

Checkbox trên cùng dòng

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
65 hoặc 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
66 để hiển thị danh sách các checkbox/radio trên cùng một dòng.

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

Select

Sử dụng tùy chọn mặc định hoặc thêm 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
67 để hiển thị nhiều tùy chọn cùng một lúc.

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

Các form-control tĩnh

Khi bạn cần đặt một dòng text thuần bên cạnh một nhãn bên trong một form dàn hàng ngang, hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
68 trên thẻ 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
78.

 class="container">

  ...
0

Input đang được focus

Chúng tôi loại bỏ 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
70 mặc định trên một số form-control và sử dụng 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
71 để hiển thị input như đang được 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
72.

Demo 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
72 state

The above example input uses custom styles in our documentation to demonstrate the 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
72 state on a 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
40.

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

Hãy thêm thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
76 vào một input để ngăn cản người dùng nhập dữ liệu và làm cho input hiển thị giống như là đã bị vô hiệu hóa.

 class="container">

  ...
1

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

Hãy thêm thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
76 vào một 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
78 để vô hiệu hóa toàn bộ các form-controll nằm bên trong 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
78.

Chức năng liên kết của thẻ 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80 không bị ảnh hưởng

Class này sẽ chỉ làm thay đổi hình thức của các nút 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
81 chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa chức năng liên kết, hãy sử dụng Javascript.

Tính tương thích với các trình duyệt

Mặc dù Bootstrap sẽ áp dụng các style này trên tất cả các trình duyệt, tuy nhiên Internet Explorer 9 (và các phiên bản thấp hơn) không hoàn toàn hỗ trợ thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
76 trên một 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
78. Vì thế, hãy sử dụng Javascript để vô hiệu hóa fieldset trên các trình duyệt này.

 class="container">

  ...
2

Readonly inputs

Add the 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
84 boolean attribute on an input to prevent user input and style the input as disabled.

 class="container">

  ...
3

Trạng thái xác nhận

Bootstrap cung cấp các style xác nhận biểu thị các trạng thái lỗi, cảnh báo và thành công áp dụng trên các form-control. Để sử dụng, hãy thêm các class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
85, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
86, hoặc 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
87 vào phần tử cha. Bất kỳ phần tử nào có class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
88, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
40, và 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
90 bên trong phần tử cha đó sẽ được áp dụng style xác nhận.

 class="container">

  ...
4

Các biểu tượng tùy chọn

Nếu bạn muốn tăng tính trực quan, hãy sử dụng các biểu tượng tùy chọn bằng cách sử dụng các class đi kèm.

Biểu tượng, nhãn và nhóm các input

Việc thiết lập vị trí cho các biểu tượng là cần thiết cho các input không gắn nhãn và cho các input groups bằng cách thêm một add-on vào phía bên phải. Đối với các input không gắn nhãn, hãy điều chỉnh giá trị top. Đối với nhóm input, hãy điều chỉnh giá trị right một cách thích hợp tùy thuộc vào bề rộng của add-on.

 class="container">

  ...
5

Các biểu tượng tùy chọn cũng hoạt động trên các form cùng dòng và form dàn hàng ngang.

 class="container">

  ...
6

 class="container">

  ...
7

Optional icons with hidden 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
45 labels

For form controls with no visible label, add the 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
45 class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.

 class="container">

  ...
8

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

Hãy sử dụng các class tương tự như 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
93 để thiết lập chiều cao, và sử dụng các class tương tự như 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
94 để thiết lập chiều rộng của form-control (tương tự như các cột của lưới).

Thay đổi chiều cao

Tạo ra các form-control cao hơn hoặc thấp hơn tương ứng với các kích thước của nút.

 class="container">

  ...
9

Thay đổi chiều rộng

Bọc các input bằng các cột của lưới hoặc bất kỳ phần tử cha tùy biến nào để dễ dàng điều chỉnh về độ rộng mong muốn (xem ví dụ bên dưới để biết thêm chi tiết).

 class="container-fluid">

  ...
0

Text trợ giúp

Để thêm text trợ giúp cho form-control, hãy bọc text đó bằng một thẻ 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
95 có class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
90

 class="container-fluid">

  ...
1

Các tùy chọn

Sử dụng bất cứ class nào sẵn có của nút để style cho nút.

 class="container-fluid">

  ...
2

Các kích cỡ

Bạn muốn nút to hay nút nhỏ? Hãy sử dụng các class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
97, 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
98, hoặc 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
99 cho các kích thước khác nhau.

 class="container-fluid">

  ...
3

Nếu bạn muốn tạo ra một nút có chiều rộng bằng chiều rộng của phần tử cha (full-width), hãy sử dụng class 



 lang="en">

  ...
00.

 class="container-fluid">

  ...
4

Trạng thái kích hoạt

Các nút sẽ hiển thị dưới hình thức giống như là đã được bấm (với màu nền tối, đường viền tối hoặc bóng đổ vào phía trong) khi được kích hoạt. Hãy sử dụng 



 lang="en">

  ...
01 với thẻ 


 lang="en">

  ...
02 và 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
30 với thẻ 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80. Tuy nhiên, bạn cũng có thể sử dụng 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
30 trên thẻ 


 lang="en">

  ...
02 nếu bạn muốn tái tạo trạng thái kích hoạt.

Phần tử ... 02

Không nhất thiết phải thêm 



 lang="en">

  ...
01 như một class giả, nhưng nếu bạn muốn 2 nút hiển thị giống nhau, hãy sử dụng class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
30.

 class="container-fluid">

  ...
5

Phần tử

Image with max-width:100%

Hướng dẫn width trong bootstrap - width in bootstrap
80

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
30 trên các nút dạng 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80.

Primary link Link

 class="container-fluid">

  ...
6

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

Làm cho nút trông giống như không thể click vào được bằng cách làm mờ chúng đi 50%.

Phần tử ... 02

Không nhất thiết phải thêm 



 lang="en">

  ...
01 như một class giả, nhưng nếu bạn muốn 2 nút hiển thị giống nhau, hãy sử dụng class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
30.

 class="container-fluid">

  ...
7

Phần tử 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
30 trên các nút dạng 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80.

Phần tử

Image with max-width:100%

Hướng dẫn width trong bootstrap - width in bootstrap
80

Hãy sử dụng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
30 trên các nút dạng 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80.

Primary link Link

 class="container-fluid">

  ...
8

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

Làm cho nút trông giống như không thể click vào được bằng cách làm mờ chúng đi 50%.

Hãy sử dụng thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
76 trên các nút dạng 


 lang="en">

  ...
02.

Tính tương thích của trình duyệt

Nếu bạn thêm thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
76 vào một 


 lang="en">

  ...
02, trình duyệt Internet Explorer 9 (và các phiên bản thấp hơn) sẽ sinh ra text màu xám cùng với bóng của nó. Rất tiếc là chúng tôi vẫn chưa sửa được lỗi này.

Hãy sử dụng class 



 lang="en">

  ...
19 trên các nút dạng 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80.

 class="container-fluid">

  ...
9

Chúng tôi sử dụng 


 lang="en">

  ...
19 như một class tiện ích trong trường hợp này, tương tự như class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
30 class, vì vậy không nhất thiết phải có tiền tố đi kèm.

Chức năng liên kết không bị ảnh hưởng để đảm báo tính tương thích với các trình duyệt.

Class này sẽ chỉ thay đổi về mặt hình thức của thẻ code> chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa liên kết trên thẻ 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80, hãy sử dụng Javascript.

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

Mặc dù các class chỉ được sử dụng trên các phần tử 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
80 và 


 lang="en">

  ...
02 nhưng chỉ có các phần tử 


 lang="en">

  ...
02 là được hỗ trợ bên trong các thành phần điều hướng như nav và navbar.

/* 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) { ... }
0

Hãy sử dụng các class của nút trên một trong các loại thẻ

Image with max-width:100%

Hướng dẫn width trong bootstrap - width in bootstrap
80, ... 02, hoặc

Image with max-width:100%

Hướng dẫn width trong bootstrap - width in bootstrap
37.

Tính tương thích với các trình duyệt

Chúng tôi đề xuất sử dụng phần tử 


 lang="en">

  ...
02 bất cứ khi nào có thể để đảm báo tính tương thích với các trình duyệt.

Ngoài ra, trình duyệt Firefox có một lỗi ngăn cản việc thiết lập 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
76 trên các nút dạng 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
37. Điều này sẽ làm cho các nút có chiều cao không chính xác khi hiển thị trên Firefox..

/* 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) { ... }
1

Ả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 



 lang="en">

  ...
33 class. Class này sẽ thiết lập 


 lang="en">

  ...
34 và 


 lang="en">

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

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

Thêm các class vào thẻ 



 lang="en">

  ...
36 để style ảnh một cách dễ dàng.

Tính tương thích với các trình duyệt

Hãy nhớ rằng trình duyệt Internet Explorer 8 không hỗ trợ góc bo tròn.

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.

/* 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) { ... }
2

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Thêm các class vào thẻ 



 lang="en">

  ...
36 để style ảnh một cách dễ dàng.

Tính tương thích với các trình duyệt

Hãy nhớ rằng trình duyệt Internet Explorer 8 không hỗ trợ góc bo tròn.

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.

/* 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) { ... }
3

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

/* 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) { ... }
4

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.

/* 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) { ... }
5

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. 



 lang="en">

  ...
40 đượ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.

/* 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) { ... }
6

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

Không sử dụng cho thanh điều hướng

Để căn chỉnh các thành phần trong thanh điều hướng với các class tiện ích, hãy sử dụng 



 lang="en">

  ...
41 hoặc 


 lang="en">

  ...
42. Hãy đọc tài liệu về thanh điều hướng để biết thêm chi tiết.

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

Thiết lập thuộc tính 



 lang="en">

  ...
43 vào một phần tử và căn giữa bằng 


 lang="en">

  ...
44. Tiện ích này có thể được sử dụng bằng mixin hoặc class.

/* 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) { ... }
8

/* 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) { ... }
9

Clearfix

Clear thuộc tính 



 lang="en">

  ...
45 trên một phần tử bất kỳ bằng cách sử dụng class 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
59, đượ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.

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

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

Ẩ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 



 lang="en">

  ...
47 và 


 lang="en">

  ...
48. Những class này sử dụng 


 lang="en">

  ...
40 để 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.hỗ trợ cả các thiết bị đọc màn hình) bằng cách sử dụng các class 


 lang="en">

  ...
47 và 


 lang="en">

  ...
48. Những class này sử dụng 


 lang="en">

  ...
40 để 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 



 lang="en">

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


 lang="en">

  ...
48 và 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
45.

Ngoài ra, class 



 lang="en">

  ...
53 đượ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.

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

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

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

Bạn có thể ẩn một phần tử bằng class 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
45 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 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
45 cùng với class 


 lang="en">

  ...
56 để 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.ngoại trừ trình đọc màn hình. Kết hợp class 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
45 cùng với class 


 lang="en">

  ...
56 để 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.

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

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

Thay thế ảnh

Sử dụng class 



 lang="en">

  ...
57 hoặc mixin để thay thế nội dung text của một phần tử bằng một ảnh nề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) { ... }
6

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

Đối với nhu cầu phát triển các ứng dụng thân thiện với thiết bị di động, chúng tôi sử dụng những class tiện ích này để ẩn và hiện nội dung trên các thiết bị khác nhau thông qua media query. Ngoài ra, các class tiện ích dành cho việc đóng/mở nội dung để in ra cũng được thêm vào.

Hãy cố gắng sử dụng những class này một cách giới hạn và tránh việc tạo ra quá nhiều các phiên bản hoàn toàn khác nhau trên cùng một trang. Thay vì thế, hãy sử dụng chúng để bổ sung cho việc hiển thị trên mỗi thiết bị. Các tiện ích responsive hiện tại chỉ có tác dụng đối với các phần tử dạng khối (display:block hoặc display:inline-block) và bảng. Việc sử dụng các phần tử cùng dòng (display:inline) và các phần tử nằm trong bảng (



 lang="en">

  ...
58, 


 lang="en">

  ...
59,...) sẽ không được hỗ trợ responsive.

Các class sẵn có

Sử dụng đơn lẻ hoặc kết hợp các class sẵn có để ẩn/hiện nội dung tương ứng với các mốc kích thước của khung nhìn.

Extra small devices Phones ( Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)


 lang="en">

  ...
60		Visible Hidden Hidden Hidden 


 lang="en">

  ...
61		Hidden Visible Hidden Hidden 


 lang="en">

  ...
62		Hidden Hidden Visible Hidden 


 lang="en">

  ...
63		Hidden Hidden Hidden Visible 


 lang="en">

  ...
64		Hidden Visible Visible Visible 


 lang="en">

  ...
65		Visible Hidden Visible Visible 


 lang="en">

  ...
66		Visible Visible Hidden Visible 


 lang="en">

  ...
67		Visible Visible Visible Hidden

As of v3.2.0, the 



 lang="en">

  ...
68 classes for each breakpoint come in three variations, one for each CSS 


 lang="en">

  ...
69 property value listed below.

Group of classesCSS 


 lang="en">

  ...
69


 lang="en">

  ...
71 


 lang="en">

  ...
72 


 lang="en">

  ...
73 


 lang="en">

  ...
74 


 lang="en">

  ...
75 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
10

So, for extra small (



 lang="en">

  ...
77) screens for example, the available 


 lang="en">

  ...
68 classes are: 


 lang="en">

  ...
79, 


 lang="en">

  ...
80, and 


 lang="en">

  ...
81.

The classes 



 lang="en">

  ...
82, 


 lang="en">

  ...
83, 


 lang="en">

  ...
84, and 


 lang="en">

  ...
85 also exist, but are deprecated as of v3.2.0. They are approximately equivalent to 


 lang="en">

  ...
71, except with additional special cases for toggling 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
23-related elements.deprecated as of v3.2.0. They are approximately equivalent to 


 lang="en">

  ...
71, except with additional special cases for toggling 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
23-related elements.

Các class dành cho in ấn

Tương tự như các class responsive thông thường, sử dụng các class sau để ẩn/hiện nội dung phục vụ cho việc in ấn.

ClassesBrowserPrint


 lang="en">

  ...
88 


 lang="en">

  ...
89 


 lang="en">

  ...
90


 lang="en">

  ...
89


 lang="en">

  ...
90		Hidden Visible 


 lang="en">

  ...
91		Visible Hidden

Class 



 lang="en">

  ...
92 cũng tồn tại nhưng đã bị loại bỏ trong phiên bản 3.2.0. Class này sử dụng tương tự như class 


 lang="en">

  ...
88, ngoại trừ một số trường hợp đặc biệt như đối với các thành phần liên quan đến 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
23.loại bỏ trong phiên bản 3.2.0. Class này sử dụng tương tự như class 


 lang="en">

  ...
88, ngoại trừ một số trường hợp đặc biệt như đối với các thành phần liên quan đến 


Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
23.

Các trường hợp test

Thay đổi kích thước trình duyệt của bạn hoặc tải trang trên các thiết bị khác nhau để test các class responsive tiện ích.

Hiển thị trên...

Dấu tích màu xanh chỉ định phần tử nào đang hiển thị trên khung nhìn hiện tại của bạn.đang hiển thị trên khung nhìn hiện tại của bạn.

Extra small✔ Visible on x-small ✔ Visible on x-small

Small✔ Visible on small ✔ Visible on small

Medium✔ Visible on medium ✔ Visible on medium

Large✔ Visible on large ✔ Visible on large

Extra small and small✔ Visible on x-small and small ✔ Visible on x-small and small

Medium and large✔ Visible on medium and large ✔ Visible on medium and large

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

Small and large✔ Visible on small and large ✔ Visible on small and large

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

Small and medium✔ Visible on small and medium ✔ Visible on small and medium

Ẩn đi trên...

Và ở đây, dấu tích màu xanh cũng chỉ định phần tử nào đang bị ẩn đi trên khung nhìn hiện tại của bạn.đang bị ẩn đi trên khung nhìn hiện tại của bạn.

CSS của Bootstrap được xây dựng dựa trên Less, một bộ tiền xử lý với các chức năng được thêm vào như biến số, mixins và các chức năng dành cho việc dịch CSS. Việc sử dụng một số lượng lớn các biến và mixins trong cả framework sẽ giúp chúng ta sử dụng các tập tin Less thay vì các tập tin CSS đã được dịch sẵn.

Các biến số và mixin liên quan đến lưới sẽ được nói rõ hơn trong phần hệ thống lưới.

Dịch Bootstrap

Bootstrap có thể được sử dụng theo ít nhất 2 cách: bằng tập tin CSS đã được dịch sẵn hoặc bằng các tập tin Less. Để dịch các tập tin Less, hãy đọc README để hiểu cách cài đặt môi trường phát triển của bạn để có thể thực thi được những lệnh cần thiết.

Các công cụ biên dịch của bên thứ 3 có thể cũng làm việc với Bootstrap, tuy nhiên chúng sẽ không được hỗ trợ bởi đội ngũ nhân viên của chúng tôi.

Các biến số

Các biến số được sử dụng trong toàn bộ cả dự án như một cách để tập trung hóa và sử dụng chung những giá trị phổ biến như màu sắc, khoảng trắng hay font chữ. Để hiểu rõ hơn, hãy đọc mục tùy chỉnh Less.

Màu sắc

Dễ dàng sử dụng hai thang màu: đỏ-xám và ngữ nghĩa. Các màu sắc thuộc thang màu đỏ-xám cung cấp các sắc thái đen thường sử dụng trong khi thang màu ngữ nghĩa cung cấp màu sắc dựa trên ngữ nghĩa của nó.

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

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

Hãy sử dụng những biến số màu sắc này một cách trực tiếp hoặc gán chúng với các biến màu sắc mà bạn muốn trong project của bạn.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
00

Scaffolding

Một danh sách các biến hữu dụng được sử dụng để tùy biến nhanh các phần tử chính trong cấu trúc xương sống của site của bạn.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
01

Liên kết

Dễ dàng style cho các liên kết của bạn bằng màu phù hợp với chỉ một giá trị duy nhất.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
02

Lưu ý rằng 



 lang="en">

  ...
95 sử dụng một công cụ tuyệt vời của Less để tự động tạo ra màu sắc phù hợp nhất khi hover. Bạn có thể sử dụng 


 lang="en">

  ...
96, 


 lang="en">

  ...
97, 


 lang="en">

  ...
98, và 


 lang="en">

  ...
99.

Typography

Dễ dàng thiết lập kiểu font chữ, kích thước chữ, tiêu đề với một số ít các biến của Less. Ngoài ra, Bootstrap cũng tận dụng những biến này để cho phép người dùng sử dụng các typography mixin dễ dàng hơn.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
03

Biểu tượng

Có hai biến được sử dụng để tùy biến tên và nơi lưu trữ biểu tượng của bạn.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
04

Các thành phần

Các thành phần trong Bootstrap sử dụng các biến số mặc định để thiết lập các giá trị chung. Dưới đây là danh sách các biến hay sử dụng.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
05

Vendor mixin

Verdor mixin là mixin giúp hỗ trợ các trình duyệt bằng cách thêm các tiền tố liên quan trong CSS đã được dịch của bạn.

Box-sizing

Khởi tạo lại box model của các thành phần bằng một mixin đơn. Đối với từng ngữ cảnh, hãy đọc bài viết hữu ích sau từ Mozilla.

mixin đã bị loại bỏ trong phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.đã bị loại bỏ trong phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
06

Góc bo tròn

Ngày nay, hầu như toàn bộ các trình duyệt tiên tiến đều hỗ trợ thuộc tính 

 name="viewport" content="width=device-width, initial-scale=1">
00 (không cần tiền tố). Vì thế sẽ không có mixin 
 name="viewport" content="width=device-width, initial-scale=1">
01, tuy nhiên Bootstrap cũng thêm những shortcut để nhanh chóng bo tròn 2 góc thuộc một cạnh bất kỳ của một đối tượng.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
07

Đổ bóng

Nếu đa số đối tượng người dùng mà bạn hướng đến đều sử dụng các trình duyệt và thiết bị tiên tiến, bạn có thể sử dụng thuộc tính 



Image with max-width:100%



Hướng dẫn width trong bootstrap - width in bootstrap
71 không tiền tố. Tuy nhiên để hỗ trợ cho các thiết bị Android (phiên bản nhỏ hơn 4) và iOS (phiên bản nhỏ hơn 5), hãy sử dụng mixin đã bị loại bỏ để thêm vào tiền tố 
 name="viewport" content="width=device-width, initial-scale=1">
03.đã bị loại bỏ để thêm vào tiền tố 
 name="viewport" content="width=device-width, initial-scale=1">
03.

Mixin này đã bị loại bỏ ở phiên bản 3.1.0, vì Bootstrap không chính thức hỗ trợ các nền tảng lỗi thời (các nền tảng không hỗ trợ các thuộc tính chuẩn). Để bảo toàn tính tương thích ngược, Bootstrap sẽ tiếp tục mixin này ở bên trong cho tới tận phiên bản 4 của Bootstrap.đã bị loại bỏ ở phiên bản 3.1.0, vì Bootstrap không chính thức hỗ trợ các nền tảng lỗi thời (các nền tảng không hỗ trợ các thuộc tính chuẩn). Để bảo toàn tính tương thích ngược, Bootstrap sẽ tiếp tục mixin này ở bên trong cho tới tận phiên bản 4 của Bootstrap.

Hãy chắc chắn sử dụng các màu 

 name="viewport" content="width=device-width, initial-scale=1">
04 trong giá trị box-shadow của bạn để chúng có thể hiển thị phù hợp nhất với màu nền.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
08

Sự dịch chuyển (Transition)

Có 3 mixin của Less hỗ trợ transition một cách linh hoạt. Thiết lập tất cả các thông tin transition với chỉ duy nhất một mixin hoặc chỉ rõ thời gian thực hiện và thời gian trễ của transition nếu cần thiết.

Mixin này đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
09

Sự biến dạng (Transformation)

Bạn có thể quay, chuyển đổi tỉ lệ, tịnh tiến hoặc kéo lệch bất kỳ đối tượng nào.

Mixin này đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
10

Sự biến dạng (Transformation)

Bạn có thể quay, chuyển đổi tỉ lệ, tịnh tiến hoặc kéo lệch bất kỳ đối tượng nào.

Mixin này đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.đã bị loại bỏ ở phiên bản 3.2.0, với sự xuất hiện của autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho đến Bootstrap phiên bản 4.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
11

Sự biến dạng (Transformation)

Bạn có thể quay, chuyển đổi tỉ lệ, tịnh tiến hoặc kéo lệch bất kỳ đối tượng nào.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
12

Sự chuyển động (Animation)

Bạn cót thể sử dụng một mixin để khai báo tất cả các thuộc tính chuyển động của CSS3 trong một lần hoặc các mixin khác cho các thuộc tính riêng lẻ.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
13

Độ trong suốt (Opacity)

Thiết lập độ trong suốt cho toàn bộ các trình duyệt và cung cấp 

 name="viewport" content="width=device-width, initial-scale=1">
05 hỗ trợ trình duyệt IE8.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
14

Placeholder

Cung cấp ngữ cảnh cho các form-control nằm bên trong mỗi trường.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
15

Cột




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
16

Tự động sinh ra các cột bằng CSS bên trong một phần tử đơn lẻ.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
17

Gradient




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
18

Bạn có thể dễ dàng chuyển đổi 2 màu sắc thành màu nền theo hiệu ứng gradient. Bạn cũng có thể thiết lập hướng gradient, sử dụng tới 3 màu sắc khác nhau hoặc sử dụng gradient theo vòng tròn. Bạn chỉ cần duy nhất một mixin để thực hiện được tất cả những thứ mà bạn muốn. bất cứ khi nào bạn xóa bỏ một gradient, hãy nhớ xóa cả thuộc tính 

 name="viewport" content="width=device-width, initial-scale=1">
05 (dành riêng cho IE) mà bạn đã thêm vào. Bạn có thể làm thế bằng cách sử dụng mixin 
 name="viewport" content="width=device-width, initial-scale=1">
07 cùng với 
 name="viewport" content="width=device-width, initial-scale=1">
08.

Bạn cũng có thể chỉ rõ góc của 2 màu cơ sở (gradient tuyến tính):

Nếu bạn muốn gradient theo dạng kẻ sọc, bạn chỉ việc chỉ rõ một màu cơ sở và chúng tôi sẽ phủ các đường sọc trắng mờ lên cho bạn.

Ngoài ra, nếu bạn muốn thiết lập gradient theo 3 màu, hãy thiết lập theo thứ tự: Màu thứ nhất, màu thứ 2, điểm dừng của màu thứ 2 và màu thứ 3 với những mixin sau:

Hãy lưu ý rằng, bất cứ khi nào bạn xóa bỏ một gradient, hãy nhớ xóa cả thuộc tính 

 name="viewport" content="width=device-width, initial-scale=1">
05 (dành riêng cho IE) mà bạn đã thêm vào. Bạn có thể làm thế bằng cách sử dụng mixin 
 name="viewport" content="width=device-width, initial-scale=1">
07 cùng với 
 name="viewport" content="width=device-width, initial-scale=1">
08.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
19

Các mixin tiện ích

Các mixin này kết hợp các thuộc tính CSS không liên quan đến nhau để đạt được mục tiêu.yêu cầu phải được thiết lập.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
20

Clearfix

Hãy thay thế việc thêm 

 name="viewport" content="width=device-width, initial-scale=1">
09 bằng cách thêm mixin 
 name="viewport" content="width=device-width, initial-scale=1">
10 vào các phần tử thích hợp. Hãy sử dụng micro clearfix của Nicolas Gallager.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
21

Căn giữa theo hàng ngang

Nhanh chóng căn giữa bất kỳ phần tử nào bên trong phần tử cha của nó. Lưu ý rằng, các thuộc tính 




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
36 và 



   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
47 yêu cầu phải được thiết lập.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
22

Trợ giúp về kích thước

Dễ dàng chỉ rõ các chiều của một đối tượng.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
23

Textarea cho phép thay đổi kích thước

Dễ dàng cấu hình các tùy chọn về thay đổi kích thước cho các textarea hoặc bất kỳ phần tử nào khác. Mặc định theo cách thức hoạt động thông thường của trình duyệt 

 name="viewport" content="width=device-width, initial-scale=1">
13.Nếu bạn có nhiều ảnh, hãy cân nhắc việc viết CSS cho hình ảnh của bạn bằng tay trong một media query.




   

      .h-25
   

   

      .h-50
   

   

      .h-75
   

   

      .h-100
   

   

      .h-auto
24

Cắt ngắn text

Dễ dàng cắt ngắn text bằng duy nhất một mixin. Lưu ý rằng, các phần tử 14 ở dạng 15 hoặc 16.

Hình ảnh Retina

Xác định rõ hai đường dẫn ảnh và các chiều của ảnh @1x, và Bootstrap sẽ cung cấp một media query @2x. Nếu bạn có nhiều ảnh, hãy cân nhắc việc viết CSS cho hình ảnh của bạn bằng tay trong một media query.Mặc dù Bootstrap được xây dựng dựa trên Less, nhưng nó cũng hỗ trợ Sass. Chúng tôi duy trì nó trong một kho Github riêng biệt và quản lý các bản cập nhật bằng mã biến đổi (conversion script).
 name="viewport" content="width=device-width, initial-scale=1">
17		Bên trong đó có gì?
 name="viewport" content="width=device-width, initial-scale=1">
18		Vì cổng Sass có một kho riêng biệt và hướng tới các đối tượng khác (so với Bootstrap thông thường) nên nội dung của nó khác biệt hoàn toàn so với Bootstrap thông thường. Điều này đảm bảo rằng cổng Sass của Bootstrap sẽ tương thích với hầu hết các hệ thống dựa trên Sass.
 name="viewport" content="width=device-width, initial-scale=1">
19		Đường dẫn
 name="viewport" content="width=device-width, initial-scale=1">
20		Nội dung
 name="viewport" content="width=device-width, initial-scale=1">
21		mã Ruby gem (cấu hình của Sass, tích hợp Rails và Compass) 
 name="viewport" content="width=device-width, initial-scale=1">
22		mã chuyển đổi (chuyển đổi ngược Less về Sass)

test trình dịch

thực hiện đóng gói

Sass, Javascript và các tập tin về font

Bootstrap cho Sass

programming bootstrap Width trong Bootstrap Width Bootstrap 4 Margin trong Bootstrap Display trong Bootstrap Bootstrap font-size Background Bootstrap Position trong Bootstrap

Bài Viết Liên Quan

Thôn yên lộc xã nga yên nga sơn thanh hóa năm 2024
Thôn yên lộc xã nga yên nga sơn thanh hóa năm 2024

mẹo hay
Phí giám định và xin c o là gì năm 2024
Phí giám định và xin c o là gì năm 2024

là ai Hỏi Đáp Là gì
Kiểm tra lỗi chính tả tự động trong word năm 2024
Kiểm tra lỗi chính tả tự động trong word năm 2024

mẹo hay
Bài tập viết phương trình đường tròn lớp 10 violet năm 2024
Bài tập viết phương trình đường tròn lớp 10 violet năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Phương trình
Em muốn ta là gì mp3 năm 2024
Em muốn ta là gì mp3 năm 2024

là ai Hỏi Đáp Là gì
Bạn học kế toán nên tặng quà gì năm 2024
Bạn học kế toán nên tặng quà gì năm 2024

mẹo hay Học Tốt Học
Cổng kết nối bluetooth v4.0 orico là gì năm 2024
Cổng kết nối bluetooth v4.0 orico là gì năm 2024

là ai Hỏi Đáp Là gì Orico BTA-403 USB Bluetooth Dongle Bluetooth orico bta-403 driver
Bai soan toán tach gọp nhóm có 4 đối tượng năm 2024
Bai soan toán tach gọp nhóm có 4 đối tượng năm 2024

mẹo hay
24 11 thẻ atm agibank lỗi không rút được tiền năm 2024
24 11 thẻ atm agibank lỗi không rút được tiền năm 2024

mẹo hay
Các dạng bài taaph hóa học cho hsg hóa 9 năm 2024
Các dạng bài taaph hóa học cho hsg hóa 9 năm 2024

mẹo hay Học Tốt Học
Số 12 tiếng anh đọc là gì năm 2024
Số 12 tiếng anh đọc là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Bài văn tả về cây chuối lớp 4 năm 2024
Bài văn tả về cây chuối lớp 4 năm 2024

mẹo hay
Thanh toán qua ví momo là gì năm 2024
Thanh toán qua ví momo là gì năm 2024

là ai Hỏi Đáp Là gì
Bài trang 64 sgk văn 9 tập 2 năm 2024
Bài trang 64 sgk văn 9 tập 2 năm 2024

mẹo hay
Bài tập chứng minh ánh xạ toán ròi rạc năm 2024
Bài tập chứng minh ánh xạ toán ròi rạc năm 2024

mẹo hay Khỏe Đẹp Bài tập P Q
Chương trình giao lưu văn hóa việt hàn 2023 năm 2024
Chương trình giao lưu văn hóa việt hàn 2023 năm 2024

mẹo hay
Đồ dùng học tập tiếng trung là gì năm 2024
Đồ dùng học tập tiếng trung là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Học Tiếng trung
Phó ban dự án dịch ra tiếng anh là gì năm 2024
Phó ban dự án dịch ra tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Ngôn ngữ Dịch
Viết bài văn thất bại là mẹ thành công năm 2024
Viết bài văn thất bại là mẹ thành công năm 2024

mẹo hay
Chế độ kế toán doanh nghiệp bảo hiểm thưvienphapluat năm 2024
Chế độ kế toán doanh nghiệp bảo hiểm thưvienphapluat năm 2024

mẹo hay Luật kế toán thông tư 200/2014/tt-btc

Quảng Cáo

Có thể bạn quan tâm

Hạch toán hóa đơn gia công vào giá vốn năm 2024
1 ngày trước . bởi MoralDaddy
Phim thiên đường tội lỗi tập 15 thuyết minh năm 2024
1 ngày trước . bởi GreatBarrister
Giải toán 9 bài ôn tập chương 1 bài 14 năm 2024
1 ngày trước . bởi UndeniableWoodward
Ngày 14 4 là ngày gì năm 2024
1 ngày trước . bởi UnwillingCurfew
Đường thẳng vuông góc với mặt phẳng bài tập năm 2024
1 ngày trước . bởi GenialWhiteness
Hsbc bank là ngân hàng gì năm 2024
1 ngày trước . bởi VanishingSelf-confidence
Lỗi không hiện đèn khi sạc pin điện thoại a39 năm 2024
1 ngày trước . bởi CloseTerry
Hợp đồng lao động hiện hành theo thông tư nào năm 2024
1 ngày trước . bởi AdjacentCouncilman
402 8 lê văn sỹ f.14 quận 3 tp.hcm năm 2024
1 ngày trước . bởi IncredulousConfiscation
Cách in sổ cái trên phần mềm kế toán năm 2024
1 ngày trước . bởi WoundedGallery

Toplist được quan tâm

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
5 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
5 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
5 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
5 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
5 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
5 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
5 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
5 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Giải bài 85 sgk toán 8 trang 109 năm 2024
1 tuần trước . bởi Anti-inflationFinale
D là ký hiệu gì trong hóa học năm 2024
3 ngày trước . bởi PreposterousTheology
Top diễn viên nam u 50 ấn độ nổi tiếng năm 2024
5 ngày trước . bởi ForthrightBallet
Chuyên viên tư vấn khách hàng doanh nghiệpn là gì năm 2024
6 ngày trước . bởi UncaringDigress
Nhà hàng phố đêm 346 phạm văn đồng năm 2024
23 giờ trước . bởi UnregulatedIntersection
Ngôn ngữ dịch sang tiếng anh là gì năm 2024
5 ngày trước . bởi UnsuccessfulFooting
Bài 42 vật lí 9 sách bài tập năm 2024
10 giờ trước . bởi One-manReceptor
Top trường có khoa marketing ở hà nội năm 2024
1 tuần trước . bởi MistyTerror
Thẻ đông á chuyển khoản 1 ngày được bao nhiêu năm 2024
6 ngày trước . bởi FragrantLowry
Stay at home mom là gì năm 2024
4 ngày trước . bởi BumperScenario

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Xây Nhà Inc.