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

Original author: Chris Sevilleja
  • Translation


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

Эта статья должна служить простым руководством по миграции с одного фреймворка на другой. Если вам нужна помощь в поиске нужного класса, то пусть эта шпаргалка вам поможет.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 20

    +6
    > Foundation имеет некоторые фичи, которых нет в Bootstrap.
    Ну так а фичи-то какие?
      –6
      Вот здесь можете прочитать, из их же блога.
        0
        Что я сделал не так?
          –1
          Обещали фичи. А фич нет.
            0
            Во-первых, я не автор статьи, я её переводил. Во-вторых, нигде автор никому не обещал рассматривать эти фичи, статья не об этом вообще.
      +1
      Вы сравниваете нейминг классов? :)
        +1
        Не я, а автор статьи.
        0
        Благодарю за наводку, а есть еще что-нибудь на том же уровне?
          +1
          Все хочу попробовать ZURB в каком-нибудь проекте, но всегда оказывается слишком поздно чтобы копаться в новом фреймворке :(
            +1
            Блин, ну почему у них на странице с примерами нажатие кнопки перекидывает вверх страницы? Неужели так сложно return:false везде проставить? Почему все забывают об этом?
              0
              или вместо href="#" написать javascript:void(0)
              • UFO just landed and posted this here
                • UFO just landed and posted this here
                  • UFO just landed and posted this here
                    • UFO just landed and posted this here
              +3
              Помнится, когда нужно было написать небольшой демонстрационный сайтик, я решил поесть кактус в виде незнакомой для меня связки laravel и foundation. Учитывая, что особо версткой не занимаюсь и бутстрапом пользовался по случаю — foundation очень понравился, хотя бы потому, что это не привычный глазу бутстрап. Особых трудностей не возникло благо документация хороша.
              В общем, я был бы рад, если хоть какая-нибудь часть разработчиков отказалась от бутстрапа в пользу зурба — хоть какое-то разнообразие :)
              Однако учитывая что все любят все делать в едином стиле, а какие-нибудь сторонние фреймворки так или иначе используют бутстрап — это маловероятно, имхо.
                0
                В общем, я был бы рад, если хоть какая-нибудь часть разработчиков отказалась от бутстрапа в пользу зурба.
                Ага, вы как в том ролике: переходите в Bolgenos, а то в винде скучные обои.
                Вот все вы бэкендщики одинаковы. Дали вам конструктор, осталось раскрасить — всё равно фантазии не хватает :)
                На то он и бутстрап, чтобы его потом закастомайзить. Но можно и готовое взять.

                Если же говорить об альтернативах, то все более-менее одинаковы. А если разницы нет, то мэйнстрим имхо всяко лучше.
                  0
                  Не забывайте, что foundation — это папа bootstrap.

                  У ZURB гигантское старое и верное комьюнити из проффессионалов и именно их работой был вдохновлён twitter.

                    0
                    я не переходил на болгенос, я просто его попробовал, чтобы сравнить винду и болгенос. но так как винда является неким стандартом, пусть и скучным, я вынужден пользоваться им — так как иначе получится каша из-за того, что бутстрап уже используется в других компонентах сайта и ввод нового фреймворка вызовет бурю эмоций у других участников проекта + придется либо осваивать, либо держать в голове два фреймворка сразу.
                  0
                  Для сетки Foundation еще есть классы {size}-pull-# и {size}-push-#.

                  Only users with full accounts can post comments. Log in, please.