Foundation Button-Group

Button-Group

Stiftung kann eine Reihe von Schaltflächen in der gleichen Zeile erstellen.

Sie können die Verwendung <ul> Element und fügen Sie .button-group Klasse eine Schaltfläche Gruppe zu erstellen:

Beispiele

<Ul class = "Taste-Gruppe ">
<Li> <Taste type = " Taste" class = "button"> Apple - </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Samsung </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Sony </ button> </ li>
</ Ul>

Versuchen »

Vertikale Knopfgruppe

Vertikale Knopfgruppe Verwendung .stack Klasse zu erstellen. Beachten Sie, dass die Taste, um die gesamte Breite des übergeordneten Elements umfasst:

Beispiele

<Ul class = "Taste-Gruppe Stapel">
<Li> <Taste type = " Taste" class = "button"> Apple - </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Samsung </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Sony </ button> </ li>
</ Ul>

Versuchen »

.stack-for-small Klasse für die kleine Größe des Bildschirms gibt es horizontal wird die vertikale Ausrichtung angeordnete Tasten:

Beispiele

<Ul class = "Taste-Gruppe Stack-for-small">
<Li> <Taste type = " Taste" class = "button"> Apple - </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Samsung </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Sony </ button> </ li>
</ Ul>

Versuchen »

Abgerundete Taste Gruppe

Button - Gruppe Verwendung .radius und .round Schaltfläche Klasse abgerundeten Ecken hinzuzufügen:

Beispiele

<Ul class = "Taste-Gruppe Radius">
<Li> <Taste type = " Taste" class = "button"> Apple - </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Samsung </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Sony </ button> </ li>
</ Ul>

<Ul class = "Taste-Gruppe Runde">
<Li> <Taste type = " Taste" class = "button"> Apple - </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Samsung </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Sony </ button> </ li>
</ Ul>

Versuchen »

Uniform Verlängerung Knopfgruppe

.even-num - Klasse für die Breite der Schaltfläche Gruppentaste und eine gleichmäßige Verteilung über die Breite des übergeordneten Elements von 100%.

num ist die Anzahl der Tasten in der Tastengruppe von 1-8:

Beispiele

<Ul class = "Taste-Gruppe selbst-3">
<Li> <Taste type = " Taste" class = "button"> Apple - </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Samsung </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Sony </ button> </ li>
</ Ul>

<Ul class = "Taste-Gruppe selbst-5">
<Li> <Taste type = " Taste" class = "button"> Apple - </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Samsung </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Sony </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> HTC </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> Huawei </ button> </ li>
</ Ul>

<Ul class = "Taste-Gruppe selbst-8">
<Li> <Taste type = " Taste" class = "Taste"> A </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> B </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> C </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> D </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> E </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> F </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> G </ button> </ li>
<Li> <Taste type = " Taste" class = "button"> H </ button> </ li>
</ Ul>

Versuchen »

Drop-Down-Taste

Drop-Down-Menü erlaubt, um den Benutzer die eingestellte guter Wert zu wählen:

Beispiele

<! - Lösen Sie die Dropdown - Liste ->
<A Href = "#" Daten -dropdown = "id01" class = "button dropdown"> Dropdown Button </ a>

<! - Die tatsächliche Drop - Down ->
<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down">
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>

Versuchen »

Beispiele für analytische

.dropdown Klasse ein Drop-Down - Menü - Taste zu erstellen.

Verwenden Sie mit data-dropdown=" id " - data-dropdown=" id " - Attribut Schaltfläche oder Link , um das Dropdown-Menü zu öffnen.

id - Wert muss den Inhalt (ID01) Pull-Down - Menü ein.

In der <ul> Fügen Sie in .f-dropdown - data-dropdown-content .f-dropdown - Klassen und data-dropdown-content - data-dropdown-content - Attribut Inhalt Dropdown-Menü zu erstellen.

Letzte Initialisierung Foundation JS.

Split-Taste

Wir können auch ein Split-Taste des Drop-Down-Menü erstellen. Nur müssen Sie die Schaltfläche hinzufügen .split Klasse und das span - Element verwenden , um einen Richtungspfeil - Taste zu generieren:

Beispiele

<Taste class = "Taste split" > Split - Taste
<Span Daten-Drop - Down = "ID01 "> </ span>
</ Button>

<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down">
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>

Versuchen »