Bootstrap learning Summary-css style design, bootstrap-css
Due to project requirements, I plan to take a good look at the bootstrap framework. I have learned a little about it before, but there are still a lot of things involved. If you want to master it, You need to practice more.
I. What is bootstrap?
What is bs? That is, the standard framework tool set up on the front-end page. The css. js style has been written and can be used only.
How to Use bs? It is mainly to increase the effect by using different classes. Each category has different functions.
Bs benefits: it increases development efficiency, makes page design more beautiful, and supports responsive development. : Https://github.com/foreverjiangting/bootstrap
Learning documents: http://v3.bootcss.com/getting-started/
Ii. css style design
1. Html-based documents
Bootstrap references some html elements, so the header must be written as the following sample column.
<! DOCTYPE html> --- contains HTML5 Document declaration. Standard mode is enabled for all browsers.
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
<! -- The above three meta tags * must be placed at the beginning, and any other content * must be followed! Make sure responsive layout is supported -->
<Title> Bootstrap </title>
<! -- New Bootstrap core CSS file --> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <! -- Optional Bootstrap topic file (generally not introduced) --> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <! -- JQuery file. Be sure to introduce it before bootstrap. min. js --> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <! -- The latest Bootstrap core JavaScript file --> <script src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</Head>
<Body>
<H1> Hello, world! </H1>
</Body>
</Html>
2: grid system layout
You can layout the content by setting rows and columns. Bootstrap sets the page to 12 columns. You can layout columns by changing their numbers. For example, you can set three columns of equal width:
<! DOCTYPE html> <Div class = "row">
<Div class = "col-md-4"> 11 </div>
<Div class = "col-md-4"> 22 </div>
<Div class = "col-md-4"> 33 </div>
</Div>
<Div class = "row">
<Div class = "col-sm-4"> 11 </div>
<Div class = "col-sm-4"> 22 </div>
<Div class = "col-sm-4"> 33 </div>
</Div>
<Div class = "row">
<Div class = "col-lg-4"> 11 </div>
<Div class = "col-lg-4"> 22 </div>
<Div class = "col-lg-4"> 33 </div>
</Div>
</Div> </body>Css grids are written in four ways, which are mainly used for the resolution of different devices.
2: translation column
Use offset for translation. That is, the number of translated Columns
<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> --- pointing 33 to the Right to translate two columns </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 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> <! -- Pan a column -->The effect is as follows:
33 because the translation of two columns does not meet the requirements of the four columns, It is squeezed into the next row to occupy four columns. In short, it is equivalent to moving the entire div block right.
3: Nested Columns
That is, columns are nested in the grid column. Let's look at the comparison.
<Div class = "container"> <! -- Or container-fluid --> <div class = "row"> <div class = "col-xs-8"> <div class = "col-xs-2"> 11 </div> <div class = "row"> "col-xs-4"> 22 </div> <div class = "col-xs-2"> 33 </div> <div class = "row"> <div class = "col-xs-8"> 11 </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>The effect is as follows:
Have you found any problems? Why is there no average 8 allocation above?
Cause: Let's take a look at the debugging console..col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative;}We found that padding-left and padding-right are both 15px. This is because there is a padding between the column and the column. Why is there no influence on the second div? Let's explore the principles of the fence.
1: "row" must be included in.container(Fixed width) or.container-fluid(100% in width) to give it an appropriate arrangement (aligment) and inner padding (padding ).
2: Set for "column"paddingAttribute to create the gap (gutter) between columns ). Pass.rowElement setting negative valuemarginTo offset.containerElementpaddingThis is indirectly offset by the "column" contained in "row ".padding.
Note: At this time, the row has offset the column padding. Therefore, the value of padding does not appear.
4: column sorting
How do I understand the two classes by using col-xs-push-* col-xs-pull-* (* representing numbers ranging from 0 to 11? Push indicates push, and pull indicates 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>As follows:<Div class = "col-xs-4 col-xs-push-8"> 21 </div> --- as div1
<Div class = "col-xs-8 col-xs-pull-4"> 24 </div> --- as div2 can be understood as the exchange of the two positions, the div1 needs to push 8 columns to the right, div2 needs to pull 4 columns to the left.
3. Streaming grid layout
1: Percentage of column width, not Pixel
2: Change the row class to row-fluid.
3: The other basic functions are the same as the above fixed layout and support responsive.
4: When a column is evenly divided, because the stream layout uses a percentage, it should be calculated according to 6.// Note the following: when dividing eight columns equally, it is not set to two 4, but to two 6, because the bootstrap contains 12 column raster distribution. <Div class = "row"> <div class = "col-xs-8"> <div class = "col-xs-6"> 2 </div> <div class = "col-xs-6"> 2 </ div> </div>Next, let's take a look at the application of stream layout.<! -- Stream layout --> <div class = "container"> <div class = "col-xs-6"> 333 </div> <div class = "col-xs-6"> 444 </div> </div> <div class = "container-fluid"> --- declare the container-fluid class, indicates that the content is a stream layout. Its function is to act as an inclusion block, to contain 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 class = "row-fluid"> ---- the container and container-fluid classes are not declared, the screen width is <div class = "col-xs-6"> 333 </div> <div class = "col-xs-6"> 444 </div>When the screen is smaller than 768px, the effect is as follows:
When the screen is larger than 992px, the effect is as follows: exclusive row The row-fluid class (very important) determines whether it is a stream layout. Then the content block code written inside is consistent with the grid system, still from col-md-1 to col-md-12, respectively corresponding to different percentages.
Iv. Responsive Design
To put it simply, it supports the adaptive response of different devices (mobile phones, PCs) at a resolution (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 smaller than 768px, the effect is as follows: when the device is greater than or equal to 992px. The effect is as follows:
The preceding two types indicate different resolutions. The col-md-12 indicates that each column excludes one row, that is, 12 columns.Author: Xiang tingfeng
Source: http://www.cnblogs.com/jtjds/p/5547261.html
If you think it is helpful to read this article, click the "recommendation" button. Your "recommendation" will be my greatest motivation for writing! You are welcome to repost it, but it is not prepared by the author.
I agreeAfter reprinting an article, the author must be clearly connected to the original article on the article page; otherwise, the legal liability is reserved.
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
