Behälter haben zwei Teile:
Die HTML -Struktur lautet:
<div class = "container">
<div class = "header"> </div>
<div class = "links"> </div>
<div class = "Middle"> </div>
<div class = "rechts"> </div>
<div class = "footer"> </div>
</div>
Und das CSS sollte von hier heruntergeladen werden.
Jeder Containerabschnitt kann einen anderen Container oder ein beliebiges HTML -Tag, Formular oder Komponente enthalten.
Sie sollten vermeiden, Komponenten in den Behälter zu setzen, jedoch aus einem Containerabschnitt heraus.
Die Standardgröße jedes Containerabschnitts lautet:
- Header: Breite: 100%, Höhe: 10% - links: Breite: 10%, Höhe: 80% - Mitte: Breite: 80%, Höhe: 80% - rechts: Breite: 10%, Höhe: 80% - Fußzeile: Breite: 100%, Höhe: 10%
Verwenden Sie unsere Klassen, um diese Standardgrößen zu ändern oder sogar einen Abschnitt nicht anzuzeigen.
Um keinen Abschnitt zu zeigen, verwenden Sie eine dieser Klassen: Keine , W00 , H00 .
Um eine weitere Breite zu definieren, verwenden Sie diese Klassen: W05 , W10 , W15 , W20 , W25 , W30 , W35 , W40 , W45 , W50 , W55 , W60 , W65 , W70 , W75 , W80 , W85 , W90 , W95 , W100 .
Um eine weitere Höhe zu definieren, verwenden Sie diese Klassen: H05 , H10 , H15 , H20 , H25 , H30 , H35 , H40 , H45 , H50 , H55 , H60 , H65 , H70 , H75 , H80 , H85 , H90 , H95 , H100 .
Die Anzahl in der Klasse ist der Prozentsatz, der auf den Containerabschnitt oder den Div angewendet wird.
Die Verwendung von Behältern ist möglich, um ein gewünschtes Layout zu erstellen.
Schauen Sie sich unsere Beispiele an, um zu verstehen, wie man Behälter benutzt.
Container haben auch viele Komponenten zu verwenden. Einige von ihnen verwenden nur CSS, um formatiert zu werden, andere verwenden JavaScript, um Aktionen über sich selbst zu implementieren.
Die in unseren Komponenten verwendeten Symbole wurden aus der fantastischen Desktop -Version der Schriftart entnommen und sind zum Download enthalten.
Diese Ikonen wurden manuell umbenannt, damit ihre Namen mit "Fa-" als Zuschreibung für ihre Eigentümerin: Schriftart fantastisch wurden.
Sie können dazu beitragen, dass Container erstaunliche Themen schaffen und zu unserem Repository gehen.
Spenden (Patreon) oder mit Vorschlägen.
===========================================================ieben -Unterstützte Browser (Mindestversion) [Kompatibilität: 92,73% der globalen gebrauchten Browser bei 2020-06-02]: ----------------------------------------------- Browser: Version: Plattform ----------------------------------------------- - Chrom: 49: PC/Mac - Chrom: 81: Android - Kante: 16: PC - Firefox: 34: PC/Mac - Firefox: 68: Android - Opera: 36: PC/Mac - Opera: 46: iOS, Android (Opera Mobile) - Safari: 13.1: Mac - Safari: 13.4: iOS - Samsung: 11.1: Android ----------------------------------------------- - unterstützte Browser? [Unbekannte Kompatibilität: 1,98% bei 2020-06-02]: - UC -Browser: 12.12: Android -Nicht unterstützte Browser [nicht kompatibel: 2,70% bei 2020-06-02]: - dh - Opera Mini - QQ Hinweis: Die Mindestversion wurde von https://caniuse.com übernommen Auf der Suche nach CSS -Funktionen, die wir verwenden. ===========================================================ieben