Bootstrap source code Analysis of form, NavBar

Form (form)

Source files:
_form.scss
Mixins/_form.scss

1, according to the hierarchical structure: Form-group, Form-control/input-group/form-static-control, all kinds of labels
2, Form-group/form-control/input-group/form-static-control and other containers, divided into two types of display: block, Inline-block. and to achieve input-group level with is Table-cell.

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

3, Input-group-addon: class if you insert a Web page text icon, the dislocation of the previous pixel


solution : Glyphicon cannot be combined with other styles, but internally nested, because Glyphicon has a 1-pixel setting for top:

{  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;}

Second, navigation bar (NavBar)

Source files:
_navbar.scss

1, the main internal area of the division, such as: Head, other areas, and 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, the button above the hidden layer popup
2.1, Navbar-collapse: When greater than breakpoint, will be forced to display (because collapse is hidden by default)
3. Content Support NAV, brand, form, Toggler
4. Navbar-toggler (4.0 removal): Set when the screen is less than breakpoint value (768) display, while in 4.0 directly with the collapse to show this button, no screen size restrictions, Navbar-toggle application should be combined with collapse use
5, Navbar-static-top: Just increase the zindex, remove the fillet, border width and other content.
6, Navbar-fixed-top/bottom: Are positioned above, below, there is a floating effect
7, Navbar-brand: Brand, you can put the name of the page, the company logo and other content
8, Navbar-toggle: Used for shrinking the clicked picture, he will be less than breakpoint when displayed, greater than this value is hidden (and, toggle display is right floating, and as a 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; see HTTPS://github.com/necolas/normalize.css/issues/214 border:1px Solid Transparent;Border-radius:$border-radius-base;//We Remove the ' outline ' here, 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 original NAV base for some compatibility settings, the main is under the Breakpoint-max style adjustment, as well as 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 is the inline element
11, Navbar-text, NAVBAR-BTN: All on the basis of the default to do a phase-compatible setting
12, NavBar provides the default, inverse two kinds of themes, under each theme of their respective parts have done the corresponding style compatible processing
13, the navigation bar itself style is not many, itself only provides the toggle, brand two content, mainly provides two kinds of themes, as well as the dropdown, collapse, form, nav four components of a combination.

Bootstrap source code Analysis of form, NavBar