Summary of bootstrap learning experience-css style design sharing

 

Did you find any problems? Why is the above not evenly distributed 8?
 Reason: Let’s take a look at the debug console
 We found that padding-left and padding-right are both 15px. This is because the padding between columns is affected. So why is there no impact on the second div? Let's explore the principle of the fence grid.


1: A row must be contained in a .container (fixed width) or .container-fluid (100% width) to give it proper alignment and padding.

2: Create gutters between columns by setting the padding property for the column. By setting a negative margin for the .row element, the padding set for the .container element is offset.
 This indirectly offsets the padding for the "column" contained in the "row".
 Note: At this point row has offset the padding of the column, so there is no padding value.
4: Column sorting

Mainly using col-xs-push-* col-xs-pull-* (* represents numbers 0-11). How to understand these two classes? Push means pushing, and pull means pulling.
XML/HTML CodeCopy content to clipboard
 < div   class = "row" >             
                     < div   class = "col-xs-4" > 21 </ div >   
                     < div   class = "col-xs-8" > 24 </ div >             
      </ div >   
        < div   class = "row" >   
                
                     < div   class = "col-xs-4 col-xs-push-8" > 21 </ div >   
                     < div   class = "col-xs-4 col-xs-pull-4" > 24 </ div >     
             
      </ div >   
The effect diagram is as follows:
 <div class="col-xs-4 col-xs-push-8">21</div>---recorded as div1
 <div class="col-xs-8 col-xs-pull-4">24</div>---remembered as div2, which can be understood as swapping the positions of the two. Div1 needs to be pushed 8 columns to the right, and div2 needs to be pulled 4 columns to the left.

 Three: Fluid Grid Layout

1: Use percentages instead of pixels for column widths

2: Change the row class to row-fluid

3: Other basic functions are the same as the fixed layout above, and support responsiveness.

4: When dividing a column equally, since the flow layout uses percentages, it should be calculated according to 6.
 XML/HTML CodeCopy content to clipboard

//Note the following situation, when 8 columns are divided equally, it is not set to two 4s, but two 6s, because the bootstrap grid is distributed in 12 columns.
           < div   class = "row" >   
              < div   class = "col-xs-8" >   
                     < div   class = "col-xs-6" > 2 </ div >   
                     < div   class = "col-xs-6" > 2 </ div >   
                   
          </ div >   
      </ div >   

Four: Responsive Design
Simply put, it supports adaptive response to the resolutions (960PX, 1366PX, 978PX, etc.) of different devices (mobile phones, PCs).

XML/HTML CodeCopy content to clipboard


    
< div   class = "row" >      
    
                     
    
                         < div   class = "col-xs-6 col-md-12" > 21 </ div >      
    
                         < div   class = "col-xs-6 col-md-12" > 24 </ div >        
    
                     
    
           </ div >     



When the device is smaller than 768px, the effect is as follows: