Zurb Foundation — это крутой фронтэнд-фреймворк, являющийся достойной альтернативой бутстрапу, и стоит как минимум взглянуть на возможности Foundation, прежде чем отвергать его. Foundation имеет некоторые фичи, которых нет в Bootstrap.
Эта короткая статья является по сути шпаргалкой, призванной помочь разработчикам начать работать с Foundation после работы с Bootstrap. Мы сравним основные классы для обоих фреймворков. По большей части, оба фреймворка имеют набор основных компонентов (сетка, кнопки, формы, таблицы), ��од катом представлена таблица сравнения классов для этих компонентов.
Сравнение классов элементов
| Элемент | Bootstrap | Foundation |
|---|---|---|
| Alert | .alert .alert-success .alert-danger .alert-info |
.alert-box .success .warning .info .round .radius .secondary |
| Кнопки | .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-lg .btn-sm .btn-xs .btn-block |
.button .tiny .small .large .secondary .success .alert .radius .round .disabled .expand |
| Списки | .list-unstyled .list-inline |
.inline-list (также обнуляет стилизацию) |
| Labels | .label .label-default .label-primary .label-success .label-info .label-warning .label-danger |
.label .success .alert .secondary .round .radius |
| Таблицы | .table .table-striped .table-hover .table-bordered .table-condensed .active .success .info .warning .danger |
Таблицы стилизованы без возможности изменять стили с помощью дополнительных классов фреймворка. |
| Панели | .panel .panel-default .panel-primary .panel-success .panel-info .panel-warning .panel-danger |
.panel .callout .radius Нет других цветов и нет классов для добавления шапки панели. |
| Прогресс-бары | .progress-bar .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger .progress-bar-striped .active |
.progress .small-# .large-# .secondary .success .alert .radius .round |
| Утилиты для работы с текстом | .text-left .text-center .text-right .text-justify .text-nowrap .text-lowercase .text-uppercase .text-capitalize .text-muted .text-primary .text-success .text-info .text-warning .text-danger |
.text-left .text-right .text-center .text-justify .small-text-left (также работает для medium, large, xlarge) .small-only-text-left (также работает для medium, large, xlarge) .small-text-center (также работает для medium, large, xlarge) .small-only-text-center (также работает для medium, large, xlarge) .small-text-right (также работает для medium, large, xlarge) .small-only-text-right (также работает для medium, large, xlarge) .small-text-justify (также работает для medium, large, xlarge) .small-only-text-justify (также работает для medium, large, xlarge) |
| Классы для скрытия / отображения элементов |
.visible-*-block .visible-*-inline .visible-*-inline-block .hidden-xs .hidden-sm .hidden-md .hidden-lg |
.show-for-small-only (medium, large, xlarge, xxlarge) .show-for-small-up (medium, large, xlarge, xxlarge) .hide-for-small-only (medium, large, xlarge, xxlarge) .hide-for-small-up (medium, large, xlarge, xxlarge) .show-for-landscape .show-for-portrait .show-for-touch .hide-for-touch .hidden-for-small-only (medium, large, xlarge, xxlarge) .hidden-for-medium-up (large, xlarge, xxlarge) .visible-for-small-only (medium, large, xlarge, xxlarge) .visible-for-medium-up (large, xlarge, xxlarge) |
Сравнение классов для построения сетки
| Bootstrap | Foundation |
|---|---|
| .container .container-fluid .row .col-xs-# .col-sm-# .col-md-# .col-lg-# .col-xs-offset-# .col-sm-offset-# .col-md-offset-# .col-lg-offset-# |
.row .columns .small-# .medium-# .large-# .small-offset-# .medium-offset-# .large-offset-# |
Вывод
Интересно видеть, как каждый фреймворк решает определенные задачи. Foundation использует универсальные классы, такие как
.secondary, .success, .alert, .radius, и .round, в то время как Bootstrap добавляет к классам префиксы с названием элемента: .btn-, .alert-, и .panel-.Эту шпаргалку также можно использовать в качестве пособия для сравнения этих двух фреймворков. Например, Foundation имеет много классов для работы с видимостью элемента, а Bootstrap более гибок в плане построения таблиц.
Эта статья должна служить простым руководством по миграции с одного фреймворка на другой. Если вам нужна помощь в поиске нужного класса, то пусть эта шпаргалка вам поможет.
