1. Form
Quellcode -Datei:
_form.scss
mixins/_form.scss
1. Gemäß der Hierarchie: Formgruppe-> Form-Kontroll/Eingangsgruppe/Formstatikkontrolle-> verschiedene Tags
2. Container wie Formgruppen-/Form-Kontroll/Eingangsgruppe/Form-statische Kontrollkontrolle werden in zwei Anzeigemethoden unterteilt: Block und Inline-Block. Die Tabellenzelle wird verwendet, um die Eingangsgruppenebene zu erreichen.
.Input-Gruppe {Anzeige: Inline-table; vertikaler Align: Mitte; .Input-Gruppen-Addon, .Input-Gruppen-btn, .form-control {width: auto; }}3.. Eingabetruppe-Addon: Wenn die Klasse das Webseiten-Text-Symbol einfügt, werden das vorherige Pixel falsch ausgerichtet.
Lösung: Glyphicon kann nicht in Verbindung mit anderen Stilen verwendet werden, sondern intern verwendet, da Glyphicon 1 Pixel -Einstellung für Top hat:
. Glyphicon {Position: Relativ; Oben: 1PX; Anzeige: Inline-Block; Schriftfamilie: 'Glyphicons Halblinge'; Schriftstil: normal; Schriftgewicht: normal; Linienhöhe: 1; -Webkit-font-shoothing: Antialias; -moz-osx-font-selbler: Graustufen;}2. Navigationsleiste (NAVABAR)
Quellcode -Datei:
_navbar.scss
1. Teilen Sie hauptsächlich innere Bereiche wie Kopf, andere Bereiche; und Positionierung der Navigationsleistenstandorte
2. Die Ordnerimplementierung (in 4.0 entfernt), dh die Navigations-Kollapse-Klasse anstelle von Zusammenbruch, und eine versteckte Ebene taucht auf der Taste auf
2.1. NAVABAR-Kollapse: Wenn es größer als der Breakpoint ist, wird es angezeigt (da der Zusammenbruch standardmäßig versteckt ist)
3.. Inhalt unterstützt NAV, Marke, Form, Toggler
4. Naval-Toggler (4.0 entfernt): Setzen Sie an, wenn der Bildschirm geringer ist als der Breakpoint-Wert (768), und in 4.0 wird der Zusammenbruch verwendet, um diese Schaltfläche direkt anzuzeigen. Die Bildschirmgröße gibt es kein Grenzwert. Die Anwendung von Navi-Toggle sollte auch in Kombination mit dem Zusammenbruch verwendet werden.
5. Navi-statische Top: Es fügt nur Zindex hinzu, entfernt abgerundete Ecken, Grenzbreiten und andere Inhalte.
6. Navi-Fixed-Top/unten: Sie sind alle oben und unten positioniert, mit schwimmenden Effekten
7. Naval-Brand: Marke, Sie können Webseitennamen, Firmenlogos und andere Inhalte einfügen
8. Naval-Toggle: Ein Bild eines zum Schrumpfen verwendeten Klicks, das angezeigt wird, wenn es weniger als Breakpoint ist, und wenn es größer als dieser Wert ist, wird es versteckt (und das Umschaltdisplay ist richtig schwimmt und dient als relatives Positionierungselement):
.Navbar-Toggle {Position: Relativ; float: rechts; Margin-Right: $ navbar-padding-horizontal; Polsterung: 9px 10px; @include navbar-revertical-align (34px); Hintergrundfarbe: transparent; Hintergrundbild: Keine; // ungewöhnliche Firefox-on-Android-Standardstil zurücksetzen; siehe https://github.com/necolas/normalize.css/issues/214 BORE: 1PX Solid Transparent; Border-Radius: $ Border-Radius-Base; // Wir entfernen die "Umriss" hier, kompensieren aber später, indem wir `: hover` // Styles an`: focus` anhängen. &: Fokus {umriss: 0; } // balken .icon-bar {display: block; Breite: 22px; Höhe: 2px; Border-Radius: 1PX; } .icon-bar + .icon-bar {margin-top: 4px; } @media (Min-Width: $ Grid-Float-Breakpoint) {display: None; }}9. Navbar-Nav: Die ursprüngliche NAV hat einige kompatible Einstellungen vorgenommen. Sollten wir den Stil unter Breakpoint-Max und den Stil unter Breakpointg anpassen oder die Standard-Hintergrundfarbe, den Schatten usw. entfernen.
10. Navigationsform: Passen Sie hauptsächlich alle Formulare an Inline-Elemente an
11. Navbar-Text und Navbar-BTN: Beide haben die entsprechenden Kompatibilitätseinstellungen basierend auf dem Standardwert vorgenommen
12. Naval bietet zwei Themen: Standard und Inverse. Jedes Thema verfügt über die entsprechende Verarbeitung von Stilkompatibilität für seine jeweiligen Komponenten.
13. Die Navigationsleiste selbst hat nicht viele Stile. Es bietet nur zwei Inhalte: Umschüttung und Marke, hauptsächlich zwei Themen sowie eine Kombination von vier Komponenten: Dropdown, Zusammenbruch, Form und NAV.
Wenn Sie noch eingehend studieren möchten, können Sie hier klicken, um Ihnen ein wunderbares Thema zu lernen und anzuhängen: Bootstrap -Lern -Tutorial
Diese Reihe von Tutorials wurde zusammengestellt in: Bootstrap -Tutorials für besondere Themen, Willkommen, um zu lernen.
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.