Bootstrap Introductory Tutorial (i)

In 2011, Twitter's "handful" of engineers built a set of easy-to-use, elegant, flexible, and extensible front-end toolset--bootstrap for their products in their spare time in order to improve their internal analysis and management capabilities. Designed and built by Mark Otto and Jacob Thornton, Bootstrap quickly became the most Watch&fork project on the site after open source on GitHub. A large number of engineers enthusiastically contributed code to the project, the community was amazingly active, the code version evolved very quickly, the official document was extremely high (and elegant), and there were many sites based on the bootstrap construction: clean and concise interface, neat and tidy elements. As shown in the following:

https://kippt.com/

http://www.fleetio.com/

On GitHub This introduces bootstrap: a simple and flexible html,css,javascript toolset that can be used to architect popular user interfaces and interactive interfaces. Based on HTML5 and CSS3, Bootstrap has a number of attractive features: a friendly learning curve, excellent compatibility, responsive design, 12 grid, style wizard documentation, custom jquery plugin, complete class library, based on less etc. This series of tutorials follows the official document structure to introduce bootstrap, including the scaffolding (scaffolding), basic CSS, components, JavaScript plugins, using less and custom. This article mainly introduces the basic layout of bootstrap-- Scaffolding.

Bootstrap has established a responsive 12-column grid layout system, which introduces the fixed and Fluid-with two layout methods.  We are from the global style, grid system (grid systems), streaming grids (Fluid grids system), custom (customing), Layout (Layouts), responsive Design (responsive Design) These six five aspects in-depth explanation boostrap's scaffolding.

2. Global Style. Bootstrap requires a HTML5 file type, so it must be referenced at the beginning of each use of the bootstrap page:

   <! DOCTYPE html>At the same time, it uses the Bootstrap.less file to set the global layout and connection display style. It removes the body margin, using @basefontfamily, @baseFontSize, @linkColor variables to control the basic layout.

3. Grid systems (grids system)The default bootstrap grid system provides a grid of 12 columns up to 940 pixels wide. This means that the default width of your page is 940px, and the minimum cell feature width is 940/12px. Bootstrap can make your Web page better adapted to a wide range of terminal devices (tablets, smartphones, etc.). Default grid system Intuitive concept 1-1:                              & nbsp                          ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp                 Figure 1-1 Default grid system (defaults grid systems)         &NBSP ;                          ,         &NB Sp                          ,         &NB Sp &nbsp                          ,         &NB Sp                          ,         &NB Sp     The following simple code is implemented in Figure 1-1, the third column has a width of 4 and a width of 8 two div.

   <div class= "Row" >  <div class= "Span4" >...</div>  <div class= "Span8" >...</div> </div>

   2.2 the offset column. Sometimes, some whitespace is required in front of the page features, and Bootstrap provides an offset column to implement, as shown in 1-2:

   Figure 1-2 Offset column (columns)

   The following code implements the implementation of Figure 1-2, the first column with a width of 4 and an offset of 4 width 4 of the two Div.

   <div class= "Row" >  <div class= "Span4" >...</div>  <div class= "Span4 offset4" >...</ Div></div>

   2.3 Nested columns. Nested columns allow users to implement more complex page feature layouts.       Implementing nested columns in Bootstrap is simple, just add the . row and the corresponding length of the span* div to the original Div. 1-3 is shown below:

   Figure 1-3 Nested columns (Nesting columns)

   The following code implements the implementation of Figure 1-3, the first layer has a width of 12 and the second Layer two width 6 of the two Div.

   <div class= "Row" >  <div class= "Span12" > Level    1 of column    <div class= "Row" >      <div class= "Span6" >level 2</div>      <div class= "span6" >level 2</div>    </div>  </ Div></div>

   The sum of the nested div length cannot be greater than its parent div, or it will overflow the overlay. You can try to change the div length of the first layer to another value to see the effect.

4. Streaming grid systems (Fluid grid system).It uses a%, rather than a fixed px, to determine the width of the page features. Simply put. Row changes to. row-fluid , you can change the fixed line to fluid.1-4 as shown:                       &NB Sp                                  &NBS P                          ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp   Figure 1-4 Streaming grid systems (Fluid grid system)                         & nbsp                          ,         &NB Sp                                                            ,         &NB Sp                          ,         &NB Sp           The following code implements the streaming page features in Figure 1-4, two different lengths.

   <div class= "Row-fluid" >  <div class= "Span4" >...</div>  <div class= "Span8" >...</ Div></div>

   Nested streaming grids and nested fixed grids are slightly different. The child features of a nested streaming grid (Fluid nesting) do not match the width of the parent feature, which uses 100% to represent the width of the page that is full of the parent feature.

5. Custom grids (grid customization). Bootstrap allows you to customize the grid system by modifying the parameter values of the variables.less. The main include variables as shown in table 1-1:
   

   variables	Default Value	Description
   @gridColumns	12	Number of columns
   @gridColumnWidth	60px	Width of each column
   @gridGutterWidth	20px	Column Spacing

                            ,         &NB Sp                          ,         &NB Sp                         table 1-1 grid variables                                  ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp                          ,         &NBSp                          ,         &NB Sp               We implement a custom grid system by modifying the values above and recompiling the bootstrap. If you add a new column, you need to modify grid.less at the same time. Similarly, you need to modify the responsive.less to obtain multi-device compatibility.

6. Layout At the end of this article we discuss the layout of creating a page foundation template. As previously stated, Bootstrap offers two layout options, including fixed and flow (FLIUD) layouts. 1-5, fixed layout on left, fluid layout on right:                          &NB Sp                          ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp       Figure 1-5 layouts (layout)                         nbsp                          ,         &NB Sp                          ,         &NB Sp                                        ,         &NB Sp                          ,         &NB Sp   Fixed layout code as follows:

   <body>  <div class= "container" >    ...  </div></body>

   The streaming layout code is as follows:

   <div class= "Container-fluid" >  <div class= "Row-fluid" >    <div class= "span2" >      <!-- Sidebar content-->    </div>    <div class= "Span10" >      <!--Body content-->    </div >  </div></div>

   If you are not satisfied with the layout provided by Bootstrap, you can refer to the template provided by less Frame.

   Finally, once again , the official documentation is extremely good and highly recommended for direct reference and learning. Http://twitter.github.com/bootstrap/index.html

   References and extended reading:

   The origins and development of 1.Bootstrap. http://www.alistapart.com/articles/building-twitter-bootstrap/

   Introduction and comparison of 2.Less and sass. http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

   3.HTML5 Template http://html5boilerplate.com/

   4.HTML5 and Bootstrap Hybrid project (H5BP) https://gist.github.com/1422879

   5.2 Useful Bootstrap Resources http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/

   6.Bootstrap Button Generator http://charliepark.org/bootstrap_buttons/

   7. The front and back end are combined to discuss http://stackoverflow.com/questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap

   8. Bootstrap English Course http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

This work is authored by Ventlam and is licensed under the Creative Commons Attribution-NonCommercial use-share 2.5 Chinese mainland license agreement in the same way.

Bootstrap Introductory Tutorial (i)