Bootstrap the overall framework of the basic layout components _javascript skills

1 Basic Layout components

Based on the 12 grid system, Bootstrap also provides a variety of basic layout components.
CSS component, summarized as 8 types of styles:
Base style, color style, dimension style, status style, special element style, side-by-side element style, nested-element style, animated style

1.1 Basic styles

Basic style, generally including text font, color background, border, positioning, etc., such as the following warning box:

Source code
. Alert {
 padding:15px;
 margin-bottom:20px;
 border:1px solid transparent;
 border-radius:4px;
}

1.2 Color Styles

See Bootstrap's official website button btn or alert warning box will find many components default 5 color styles:
Primary (key Blue), success (successful green), info (information blue), warning (warning orange), danger (dangerous red)
http://getbootstrap.com/examples/theme/

Definition rule: Component name-color type, such as Btn-primary,alert-info

Source code
. btn-primary {
 color: #fff;
 Background-color: #337ab7;
 Border-color: #2e6da4;
}

1.3 Size Style

Bootstrap provides a quick set of dimensions for most components. General components include XS, SM, General, LG four sizes
Definition rule: Component name-dimensions, such as Btn-xs

Source code
. BTN-LG,
btn-group-lg > btn {
 padding:10px 16px;
 font-size:18px;
 line-height:1.3333333;
 Border-radius:6px
}
. BTN-SM,
. btn-group-sm > btn {
 padding:5px 10px;
 font-size:12px;
 line-height:1.5;
 Border-radius:3px
}
. Btn-xs,
. Btn-group-xs > btn {
 padding:1px 5px;
 font-size:12px;
 line-height:1.5;
 border-radius:3px;
}

1.4 State Style

When highlighted, use the active style, when disabled using the disabled style or the disabled attribute.

Source code
. btn:active,
. btn.active {
 background-image:none;
 outline:0;
 -webkit-box-shadow:inset 0 3px 5px rgba (0, 0, 0,.);
   Box-shadow:inset 0 3px 5px rgba (0, 0, 0,.);

1.5 Special element styles

A special element, that is, a particular type of component, typically uses only one or several fixed elements.
For example: Alert warning box generally has a warning title, content, close link elements; Common Li elements in Nav navigation

SOURCE
//alert The style of the connection inside
. Alert. alert-link {
 font-weight:bold;
}
Alert inside P element and UL element's bottom margin set
. Alert > P,
. Alert > UL {
 margin-bottom:0;
}
Between two paragraphs, increase the outer margin of a paragraph
. alert > P + p {
 margin-top:5px;
}
Increase the right inner margin to close the button
. alert-dismissable,
. alert-dismissible {
 padding-right:35px;
}
Close the button, right align
. alert-dismissable closed,
. alert-dismissible. Closing {
 position:relative;
 Top: -2px;
 Right: -21px;
 Color:inherit;
}

Source code
. Nav > li {
 position:relative;
 Display:block
}
. Nav > li > a {
 position:relative;
 Display:block;
 padding:10px 15px;
Nav > li > A:hover,
. Nav > li > A:focus {
 text-decoration:none;
 Background-color: #eee;
Nav > Li.disabled > a {
 color: #777;
}
. Nav > li.disabled > A:hover,
. Nav > li.disabled > A:focus {
 color: #777;
 Text-decoration:none;
 cursor:not-allowed;
 background-color:transparent;
}

1.6 Parallel element style

In many cases, a component needs to place multiple child elements, such as the navigation bar nav to place multiple Li elements, the button group can place multiple button elements.
General juxtaposition Element considerations: 1. Horizontal side-left and right margin (padding-left padding-right) and outer margin (Margin-left margin-right) 2. Vertical side-and-bottom margin (padding-top padding-bottom) and outer margin (Margin-top margin-bottom)

Source code
. Alert > P,
. Alert > UL {
 margin-bottom:0;
}
. Alert > P + p {
 margin-top:5px;
}



. Modal-footer. btn +. btn {
 margin-bottom:0;
 margin-left:5px;
}

1.7 Nested element style

There are special cases when you need to nest two identical or different components, for example, multiple button groups are used together, or buttons and Drop-down menus are used together.

You need to consider the use of nested elements. For example, when multiple group buttons are used together, you need to consider the floating direction and spacing

SOURCE
//eliminates conflicts caused by 1 pixel details between 2 buttons (or a button and another group of buttons)
. Btn-group. btn + btn,
. Btn-group. btn +. Btn-group,
Btn-group. Btn-group + btn,
. Btn-group. Btn-group +. Btn-group {
 margin-left: -1px;
}

1.8 Animation Styles

Animation styles are used in the progress bar progress components in Bootstrap.

<div class= "Progress" >
 <div class= "Progress-bar" style= "width:45%" > <span class= "sr-only"
  >45% complete</span>
 </div>
</div>

Note that use. Progress is the total progress bar, Progress-bar is the part of the progress bar, there are five kinds of colors progress-bar-success
Sr-only, the full name is screen reader only (for only) screens reader sometimes there are some elements that are only visually identifiable on the UI, such as the "Hamburger menu button", and only those with normal eyesight can clearly identify the role of these elements. It is impossible for people with disabilities, such as weak or blind, to know what these visual identity elements are. They use screen readers on the Internet, screen Reader (SR), which needs to find recognizable text descriptions and "read" them to the user.

Source code. Progress {height:20px;
 margin-bottom:20px;
 Overflow:hidden;
 Background-color: #f5f5f5;
 border-radius:4px;
   -webkit-box-shadow:inset 0 1px 2px rgba (0, 0, 0,. 1);
Box-shadow:inset 0 1px 2px rgba (0, 0, 0,. 1);
 }. progress-bar {float:left;
 width:0;
 height:100%;
 font-size:12px;
 line-height:20px;
 Color: #fff;
 Text-align:center;
 Background-color: #337ab7;
   -webkit-box-shadow:inset 0-1px 0 rgba (0, 0, 0,. 15);
 Box-shadow:inset 0-1px 0 rgba (0, 0, 0,. 15);
  -webkit-transition:width 6s Ease;
   -o-transition:width 6s Ease;
Transition:width 6s Ease; progress-striped. Progress-bar,. progress-bar-striped {background-image:-webkit-linear-gradient (45deg, Rgba (255, 255, 255, 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.) 75%, Transpar
 ENT 75%, transparent); Background-image:-o-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255 , 255,.) 50%, RGBA (255, 255, 255,.) 75%, transparent 75%, transparent); Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255,
 255, 50%, RGBA (255, 255, 255,.) 75%, transparent 75%, transparent);
   -webkit-background-size:40px 40px;
background-size:40px 40px;
  }. progress.active. Progress-bar, progress-bar.active {-webkit-animation:progress-bar-stripes 2s linear infinite;
   -o-animation:progress-bar-stripes 2s linear infinite;
animation:progress-bar-stripes 2s linear infinite; }. progress-bar-success {background-color: #5cb85c; progress-striped. progress-bar-success {background-image:-WEBK It-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,.) 50%, RG
 BA (255, 255, 255,.) 75%, transparent 75%, transparent); Background-image:-o-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255 , 255,. 15) 50%,RGBA (255, 255, 255,.) 75%, transparent 75%, transparent); Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255,
