Default Raster System:
The default raster system for bootstrap is 12 columns. A 940px wide container is formed, and the responsive layout is not enabled by default. If you add a responsive layout css file, the grid system automatically adjusts dynamically from 724px to 1170px depending on the width of the viewable window. In cases where the visual window is less than 767px wide, the columns will no longer be fixed and will be stacked in the vertical direction.
Simple layout: For a simple two-column layout, create a .row container and add the appropriate number of columns to the container .span* . Since the default is a raster of 12 columns, the .span* sum of the number of rasters spanned by all columns is 12 (or equal to the number of rasters of its parent container).
Offset: Add offset*, between 1-12. Move the column to the right to use the .offset* class. Each class adds columns for the specified units to the left margin of the column. For example, the .offset4 .span4 width of 4 columns is shifted to the right.
Nested columns: In the default raster system, you .span* can nest by adding a new one .row and adding columns to the existing ones .span* . The sum of columns in each column in the nested column is equal to the parent column.
Streaming Raster Systems:
The flow raster system uses percentages instead of pixels for the width of each column. It has the same responsive layout as a fixed grid system, ensuring that it can make the right adjustments to different resolutions and devices.
Basic streaming Raster HTML snippet
will be .row replaced with .row-fluid the ability to let any line "flow" up. The classes applied to each column do not have to be changed, so it is convenient to switch between streaming and fixed rasters.
defined in the same way as fixed grid systems: Add to any column you want to offset .offset* .
Streaming nested layouts
The nesting of fixed rasters is a bit different: the sum of the number of columns to be nested is equal to 12. This is because the streaming raster uses percentages to set the width of each column.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>The bootstrap Practice</title>6 <Linkrel= "stylesheet"type= "Text/css"href= "E:\bootstrap\css\bootstrap.css">7 </Head>8 <Body>9 <Divclass= "Row"><!--span4+span8=12, because Bootstrap is a raster of 12 columns by default, so up to 12 or equal to the number of rasters of its parent container -Ten <Divclass= "Span4">Hello</Div> One <Divclass= "Span8">Bootstrap</Div> A </Div> - <Divclass= "Row"><!--Offset (1-12) indicates the offsets. Offset2 offsets the span8 left by 2 columns - - <Divclass= "Span4">Hello</Div> the <Divclass= "Span8 offset2">The offset bootstrap</Div> - </Div> - <Divclass= "Row"> - <Divclass= "Span8"><!--Row is then included in row. Note the sum of the columns in each column in the nested column is equal to the parent column. - + bootstrap_example: - <Divclass= "Row"> + <Divclass= "Span3">Segmentation</Div> A <Divclass= "Span5">Instance</Div> at </Div> - </Div> - </Div> - <!--Streaming Raster Systems: The flow raster system uses percentages instead of pixels for the width of each column. It has the same responsive layout as a fixed grid system, ensuring that it can make the right adjustments to different resolutions and devices. - - <Divclass= "Row-fluid"> - <Divclass= "Span4">Fluid:hello</Div> in <Divclass= "Span7">Fluid:bootstrap</Div> - </Div> to <Divclass= "Row-fluid"># Flow-through offset + <Divclass= "Span4">Fluid:hello</Div> - <Divclass= "Span4 offset2">Fluid:bootstrap</Div> the </Div> * <Divclass= "Row-fluid"><!--the nesting of fixed rasters is a bit different: the sum of the number of columns to be nested is equal to 12. This is because the flow raster uses percentages to set the width of each column - $ <Divclass= "Span12">Panax Notoginseng fluid12 - <Divclass= "Row-fluid"> the <Divclass= "Span6"> + Fluid 6 A <Divclass= "Span6">Fluid6</Div> the <Divclass= "Span6">Fluid6</Div> + </Div> - </Div> $ <Divclass= "Span6">Fluid6</Div> $ </Div> - </Div> - </Body> the </HTML>
Bootstrap study notes (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
