Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Flexbox Grid

A grid system based on the flex display property.

Responsive ( Reaktionsschnell )

Responsive Modifikatoren ermöglichen die Angabe unterschiedlicher Spaltengrößen, Offsets, Ausrichtung und Verteilung in den Darstellungsfeldbreiten xs, sm, md und lg.

<div class="row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

Fluid ( Flüssigkeit )

Prozentbasierte Breiten ermöglichen das Ändern der Größe von Spalten und Zeilen.

.col-xs-6 {
  flex-basis: 50%;
}

Simple Syntax

Alles, woran Sie sich erinnern müssen, ist Zeile, Spalte, Inhalt..

<div class="row">
    <div class="col-xs-12">
        <div class="box">12</div>
    </div>
</div>

Offsets

Versetzen Sie eine Spalte

<div class="row">
    <div class="col-xs-offset-3 col-xs-9">
        <div class="box">offset</div>
    </div>
</div>

Automatische Breite

Fügen Sie einer Zeile eine beliebige Anzahl von Spalten mit automatischer Größenänderung hinzu. Lassen Sie das Gitter es herausfinden.

<div class="row">
    <div class="col-xs">
        <div class="box">auto</div>
    </div>
</div>

Geschachtelte Gitter

Raster innerhalb der Raster innerhalb der Raster.

<div class="row">
    <div class="col-xs">
        <div class="box">
            <div class="row">
                <div class="col-xs">
                    <div class="box">auto</div>
                </div>
            </div>
        </div>
    </div>
</div>

Ausrichtung

Fügen Sie Klassen hinzu, um Elemente am Anfang oder Ende einer Zeile sowie am oberen, unteren oder mittleren Rand einer Spalte auszurichten.

.start-

<div class="row start-xs">
    <div class="col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.center-

<div class="row center-xs">
    <div class="col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.end-

<div class="row end-xs">
    <div class="col-xs-6">
        <div class="box">
            end
        </div>
    </div>
</div>

Hier ist ein Beispiel für die Verwendung der Modifikatoren in Verbindung mit der Erzielung einer unterschiedlichen Ausrichtung bei unterschiedlichen Ansichtsfenstergrößen..

Example
<div class="row center-xs end-sm start-lg">
    <div class="col-xs-6">
        <div class="box">
            All together now
        </div>
    </div>
</div>

.top-

<div class="row top-xs">
    <div class="col-xs-6">
        <div class="box">
            top
        </div>
    </div>
</div>

.middle-

<div class="row middle-xs">
    <div class="col-xs-6">
        <div class="box">
            center
        </div>
    </div>
</div>

.bottom-

<div class="row bottom-xs">
    <div class="col-xs-6">
        <div class="box">
            bottom
        </div>
    </div>
</div>

Verteilung

Fügen Sie Klassen hinzu, um den Inhalt einer Zeile oder Spalte zu verteilen.

.around-

<div class="row around-xs">
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
</div>

.between-

<div class="row between-xs">
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
</div>

Neuordnung

Fügen Sie Klassen hinzu, um Spalten neu anzuordnen.

.first-

1
2
3
4
5
6
<div class="row">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2 first-xs">
        <div class="box">
            3
        </div>
    </div>
</div>

.last-

1
2
3
4
5
6
<div class="row">
    <div class="col-xs-2 last-xs">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

Umkehren

.reverse

1
2
3
4
5
6
<div class="row reverse">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>