A comprehensive analysis of the use of form and navbar in bootstrap _javascript techniques

One, forms (form)

Source file:
_form.scss
Mixins/_form.scss

1, according to the hierarchy structure: Form-group-> form-control/input-group/form-static-control-> all kinds of labels
2, Form-group/form-control/input-group/form-static-control, such as containers, divided into two types of display: block, Inline-block. and the realization Input-group level uses is Table-cell.

. input-group {
  display:inline-table;
  Vertical-align:middle;
  . Input-group-addon,
  . input-group-btn,
  . Form-control {
  width:auto;
  }
}

3, Input-group-addon: class if inserted in the page text icon, will be to the last pixel dislocation

Solution:Glyphicon cannot be combined with other styles, but it can be nested internally because Glyphicon has 1 pixel settings for top:

. glyphicon {
 position:relative;
 top:1px;
 Display:inline-block;
 font-family: ' glyphicons halflings ';
 Font-style:normal;
 Font-weight:normal;
 line-height:1;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}

Ii. navigation Bar (NavBar)

Source file:
_navbar.scss

1, mainly carried out within the Division of the region, such as: Head, other areas, as well as the positioning of the navigation bar position
2, the implementation of the folding (in 4.0 has been removed), that is, the Navbar-collapse class, instead of the collapse, pop-up hidden layer on the button above
2.1, Navbar-collapse: When greater than breakpoint, will be forced to display (because collapse default is hidden)
3, the content supports NAV, brand, form, Toggler
4, Navbar-toggler (4.0 Remove): Set in the screen is less than breakpoint value (768) display, and in 4.0 directly with collapse to show this button, no screen size restrictions, navbar-toggle applications to combine collapse use
5, Navbar-static-top: Just added ZIndex, remove the rounded corners, border width and so on.
6, Navbar-fixed-top/bottom: Are positioned above, below, has the floating influence
7, Navbar-brand: Brand, you can put the Web page name, company logo and other content
8, Navbar-toggle: For the contraction of the click of the picture, he will be less than breakpoint display, greater than this value is hidden (and, toggle display is right floating, and as relative positioning element):

 Navbar-toggle {position:relative;
 Float:right;
 Margin-right: $navbar-padding-horizontal;
 PADDING:9PX 10px;
 @include navbar-vertical-align (34PX);
 Background-color:transparent; Background-image:none; Reset unusual firefox-on-android default style;
 https://github.com/necolas/normalize.css/issues/214 border:1px solid Transparent;

 Border-radius: $border-radius-base;
 We remove the ' outline ' here and but later compensate by attaching ': hover '//styles to ': Focus '.
 &:focus {outline:0;
 }//Bars. icon-bar {display:block;
 width:22px;
 height:2px;
 border-radius:1px;
 }. Icon-bar +. Icon-bar {margin-top:4px;
 } @media (min-width: $grid-float-breakpoint) {display:none; }
}

9, Navbar-nav: The basis of the original NAV a number of compatible settings, the main is the Breakpoint-max under the style adjustment, as well as in the BREAKPOINTG under the style adjustment, or remove the default background color, shadow and other content
10, Navbar-form: The main adjustment of all form are inline elements
11, Navbar-text, NAVBAR-BTN: On the default based on the compatibility of the corresponding settings
12, NavBar provides the default, inverse two kinds of topics, under each theme to their respective parts have done the corresponding style compatible processing
13, the navigation bar itself, the style is not much, itself only provides toggle, brand two content, mainly provides two themes, as well as the dropdown, collapse, form, nav the combination of four parts.

If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

The above is the entire content of this article, I hope to learn JavaScript program to help you.