11 сентября 2014

Шпаргалка для сравнения классов Twitter Bootstrap и Zurb Foundation

Разработка веб-сайтовCSS
Перевод
Автор оригинала: Chris Sevilleja


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 более гибок в плане построения таблиц.

Эта статья должна служить простым руководством по миграции с одного фреймворка на другой. Если вам нужна помощь в поиске нужного класса, то пусть эта шпаргалка вам поможет.
Теги:csscss frameworksframeworkstwitterbootstrapzurbfoundationweb-developmentfrontend
Хабы: Разработка веб-сайтов CSS
+9
38,9k 265
Комментарии 20
Похожие публикации
Основы HTML и CSS
30 ноября 2020БесплатноНетология
Frontend-разработчик с нуля
30 ноября 202077 940 ₽Нетология
Разработка приложений на Kotlin
2 декабря 202020 900 ₽Нетология
Vue.js Продвинутая веб-разработка
11 января 202127 000 ₽Loftschool
Веб-дизайн
25 января 202115 000 ₽Loftschool
Лучшие публикации за сутки