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)

Source code file:

_navbar.scss

1. Mainly divide the internal areas, such as: head, other areas; and the position of the navigation bar Positioning

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

9. Navbar-nav: Some compatibility settings have been made based on the original nav. The main ones are the style adjustment under breakpoint-max and the style adjustment under breakpointg. Should they be removed? Default background color, shadow and other contents

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.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

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!