Bố cục grid system của bootstrap 4 sử dụng kỹ thuật css nào
|
Nắm được những phần chính trong kết cấu của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi tới việc phát triển web tốt hơn, nhanh hơn và mạnh hơn. Show
HTML5 doctypeBootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những thứ yêu cầu phải sử dụng HTML5 doctype. Vì thế, hãy thêm nó vào dòng đầu tiên trong các dự án của bạn. Ưu tiên các thiết bị di độngVới Bootstrap 2, chúng tôi đã thêm các style thân thiện với các thiết bị di động như một phần chính của framework. Tuy nhiên trong Bootstrap 3, chúng tôi đã viết lại dự án để có thể tương thích với các thiết bị di động ngay từ khi bắt đầu. Thay vì phải thêm các style tùy chọn cho các thiết bị, chúng tôi đã gắn trực tiếp vào core. Các style dành cho thiết bị di động nằm xuyên suốt trong cả thư viện thay vì nằm trong các tập tin riêng lẻ. Để đảm bảo việc render và "chạm phóng to", hãy thêm thẻ meta viewport vào 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 Bootstrap thiết lập các style chung cho việc hiển thị, typography và các liên kết. Cụ thể, chúng tôi:
Những style này nằm trong tập tin Normalize.cssĐể cải thiện việc render đối với các trình duyệt, chúng tôi sử dụng Normalize.css, một dự án được thực hiện bởi Nicolas Gallagher và Jonathan Neal. ContainersDễ 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 Sử dụng class Sử dụng class Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa.. Giới thiệuCác hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của Bootstrap hoạt động:
Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của bạn. Chúng tôi sử dụng các media query sau trong các tập tin Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng tôi. Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các media query này bằng cách thêm thuộc tính Các tùy chọn của lướiHãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau. Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpointsContainer widthNone (auto)750px970px1170pxClass prefix Ví dụ: Chồng theo hàng ngangSử dụng một tập hợp các class Ví dụ: Fluid containerChuyển đổi bất kỳ một bố cục lưới fixed-width nào thành một bố cục full-width bằng cách thay đổi 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ỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm 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 bố cục cơ động hơn nữa bằng cách sử dụng các class dành cho máy tính bảng .col-xs-12 .col-sm-6 .col-md-8 Reset cột responsiveKhi sử dụng 4 bậc (tương ứng với 4 mốc kích thước của màn hình) của hệ thống lưới, bạn sẽ gặp phải một vấn đề, đó là tại một mốc kích thước xác định, có thể sẽ có một cột cao hơn các cột khác trong cùng một hàng. Để sửa lỗi này, hãy sử dụng một class .col-xs-6 .col-sm-3 Ngoài việc clear các cột tại các mốc Responsive, có thể bạn cần thực hiện reset offset, push, hooặc pull. Hãy tham khảo the grid example để hiểu rõ hơn. Di 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 .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 Các cột lồng nhauĐể tạo ra các cột lồng nhau, Hãy thêm một Thứ 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 Các biến số và mixin LessNgoài các class của lưới được xây dựng sẵn để thuận tiện cho việc dựng bố cục một cách nhanh chóng, Bootstrap còn sử dụng các biến số và mixin Less để tạo ra các bố cục ngữ nghĩa đơn giản của riêng bạn. Biến sốCác biến số xác định số lượng cột, độ rộng và mốc kích thước media query. Chúng tôi sử dụng những biến này để tạo ra các class lưới (đã đề cập ở phía trên) cũng như là các mixin được liệt kê bên dưới đây. MixinsMixin đượ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. Ví dụ áp 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 mixin cùng 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 bố cục 2 cột với khoảng trắng ở giữa. Tiêu đềTất cả các thẻ tiêu đề của HTML, từ thẻ tới, đều sẵn có. Các class từSemibold 36px h2. Bootstrap headingSemibold 30pxh3. Bootstrap headingSemibold 24pxh4. Bootstrap headingSemibold 18pxh5. Bootstrap headingSemibold 14pxh6. Bootstrap headingSemibold 12pxBạn cũng có thể tạo ra các text khác đi kèm trong tiêu đề bằng thẻ h2. Bootstrap heading Secondary texth3. Bootstrap heading Secondary texth4. Bootstrap heading Secondary texth5. Bootstrap heading Secondary texth6. Bootstrap heading Secondary textBody(các đoạn văn) sẽ nhận khoảng căn lề dưới (margin-bottom) bằng một nửa line-height của chúng (mặc định là 10px). Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Làm nổi bật đoạn vănBạn có thể làm một đoạn văn trở nên nổi bật hơn bằng cách thêm class Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Xây dựng với LessTỉ lệ typograghy trong Bootstrap dựa trên 2 biến trong Less trong variables.less: Nhấn mạnhHãy sử dụng các thẻ nhấn mạnh mặc định của HTML với những style đơn giản. Text có kích thước nhỏĐể giảm tính nhấn mạnh cho các đoạn text hoặc khối text, hãy sử dụng thẻ This line of text is meant to be treated as fine print. In đậmĐược sử dụng để nhấn mạnh một đoạn text với giá trị font-weight cao. The following snippet of text is rendered as bold text. In nghiêngĐược sử dụng để nhấn mạnh một đoạn text với chữ in nghiêng. The following snippet of text is rendered as italicized text. Các phần tử thay thếBạn có thể tự do sử dụng các thẻ Các class căn chỉnhDễ dàng căn chỉnh lại các text với các thành phần khác bằng các class căn chỉnh text. Left aligned text. Center aligned text. Right aligned text. Justified text. Tên viết tắtSử dụng thẻ Tên viết tắt cơ bảnSử dụng thuộc tính An abbreviation of the word attribute is attr. InitialismThêm class HTML is the best thing since sliced bread. Địa chỉHiển thị thông tin liên hệ cho phần tử cha gần nhất hoặc cả . Để bảo toàn định dạng, hãy kết thúc tất cả các dòng bằng thẻ Twitter, Inc. Khối trích dẫnĐể 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. Khối trích dẫn mặc địnhHãy bọc một khối HTML bất kỳ mà bạn muốn trích dẫn bằng thẻ . ưu tiên sử dụng thẻ Cùng dòngKhi 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ẻ
...
Bạn cũng có thể thêm class Biến sốĐể chỉ rõ đâu là biến số, hãy sử dụng thẻ Đầu ra mẫuĐể chỉ rõ đầu ra mẫu của một chương trình, hãy sử dụng thẻ
This text is meant to be treated as sample output from a computer program. Tương thích với hầu hết các loại trình duyệtBảng kẻ sọc được style thông qua selector #First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter Bảng có viềnThêm class #First NameLast NameUsername1MarkOtto@mdoMarkOtto@TwBootstrap2JacobThornton@fat3Larry the Bird@twitter Bảng có dòng đổi màu khi hoverThêm class #First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter Bảng bó chặtThêm class #First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter Các class theo ngữ cảnhSử dụng các class theo ngữ cảnh để tô màu cho các dòng hoặc các ô trong bảng. ClassDescription #Column headingColumn headingColumn heading1Column contentColumn contentColumn content2Column contentColumn contentColumn content3Column contentColumn contentColumn content4Column contentColumn contentColumn content5Column contentColumn contentColumn content6Column contentColumn contentColumn content7Column contentColumn contentColumn content8Column contentColumn contentColumn content9Column contentColumn contentColumn content Bảng responsiveĐể tạo ra bảng responsive, hãy bọc phần tử có class #Table headingTable headingTable headingTable headingTable headingTable heading1Table cellTable cellTable cellTable cellTable cellTable cell2Table cellTable cellTable cellTable cellTable cellTable cell3Table cellTable cellTable cellTable cellTable cellTable cell #Table headingTable headingTable headingTable headingTable headingTable heading1Table cellTable cellTable cellTable cellTable cellTable cell2Table cellTable cellTable cellTable cellTable cellTable cell3Table cellTable cellTable cellTable cellTable cellTable cell Ví dụ cơ bảnCác thành phần của form (form-control) tự động nhận một số style chung. Toàn bộ các form-control Checkbox và radioCheckbox được sử dụng cho việc lựa chọn một hoặc nhiều tùy chọn trong một danh sách. Trong khi đó, radio được sử dụng cho việc lựa chọn 1 tùy chọn duy nhất. Mặc định (xếp chồng)Checkbox trên cùng dòngHãy sử dụng class SelectSử dụng tùy chọn mặc định hoặc thêm Các form-control tĩnhKhi bạn cần đặt một dòng text thuần bên cạnh một nhãn bên trong một form dàn hàng ngang, hãy sử dụng class . Input đang được focusChúng tôi loại bỏ Demo |
