Bootstrap có thay thế CSS không

Trước hết, tôi muốn nói “Cảm ơn” với Per vì câu chuyện được viết rất hay và cho chúng tôi thấy những gì chúng tôi có thể mong đợi với CSS Grid. Tuy nhiên, để bảo vệ Bootstrap, tôi đã phải soạn một bài phản bác tôn trọng

Ghi chú. Phản ứng này ngoài thực tế là vào năm 2018, đây vẫn là nhược điểm rõ ràng nhất

Bây giờ Bootstrap 4 đang sử dụng Flexbox, sự so sánh thực sự ở đây làLưới CSS so với Flexbox

Đánh dấu Bootstrap rất đơn giản

Đây là bố cục với Header, Footer và Sidebar bằng Bootstrap 4

Codeply embed — bản demo máy tính để bàn_______0_______

Có 2 điều cần chú ý ở đây

1. Không cần thêm định nghĩa CSS hoặc truy vấn phương tiện nào
2. Không có "bẫy" của các phần trong các thẻ .row riêng biệt

Ghi chú. Bất chấp một quan niệm sai lầm phổ biến, lớp Bootstrap .row được thiết kế để chứa nhiều đơn vị col-* nếu cần, không chỉ 12. Điều này được gọi là, và nó sẽ không thể thực hiện được nếu không có nhiều bố cục

Hãy cải thiện bố cục để lấp đầy chiều cao theo chiều dọc và cuộn vùng nội dung. Chỉ cần thêm một vài dòng CSS…

/* get the main container to fill height */
.grow {
    flex: 1;
}/* scroll the content area as needed */
.main {
    overflow-y: auto;
}

Ngoài ra, bạn có thể sử dụng các Lớp tiện ích để điều chỉnh kiểu dáng, khoảng cách, vị trí, v.v…

Bootstrap linh hoạt

Bây giờ chúng tôi muốn thay đổi bố cục theo kích thước màn hình__ làm cho nó phản hồi nhanh. Đây là những gì lưới của Bootstrap được thiết kế cho. Bạn chỉ cần hiểu cách thức hoạt động của lưới

Hãy di chuyển menu Thanh bên lên bên cạnh Tiêu đề trên thiết bị di động. Chúng ta có thể chỉ cần sử dụng tích hợp sẵn và để thay đổi bố cục cho màn hình nhỏ hơn. Một lần nữa, không cần phải viết thêm định nghĩa lớp CSS hoặc truy vấn phương tiện. Nó được xây dựng trong…

    

        
        

            Header
        

        

            Content
        

    

    

Kéo menu lên trên các thiết bị nhỏ hơn

Đặt hàng lại Demo

Codeply embed — demo di động

Và, giờ đây Bootstrap đã có, bố cục có thể dễ dàng thay đổi cho nhiều thiết bị và độ rộng màn hình (điện thoại, máy tính bảng, máy tính xách tay, máy tính để bàn, v.v.). Chúng tôi có thể tạo các bố cục khác nhau mà không cần viết truy vấn phương tiện mới mỗi lần

Bootstrap KHÔNG giới hạn ở 12 cột

Với Bootstrap 4, bạn có thể quên đi 12. Bây giờ có thể có bất kỳ số lượng cột nào. Lưới “không có đơn vị” mới này hoàn toàn được cung cấp bởi flexbox và có thể được kết hợp với lưới 12 đơn vị cổ điển để có khả năng vô tận

Vì flexbox đang hoạt động ở hậu trường cho các cột bố cục tự động, nên các cột sẽ điều chỉnh xung quanh nội dung của chúng nhưng vẫn giữ nguyên chiều rộng bằng nhau trên toàn bộ chế độ xem

Để ghi đè sự bằng nhau của bố cục tự động (. col), các lớp lưới 12 đơn vị cổ điển col-* có thể được sử dụng cùng với col để buộc một chiều rộng dựa trên tỷ lệ phần trăm cụ thể. Điều này cải thiện độ chính xác và cho phép chúng tôi sử dụng các cột lưới không có đơn vị kéo dài một phần hoặc lấp đầy chế độ xem

Bootstrap 4 Lưới bố trí tự động

Tìm hiểu thêm về cách sử dụng các cột bố cục tự động trong “Bootstrap đang trở nên kỳ lạ” và xem cách nhóm các số lẻ (5, 7, 9, v.v. ) của cột

Tôi không nghĩ CSS Grid sẽ thay thế được Flexbox. Khi CSS Grid được hỗ trợ đầy đủ cho trình duyệt, chúng ta sẽ thấy thêm về cách Flexbox và CSS Grid sẽ hoạt động cùng nhau. CSS Grid có thể hoạt động tốt hơn trong một số trường hợp đối với bố cục tổng thể, nhưng Flexbox vượt trội ở bố cục vi mô

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

loại tài liệu HTML5

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

  ...

Điện thoại di động đầu tiên

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

Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng, hãy thêm thẻ meta chế độ xem vào

Bạn có thể tắt khả năng thu phóng trên thiết bị di động bằng cách thêm

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

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

• Đặt
  34 trên
  35
• Sử dụng các thuộc tính
  36,
  37 và
  38 làm cơ sở đánh máy của chúng tôi
• Đặt màu liên kết chung qua
  39 và chỉ áp dụng gạch chân liên kết trên
  40

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

41

bình thường hóa. css

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

Hộp đựng

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

42 trở lên, không vùng chứa nào có thể lồng được

Sử dụng

43 cho vùng chứa có chiều rộng cố định đáp ứng

  ...

Sử dụng

44 cho vùng chứa có chiều rộng đầy đủ, bao trùm toàn bộ chiều rộng của chế độ xem của bạn

  ...

Bootstrap bao gồm một hệ thống lưới linh hoạt đầu tiên trên thiết bị di động, đáp ứng, có thể chia tỷ lệ phù hợp lên tới 12 cột khi kích thước thiết bị hoặc khung nhìn tăng lên. Nó bao gồm các tùy chọn bố cục dễ dàng, cũng như mạnh mẽ

Giới thiệu

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

• Các hàng phải được đặt trong khoảng
  43 (chiều rộng cố định) hoặc
  44 (chiều rộng đầy đủ) để căn chỉnh và đệm phù hợp
• Sử dụng các hàng để tạo các nhóm cột nằm ngang
• Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con trực tiếp của các hàng
• Các lớp lưới được xác định trước như
  47 và
  48 có sẵn để nhanh chóng tạo bố cục lưới. Ít mixin hơn cũng có thể được sử dụng cho nhiều bố cục ngữ nghĩa hơn
• Cột tạo rãnh (khoảng trống giữa nội dung cột) thông qua
  42. Phần đệm đó được bù đắp theo hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên
  47s
• Lề âm là lý do tại sao các ví dụ bên dưới bị thụt lề. Đó là để nội dung trong các cột lưới được xếp hàng với nội dung không phải là lưới
• Các cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn mở rộng. Ví dụ: ba cột bằng nhau sẽ sử dụng ba
  48
• Nếu có nhiều hơn 12 cột được đặt trong một hàng, thì mỗi nhóm cột bổ sung sẽ, như một đơn vị, bao bọc trên một dòng mới
• Các lớp lưới áp dụng cho các thiết bị có chiều rộng màn hình lớn hơn hoặc bằng kích thước điểm dừng và ghi đè các lớp lưới được nhắm mục tiêu vào các thiết bị nhỏ hơn. Vì vậy, đ. g. áp dụng bất kỳ lớp
  52 nào cho một phần tử sẽ không chỉ ảnh hưởng đến kiểu dáng của nó trên các thiết bị trung bình mà còn trên các thiết bị lớn nếu không có lớp
  53

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

Chúng tôi sử dụng các truy vấn phương tiện sau trong các tệp Ít hơn để tạo các điểm dừng chính trong hệ thống lưới của chúng tôi

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { .. }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { .. }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { .. }

Đôi khi, chúng tôi mở rộng các truy vấn phương tiện này để bao gồm một

54 nhằm giới hạn CSS cho một nhóm thiết bị hẹp hơn

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

tùy chọn lưới

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

Thiết bị cực nhỏ Điện thoại (<768px)Thiết bị nhỏ Máy tính bảng (≥768px)Thiết bị trung bình Máy tính để bàn (≥992px)Thiết bị lớn Máy tính để bàn (≥1200px)Hành vi lưới Luôn luôn nằm ngangThu gọn để bắt đầu, nằm ngang trên các điểm ngắtChiều rộng vùng chứa Không có (tự động)750px970px1170pxTiền tố lớp

55

56

57_______4____2Độ dày cộtTự động1

Thí dụ. Xếp chồng lên nhau theo chiều ngang

Sử dụng một tập hợp duy nhất gồm

52 lớp lưới, bạn có thể tạo một hệ thống lưới cơ bản bắt đầu xếp chồng lên nhau trên thiết bị di động và thiết bị máy tính bảng (phạm vi cực nhỏ đến nhỏ) trước khi trở thành nằm ngang trên thiết bị máy tính để bàn (trung bình). Đặt các cột lưới vào bất kỳ

47 nào

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

Thí dụ. thùng chứa chất lỏng

Biến bất kỳ bố cục lưới có chiều rộng cố định nào thành bố cục có chiều rộng đầy đủ bằng cách thay đổi

43 ngoài cùng của bạn thành

44

  

    ...
  

Thí dụ. Di động và máy tính để bàn

Bạn không muốn các cột của mình chỉ xếp chồng lên nhau trong các thiết bị nhỏ hơn? . Xem ví dụ bên dưới để biết rõ hơn về cách thức hoạt động của tất cả

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




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




  
.col-xs-6
  
.col-xs-6

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

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

65 dành cho máy tính bảng

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

0

Thí dụ. gói cột

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

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

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

1

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

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

66 và

col-xs-6. col-sm-3
Thay đổi kích thước khung nhìn của bạn hoặc kiểm tra nó trên điện thoại của bạn để biết ví dụ

2

Ngoài việc xóa cột tại các điểm ngắt đáp ứng, bạn có thể cần đặt lại độ lệch, đẩy hoặc kéo. Xem điều này trong hành động trong ví dụ về lưới

3

Loại bỏ máng xối

