Analyse zur Verwendung von Formular und Navigationsleiste in Bootstrap

In diesem Artikel wird hauptsächlich ausführlich erläutert, wie das Formular und die Navigationsleiste in Bootstrap verwendet werden

Formular (Formular)

Quellcode Datei:
_form.scss
mixins/_form.scss

1. Nach hierarchischer Struktur: form-group -> /input-group/form-static-control -> Verschiedene Tags
2. Container wie Form-group/form-control/input-group/form-static-control sind in zwei Typen unterteilt Anzeigemodus: Block, Inline-Block. Table-cell wird verwendet, um die Eingabegruppenebene zu implementieren.

.input-group {
  display: inline-table;
  vertical-align: middle;
  .input-group-addon,
  .input-group-btn,
  .form-control {
  width: auto;
  }
}

3. Eingabegruppen-Addon: Wenn das Webseitentextsymbol in die Klasse eingefügt wird, wird es um einen Pixel verschoben

Lösung: glyphicon kann nicht mit anderen Stilen kombiniert, sondern verschachtelt werden intern. Ja, weil Glyphicon eine 1-Pixel-Einstellung für oben hat:

.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. Navigationsleiste (Navigationsleiste)

Quellcodedatei:
_navbar.scss

1. Hauptsächlich interne Bereiche unterteilen, z. B. Kopf, andere Bereiche und Position der Navigationsleiste Positionierung
2. Ordnerimplementierung (entfernt in 4.0), bei der es sich um die Klasse navbar-collapse handelt, wird auf der Schaltfläche eine ausgeblendete Ebene angezeigt
2.1 , wird die Anzeige erzwungen (da die Reduzierung standardmäßig ausgeblendet ist)
3. Der Inhalt unterstützt Navigation, Marke, Formular, Umschalter
4. Navbar-Toggler (entfernt in 4.0): Wird so eingestellt, dass er angezeigt wird, wenn der Bildschirm kleiner ist als Der Haltepunktwert (768) und in 4.0 wird „collapse“ direkt verwendet, um diese Schaltfläche anzuzeigen. Es gibt keine Bildschirmgrößenbeschränkung. Die Anwendung von „navbar-toggle“ muss auch in Kombination mit „collapse“ verwendet werden. 5. Navbar-static-. oben: Fügen Sie einfach zIndex hinzu und entfernen Sie die abgerundeten Ecken usw.
6. Navbar-fixiert-oben/unten: Sie werden oben und unten positioniert, mit schwebenden Effekten
7. Navbar-Marke: Marke, Sie können den Namen der Webseite, das Firmenlogo und andere Inhalte einfügen
8 . Navbar -toggle: Das zum Verkleinern verwendete angeklickte Bild wird angezeigt, wenn es größer als dieser Wert ist, und die Umschaltanzeige ist rechtsschwebend und wird als relatives Bild verwendet positioniertes 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. Einige Kompatibilitätseinstellungen wurden auf der Grundlage des ursprünglichen Navigationselements vorgenommen Anpassung unter breakpoint-max und die Stilanpassung unter breakpointg Sollten sie entfernt werden? Standardhintergrundfarbe, Schatten und andere Inhalte

10. Navbar-Formular: Passen Sie hauptsächlich alle Formulare an, um Inline-Elemente zu sein
11. Navbar-Text , navbar-btn: Alle sind basierend auf den Standardeinstellungen kompatibel
12. Navbar bietet zwei Themen, Standard und Inverse. Jedes Thema verfügt über eine entsprechende Stilkompatibilitätsverarbeitung für seine jeweiligen Komponenten
13. Die Navigationsleiste selbst hat keine Es gibt viele Stile und bietet nur Umschalten, Markeninhalte, hauptsächlich zwei Themen und eine Kombination aus den vier Komponenten Dropdown, Reduzieren, Formular und Navigation.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie reaktionsfähige Tools mit Bootstrap

So implementieren Sie das Tabellensuchfeld und die Abfrage in Bootstrap

Das obige ist der detaillierte Inhalt vonAnalyse zur Verwendung von Formular und Navigationsleiste in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!