CSS style design of bootstrap learning notes (1) _javascript tips

As a result of the project needs, so I intend to study well under the bootstrap framework, before understand a little, the framework is not difficult, but the things involved are still a lot of, want to master it, or to practice more.

First, what is bootstrap?

What is BS? That is, the front page to build a standardized framework tool, has written a css.js style, just need to use it.

How do you use BS? It is mainly through the use of different classes to increase the effect of each type, the corresponding function is different.

BS Benefits: Increased development efficiency, more beautiful page design, support for responsive development. Download Address: Https://github.com/foreverjiangting/bootstrap

Learning Documentation: http://v3.bootcss.com/getting-started/

Second, CSS style design

1. Based on HTML documents

Bootstrap refers to some HTML elements, so the head needs to be written as the sample column shown below.

<! DOCTYPE html>---Contains HTML5 document declarations, all browsers open standard mode  

2. Grid system layout

The layout of the content by setting rows and columns. Bootstrap set the page to 12 columns. Layout by changing the number of columns, such as setting three columns of equal width:

<! DOCTYPE html>  

CSS network format has four kinds of writing, mainly applied to the resolution of different devices.

2: Translating columns

Use offset for panning. The number of columns that are translated

<div class= "container" ><!--or container-fluid-->
 <div class= "Row" >
  <div class= " Col-xs-4 ">11</div>
  <div class=" col-xs-4 ">22</div>
  <div class=" col-xs-offset-2 Col-xs-4 ">33</div>---33 translates two columns to the right
 </div>
 <div class=" Row ">
  <div class=" Col-md-4 ">11</div>
  <div class=" col-md-4 col-md-offset-2 ">22</div>
  <div class=" Col-md-4 ">33</div>
 </div> 
 <div class=" Row ">
 <div class=" col-md-4 ">11 </div>
 <div class= "col-md-4 col-md-offset-2" >22</div> 
 <div class= "col-md-4" >33 </div> 
 </div> 
</div>
<!--translation column-->

The effect is as follows:

33 because the translation of two columns, can not meet the requirements of 4 columns, it was squeezed to the next line began to occupy 4 columns. In short, it's the equivalent of moving the entire Div block right.

3: Nested columns

That is, the column is nested inside the grid column. We compare.

<div class= "container" ><!--or container-fluid-->
 <div class= "Row" >
  <div class= " Col-xs-8 ">
  <div class=" col-xs-2 ">11</div>
  <div class=" col-xs-4 ">22</div>
  <div class= "col-xs-2" >33</div>
  </div>
 </div>
 <div class= "Row" > 
  <div class= "col-xs-8" >11</div>
 </div>
 <div class= "Row" > 
  <div class= " Col-xs-4 ">11</div>
  <div class=" col-xs-4 ">22</div>
  <div class=" col-xs-4 ">33 </div>
 </div> 
 
</div>

The effect is as follows:

Did you find any problems? Why is the above not evenly distributed 8?
reason: Let's take a look at the debug console

Col-xs-1, col-xs-10,. col-xs-11, Col-xs-2, col-xs-3,. col-xs-4,. col-xs-5,. Col-xs-6,. Col-xs-8,. col-xs-9 {
 min-height:1px;
 padding-left:15px;
 padding-right:15px;
 position:relative;
}

found that both Padding-left and Padding-right are 15px, because there is a padding between columns and columns that is worth affecting, so why doesn't the second div have an effect? Let's explore the principle of the grid.
1. Line (row) must be included in .container (fixed width) or .container-fluid (100% width) to give it an appropriate arrangement (aligment) and an inner complement (padding).
2. padding create the interval between columns (gutter) by setting the Properties for Columns (column). It is offset by setting a negative value for an element so that it is offset by the .row margin .container padding
columns (column) that are included in line (row) indirectly padding .
Note : At this point the row has padding the column, so there is no padding value.

4: Column sort
How do you understand these two classes, mainly by using the col-xs-push-* col-xs-pull-* (* representing 0-11 digits)? Push to express pushing, pull to pull.

<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 chart is as follows:

 <div class= "col-xs-4 col-xs-push-8" >21</div>---for DIV1
 

Can be understood as exchanging both positions, need to push DIV1 to the right 8 columns, div2 need to Zola 4 columns.

Three, Flow grid layout
1. Use percent of column width instead of pixel
2. Replace the row class with Row-fluid
3. Other basic functions, like the fixed layout above, support the response type.
4. When dividing a column, as the flow layout uses a percentage, it should be calculated according to 6来.

Note that in this case, when you split the 8 columns, you are not setting it to two 4, but two 6, because the bootstrap is a 12-column grid distribution.
 <div class= "Row" >
 <div class= "col-xs-8" >
  <div class= "col-xs-6" >2</div>
  <div class= "col-xs-6" >2</div>
 
 </div>
 </div>

Here's a look at the application of streaming layouts, compared to fixed layouts.

<!--streaming layout-->
<div class= "container" > <div class= "
 col-xs-6" >333</div>
 < Div class= "col-xs-6" >444</div>
</div>
<div class= "Container-fluid" >--- Declares the Container-fluid class, indicating that the content is a streaming layout, which acts as a containing block to contain the streaming content
 <div class= "Row-fluid" >
  <div class= "Col-xs-6" Col-md-12 ">333</div>
  <div class=" col-xs-6 col-md-12 ">444</div>

 </div>
</div>

<div class= "Row-fluid" >----does not use declaring container and Container-fluid classes, this is the width of the screen <div class=
  " Col-xs-6 ">333</div>
  <div class=" col-xs-6 ">444</div>

</div>

When the screen is less than 768px, the effect is as follows:

When the screen is larger than 992px, the effect is as follows: At this time exclusive row

The Row-fluid class (very important) determines whether it is a flow layout. Then the contents block code is written in line with the grid system, still from col-md-1 to col-md-12, corresponding to the different percentages respectively.

Four, the response type design
In short, it supports the adaptive response of different devices (mobile, PC) resolutions (960PX,1366PX,978PX, etc.).

<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 less than 768px, the effect is as follows:

When the device is >=992px. The effect is as follows:

The above two kinds, respectively, represent different resolution. Col-md-12 now indicates that each column is an exclusive row, or 12 columns.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.