Loại bỏ các máng xối khỏi một hàng và đó là các cột với lớp

67

4

Cột bù đắp

Di chuyển các cột sang bên phải bằng cách sử dụng các lớp

68. Các lớp này tăng lề trái của một cột lên

69 cột. Ví dụ:

70 di chuyển

71 qua bốn cột

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

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

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

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

5

Bạn cũng có thể ghi đè độ lệch từ các bậc lưới thấp hơn với các lớp

72

6

cột lồng nhau

Để lồng nội dung của bạn với lưới mặc định, hãy thêm một cột

47 mới và tập hợp các cột

65 trong cột

65 hiện có. Các hàng lồng nhau phải bao gồm một tập hợp các cột có tổng số tối đa là 12 hoặc ít hơn (bạn không bắt buộc phải sử dụng tất cả 12 cột có sẵn)

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

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

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

7

Thứ tự cột

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

76 và

77

8

Ít mixin và biến hơn

Ngoài bố cục nhanh, Bootstrap còn bao gồm Ít biến và mixin để nhanh chóng tạo bố cục ngữ nghĩa, đơn giản của riêng bạn

Biến

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

9

hỗn hợp

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

0

Ví dụ sử dụng

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

1

2

tiêu đề

Tất cả các tiêu đề HTML,

thông qua, có sẵn. Các lớp

78 đến

79 cũng có sẵn, khi bạn muốn khớp kiểu phông chữ của tiêu đề nhưng vẫn muốn văn bản của mình được hiển thị nội tuyến

Nét chấm phẩy 36px

h2. tiêu đề bootstrap

Nét chấm phẩy 30px

h3. tiêu đề bootstrap

Dấu chấm phẩy 24px

h4. tiêu đề bootstrap

Nét chấm phẩy 18px

h5. tiêu đề bootstrap

Dấu chấm phẩy 14pxh6. Bootstrap tiêu đề Semibold 12px

3

Tạo văn bản thứ yếu, nhẹ nhàng hơn trong bất kỳ tiêu đề nào với thẻ

80 chung hoặc lớp

81

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

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

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

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

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

4

Bản sao nội dung

Mặc định toàn cầu của Bootstrap

82 là 14px, với

83 là 1. 428. Điều này được áp dụng cho và tất cả các đoạn. Thêm vao Đoa,

(đoạn văn) nhận được lề dưới bằng một nửa chiều cao dòng được tính toán của chúng (10px theo mặc định)

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur musiculus. Nullam id dolor id nibh ultricies phương tiện

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur musiculus. 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

5

Bản sao thân chì

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

84

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

6

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

Thang đo kiểu chữ dựa trên hai biến Ít hơn trong các biến. ít hơn.

37 và

38. Đầu tiên là cỡ chữ cơ sở được sử dụng xuyên suốt và thứ hai là chiều cao dòng cơ sở. Chúng tôi sử dụng các biến đó và một số phép toán đơn giản để tạo lề, phần đệm và chiều cao dòng của tất cả các loại của chúng tôi và hơn thế nữa. Tùy chỉnh chúng và Bootstrap điều chỉnh

Các yếu tố văn bản nội tuyến

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

Để làm nổi bật một dòng văn bản do tính liên quan của nó trong ngữ cảnh khác, hãy sử dụng thẻ

80

Bạn có thể sử dụng thẻ đánh dấu để đánh dấu văn bản

7

Đã xóa văn bản

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

80

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

8

Văn bản gạch ngang

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

80

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

9

Đã chèn văn bản

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

80

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

  ...

0

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

Để gạch chân văn bản, hãy sử dụng thẻ

80

Dòng văn bản này sẽ hiển thị dưới dạng gạch chân

  ...

1

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

văn bản nhỏ

Để giảm nhấn mạnh trong dòng hoặc khối văn bản, hãy sử dụng thẻ

80 để đặt văn bản ở kích thước 85% so với kích thước gốc. Các phần tử tiêu đề nhận được

82 của riêng chúng cho các phần tử

80 lồng nhau

Ngoài ra, bạn có thể sử dụng một phần tử nội tuyến với

81 thay cho bất kỳ

80 nào

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

  ...

2

Dũng cảm

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

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

  ...

3

Chữ in nghiêng

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

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

  ...

4

yếu tố thay thế

Vui lòng sử dụng

80và

80 trong HTML5.

80 được dùng để làm nổi bật các từ hoặc cụm từ mà không truyền đạt tầm quan trọng bổ sung trong khi

80 chủ yếu dành cho giọng nói, thuật ngữ kỹ thuật, v.v.

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

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

Văn bản căn trái

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

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

văn bản hợp lý

Không có văn bản ngắt dòng

  ...

5

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

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

Chữ thường

Văn bản viết hoa

Chữ viết hoa

  ...

6

Các từ viết tắt

Triển khai cách điệu phần tử

80 của HTML cho chữ viết tắt và từ viết tắt để hiển thị phiên bản mở rộng khi di chuột. Các chữ viết tắt có thuộc tính

02 có đường viền phía dưới chấm sáng và con trỏ trợ giúp khi di chuột, cung cấp ngữ cảnh bổ sung khi di chuột và cho người dùng công nghệ hỗ trợ

