Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "sample analysis of Bootstrap4.x layout system", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "sample analysis of Bootstrap4.x layout system" this article.

Layout introduction

Bootstrap4.x provides both .container and .container-fluid. These two ways are the most basic elements of enabling a layout grid system.

.container is solid adaptive with fixed width

.container-fluid is fluid 100% adaptive, and the width increases as the screen grows.

The adaptive response of Bootstrap4.x is as follows:

@ media (min-width:576px) small screen

@ media (min-width:768px) medium screen

@ media (min-width:992px) big screen

@ media (min-width:1200px) large screen

Grid system

Bootstrap4.x is based on a 12-column layout with 5 response sizes. Specifically use the rows, columns, and aligned contents of the div container to build a responsive layout. The grid occupies exactly 12 columns, more than 12 columns automatically wrap, and less than 12 columns cannot be 100%.

Eg:

A layout of one row and three columns

First column, second column, third column, grid level.

Bootstrap4.x has 5 grid levels, as shown in the following table:

Ultra-small screen

Small screen

Medium screen

Large screen

Large screen

Size = 576px > = 768px > = 992px. > = 1200px prefix .col-.col-sm.col-md-.col-lg-col-xl-

If two or more levels are used at the same time, follow the principle of mobility first

The first column, the second column and the third column are all the contents of the article "sample Analysis of Bootstrap4.x layout system". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.