Bootstrap framework and other framework layout techniques

Source: Internet
Author: User

Negative margins for two columns, three-column layout

Clear:both Clear Float

Two-column:
margin-right:-250px the right side of the content to the left 250px content
margin-right:250px to the left to apply a Div, and then set aside from behind 250px, so that the right overlay of 250px just two columns of layout


Three-column:
After the same two-column
margin-left:250px left the leftmost content floating, leaving 250px to themselves, while the middle of the content of adaptive, three-column form


Holy Grail layout:
feature, first write the middle part, the Grail part, and then write the left and right parts of the two sides, positioning the parent element: padding:0 200px 0 250px

Left: The left side of the margin-left:-100% is covered in the opposite part of the middle
Right: Right side of margin-right:-200%, opposite middle part.
Middle: position:relative relative positioning, removing the middle covering part of the left part
Three-column layout formation



960 grid Format Layout method:
At the resolution of 1024x768, when the width is 960, the resolution effect is the best
Typically there are 12 columns, 16 columns, and 24 column layout methods

12 columns: Pitch 20px, 60px per cell, three-format layout
16 Columns: Pitch 20px, 40px per cell, four-format layout
24 columns: Pitch 10px, 30px per cell, multi-format layout



Bootstrap framework is one of the most widely used frameworks, and it is a framework technology based on Jqury

Container container, in a body, can be side-by multiple, but generally only one, requires a fixed width
Fluid is 100% width

Row line, must be written in container, otherwise will run out of the page

Col column, col-xs-1, small on ultra small screen, accounting for 1 columns
Col-xs-push-2, under the ultra-small screen, according to the sibling element, push 2 lattice
Col-xs-pull-2, under the ultra-small screen, according to the sibling elements, pull 2 lattice
Col-xs-offset-2, for the front and rear positioning of the relative previous element, pushing 2 lattice

XS Ultra small screen pixel less than 700, mobile phone
SM small screen pixels in 768---more than 900, flat panel
MD Medium screen pixels between 900--1200, ordinary users
LG Super Large screen pixel above 1200, HD or Widescreen user

Bootstrap framework and other framework layout techniques

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.