Viết tắt cơ bản

Viết tắt của thuộc tính từ là attr

  ...

7

chủ nghĩa ban đầu

Thêm

03 vào chữ viết tắt để có cỡ chữ nhỏ hơn một chút

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

  ...

8

địa chỉ

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

04

Twitter, Inc
1355 Phố Chợ, Phòng 900
San Francisco, CA 94103
P. (123) 456-7890Họ Tên

  ...

9

trích dẫn khối

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

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

Bọc

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

.

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

  ...

0

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

Thay đổi kiểu dáng và nội dung cho các biến thể đơn giản trên một tiêu chuẩn

.

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

thêm một

để xác định nguồn. Bọc tên của tác phẩm gốc trong

80

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

  ...

1

Hiển thị thay thế

Thêm

06 cho một blockquote với nội dung được căn phải

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

  ...

2

danh sách

không có thứ tự

Một danh sách các mục mà thứ tự không quan trọng rõ ràng

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Số nguyên molie lorem tại massa
• Facilisis trong pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat tại
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

  ...

3

đặt hàng

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

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Số nguyên molie lorem tại massa
4. Facilisis trong pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

  ...

4

không có kiểu dáng

Xóa mặc định

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Số nguyên molie lorem tại massa
• Facilisis trong pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat tại
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

  ...

3

nội tuyến

Đặt tất cả các mục trong danh sách trên một dòng với

08 và một số phần đệm nhẹ

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

  ...

3

Sự miêu tả

Một danh sách các điều khoản với các mô tả liên quan của họ

Danh sách mô tả Danh sách mô tả là hoàn hảo để xác định thuật ngữ. 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 eismod

  ...

7

mô tả ngang

Tạo thuật ngữ và mô tả trong

xếp hàng cạnh nhau. Bắt đầu xếp chồng lên nhau như mặc định, nhưng khi thanh điều hướng mở rộng, thì những thứ này cũng vậy

Danh sách mô tả Danh sách mô tả là hoàn hảo để xác định thuật ngữ. 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 eismod. Felis eismod semper eget laciniaFusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

  ...

7

nội tuyến

Bọc các đoạn mã nội tuyến bằng

09

For example,

should be wrapped as inline.________19_______9

User input

Use the ________4_______80 to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

________29_______0

Basic block

Use

________29_______1

________29_______2

Bạn có thể tùy chọn thêm lớp

11, lớp này sẽ đặt chiều cao tối đa là 350px và cung cấp thanh cuộn trục y

Biến

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

80

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

đầu ra mẫu

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

80

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

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

16 để thêm sọc vằn vào bất kỳ hàng nào trong bảng

Khả năng tương thích giữa các trình duyệt

Các bảng sọc được tạo kiểu thông qua bộ chọn CSS

17, không có sẵn trong Internet Explorer 8

#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

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

bảng có viền

Thêm

18 cho các đường viền trên tất cả các mặt của bảng và các ô

#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

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

Hàng di chuột

Thêm

19 để bật trạng thái di chuột trên các hàng của bảng trong một

#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

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

bàn đặc

Thêm

20 để làm cho bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô

#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

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

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

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

ClassDescription

21Áp dụng màu di chuột cho một hàng hoặc ô cụ thể

22Cho biết một hành động thành công hoặc tích cực

23Cho biết một hành động hoặc thay đổi thông tin trung lập

24Cho biết một cảnh báo có thể cần được chú ý

25Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực

#Tiêu đề cộtTiêu đề cộtTiêu đề cột1Nội dung cộtNội dung cộtNội dung cột2Nội dung cộtNội dung cộtNội dung cột3Nội dung cộtNội dung cộtNội dung cột4Nội dung cộtNội dung cột5Nội dung cộtNội dung cột9Nội dung cột6Nội dung cộtNội dung cột7Nội dung cộtNội dung cột8Nội dung cộtNội dung cột9Nội dung cộtNội dung cột

@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

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

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

26

bảng đáp ứng

Tạo các bảng đáp ứng bằng cách gói bất kỳ

27 nào trong

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

Cắt/cắt dọc

Các bảng đáp ứng sử dụng

29, loại bỏ bất kỳ nội dung nào nằm ngoài các cạnh dưới cùng hoặc trên cùng của bảng. Đặc biệt, điều này có thể loại bỏ các menu thả xuống và các tiện ích con của bên thứ ba khác

Firefox và bộ trường

Firefox có một số kiểu dáng bộ trường khó xử liên quan đến

30 cản trở bảng phản hồi. Điều này không thể bị ghi đè nếu không có bản hack dành riêng cho Firefox mà chúng tôi không cung cấp trong Bootstrap

@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

Để biết thêm thông tin, hãy đọc

#Table headingTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảng1Ô của bảngÔ của bảngÔ của bảngÔ của bảngÔ của bảngTô của bảng2Ô của bảngTô của bảngTô bảng của Ô của bảngTiêu đề của bảngTiêu đề của bảng.Ô của bảng.Ô của bảng.Ô của bảng.Ô của bảng.Ô của ô.

