Analysis on how to use form and navbar in Bootstrap

This article mainly explains in detail how to use form and navbar in Bootstrap. Interested friends can refer to it

1. Form(Form)

Source code file:
_form.scss
mixins/_form.scss

1. According to the hierarchical structure: 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 types Display mode: block, inline-block. Table-cell is used to implement 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 web page text icon is inserted into the class, it will be displaced by one pixel.

Solution: glyphicon cannot be combined with other styles, but is nested internally. Yes, because glyphicon has a 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)

_navbar.scss

2. Folder implementation (removed in 4.0), which is the navbar-collapse class. Instead of collapse, a hidden layer pops up on the button
2.1. Navbar-collapse: When it is greater than the breakpoint, it will Forced display (because collapse is hidden by default)
3. Content supports nav, brand, form, toggler
4. Navbar-toggler (removed in 4.0): set to display when the screen is smaller than the breakpoint value (768) , and in 4.0, collapse is used directly to display this button. There is no screen size limit. The application of navbar-toggle must also be used in combination with collapse.
5. Navbar-static-top: Just add zIndex and remove the rounded corners. Border width, etc.
6. Navbar-fixed-top/bottom: They are positioned above and below, with floating effects
7. Navbar-brand: Brand, you can put the web page name, company logo and other content
8. Navbar -toggle: The clicked image used for shrinking. It will be displayed when it is less than the breakpoint. If it is greater than this value, it will be hidden (and the toggle display is right-floating and used as a relatively positioned 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;
 }
}

10. Navbar-form: Mainly adjust all forms to be inline elements
11. Navbar-text, navbar-btn: All are compatible based on the default Settings
12. Navbar provides two themes: default and inverse. Each theme has corresponding style compatibility processing for its respective components.
13. The navigation bar itself does not have many styles, and it only provides toggle. , brand content, mainly provides two themes, and a combination of the four components dropdown, collapse, form, and nav.

How to use responsive tools using bootstrap

How to implement Table search box and query in Bootstrap

The above is the detailed content of Analysis on how to use form and navbar in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!