Кнопка Foundation
Кнопка Стиль
Фонд предлагает шесть стилей кнопок. .button класс создает синюю кнопку вместе с прокладкой. Различные цвета для класса кнопки: .secondary , .success , .info , .warning или .alert :
примеров
<Кнопка тип = класс "Кнопка" = "Кнопка"> По умолчанию кнопка </>
<Тип Button = "кнопка" класс = "Кнопка вторичного"> Вторичный </ кнопка>
<Кнопка тип = "кнопка" класс = "Кнопка успеха"> Успех </ кнопка>
<Кнопка тип = "кнопка" класс = "Кнопка информация"> Информация </ Кнопка>
<Кнопка тип = "кнопка" класс = "предупреждение кнопка"> Предупреждение </ кнопка>
<Кнопка тип = "кнопка" класс = "кнопка оповещения"> оповещения </ кнопка>
<Тип Button = "кнопка" класс = "Кнопка вторичного"> Вторичный </ кнопка>
<Кнопка тип = "кнопка" класс = "Кнопка успеха"> Успех </ кнопка>
<Кнопка тип = "кнопка" класс = "Кнопка информация"> Информация </ Кнопка>
<Кнопка тип = "кнопка" класс = "предупреждение кнопка"> Предупреждение </ кнопка>
<Кнопка тип = "кнопка" класс = "кнопка оповещения"> оповещения </ кнопка>
Попробуйте »
Класс Button можно использовать в <a> , <button> , или <input> элемент:
примеров
<A HREF = "#" класс = "button info" роли = "button"> Кнопка Link </ а>
<Кнопка тип = "кнопка" класс = "Кнопка Информация"> Кнопка </ кнопка>
<Тип входного = класс "Кнопка" = "Кнопка Информация" значение = "Input Button">
<Тип входного = "отправить" класс = "Кнопка Информация" Значение = "Отправить Кнопка">
<Кнопка тип = "кнопка" класс = "Кнопка Информация"> Кнопка </ кнопка>
<Тип входного = класс "Кнопка" = "Кнопка Информация" значение = "Input Button">
<Тип входного = "отправить" класс = "Кнопка Информация" Значение = "Отправить Кнопка">
Попробуйте »
 | Почему бы HREF тег #? Когда мы не хотим, чтобы прыгать и нажмите на ссылку, чтобы получить "404", мы можем установить тег HREF #. |
|---|
Размер кнопки
Мы можем использовать .large , .small или .tiny класс , чтобы установить размер кнопки:
примеров
<Тип Button = "кнопка" класс = "кнопка большой"> Большой </ кнопка>
<Кнопка тип = класс "Кнопка" = "Кнопка"> По умолчанию кнопка </>
<Тип Button = "кнопка" класс = "кнопка маленький"> Малый Кнопка </>
<Тип Button = "кнопка" класс = "кнопка крошечные"> Крошка </ кнопка>
<Кнопка тип = класс "Кнопка" = "Кнопка"> По умолчанию кнопка </>
<Тип Button = "кнопка" класс = "кнопка маленький"> Малый Кнопка </>
<Тип Button = "кнопка" класс = "кнопка крошечные"> Крошка </ кнопка>
Попробуйте »
кнопка Округлые
Вы можете использовать .radius и .round класс , чтобы установить круглую кнопку:
примеров
<Кнопка тип = класс "Кнопка" = "Кнопка"> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = "кнопка" класс = "радиус Кнопка"> Радиус Кнопка </ кнопка>
<Кнопка тип = "кнопка" класс = "круглая кнопка"> Круглые кнопки </ Кнопка>
<Кнопка тип = "кнопка" класс = "радиус Кнопка"> Радиус Кнопка </ кнопка>
<Кнопка тип = "кнопка" класс = "круглая кнопка"> Круглые кнопки </ Кнопка>
Попробуйте »
Кнопка расширения
Вы можете использовать .expand класс для установки кнопки на 100% широкополосного доступа:
примеров
<Кнопка тип = класс "Кнопка" = "Кнопка"> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = "кнопка" класс = "Кнопка расширения"> Expanded Кнопка </ кнопка>
<Кнопка тип = "кнопка" класс = "Кнопка расширения"> Expanded Кнопка </ кнопка>
Попробуйте »
кнопка Отключить
Вы можете использовать .disabled класс нажмите на кнопку Настройка не доступна:
примеров
<Кнопка тип = класс "Кнопка" = "Кнопка"> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = "кнопка" класс = "кнопка отключена"> Кнопка Отключено </ Кнопка>
<Кнопка тип = "кнопка" класс = "кнопка отключена"> Кнопка Отключено </ Кнопка>
Попробуйте »