Bootstrap Document Learning

Just like the beginning of the elegant, intuitive, powerful front-end framework that makes web development faster and easier, Bootstrap gives me the feeling of using common layouts, components (navigation, lists, buttons, tables), as well as normalized colors and so on, while its traversal does not, he also supports the customization, using less, These variables are defined globally, allowing you to customize the area, while there are more icon plugins available. In the layout, better cater to the current market on the mobile side of the emergence of the flow grid, we do not have to consider to be compatible with different screen display. The framework Bootsrap is built on a 12-column responsive grid, layout, and components. Also based on HTML5 and jquery<! DOCTYPE html>so the file header must be HTML5 .

• The body was removed from themargin
• Set body the background color tobackground-color: white;
• Use @baseFontFamily , @baseFontSize , and @baseLineHeight attributes as the basis for our typography
• By @linkColor Setting the connection color of the global chain and applying the underline to the :hover case

then set some basic global display effects, typography, link styles in the scaffolding.less file . The overall layout is divided into two categories, and the position attribute is the same, divided into the default grid system and Flow grid system, the main difference is that the flow grid system is based on the percentage, each row is 12, this will say:1 Grid systemThe bootstrap grid (raster) system is used by default 12 Columns, a container with a width of 940px can be made without a responsive function. When you add a responsive CSS file, the grid adapts to the 724px and 1170px widths based on the viewport size. When the viewport is less than 767px wide, the column becomes streaming and is placed vertically up and down.

For a simple two-column layout, create one .row and add as columns with (appropriate) numbers .span* . Because this is a grid of 12 columns, each of .span* these 12 numbers, and the number of columns (spans) for each row must be equal to 12 (or equal to the parent).

1. <div class= "Row" >
2. <div class= "Span4" >...</div>
3. <div class= "Span8" >...</div>
4. </div>

In this example, we used the .span4 and .span8 , altogether is 12 columns, which form a complete line

Offset is the. offset* property, specifying the unit offset when nesting is required, in the default grid system, to implement nesting can be .span*Add a new one within the .rowand join .span*.  The sum of the number of columns that are nested is equal to the parent column. And of course it can be different. 2 Stream grid System The column width of the flow grid is used as a percentage, not a specific pixel value. It has the same ability to respond to fixed grid systems, with the key being that the different screen resolutions and devices can be displayed in the correct proportions. You only need to change the. Row to. Row-fluid, the property of the column is the same, the same offset is the same, but the nesting is a little different.the sum of the number of columns that are nested needs to be equal to 12. This is because the streaming grid is set to a percentage width, not a pixel value.3 Fixed layout container Create a streaming, two-column layout that requires only <div class="container-fluid">-This is ideal for websites that apply to programs and document classes. (But after testing, if divided into two columns, but the content will overlap)

1. <div class= "Container-fluid" >
2. <div class= "Row-fluid" >
3. <div class= "Span2" >
4. <!--Sidebar content-->
5. </div>
6. <div class= "Span10" >
7. <!--Body content-->
8. </div>
9. </div>
10. </div>

4 responsive design Of course, many times to detect how much screen users use, which requires us to detect, the use of responsive features more convenient

In your project file , add a meta tag as shown in the example and a responsive style sheet to start using the response. If you have compiled good one bootstrap on a custom page, simply add a meta tag.

1. <meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
2. <link href= "Assets/css/bootstrap-responsive.css" rel= "stylesheet" >

Attention! Bootstrap does not use the responsive feature by default, because it is not required in any case. We're not going to let the developer remove this feature, but it's best to use it when it's needed.

The two basic CSS basics of CSS include typesetting, code entry, forms, forms, buttons, images, and, finally, a lot of glyphicons icons for free. 1 Typesetting Bootstrap has modified the title H1-h6, as well as the global default font-size,line-hegiht and line spacing within the segment. A new definition of the highlighted paragraph. Lead <p class= "leads" >...</p> emphasis <small> <strong> <em> HTML5 <b> <i >align. Text-left. text-center. Text-rightEmphasis on color specification v color text-warning text-error text-info text-sucess abbreviation very bad, <abbr> use the Title property to display the initials enclosed in full write, <abbr title= "Attribute" &GT;ATTR&LT;/ABBR&GT; address management that was previously implemented with Link,<address> makes HTML more semantic, after all, HTML is Hypertext Markup language

1. <address>
2. <strong>twitter, inc.</strong><br>
3. 795 Folsom Ave, Suite 600<br>
4. San Francisco, CA 94107<br>
5. <abbr title= "Phone" >P:</abbr> (123) 456-7890
6. </address>

*CSS Cascading style sheet cascading style sheetsReferences <blockquote>

1. <blockquote>
2. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere Erat a ante.</p>
3. <small>someone famous <cite title= "Source title" >source title</cite></small>
4. </blockquote>

list does not change Order OL disorderly UL, of course there are a lot of added CSS,. unstyled no style,. Inline-block horizontal arrangement, 2 code because of the need for some special tags, such as <&gt, so added <code>for example, <code>&lt;section&gt;</code> should be Wrapped as inline 3 table add properties. table-striped add a spline inside the table, spaced one at a. table-bordered (fillet). Table-hover uses the suspend effect inside the table. Table-condensed is to halve the cell padding, Make tables more compactIt 's also four colors. Success. Error. Warning. info 4 FormLabel nameexample block-level Help text here. Check Me Out

1. <form>
2. <fieldset>
3. <legend>Legend</legend>
4. <label>label name</label>
5. <input type= "text" placeholder= "type something ..." >
6. <span class= "Help-block" >example block-level Help text here.</span>
7. <label class= "checkbox" >
8. <input type= "checkbox" > Check Me Out
9. </label>
10. <button type= "Submit" class= "BTN" >Submit</button>
11. </fieldset>
12. </form>

There are text boxes, drop-down menus, buttons many did not say, read the document yourself 5 buttonbtn btn-info btn-primary btn-success btn-warning btn-danger btn-inverse btn-linksize difference btn-large btn-small Btn-mini 6 ImagesChange the presentation style

7 Icons

All icons require a unique, prefixed label with icon- attributes. Use the <i> following code directly wherever you want it:

1. <i class= "Icon-search" ></i>

You can also use the opposite (white) icon, which prepares an extra attribute. We will show you the status effects of these properties on hover and active in the navigation bar and drop-down menus.

1. <i class= "Icon-search icon-white" ></i>

Attention! When using text, buttons or navigation links next to each other, in order to have an appropriate spacing, be sure to <i> leave a space in the back position.

 Three component components have drop-down menu, button Group, button-down menu, navigation (this use many), navigation bar, path is navigation, pagination, labeling and labeling, typesetting, ellipsis, notification, progress bar four plugin can be added individually (some may need to rely on), or all-in-one import.Bootstrap.jsOrBootstrap.min.jsAll plugins are included in the file. A lot of JS plugins, we can use a bit

Bootstrap Document Learning