About the grid system principle of bootstrap3.0
This article mainly introduces the principles of the grid system of bootstrap3.0. It has a certain reference value. Now I share it with you. Friends in need can refer to it.
Bootstrap has a built-in set of responsive , a mobile-first fluid grid system that automatically divides into up to 12 columns as the screen device or viewport size increases. Here I call the grid system in Bootstrap the layout
Grid system (layout)
Bootstrap has a built-in responsive, mobile device-first fluid grid system. As the screen device or viewport size increases, the system will automatically divide it into up to 12 columns.
I call the grid system in Bootstrap a layout here. It creates a page layout through a series of combinations of rows and columns, and then your content can be placed into the layout you created. Here is a brief introduction to how the Bootstrap grid system works:
rows must be included in the .container in order to give them appropriate alignment and padding. Create a set of columns (cpumn) horizontally using rows. Your content should be placed within a column (cpumn), and only a column (cpumn) can be a direct child of a row (row). Predefined grid classes like .row and .cp-xs-4 can be used to quickly create grid layouts. Mixins defined in the Bootstrap source code can also be used to create semantic layouts. Create gaps (gutter) between columns (cpumn) by setting padding. Then offset the impact of padding by setting negative values for the first and last margin. Columns in a grid system represent the range they span by specifying values from 1 to 12. For example, three equal-width columns can be created using three .cp-xs-4.
DW6 coding implementation
Okay, let’s start writing the code. First, look at the editor I use in the previous picture. I used many tools when I was learning Html CSS in school.
Then create a new HTML document and select the type HTML5
After creating it, save it as the same as the previous section In the same directory of the js and css folders in the explanation.
layout.html is the file I just created. Bootstrap.html is also the first html page created in the previous section.
Now you can copy all the code in Bootstrap.html to the layout.html page.
Then add the following code under the body tag
<h1>Hello, world!</h1> <h2class="page-header">区域一</h2> <p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p> <h2class="page-header">区域二</h2> <p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p> <h2class="page-header">区域三</h2> <p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
Everyone should be able to understand these tags, they are the most basic and simple.
After adding, all the codes of the layout.html page are as follows
<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <!--Bootstrap--> <linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></p> <p><!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries--> <!--WARNING:Respond.jsdoesn'tworkifyouviewthepageviafile://--> <!--[ifltIE9]> <scriptsrc="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>> <scriptsrc="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>> <![endif]--> </head> <body> <h1>Hello,world!</h1> <h2class="page-header">区域一</h2> <p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p> <h2class="page-header">区域二</h2> <p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p> <h2class="page-header">区域三</h2> <p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p> <scriptsrc="js/jquery-2.0.3.min.js"></script> <scriptsrc="js/bootstrap.min.js"></script> </body> </html>
Of course the effect is very simple, I still put the screenshot for comparison.
Optimization 1: You can find that the page effect in the picture above takes up the full screen. We can center the above content through the Bootstrap style class.
<p class="container"> .........之前上面添加在body标签下的代码 </p>
The effect is as follows
#You can find that the container class sets the width and allows the content to be displayed in the middle of the page.
Optimization 2: Display the three areas in the same row and divide them evenly into three columns.
First add a container for the three areas, you can use p, and add a class for p
.
Then we add a container for each Also add a container p to a small area, and add a class for p
The simple code achieves the following effect
<p class="container"> <h1>Hello,world!</h1> <pclass="row"> <pclass="col-xs-4"> <h2class="page-header">区域一</h2> <p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p> </p> <pclass="col-xs-4"> <h2class="page-header">区域二</h2> <p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p> </p> <pclass="col-xs-4"> <h2class="page-header">区域三</h2> <p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p> </p> </p> </p>
The following
is indeed arranged in one column and then divided into three columns. Let’s combine the 6 principles of the grid system above. Do you understand a little bit? Anyway, I understand a lot. More complex grid layout pages can be created in the same way. Just add the corresponding grid layout class to the container used by the layout. For example, if the content occupies 6 grids, then add a cp-xs-6 class. If it occupies four grids, add a cp-xs-4 class, and then use the row class around the same row. container.
Summary
This section mainly studies the layout (grid system) and understands its working principle through simple examples.
The classes used are:
1..container: Use .container to wrap the content on the page to achieve center alignment. max-width is set for the container in different media queries or value ranges to match the grid system.
2..cp-xs-4: This class is divided into three parts through "-". The number in the third part is used as a general reference, and its range is 1 to 12. That is, an area can be divided into 12 columns. This must be used in conjunction with the row class.
In fact, this layout is very similar to the Table layout TR rows and TD columns in HTMl.
This is the temporary understanding. You can directly copy and paste the code to see the effect. Of course, you must first prepare the css and js files in advance.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
How to use CSS to maintain the aspect ratio of page content
##
The above is the detailed content of About the grid system principle of bootstrap3.0. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Windows 11: The easy way to import and export start layouts
Aug 22, 2023 am 10:13 AM
In Windows 11, the Start menu has been redesigned and features a simplified set of apps arranged in a grid of pages, unlike its predecessor, which had folders, apps, and apps on the Start menu. Group. You can customize the Start menu layout and import and export it to other Windows devices to personalize it to your liking. In this guide, we’ll discuss step-by-step instructions for importing Start Layout to customize the default layout on Windows 11. What is Import-StartLayout in Windows 11? Import Start Layout is a cmdlet used in Windows 10 and earlier versions to import customizations for the Start menu into
How to save desktop icon position layout in Windows 11
Aug 23, 2023 pm 09:53 PM
Windows 11 brings a lot to the table in terms of user experience, but the iteration isn't entirely error-proof. Users run into issues from time to time, and changes to icon positioning are common. So how to save desktop layout in Windows 11? There are built-in and third-party solutions for this task, whether it's saving the screen resolution of the current window or the arrangement of desktop icons. This becomes even more important for users who have a bunch of icons on their desktop. Read on to learn how to save desktop icon locations in Windows 11. Why doesn't Windows 11 save icon layout positions? Here are the main reasons why Windows 11 does not save desktop icon layout: Changes to display settings: Typically, when you modify display settings, the configured customizations
Guide to solving misalignment of WordPress web pages
Mar 05, 2024 pm 01:12 PM
Guide to solving misaligned WordPress web pages In WordPress website development, sometimes we encounter web page elements that are misaligned. This may be due to screen sizes on different devices, browser compatibility, or improper CSS style settings. To solve this misalignment, we need to carefully analyze the problem, find possible causes, and debug and repair it step by step. This article will share some common WordPress web page misalignment problems and corresponding solutions, and provide specific code examples to help develop
How to create a responsive carousel layout using HTML and CSS
Oct 20, 2023 pm 04:24 PM
How to create a responsive carousel layout using HTML and CSS Carousels are a common element in modern web design. It can attract the user's attention, display multiple contents or images, and switch automatically. In this article, we will introduce how to create a responsive carousel layout using HTML and CSS. First, we need to create a basic HTML structure and add the required CSS styles. The following is a simple HTML structure: <!DOCTYPEhtml&g
Introducing the window arrangement method in win7
Dec 26, 2023 pm 04:37 PM
When we open multiple windows at the same time, win7 has the function of arranging multiple windows in different ways and then displaying them at the same time, which allows us to view the contents of each window more clearly. So how many window arrangements are there in win7? What do they look like? Let’s take a look with the editor. There are several ways to arrange Windows 7 windows: three, namely cascading windows, stacked display windows and side-by-side display windows. When we open multiple windows, we can right-click on an empty space on the taskbar. You can see three window arrangements. 1. Cascading windows: 2. Stacked display windows: 3. Display windows side by side:
Syntax usage scenarios of contain in CSS
Feb 21, 2024 pm 02:00 PM
Syntax usage scenarios of contain in CSS In CSS, contain is a useful attribute that specifies whether the content of an element is independent of its external style and layout. It helps developers better control page layout and optimize performance. This article will introduce the syntax usage scenarios of the contain attribute and provide specific code examples. The syntax of the contain attribute is as follows: contain:layout|paint|size|style|'none'|'stric
Flexible application skills of position attribute in H5
Dec 27, 2023 pm 01:05 PM
How to flexibly use the position attribute in H5. In H5 development, the positioning and layout of elements are often involved. At this time, the CSS position property will come into play. The position attribute can control the positioning of elements on the page, including relative positioning, absolute positioning, fixed positioning and sticky positioning. This article will introduce in detail how to flexibly use the position attribute in H5 development.
Windows 11 keeps adding keyboard layouts: 4 tested solutions
Dec 14, 2023 pm 05:49 PM
For some users, Windows 11 keeps adding new keyboard layouts even if they don't accept or confirm the changes. The WindowsReport software team has replicated this issue and knows how to prevent Windows 11 from adding a new keyboard layout to your PC. Why does Windows 11 add its own keyboard layout? This usually happens when using a non-native language and keyboard combination. For example, if you are using a US display language and a French keyboard layout, Windows 11 may also add an English keyboard. What to do if Windows 11 adds a new keyboard layout you don't want. How to prevent Windows 11 from adding a keyboard layout? 1. Delete unnecessary keyboard layouts and click "Open"
