Nắm bắt đượ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 đối với việc phát triển web tốt hơn, nhanh hơn và mạnh hơn loại tài liệu HTML5Bootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những yêu cầu thứ nhất 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
...
Ưu tiên các thiết bị di độngVới Bootstrap 2, chúng tôi đã bổ sung thêm các phong cách thân thiện với các thiết bị di động như một phần chính của khung. 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 tùy chọn kiểu dáng cho các thiết bị, chúng tôi đã gắn trực tiếp vào lõi. Các kiểu dành cho thiết bị di động xuyên suốt trong cả thư viện thay vì nằm trong các tệp riêng lẻ Để đảm bảo việc kết xuất và "chạm phóng to", hãy thêm thẻ meta viewport vào của bạn
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
17 vào chế độ xem meta của thẻ. 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 trang web, vì vậy hãy cân nhắc trước khi sử dụng
Bootstrap thiết lập các kiểu chung cho công việc hiển thị, kiểu chữ và các liên kết. Cụ thể, chúng tôi - Thiết lập
18 trên thẻ
19 - Sử dụng các thuộc tính
20,
21, và
22 làm cơ sở của kiểu chữ - Thiết lập màu sắc chung của các liên kết bằng thuộc tính
23 và áp dụng hiệu ứng gạch dưới khi
24
Những phong cách này nằm trong tập tin
25bình thường hóa. cssĐể cải thiện việc kết xuất đối với các trình duyệt, chúng tôi sử dụng Chuẩn hóa. css, một dự án được thực hiện bởi Nicolas Gallagher và Jonathan Neal Hộp đựngDễ 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
26. Vùng chứa thiết lập thuộc tính
27 trên tất cả các kích thước được áp dụng cho truy vấn phương tiện để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do
28 và chiều rộng cố định nên vùng chứa mặc định không thể bị lồngUse class
26 for a container responsive có chiều rộng cố định
...
Sử dụng lớp
30 cho vùng chứa có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn
...
Bootstrap bao gồm một hệ thống lưới đáp ứng, 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 thiết bị. Nó bao gồm để thuận tiện cho việc xây dựng cục bộ, cùng với đó Giới thiệuCác hệ thống lưới được sử dụng để tạo ra các cực cho các trang bằng các chuỗi và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới Bootstrap đang hoạt động - Các hàng được đặt bên trong một
26 (chiều rộng cố định) hoặc
30 (chiều rộng đầy đủ) để căn chỉnh và thiết lập phần đệm một cách thích hợp - Sử dụng các hàng để tạo ra 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ử trực tiếp của các hàng
- Các lớp được định nghĩa trước như
33 và
34 luôn sẵn sàng để xây dựng các mạng lưới bố cục một cách nhanh nhất. Một số ít mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa - Các cột được tạo nên các máng xối (khoảng trắng nằm giữa các cột nội dung) bằng
28. Giá trị đệm đó 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ị biên âm trên các
33 - Các cột của lưới được tạo ra bằng cách chỉ định số 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 cục bộ với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class
34
Vui lòng xem các ví dụ để biết cách á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 tin Ít hơn của chúng tôi để tạo ra các điểm nổi bật chính trong hệ thống lưới của chúng tôi /* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { .. }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { .. }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { .. }
Để tương thích với một số ít thiết bị, chúng tôi sẽ mở rộng các truy vấn phương tiện này bằng cách bổ sung các thuộc tính
38@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ướiVui lòng xem hệ thống lưới của Bootstrap đang hoạt động như thế nào trên các thiết bị trong bảng sau 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 ngangĐược thu 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
39
40
41_______1____2Độ dày cộtTự động1 Ví dụ. Chồng theo hàng ngangSử dụng một tập hợp các lớp
43, 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 thiết bị di động và máy tính bảng (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). Please set the table of the grid to side in the
33
.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
Ví dụ. thùng chứa chất lỏngChuyển bất kỳ một mạng lưới lưới có chiều rộng cố định nào thành một mạng lưới có chiều rộng đầy đủ bằng cách thay đổi
26 bên ngoài cùng thành
30
...
Ví dụ. Điện thoại di động và máy tính để bànBạ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ỏ? . Vui lòng xem ví dụ bên dưới để hiểu rõ hơn về cách thức hoạt động
.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
Ví dụ. Điện thoại, máy tính bảng, máy tính để bànBạn có thể tạo ra các cơ cấu tổ chức cục bộ hơn nữa bằng cách sử dụng các lớp dành cho bảng máy tính
49col-xs-12. col-sm-6. col-md-8
0Đặt lại cột đáp ứngKhi sử dụng 4 bậc (tương ứng với 4 điểm 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 kích thước được xác định, có thể sẽ có một cột cao hơn các cột . Để sửa lỗi này, hãy sử dụng một lớp
50 cùng với chúng tôicol-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ụ
1Ngoà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
2Di chuyển cộtDi chuyển cột sang phía bên phải bằng cách sử dụng các class
51. 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
52 cột. Ví dụ,
53 dịch
54 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ộ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
3Các cột lồng nhauĐể tạo ra các cột lồng nhau, Hãy thêm một
33 mới và một tập các cột
43 bên trong cột
43 đã 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
4Thứ tự cộtDễ 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
58 và
59
5Các biến số và mixin LessNgoài việc thuận tiện cho việc xây dựng bố cục cục bộ một cách nhanh chóng, Bootstrap còn sử dụng các biến số và mixin Ít hơn để tạo ra các bố cục cục bộ theo nghĩa đơn giản của riêng bạn biến sốCác biến tham số xác định số lượng cột, độ rộng và kích thước truy vấn phương tiện. Chúng tôi sử dụng những biến này để tạo ra các lưới lớp (đã đề cập ở phía trên) cũng như các mixin được liệt kê bên dưới đây
6hỗn hợpMixin được sử dụng để liên kết với các biến số , mục đích là để tạo ra CSS ngữ nghĩa cho các cột riêng lẻ trong hệ thống lưới
7Ví dụ ứng dụngBạn có thể thay đổi giá trị các biến số về các giá trị tùy biến của riêng bạn, nếu không hãy sử dụng các giá trị trộn lẫn với các giá trị mặc định của nó. Đây là một ví dụ về việc sử dụng các thiết lập mặc định để tạo ra một cột cục bộ 2 với khoảng trắng ở giữa
8
9tiêu đềTất cả các tiêu đề thẻ của HTML, thẻ từ to, all available. Các lớp từ
60 đến
61 được sử dụng khi bạn muốn tạo kiểu cho các thẻ tiêu đề nhưng vẫn muốn văn bản của bạn hiển thị trên cùng một dòngNét chấm phẩy 36px h2. tiêu đề bootstrapNét chấm phẩy 30pxh3. tiêu đề bootstrapDấu chấm phẩy 24pxh4. tiêu đề bootstrapNét chấm phẩy 18pxh5. tiêu đề bootstrapDấu chấm phẩy 14pxh6. Bootstrap tiêu đề Semibold 12px
0Bạn cũng có thể tạo ra các văn bản khác đi kèm trong tiêu đề bằng thẻ
62hoặc lớp
63h2. 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ụ
1Thân hình
64 default of Bootstrap is 14px, with
65 has Rate 1. 428. Các thuộc tính này được áp dụng cho các phần và tất cả các đoạn văn bản. Hơn nữa,(các đoạn văn) sẽ nhận khoảng căn lề bên dưới (margin-bottom) bằng một nửa chiều cao dòng 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 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 Làm nổi bật đoạn vănBạn có thể làm cho một đoạn văn trở nên nổi bật hơn bằng cách thêm lớp
66Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus Build with LessTypograghy ratio trong Bootstrap based on 2 variable in Ít hơn trong các biến. ít hơn.
21 và
22. Biến thứ nhất là cơ sở kích thước phông chữ được sử dụng rất phổ biến, còn biến thứ hai là cơ sở chiều cao dòng. Chúng tôi sử dụng những biến này và một số cơ sở toán học cho phép để tạo lề, phần đệm và chiều cao dòng. Các biến tùy chỉnh và Bootstrap sẽ tự động điều chỉnhNhấn mạnhVui lòng sử dụng các thẻ nhấn mạnh mặc định của HTML với các kiểu đơn giản Text has small sizeĐể giảm tính năng nhấn mạnh cho các đoạn văn bản hoặc khối văn bản, hãy sử dụng thẻ
62 để thay đổi kích thước của những văn bản đó 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
64 của riêng họ khi nằm trong thẻ
62. Bạn cũng có thể sử dụng một phần tử có lớp
63 trên cùng một dòng thay vì
62Dòng văn bản này được coi là bản in đẹp
2in đậmĐược sử dụng để nhấn mạnh một đoạn văn bản với giá trị font-weight cao Đoạn văn bản sau đây được hiển thị dưới dạng văn bản in đậm
3in nghiêngĐược sử dụng để nhấn mạnh một đoạn văn bản với 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
4Các phần tử thay thếBạn có thể tự sử dụng các thẻ
62và
62in HTML5. Thẻ
62được sử dụng để tô đậm một từ hoặc cụm từ trong khi thẻ
62được sử dụng phổ biến cho các thuật ngữ về kỹ thuật, âm thanh,Các lớp căn chỉnhDễ dàng căn chỉnh lại văn bản với các thành phần khác bằng 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ý
5Tên viết tắtSử dụng thẻ
62 của HTML để hiển thị tên viết tắt, và sẽ hiển thị đầy đủ tên khi di chuột qua. Các thẻ này thuộc tính
79 đi kèm, có đường viền bên dưới ở dạng dấu chấm liền nhau và khi di chuột qua sẽ hiển thị con trỏ dạng trợ giúpTên viết tắt cơ bảnThuộc tính sử dụng
79 có giá trị là tên đầy đủ của tên viết tắt trên thẻ
62Viết tắt của thuộc tính từ là attr
6chủ nghĩa ban đầuThêm class
82 vào thẻ
62 để thiết lập kích thước phông chữ nhỏ hơn một chútHTML là thứ tốt nhất kể từ khi bánh mì cắt lát
7addressHiển thị thông tin liên hệ cho phần tử cha gần nhất hoặc cả. Để bảo toàn định dạng, hãy kết thúc tất cả các dòng bằng thẻ
84Twitter, Inc 795 Đại lộ Folsom, Phòng 600 San Francisco, CA 94107 P. (123) 456-7890Họ Tên
8Trích dẫn khốiĐể trích dẫn một khối nội dung từ một nguồn khác trong tài liệu của bạn Default default blockHãy bọc một khối HTML bất kỳ mà bạn muốn trích dẫn bằng thẻ thẻ ưu tiên sử dụngInside .Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
9Các tùy chọn cho khối trích dẫnBạn có thể tùy chọn thay đổi nội dung và kiểu của khối .Set a source namePlease add a to verify the source quote to from where. Name of source-work by
62Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
...
0Các định dạng được hiển thị thay thếĐể căn bản phải trích dẫn nội dung, hãy sử dụng class
86Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
...
1danh sáchDanh 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 thứ tự nào cả - 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
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 - 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
Danh sách không được định kiểuLoại bỏ thuộc tính
87 mặc định của danh sách và khoảng căn lề trái (lề-trái) trên tất cả các hạng mục của danh sách. Lưu ý rằng, công việc này chỉ áp dụng cho các thẻis con direct next ofhoặc, điều đó có nghĩa là bạn có thể cần thêm lớp cho các danh sách khác nằm sâu bên trong- 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
...
2The same lines listĐặt tất cả các hạng mục trong danh sách trên cùng một dòng theo cách sử dụng thuộc tính
88 cùng thuộc tính đệm có giá trị nhỏ- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
...
2Thông tin chi tiếtMột danh sách các thuật ngữ với thông tin đi kèm 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
...
4Chi tiết theo hàng ngangVui lòng đặt các thuật ngữ và thông tin đi kèm bên trong các thẻ nằm sát nhau. Thông thường, bạn chỉ cần sử dụng các thẻ mặc định, tuy nhiên khi thanh điều hướng mở rộng ra, bạn hãy sử dụng định dạng nà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
...
4Truncping autoDanh 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 để phù hợp với các cột bên trái bằng cách sử dụng thuộc tính
89. Để tương thích với các khung nhìn, chúng tôi sẽ thay đổi về định dạng xếp hạng chồng mặc định Line lineKhi 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ẻ
90For example, should be wrapped as inline.________16_______6 Đầu vào từ người dùngSử dụng thẻ ________1_______62 để chỉ rõ đầu vào mà người dùng có thể nhập được từ bàn phím. To switch directories, type cd followed by the name of the directory. ________16_______7 Khối cơ bảnSử dụng thẻ ________16_______8
________16_______9
Bạn cũng có thể thêm lớp
92 để thiết lập chiều cao tối đa bằng 350px và cho phép người dùng cuộn nội dung theo chiều dọc
biến số
Để chỉ rõ đâu là biến số, hãy sử dụng thẻ
62
...
0
Đầu ra mẫu
Để xác định đầu ra mẫu của một chương trình, hãy sử dụng thẻ
62
Văn bản này được coi là đầu ra mẫu từ một chương trình máy tính
...
1
95 vào bất kỳ thẻ nào
96
97 để thêm kiểu định dạng đường kẻ viền cho bất kỳ bảng nào mà bạn muốnTương thích với hầu hết các loại trình duyệtBảng kẻ sọc được tạo kiểu thông qua bộ chọn
98 của CSS(Không được hỗ trợ trong Internet Explorer 8)#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
...
2Table has a borderThêm lớp
99 để hiển thị đường viền cho bảng và các ô trong bảng#First NameLast NameUsername1MarkOtto@mdoMarkOtto@TwBootstrap2JacobThornton@fat3Larry the Bird@twitter
...
2Bảng có dòng đổi màu khi di chuộtThêm lớp
00 để kích hoạt trạng thái di chuột trên các dòng của bảng bên trong thẻ#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
...
2Chặt bảngThêm lớp
01 để làm cho các ô trong bảng gần nhau hơn#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
...
2Các class theo ngữ cảnhSử dụng các lớp theo ngữ cảnh để tô màu cho các dòng hoặc các ô trong bảng ClassDescription
02Áp dụng màu hover cho một dòng hoặc một ô trong bảng
03Biểu thị sự thành công hoặc một hành động tích cực
04Biểu thị sự thay đổi và hành động mang tính thông báo
05Biểu thị cảnh báo hoặc nhắc nhở
06Biểu thị nguy hiểm hoặc một hành động tính #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ộtNội dung cột5Nội dung cộtNộ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ột9Nội dung cộtNội dung cột
...
7Bảng đáp ứngĐể tạo bảng đáp ứng, hãy bọc phần tử có lớp
07 bằng một phần tử khác có lớp
08, 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 (độ #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 ô.
...
8ví dụ cơ bảnCác thành phần của biểu mẫu (điều khiển biểu mẫu) tự động nhận một số kiểu chung. Toàn bộ các form-control
62,
62Hộp kiểm và radioHộp kiểm được sử dụng để 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 Default (xếp chồng)
...
9Hộp kiểm trên cùng một dòngHãy sử dụng lớp
11 hoặc
12 để hiển thị danh sách các hộp kiểm/radio trên cùng một dòng/* 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) { .. } 0Lựa chọnSử dụng tùy chọn mặc định hoặc bổ sung
13 để hiển thị nhiều tùy chọn cùng một lúc/* 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) { .. } 1Khi bạn cần đặt một dòng văn bản thuần bên cạnh một nhãn bên trong một biểu mẫu dàn hàng ngang, hãy sử dụng lớp
14 trên thẻ. /* 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Đầu vào đang được tập trungChúng tôi loại bỏ
15 mặc định trên một số kiểm soát biểu mẫu và sử dụng
16 để hiển thị đầu vào như đang được
17Trình diễn
17 trạng tháiVí dụ đầu vào ở 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
17 trên một
20Đầu vào bị vô hiệu hóaVui lòng thêm thuộc tính
21 vào đầu vào để ngăn người dùng nhập dữ liệu và làm cho đầu vào hiển thị giống như đã bị vô hiệu hóa
Fieldset is null offsetVui lòng thêm thuộc tính
21 vào mộtto nullizes all the form-control is side inChức năng liên kết của thẻ
62không bị ảnh hưởngLớp này sẽ chỉ làm thay đổi hình thức của các nút
62chứ 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 JavascriptTính tương thích với các trình duyệtMặc dù Bootstrap sẽ áp dụng các kiểu 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
21 trên mộtVì thế, hãy sử dụng Javascript để vô hiệu hóa bộ trường hóa trên các trình duyệt này/* 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đầu vào chỉ đọcThêm thuộc tính boolean
26 vào đầu vào để ngăn người dùng nhập và định kiểu đầu vào là bị vô hiệu hóa
Trạng thái xác nhậnBootstrap cung cấp các kiểu xác nhận biểu thị các trạng thái lỗi, cảnh báo và áp dụng thành công trên các biểu mẫu kiểm soát. Để sử dụng, hãy thêm các lớp
27,
28, hoặc
29 vào phần tử cha. Bất kỳ phần tử nào có lớp
30,
20, và
32 bên trong phần tử cha đó sẽ được áp dụng kiểu xác nhậ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) { .. } 6Các biểu tượng tùy chọnNếu bạn muốn tăng tính trực tiếp, hãy sử dụng các biểu tượng tùy chọn bằng cách sử dụng các lớp đi kèm Icon, label and group of inputViệc thiết lập vị trí cho các biểu tượng là cần thiết để các đầu vào không được gắn nhãn và chọn các bằng cách thêm một tiện ích bổ sung vào phía bên phải. Đối với các đầu vào không gắn nhãn, hãy điều chỉnh giá trị trên cùng. Đối với đầu vào của nhóm, hãy điều chỉnh giá trị bên phải theo một cách thích hợp tùy thuộc vào chiều rộng của tiện ích bổ sung /* 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) { .. } 7Các tùy chọn biểu tượng biểu tượng cũng hoạt động trên các biểu mẫu cùng dòng và biểu mẫu hàng ngang/* 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) { .. } 9Các biểu tượng tùy chọn có nhãn
33 ẩnĐối với các điều khiển biểu mẫu không có nhãn hiển thị, hãy thêm lớp
33 trên nhãn. Bootstrap sẽ tự động điều chỉnh vị trí của biểu tượng sau khi nó được thêm vào@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) { .. } 0Hãy sử dụng các lớp tương tự như
35 để thiết lập chiều cao và sử dụng các lớp tương tự như
36 để thiết lập chiều rộng của điều khiển biểu mẫu (tương tự như các cột của lưới)Change the heightTạo các điều khiển biểu mẫu cao hơn hoặc thấp hơn tương ứng với kích thước của nú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) { .. } 1Change widthDựa vào các đầu vào 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 theo chiều rộng mong muốn (xem ví dụ bên dưới để biết thêm chi tiế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) { .. } 2Text helpTo add text help for form-control, hãy bọc văn bản đó bằng một thẻ
62 có lớp
32Mộ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@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) { .. } 3Các tùy chọnSử dụng bất kỳ lớp nào có sẵn của nút để tạo kiểu cho nút Thông tin thành công chính mặc định Cảnh báo Liên kết nguy hiểm @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) { .. } 4SizesBạn muốn nút để hay nút nhỏ? 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ỏ @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) { .. } 5Nếu bạn muốn tạo một nút có chiều rộng bằng chiều rộng của phần tử cha (toàn chiều rộng), hãy sử dụng lớp
42Nút cấp khối Nút cấp khối @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) { .. } 6Kích hoạt trạng tháiCác nút sẽ hiển thị bên dưới hình thức giống như đã được nhấn (với màu nền tối, đường viền tối đa hoặc bóng đổ vào phía trong) khi được kích hoạt. Hãy sử dụng
43 với thẻ và
02 với thẻ
62. Tuy nhiên, bạn cũng có thể sử dụng
02 trên thẻ nếu bạn muốn tái tạo trạng thái kích hoạtElemental sectionNhất thiết phải thêm
43 làm giả lớp, nhưng nếu bạn muốn 2 nút hiển thị giống nhau, hãy sử dụng lớp
02Nút chính Nú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) { .. } 7Phần tử 62Hãy sử dụng lớp
02 trên các nút định dạng
62 @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) { .. } 8Trạng thái vô hiệu hóaLàm cho các nút trông giống như không thể nhấp vào bằng cách làm mờ chúng đi 50% Elemental sectionPlease use the property
21 on buttons format. Nút chính Nú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) { .. } 7Tính tương thích của trình duyệtNếu bạn thêm thuộc tính
21 vào một trình duyệt Internet Explorer 9 (và các phiên bản thấp hơn) sẽ sinh ra văn bản có màu xám giống với bóng của nó. Rất tiếc là chúng tôi vẫn chưa sửa lỗi nàyPhần tử 62Hãy sử dụng lớp
55 trên các nút định dạng
62 @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) { .. } 8Chúng tôi sử dụng
55 như một lớp tiện ích trong trường hợp này, tương tự như lớp
02, vì vậy không thiết yếu nhất phải có tiền tố đi kèmChức năng liên kết không bị ảnh hưởngLớp này sẽ chỉ thay đổi về mặt hình thức của mã thẻ> 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ẻ
62, hãy sử dụng JavascriptUse the instance contextMặc dù các lớp chỉ được sử dụng trên các phần tử
62và nhưng chỉ có các phần tử được hỗ trợ bên trong các thành phần điều hướng như điều hướng và thanh điều hướngVui lòng sử dụng các lớp của nút trên một trong các loại thẻ
62, , hoặc
62
.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
63Tính tương thích với các trình duyệtChúng tôi đề xuất sử dụng bất kỳ phần tử nào khi có thể để báo cáo tính năng 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 dừng thiết lập
65 trên các nút định dạng
62. Đ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Ảnh phản hồiHì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 lớp
66. Lớp này sẽ thiết lập
67 và
68 lên ảnh để chúng có thể co giãn theo Tỷ lệ tương ứng với phần tử cha của chú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
2Các định dạng của ảnhThêm các lớp vào thẻ
69 để tạo kiểu cho ảnh một cách dễ dàngTính tương thích với các trình duyệtHãy nhớ rằng trình duyệt Internet Explorer 8 không hỗ trợ góc bo trò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
3Các sắc màu theo ngữ cảnhBootstrap có một tập hợp các lớp tiện ích hỗ trợ người dùng trong quá trình truyền tải ý nghĩa bằng màu sắc. Những lớp này cũng có thể áp dụng cho các liên kết và cũng có tác dụng làm tối màu các liên kết khi di chuột qua như kiểu mặc định của các liên kết 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-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
4Xử lý với đặc tính hiệuĐôi khi các lớp này không thể áp dụng đặc tính hiệu của bộ chọn khác. Trong nhiều trường hợp, có một giải pháp thay thế là văn bản của bạn được bọc bằng một thẻ
62 gắn với một trong các lớp nàyCác màu nền theo ngữ cảnhTương tự như các lớp dành cho màu sắc của văn bản theo ngữ cảnh, bạn cũng dễ dàng thiết lập màu nền của bất kỳ phần tử nào bằng các lớp ngôn ngữ cảnh cho màu nền. Các phần tử
62 sẽ bị tối màu khi di chuột vào giống như các lớp áp dụng với văn bảnNullam 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-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
5Xử lý với đặc tính hiệuĐôi khi các lớp này không thể áp dụng đặc tính hiệu của bộ chọn khác. Trong nhiều trường hợp, có một giải pháp thay thế là bọc văn bản của bạn bằng một thẻ mount with one in this class Icon "đóng cửa"Sử dụng biểu tượng "Đóng" chung cho việc xóa (hoặc đóng lại) các hộp phương thức hoặc các thông bá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
6dấu mũSử dụng dấu mũ để xác định chức năng xuống dưới và hướng xuống dưới. Lưu ý rằng caret default sẽ tự động thay đổi chiều trong
Trôi nổiBạ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 lớp tương ứng.
72 được thêm vào để tránh các vấn đề liên quan đến đặc tính hiệu. Các lớp cũng có thể được sử dụng như các mixin
.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
.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
9Không sử dụng cho thanh điều hướngĐể điều chỉnh các thành phần trong thanh điều hướng với các lớp tiện ích, hãy sử dụng
73 hoặc
74. to know more chi tiếtCăn giữa các khối nội dungThiết lập thuộc tính
75 vào một phần tử và căn cứ giữa bằng
76. Tiện ích này có thể được sử dụng bằng mixin hoặc class
...
0
...
1ClearfixXóa thuộc tính
77 trên một phần tử bất kỳ bằng cách sử dụng lớp
50, được lấy từ micro clearfix của Nicolas Gallagher. Lớp này cũng có thể được sử dụng như một mixin
...
2
...
3Ẩn và hiện nội dungBạn có thể làm cho một phần tử ẩn đi hoặc hiện ra (hỗ trợ cả thiết bị đọc màn hình) bằng cách sử dụng các lớp
79 và
80. Những lớp này sử dụng
72 để tránh xung đột về tính đặc hiệu, giống như. Chúng chỉ được áp dụng lên các khối định dạng phần tử (hiển thị. block) và cũng có thể sử dụng như các mixinLớp
82 thi thoảng không có tác dụng trên các thiết bị đọc màn hình, do đó lớp này đã bị loại bỏ ở phiên bản 3. 0. 1 and are instead by
80 and
33Ngoài ra, lớp
85 được sử dụng để ẩn/hiện một phần tử, điều đó có nghĩa là thuộc tính hiển thị của nó không bị thay đổi và có thể vẫn ảnh hưởng đến luồng của tài liệu
...
4
...
5Nội dung thiết bị đọc màn hìnhBạn có thể ẩn một phần tử bằng lớp
33 trên tất cả các thiết bị ngoại trừ màn hình đọc. Kết hợp lớp
33 cùng với lớp
88 để hiển thị phần tử một lần nữa khi được lấy nét (không giới hạn như đối với người dùng chỉ sử dụng bàn phím). Bạn nên tham khảo. Lớp này cũng được sử dụng như mixin
...
6
...
7Replace imageSử dụng lớp
89 hoặc mixin để thay thế nội dung văn bản của một phần tử bằng một hình nền
...
8
...
9Đố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 lớp tiện ích này để ẩn và hiển thị nội dung trên các thiết bị khác nhau thông qua truy vấn phương tiện. Ngoài ra, các lớp tiện ích dành cho việc đóng/mở nội dung để vào cũng được thêm vào Hãy cố gắng sử dụng những lớp này theo một cách giới hạn và tránh việc tạo ra quá nhiều 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 công việc hiển thị trên mỗi thiết bị. Các tiện ích responsive hiện chỉ có tác dụng đối với các khối định dạng phần tử (hiển thị. chặn hoặc hiển thị. inline-block) and table. Việc sử dụng các phần tử cùng dòng (hiển thị. nội tuyến) và các phần tử nằm trong bảng (, ,. ) sẽ không được hỗ trợ đáp ứng Các lớp có sẵnSử dụng đơn lẻ hoặc kết hợp các lớp có sẵn để ẩn/hiện nội dung tương ứng với các kích thước của khung nhìn Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
90VisibleHiddenHiddenHidden
91HiddenVisibleHiddenHidden
92HiddenHiddenVisibleHidden
93HiddenHiddenHiddenVisible
94HiddenVisibleVisibleVisible
95VisibleHiddenVisibleVisible
96VisibleVisibleHiddenVisible
97VisibleVisibleVisibleHiddenkể từ v3. 2. 0, các lớp
98 cho mỗi điểm dừng có ba biến thể, một biến thể cho mỗi giá trị thuộc tính CSS
99 được liệt kê bên dướiGroup of classesCSS
99
...
01
...
02
...
03
...
04
...
05
88Vì vậy, đối với màn hình cực nhỏ (
...
07) chẳng hạn, các lớp
98 có sẵn là.
...
09,
...
10 và
...
11Các lớp
...
12,
...
13,
...
14 và
...
15 cũng tồn tại, nhưng không được dùng nữa kể từ v3. 2. 0. Chúng tương đương với
...
01, ngoại trừ các trường hợp đặc biệt bổ sung để chuyển đổi
...
17
...
18
...
19HiddenVisible
...
20VisibleHidden
...
21 cũng tồn tại nhưng đã bị loại bỏ trong phiên bản 3. 2. 0. Lớp này sử dụng tương tự như lớp
...
22, 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
...
23 sử dụng một công cụ tuyệt vời của Ít hơn để tự động tạo ra màu sắc phù hợp nhất khi di chuột. Bạn có thể sử dụng
...
24,
...
25,
...
26, và
...
27kiểu chữDễ dàng thiết lập kiểu chữ, kích thước chữ, tiêu đề với một số ít biến của Ít hơn. 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 kiểu chữ trộn một cách dễ dàng hơn
.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
5Icon iconCó hai biến được sử dụng để tùy chọn tên biến và nơi lưu trữ biểu tượng của bạn
.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
6Các thành phầnCá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 hoặc cách sử dụng
.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
7nhà cung cấp mixinVerdor mixin là mixin giúp hỗ trợ các trình duyệt bằng cách bổ sung các tiền tố liên quan trong CSS đã được dịch của bạn kích thước hộpKhởi tạo lại mô hình hộp của các thành phần bằng một menu mixin. Đố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, with the current output of 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 Bootstrap phiên bản 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
8Góc bo trònNgày nay, hầu như toàn bộ các trình duyệt tiên tiến đều được hỗ trợ thuộc tính
...
28 (không cần tiền tố). Vì thế sẽ không có mixin
...
29, tuy nhiên Bootstrap cũng bổ sung thêm những phím tắt để nhanh chóng bo tròn 2 góc cạnh bất kỳ của một đối tượng
.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
9Đổ bóngNế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, thì bạn có thể sử dụng thuộc tính
16 mà không cần tiền tố. Tuy nhiên để hỗ trợ 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ố
...
31Mixin này đã bị loại bỏ ở phiên bản 3. 1. 0, do Bootstrap không hỗ trợ nền tảng chính thức không chính thức (các nền tảng không hỗ trợ các thuộc tính tiêu chuẩn). Để đảm bảo toàn bộ tính năng tương thích ngược, Bootstrap sẽ tiếp tục mixin này ở bên trong để tận hưởng phiên bản 4 của Bootstrap Hãy chắc chắn sử dụng các màu
...
32 trong giá trị hộp-bóng của bạn để chúng tôi có thể hiển thị phù hợp nhất với màu nền
00Sự chuyển dịch (Transition)There are 3 mixin of less support transition one way linh hoạt. Thiết lập tất cả các thông tin chuyển đổi với chỉ duy nhất một mixin hoặc chỉ định thời gian thực hiện và thời gian hiển thị của quá trình chuyển đổi nếu cần thiết Mixin này đã bị loại bỏ ở phiên bản 3. 2. 0, with the current output of 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 Bootstrap phiên bản 4
01Bạn có thể quay, chuyển đổi tỷ lệ, tinh tiến hoặc kéo bất kỳ đối tượng nào Mixin này đã bị loại bỏ ở phiên bản 3. 2. 0, with the current output of 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 Bootstrap phiên bản 4
02Sự chuyển động (Animation)Bạn không 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ẻ Mixin này đã bị loại bỏ ở phiên bản 3. 2. 0, with the current output of 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 Bootstrap phiên bản 4
03Độ trong suốt (Opacity)Thiết lập chế độ trong suốt cho toàn bộ trình duyệt và cung cấp
...
33 Hỗ trợ trình duyệt IE8
04Trình giữ chỗCung cấp ngữ cảnh cho các điều khiển biểu mẫu nằm bên trong mỗi trường
05cộtTự động sinh ra các cột bằng CSS bên trong một phần tử đơn lẻ
06DốcBạn có thể dễ dàng chuyển đổi 2 màu 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 tất cả những thứ mà bạn muốn
07Bạn cũng có thể chỉ rõ góc của 2 màu cơ sở (gradient tuyến tính)
08Nếu bạn muốn chuyển màu theo dạng kẻ sọc, bạn chỉ cần xác định một nền màu và chúng tôi sẽ phủ các đường mờ lên cho bạn
09Ngoà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
10Xin lưu ý rằng, bất cứ khi nào bạn xóa một gradient, hãy nhớ xóa cả thuộc tính
...
33 (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
...
35 cùng với
...
36Các mixin tiện íchMixin 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 ClearfixPlease replace the job more
...
37 bằng cách thêm mixin
...
38 vào các phần tử thích hợp. Please use micro clearfix of Nicolas Gallager
11Căn giữa theo hàng ngangNhanh 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
27 và
38 yêu cầu phải được thiết lập
12Help to sizeDễ dàng xác định chiều của một đối tượng
13Textarea cho phép thay đổi kích thướcDễ dàng cấu hình các tùy chọn về thay đổi kích thước cho vùng văn bản 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
...
41
14Dễ dàng cắt ngắn văn bản bằng cách duy nhất một mixin. Lưu ý rằng, các phần tử
...
42 ở dạng
...
43 hoặc
...
44
15Hình ảnh RetinaXác định hai đường dẫn ảnh và chiều của ảnh @1x, và Bootstrap sẽ cung cấp truy vấn phương tiện @2x. Nếu bạn có nhiều ảnh, hãy cân nhắc việc viết CSS cho ảnh của bạn bằng tay trong truy vấn phương tiện
16Mặ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 (tập lệnh chuyển đổi) Bên trong đó có gì?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 |