255, 50%, RGBA (255, 255, 255,.) 75%, transparent 75%, transparent); }. progress-bar-info {background-color: #5bc0de; progress-striped. progress-bar-info {background-image:-webkit-lin Ear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255
 , 255, 255, 75%, transparent 75%, transparent); Background-image:-o-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255
 , 255, 50%, RGBA (255, 255, 255,.) 75%, transparent 75%, transparent); Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255,
255, 50%, RGBA (255, 255, 255,.) 75%, transparent 75%, transparent); }. progress-bar-warning {Background-color: #f0ad4e; } progress-striped. progress-bar-warning {background-image:-webkit-linear-gradient (45deg, Rgba (255, 255, 255,. 15) 25 %, transparent 25%, transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent 75%, Transpar
 ENT); Background-image:-o-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255
 , 255, 50%, RGBA (255, 255, 255,.) 75%, transparent 75%, transparent); Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255,
255, 50%, RGBA (255, 255, 255,.) 75%, transparent 75%, transparent); }. Progress-bar-danger {background-color: #d9534f; progress-striped. Progress-bar-danger {background-image:-webkit -linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba
 (255, 255, 255,.) 75%, transparent 75%, transparent); Background-image:-o-linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.
 75%, transparent 75%, transparent); Background-image:linear-gradient (45deg, Rgba (255, 255, 255,.) 25%, transparent 25%, transparent 50%, RGBA (255, 255,
255, 50%, RGBA (255, 255, 255,.) 75%, transparent 75%, transparent);

 }

1.9 Summary

1. Usually 8 types of styles, need to combine use, such as setting the active state and also consider the color and size style, set the size of the elements and the situation, so from the top down, consider the need to write what kinds of styles.
2. There is also the style using the concept of CSS overload overlay, pay attention to the definition of the order, lest overload order error.

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.