1. Form
Source code file:
_form.scss
mixins/_form.scss
1. According to the hierarchy: form-group -> form-control/input-group/form-static-control -> various tags
2. Containers such as Form-group/form-control/input-group/form-static-control are divided into two display methods: block and inline-block. The table-cell is used to achieve the input-group level.
.input-group { display: inline-table; vertical-align: middle; .input-group-addon, .input-group-btn, .form-control { width: auto; }}3. Input-group-addon: If the class inserts the web page text icon, it will misalign the previous pixel.
Solution: glyphicon cannot be used in conjunction with other styles, but is used internally, because glyphicon has 1 pixel setting 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;}2. Navigation bar (navbar)
Source code file:
_navbar.scss
1. Mainly divide internal areas, such as head, other areas; and positioning navigation bar locations
2. The folder implementation (removed in 4.0), that is, the navbar-collapse class, instead of collapse, and a hidden layer pops up on the button
2.1. Navbar-collapse: When it is greater than breakpoint, it will be displayed (because collapse is hidden by default)
3. Content supports nav, brand, form, toggler
4. Navbar-toggler (4.0 removed): Set to display when the screen is less than the breakpoint value (768), and in 4.0, collapse is used to display this button directly. There is no limit on the screen size. The application of navbar-toggle should also be used in combination with collapse.
5. Navbar-static-top: It only adds zIndex, removes rounded corners, border width and other contents.
6. Navbar-fixed-top/bottom: They are all positioned above and below, with floating effects
7. Navbar-brand: Brand, you can put web page names, company logos and other contents
8. Navbar-toggle: A picture of a click used for shrinking, which will be displayed when it is less than breakpoint, and if it is greater than this value, it will be hidden (and, the toggle display is right floating and serves 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 compensatesate 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 has made some compatible settings. Should we adjust the style under breakpoint-max, and the style under breakpointg, or remove the default background color, shadow, etc.
10. Navbar-form: Mainly adjust all forms to be inline elements
11. Navbar-text and navbar-btn: Both have made appropriate compatibility settings based on the default
12. Navbar provides two themes: default and inverse. Each theme has the corresponding style compatibility processing for its respective components.
13. The navigation bar itself does not have many styles. It only provides two contents: toggle and brand, mainly providing two themes, as well as a combination of four components: dropdown, collapse, form, and nav.
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial
This series of tutorials has been compiled into: Bootstrap Basic Tutorials Special Topics, welcome to click to learn.
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.