#Table headingTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảng1Ô của bảngÔ của bảngÔ của bảngÔ của bảngÔ của bảngTô của bảng2Ô của bảngTô của bảngTô bảng của Ô của bảngTiêu đề của bảngTiêu đề của bảng.Ô của bảng.Ô của bảng.Ô của bảng.Ô của bảng.Ô của ô.

@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

Ví dụ cơ bản

Các điều khiển biểu mẫu riêng lẻ tự động nhận được một số kiểu dáng chung. Tất cả văn bản

80,

80

Hộp kiểm và radio

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

Các hộp kiểm và radio bị vô hiệu hóa được hỗ trợ, nhưng để cung cấp con trỏ "không được phép" khi di chuột lên cha mẹ

80, bạn sẽ cần thêm lớp

34 vào cha mẹ

35,

36,

37 hoặc

38

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

@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

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

Sử dụng các lớp

38 hoặc

36 trên một loạt hộp kiểm hoặc radio để điều khiển xuất hiện trên cùng một dòng

@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

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

Nếu bạn không có văn bản nào trong

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

42)

@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

chọn

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

43

@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

Cho

44

kiểm soát tĩnh

Khi bạn cần đặt văn bản thuần bên cạnh nhãn biểu mẫu trong biểu mẫu, hãy sử dụng lớp

45 trên biểu mẫu

.

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

trạng thái lấy nét

Chúng tôi loại bỏ các kiểu

46 mặc định trên một số điều khiển biểu mẫu và áp dụng một

47 ở vị trí của nó cho

48

Trình diễn

48 trạng thái

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

48 trên

51

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

Thêm thuộc tính boolean

52 vào đầu vào để ngăn chặn tương tác của người dùng. Đầu vào bị vô hiệu hóa trông sáng hơn và thêm con trỏ

53

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

Thêm thuộc tính

52 vào một

để vô hiệu hóa tất cả các điều khiển trong cùng một lúc

Hãy cẩn thận về chức năng liên kết của

80

