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
- Không cần thêm định nghĩa CSS hoặc truy vấn phương tiện nào
- 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ạtBâ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…
Sidebar
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 độngVà, 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ộtVớ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
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
41bì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 đượcSử 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 [ 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ụ
2Ngoà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
3Loạ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
4Cộ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ộtcol-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
5Bạ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
6cộ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
7Thứ 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
9hỗ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ẻ
0Ví 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
2tiê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ếnNét chấm phẩy 36px
h2. tiêu đề bootstrap
Nét chấm phẩy 30pxh3. tiêu đề bootstrap
Dấu chấm phẩy 24pxh4. tiêu đề bootstrap
Nét chấm phẩy 18pxh5. tiêu đề bootstrapDấu chấm phẩy 14pxh6. Bootstrap tiêu đề Semibold 12px
3Tạ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
81h2. 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ụ
4Bả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
5Bản sao thân chì
Làm nổi bật đoạn văn bằng cách thêm
84Vivamus 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ỉnhCá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ẻ
80Bạ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ẻ
80Dòng văn bản này được coi là văn bản đã xóa
8Vă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ẻ
80Dò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ẻ
80Dòng văn bản này được coi là phần bổ sung cho tài liệu
...
0văn bản được gạch chân
Để gạch chân văn bản, hãy sử dụng thẻ
80Dòng văn bản này sẽ hiển thị dưới dạng gạch chân
...
1Sử 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 nhauNgoà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àoDòng văn bản này được coi là bản in đẹp
...
2Dũ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
...
3Chữ 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
...
4yế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
...
5cá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
...
6Cá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
...
7chủ nghĩa ban đầu
Thêm
03 vào chữ viết tắt để có cỡ chữ nhỏ hơn một chútHTML 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
04Twitter, Inc
1355 Phố Chợ, Phòng 900
San Francisco, CA 94103
P. [123] 456-7890Họ Tên
...
9trí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 trong80Lorem 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ảiLorem 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
- 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
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- 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ậyDanh 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
09For example,
should be wrapped as inline.________19_______9User 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_______0Basic 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ảngKhả 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] { .. }
5bả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] { .. }
5Hà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] { .. }
5bà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] { .. }
5cá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] { .. }
0Truyề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
26bả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àyCắ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ácFirefox 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] { .. }
2Ví 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,
80Hộ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
38Mặ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] { .. }
3Hộ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] { .. }
4Hộ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] { .. }
5chọ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] { .. }
6Cho
44kiể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_______8trạ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
48Trì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
51trạ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úcHã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
58trạ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ểnMộ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
1trạ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ựcTruyề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
69Mộ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
2Vớ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ảiBiểu tượng phản hồi chỉ hoạt động với các yếu tố văn bản
80Biể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ạnTruyề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ẫuMặ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
3Cá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
5Cá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
6Kiể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ư
53kí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
7Kí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
8Kí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
9Sử dụng các lớp nút trên phần tử
80, hoặc
80.
...
0____4_______92Sử 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ôiLiê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ợpKế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