Фонд Button Group
Фонд Button Group
Группа кнопок
Фонд может создать ряд кнопок в той же строке.
Вы можете использовать <ul> элемент и добавьте .button-group класс для создания группы кнопок:
примеров
<Li> <тип кнопки = " " "кнопка" класс => Apple , </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Samsung </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Sony </ Button> </ li>
</ UL>
Попробуйте »
Вертикальная кнопка группы
Вертикальная кнопка группы использование .stack класс для создания. Обратите внимание, что кнопка занимает всю ширину родительского элемента:
примеров
<Li> <тип кнопки = " " "кнопка" класс => Apple , </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Samsung </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Sony </ Button> </ li>
</ UL>
Попробуйте »
.stack-for-small класса для малого размера экрана, есть кнопки , расположенные по горизонтали становится выравнивание по вертикали:
примеров
<Li> <тип кнопки = " " "кнопка" класс => Apple , </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Samsung </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Sony </ Button> </ li>
</ UL>
Попробуйте »
Округлые группа кнопок
Использование группы Кнопка .radius и .round кнопок класса , чтобы добавить закругленные углы:
примеров
<Li> <тип кнопки = " " "кнопка" класс => Apple , </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Samsung </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Sony </ Button> </ li>
</ UL>
<Ul класс = "Кнопка-группа круглая">
<Li> <тип кнопки = " " "кнопка" класс => Apple , </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Samsung </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Sony </ Button> </ li>
</ UL>
Попробуйте »
Равномерное расширение группа кнопок
.even-num класс для ширины кнопки Кнопка группы и равномерное распределение по всей ширине родительского элемента 100%.
Num это количество кнопок в группе кнопок 1-8:
примеров
<Li> <тип кнопки = " " "кнопка" класс => Apple , </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Samsung </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Sony </ Button> </ li>
</ UL>
<Ul класс = "Кнопка-группа даже-5">
<Li> <тип кнопки = " " "кнопка" класс => Apple , </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Samsung </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Sony </ Button> </ li>
<Li> <кнопка тип = " класс =" "кнопка"> HTC </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => Huawei </ Button> </ li>
</ UL>
<Ul класс = "Кнопка-группа даже-8">
<Li> <тип кнопки = " " "кнопка" класс => A </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => B </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => C </ Button> </ li>
<Li> <кнопка тип = " кнопка" класс = "Кнопка"> D </ Button> </ li>
<Li> <кнопка тип = " класс =" "кнопка"> E </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => F </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => G </ Button> </ li>
<Li> <тип кнопки = " " "кнопка" класс => H </ Button> </ li>
</ UL>
Попробуйте »
Кнопка Выпадающее
Выпадающее Кнопка меню позволяет пользователю выбрать набор хорошее значение:
примеров
<A HREF = "#" данные -dropdown = "id01" класс = "button dropdown"> Выпадающее Кнопка </ а>
<! - Фактическое выпадающий ->
<Ul ID = данные "id01" -dropdown-классовое содержание = "F-выпадающий">
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 3 </ а> </ li>
</ UL>
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
Примеры аналитических
.dropdown класс для создания кнопки выпадающего меню.
Используйте с data-dropdown=" id " кнопки атрибута или ссылку , чтобы открыть выпадающее меню.
значение ID должно соответствовать содержанию (id01) выпадающее меню.
В <ul> Добавь .f-dropdown классов и data-dropdown-content атрибута для создания раскрывающегося меню содержимого.
Последний фонд инициализации JS.
кнопка Split
Мы также можем создать выпадающее меню расколу кнопки. Только вам нужно добавить кнопку .split класс и использовать элемент диапазона для создания кнопки в направлении , указанном стрелкой:
примеров
<SPAN данных выпадающий = "id01 "> </ SPAN>
</ Button>
<Ul ID = данные "id01" -dropdown-классовое содержание = "F-выпадающий">
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 3 </ а> </ li>
</ UL>
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
 | Подсказка: Позже в этом уроке мы узнаем больше о раскрывающемся меню есть знание. |
|---|