Theo mặc định, các trình duyệt sẽ xử lý tất cả các điều khiển biểu mẫu gốc (

80,

57

58

trạng thái chỉ đọc

Thêm thuộc tính boolean

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

văn bản trợ giúp

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

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

Văn bản trợ giúp phải được liên kết rõ ràng với điều khiển biểu mẫu liên quan đến việc sử dụng thuộc tính

60. Điều này sẽ đảm bảo rằng các công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình – sẽ thông báo văn bản trợ giúp này khi người dùng tập trung hoặc vào điều khiển

Một khối văn bản trợ giúp ngắt thành một dòng mới và có thể mở rộng ra ngoài một dòng.

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

1

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

Bootstrap bao gồm các kiểu xác thực cho các trạng thái lỗi, cảnh báo và thành công trên các điều khiển biểu mẫu. Để sử dụng, hãy thêm

61,

62 hoặc

63 vào phần tử gốc. Bất kỳ

64,

51 và

66 nào trong phần tử đó sẽ nhận được các kiểu xác thực

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

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

Đảm bảo rằng một dấu hiệu trạng thái thay thế cũng được cung cấp. Chẳng hạn, bạn có thể bao gồm gợi ý về trạng thái trong chính văn bản

80 của điều khiển biểu mẫu (như trường hợp trong ví dụ mã sau), bao gồm (với văn bản thay thế thích hợp sử dụng lớp

26 - xem phần ) hoặc bằng cách cung cấp thêm . Cụ thể đối với các công nghệ hỗ trợ, các điều khiển biểu mẫu không hợp lệ cũng có thể được gán thuộc tính

69

Một khối văn bản trợ giúp ngắt thành một dòng mới và có thể mở rộng ra ngoài một dòng

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

2

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

Bạn cũng có thể thêm các biểu tượng phản hồi tùy chọn bằng cách thêm

70 và biểu tượng bên phải

Biểu tượng phản hồi chỉ hoạt động với các yếu tố văn bản

80

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

Định vị thủ công các biểu tượng phản hồi là bắt buộc đối với đầu vào không có nhãn và đối với đầu vào có tiện ích bổ sung ở bên phải. Bạn được khuyến khích cung cấp nhãn cho tất cả các đầu vào vì lý do tiếp cận. Nếu bạn muốn ngăn nhãn hiển thị, hãy ẩn chúng bằng lớp

26. Nếu bạn phải làm mà không có nhãn, hãy điều chỉnh giá trị

73 của biểu tượng phản hồi. Đối với các nhóm đầu vào, hãy điều chỉnh giá trị

74 thành giá trị pixel phù hợp tùy thuộc vào độ rộng của addon của bạn

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

Để đảm bảo rằng các công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình – truyền đạt chính xác ý nghĩa của một biểu tượng, văn bản ẩn bổ sung nên được đưa vào lớp

26 và được liên kết rõ ràng với điều khiển biểu mẫu mà nó liên quan đến việc sử dụng

60. Ngoài ra, hãy đảm bảo rằng ý nghĩa (ví dụ: thực tế là có cảnh báo cho một trường nhập văn bản cụ thể) được chuyển tải ở một số dạng khác, chẳng hạn như thay đổi văn bản của

80 thực tế được liên kết với điều khiển biểu mẫu

Mặc dù các ví dụ sau đây đã đề cập đến trạng thái xác thực của các điều khiển biểu mẫu tương ứng trong chính văn bản

80, nhưng kỹ thuật trên (sử dụng văn bản

26 và

60) đã được đưa vào nhằm mục đích minh họa

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

3

Các biểu tượng tùy chọn ở dạng ngang và trong dòng

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

4

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1





.col-md-8
.col-md-4


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


.col-md-6
.col-md-6

5

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

26 ẩn

Nếu bạn sử dụng lớp

26 để ẩn

80 của điều khiển biểu mẫu (thay vì sử dụng các tùy chọn ghi nhãn khác, chẳng hạn như thuộc tính

42), Bootstrap sẽ tự động điều chỉnh vị trí của biểu tượng sau khi nó được thêm vào

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

6

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

Đặt chiều cao bằng các lớp như

85 và đặt chiều rộng bằng các lớp cột lưới như

53

kích thước chiều cao

Tạo các điều khiển biểu mẫu cao hơn hoặc ngắn hơn phù hợp với kích thước nút

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

7

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

Nhanh chóng định cỡ nhãn và điều khiển biểu mẫu trong phạm vi

87 bằng cách thêm

88 hoặc

89

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

8

Kích thước cột

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

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


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


  
.col-md-6
  
.col-md-6

9

Sử dụng các lớp nút trên phần tử

80, hoặc

80.

  

    ...
  

0____4_______92

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

Mặc dù các lớp nút có thể được sử dụng trên các phần tử

80and, nhưng chỉ các phần tử được hỗ trợ trong các thành phần thanh điều hướng và thanh điều hướng của chúng tôi

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

Nếu các phần tử

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

95 thích hợp

Kết xuất trình duyệt chéo

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

Trong số những thứ khác, có một lỗi trong Firefox <30 khiến chúng tôi không thể đặt các nút dựa trên

83 trong số

80, khiến chúng không khớp chính xác với chiều cao của các nút khác trên Firefox

Tùy chọn

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

Thông tin thành công chính mặc định Cảnh báo Liên kết nguy hiểm

  

    ...
  

1

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

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

26

kích cỡ

Fancy nút lớn hơn hoặc nhỏ hơn?

Nút lớn Nút lớn

Nút mặc định Nút mặc định

Nút nhỏ Nút nhỏ

Nút cực nhỏ Nút cực nhỏ

  

    ...
  

2

Tạo các nút cấp độ khối — những nút trải rộng toàn bộ chiều rộng của nút gốc — bằng cách thêm

  ...

02

Nút cấp khối Nút cấp khối

  

    ...
  

3

trạng thái hoạt động

Các nút sẽ xuất hiện khi được nhấn (với nền tối hơn, đường viền tối hơn và bóng bên trong) khi hoạt động. Đối với các yếu tố, điều này được thực hiện thông qua

  ...

03. Đối với phần tử

80, nó được thực hiện với

21. Tuy nhiên, bạn có thể sử dụng các tiện ích

21 (và bao gồm thuộc tính

  ...

07) nếu bạn cần sao chép trạng thái hoạt động theo chương trình

Phần tử nút

Không cần thêm

  ...

03 vì đây là lớp giả, nhưng nếu bạn cần bắt buộc phải có giao diện giống như vậy, hãy tiếp tục và thêm

21

Nút chính Nút

  

    ...
  

4

phần tử neo

Thêm lớp

21 vào các nút

80

  

    ...
  

5

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

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

  ...

12

Phần tử nút

Thêm thuộc tính

52 vào các nút. Nút chính Nút

  

    ...
  

4

Khả năng tương thích giữa các trình duyệt

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

52 vào một , Internet Explorer 9 trở xuống sẽ hiển thị văn bản màu xám với bóng văn bản khó chịu mà chúng tôi không thể khắc phục

phần tử neo

Thêm lớp

34 vào các nút

80

  

    ...
  

5

Chúng tôi sử dụng

34 như một lớp tiện ích ở đây, tương tự như lớp

21 phổ biến, vì vậy không cần tiền tố

Thông báo chức năng liên kết

Lớp này sử dụng

  ...

19 để cố gắng vô hiệu hóa chức năng liên kết của những năm _______80, nhưng thuộc tính CSS đó chưa được chuẩn hóa và không được hỗ trợ đầy đủ trong Opera 18 trở xuống hoặc trong Internet Explorer 11. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ

  ...

19, điều hướng bàn phím vẫn không bị ảnh hưởng, nghĩa là người dùng bàn phím có thị lực và người dùng công nghệ hỗ trợ vẫn có thể kích hoạt các liên kết này. Vì vậy, để an toàn, hãy sử dụng JavaScript tùy chỉnh để tắt các liên kết đó

Hình ảnh đáp ứng

Hình ảnh trong Bootstrap 3 có thể được làm cho thân thiện với phản hồi thông qua việc bổ sung lớp

  ...

22. Điều này áp dụng

  ...

23,

  ...

24 và

  ...

25 cho hình ảnh để nó chia tỷ lệ phù hợp với phần tử gốc

Để căn giữa các hình ảnh sử dụng lớp

  ...

22, hãy sử dụng

  ...

27 thay vì

  ...

28. để biết thêm chi tiết về cách sử dụng

  ...

27

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

Trong Internet Explorer 8-10, hình ảnh SVG có

  ...

22 có kích thước không cân xứng. Để khắc phục điều này, hãy thêm

  ...

31 nếu cần. Bootstrap không tự động áp dụng điều này vì nó gây ra sự phức tạp cho các định dạng hình ảnh khác

  

    ...
  

8

hình dạng hình ảnh

Thêm các lớp vào phần tử

  ...

32 để dễ dàng tạo kiểu cho hình ảnh trong bất kỳ dự án nào

Khả năng tương thích giữa các trình duyệt

Hãy nhớ rằng Internet Explorer 8 thiếu hỗ trợ cho các góc bo tròn

  

    ...
  

9

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

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh

Nullam id dolor id nibh ultricies xe cộ ut id elit

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

Maecenas sed diam eget risus varius blandit sit amet non magna

Etiam porta sem malesuada magna mollis euismo

Donec ullamcorper nulla non metus auctor fringilla

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






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


.col-xs-6
.col-xs-6

0

Xử lý cụ thể

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

80 với lớp

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

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

26

bối cảnh theo ngữ cảnh

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

Nullam id dolor id nibh ultricies xe cộ ut id elit

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

Maecenas sed diam eget risus varius blandit sit amet non magna

Etiam porta sem malesuada magna mollis euismo

Donec ullamcorper nulla non metus auctor fringilla

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




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




  
.col-xs-6
  
.col-xs-6

1

Xử lý cụ thể

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

với lớp

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

Như với , hãy đảm bảo rằng bất kỳ ý nghĩa nào được chuyển tải thông qua màu sắc cũng được chuyển tải ở định dạng không hoàn toàn mang tính trình bày

đóng biểu tượng

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

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




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




  
.col-xs-6
  
.col-xs-6

2

dấu mũ

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

phao nhanh

Di chuyển một phần tử sang trái hoặc phải với một lớp.

  ...

35 được bao gồm để tránh các vấn đề về tính đặc hiệu. Các lớp cũng có thể được sử dụng như mixin

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




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




  
.col-xs-6
  
.col-xs-6

4

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




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




  
.col-xs-6
  
.col-xs-6

5

Trung tâm khối nội dung

Đặt một phần tử thành

  ...

36 và căn giữa qua

  ...

37. Có sẵn dưới dạng mixin và lớp

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




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




  
.col-xs-6
  
.col-xs-6

6_______44_______7

Clearfix

Dễ dàng xóa các

  ...

38 bằng cách thêm

66 vào phần tử gốc. Sử dụng micro Clearfix như được phổ biến bởi Nicolas Gallagher. Cũng có thể được sử dụng như một mixin

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




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




  
.col-xs-6
  
.col-xs-6

8_______44_______9

Hiện và ẩn nội dung

Buộc một phần tử được hiển thị hoặc ẩn (bao gồm cả trình đọc màn hình) bằng cách sử dụng các lớp

  ...

40 và

  ...

41. Các lớp này sử dụng

  ...

35 để tránh xung đột về tính đặc hiệu, giống như lớp. Chúng chỉ có sẵn để chuyển đổi cấp độ khối. Chúng cũng có thể được sử dụng như mixin

  ...

43 có sẵn, nhưng nó không phải lúc nào cũng ảnh hưởng đến trình đọc màn hình và không được dùng kể từ phiên bản 3. 0. 1. Thay vào đó, hãy sử dụng

  ...

41 hoặc

26

Hơn nữa,

  ...

46 có thể được sử dụng để chỉ chuyển đổi chế độ hiển thị của một phần tử, nghĩa là ____17_______47 của nó không bị sửa đổi và phần tử đó vẫn có thể ảnh hưởng đến dòng chảy của tài liệu

00_______4_______01

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

Ẩn phần tử đối với tất cả các thiết bị ngoại trừ trình đọc màn hình bằng

26. Kết hợp

26 với

  ...

50 để hiển thị lại phần tử khi nó được đặt tiêu điểm (e. g. bởi người dùng chỉ sử dụng bàn phím). Cần thiết cho việc theo dõi. Cũng có thể được sử dụng như mixin

02______4_______03

thay thế hình ảnh

Sử dụng lớp

  ...

51 hoặc mixin để giúp thay thế nội dung văn bản của phần tử bằng hình nền

04

05

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

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

lớp học có sẵn

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

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

  ...

52VisibleHiddenHiddenHidden

  ...

53HiddenVisibleHiddenHidden

  ...

54HiddenHiddenVisibleHidden

  ...

55HiddenHiddenHiddenVisible

  ...

56HiddenVisibleVisibleVisible

  ...

57VisibleHiddenVisibleVisible

  ...

58VisibleVisibleHiddenVisible

  ...

59VisibleVisibleVisibleHidden

kể từ v3. 2. 0, các lớp

  ...

60 cho mỗi điểm ngắt có ba biến thể, một biến thể cho mỗi giá trị thuộc tính CSS

  ...

47 được liệt kê bên dưới

Group of classesCSS

  ...

47

  ...

63

  ...

25

  ...

65

  ...

66

  ...

67

08

Vì vậy, đối với màn hình cực nhỏ (

  ...

69) chẳng hạn, các lớp

  ...

60 có sẵn là.

  ...

71,

  ...

72 và

  ...

73

Các lớp

  ...

74,

  ...

75,

  ...

76 và

  ...

77 cũng tồn tại, nhưng không được dùng nữa kể từ v3. 2. 0. Chúng gần tương đương với

  ...

63, ngoại trừ các trường hợp đặc biệt bổ sung để chuyển đổi

  ...

79

  ...

80

  ...

81HiddenVisible

  ...

82VisibleHidden

  ...

83 cũng tồn tại nhưng không được dùng nữa kể từ v3. 2. 0. Nó gần tương đương với

  ...

84, ngoại trừ các trường hợp đặc biệt bổ sung cho

  ...

85 sử dụng một chức năng, một công cụ tuyệt vời khác từ Ít hơn, để tự động tạo màu di chuột phải. Bạn có thể sử dụng

  ...

86,

  ...

87,

  ...

88 và

  ...

89

kiểu chữ

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

11

Biểu tượng

Hai biến nhanh để tùy chỉnh vị trí và tên tệp của các biểu tượng của bạn

12

Các thành phần

Các thành phần trong suốt Bootstrap sử dụng một số biến mặc định để đặt các giá trị chung. Dưới đây là những cách được sử dụng phổ biến nhất

13

nhà cung cấp mixin

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

kích thước hộp

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

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

14

góc tròn

Ngày nay, tất cả các trình duyệt hiện đại đều hỗ trợ thuộc tính

43 không có tiền tố. Như vậy, không có

  ...

91 mixin, nhưng Bootstrap có bao gồm các phím tắt để làm tròn nhanh hai góc trên một mặt cụ thể của đối tượng

15

Hộp (Thả) bóng

Nếu đối tượng mục tiêu của bạn đang sử dụng các trình duyệt và thiết bị mới nhất và tốt nhất, hãy đảm bảo chỉ sử dụng thuộc tính

47. Nếu bạn cần hỗ trợ cho các thiết bị Android cũ hơn (tiền v4) và iOS (tiền iOS 5), hãy sử dụng mixin không dùng nữa để chọn tiền tố

  ...

93 bắt buộc

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

Đảm bảo sử dụng

  ...

94 màu trong bóng hộp của bạn để chúng hòa trộn liền mạch nhất có thể với nền

16

chuyển tiếp

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

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

17

phép biến hình

Xoay, chia tỷ lệ, dịch (di chuyển) hoặc nghiêng bất kỳ đối tượng nào

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

18

Ảnh động

Một mixin duy nhất để sử dụng tất cả các thuộc tính hoạt hình của CSS3 trong một khai báo và các mixin khác cho các thuộc tính riêng lẻ

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

19

độ mờ

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

  ...

95 cho IE8

20

Văn bản giữ chỗ

Cung cấp ngữ cảnh cho các điều khiển biểu mẫu trong từng trường

21

Cột

Tạo cột thông qua CSS trong một phần tử

22

Độ dốc

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

23

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

24

Nếu bạn cần một dải màu theo phong cách sọc cắt tóc, điều đó cũng thật dễ dàng. Chỉ cần chỉ định một màu duy nhất và chúng tôi sẽ phủ lên một sọc trắng mờ

25

Tăng tiền cược và sử dụng ba màu thay thế. Đặt màu đầu tiên, màu thứ hai, điểm dừng màu của màu thứ hai (giá trị phần trăm như 25%) và màu thứ ba với các mixin này

26

Đứng lên. Nếu bạn cần xóa một dải màu, hãy đảm bảo xóa mọi

  ...

95 dành riêng cho IE mà bạn có thể đã thêm. Bạn có thể làm điều đó bằng cách sử dụng hỗn hợp

  ...

97 cùng với

  ...

98

mixin tiện ích

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

Clearfix

Quên thêm

  ...

99 vào bất kỳ phần tử nào và thay vào đó thêm hỗn hợp

  ...

00 khi thích hợp. Sử dụng Clearfix vi mô từ Nicolas Gallagher

27

định tâm ngang

Nhanh chóng căn giữa bất kỳ phần tử nào trong cha mẹ của nó. Yêu cầu phải đặt

30 hoặc

54

28

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

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

29

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

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

  ...

03)

30

Dễ dàng cắt ngắn văn bản bằng dấu chấm lửng với một mixin duy nhất. Yêu cầu yếu tố ở cấp độ

  ...

04 hoặc

  ...

05

31

Hình ảnh võng mạc

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

32

Mặc dù Bootstrap được xây dựng trên Ít hơn, nhưng nó cũng có cổng Sass chính thức. Chúng tôi duy trì nó trong kho lưu trữ GitHub riêng biệt và xử lý các bản cập nhật bằng tập lệnh chuyển đổi

Bao gồm những gì

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

Tôi có thể sử dụng Bootstrap thay vì CSS không?

CSS Grid hay Bootstrap cái nào tốt hơn?

Ưu điểm của Bootstrap so với CSS là gì?