Bootstrap 2.0 – HTML+CSS+JS UI фреймворк


    Вышла новая версия офигительного UI фреймворка от Twitter — Bootstrap 2.0 Для тех кто не в курсе что это, настоятельно рекомендую ознакомиться. Этот набор позволяет создавать отличные шаблоны сайтов за считанные часы (проверено на собственном опыте) на основе готовых элементов и экономить килотонны нервов на адаптации кода под разные браузеры.

    Особенности Bootstrap:
    • Полный набор компонентов в виде стилей и анимаций поведения для элементов интерфейса
    • Поддержка возможностей HTML5, CSS3 (но при этом работает и в IE7!)
    • Поддержка идеологии 940-пиксельной сетки
    • Поддержка идеологии fluid-grid
    • Кросплатформенность — наборы стилей для десктопных и мобильных браузеров
    • Возможность кастомизации и добавления собственных стилей
    • Возможность добавлять jQuery плагины

    Мастхэв для верстальщиков и проектировщиков интерфейсов!
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 65

      0
      Да, клевую штука
      Правда, для ie7/8 не добавили поддержку responsive design, хотя можно было включить соответствующий костыль
        +63
        Вы еще скажите, что в шаблонах «горизонт завален» :-)

        image
          0
          Ну с горизонтом в шаблонах в целом все ок :)
          Просто если клиент просит адаптивный дизайн, то обычно подразумевается, что он должен работать максимально кроссбраузерно, да и костылей для ие7/8 в этом плане на текущий момент хватает.
          Комикс выше был бы актуален, если бы я написал что-то в духе «а где же скругленные уголки для ие7?!» :)
            +1
            Может они против костылей? >>максимально кроссбраузерно — тогда уже и ие6, а лучше сразу 5.5
              +1
              Ну не надо утрировать — достаточно ограничиться ие8.

              А если бы они отказались бы от костылей, то не юзали бы хаки вроде *display: inline; по всему цсс-коду.
                0
                это не хак, это фича!
              0
              т.е. если заказчик просит адаптивный дизайн, включая ИЕ6-7, то вы ему мирно покоряетесь несмотря на то, что сегодня ни один смартфон не несет на себе ИЕ6-7? ) Звучит как — кровь из носа, запустите мне Мак ось на Денди, плачу миллион )
            0
            Предполагаю, что это осознанное решение. Responsive в Internet Explorer не очень нужен. Вы видели тачфоны или планшеты с IE 7 или 8 на борту? :)

            Если очень нужно, можете попробовать Responsive фреймворк Zurb Foundation. С помощью него возможно делать адаптивно в IE 7/8.
            0
            Решил сегодгя воспользоваться BootStrap'ом, и тут через пару часиков новую версию выложили. Автор, большое спасибо за то что держите нас в курсе событий
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                Я сам случайно заметил сегодня и на Хабре публикаций на тему не было, вот и написал.
                • НЛО прилетело и опубликовало эту надпись здесь
                    +2
                    У вас под окном тоже может проходить много интересных личностей о которых вы никогда не узнаете.
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        но вы же ходите по улицам? быть может кто то не знает то что вы прошли у него под окном, и никогда про это и про вас не узнает.
              +6
              на них за фавикон, вконтакте в суд подать может :))
                +10
                Каким образом? Это же U+0412 cyrillic capital letter VE и U+0042 latin capital letter B, где тут сходство? :-)
                • НЛО прилетело и опубликовало эту надпись здесь
                    +1
                    у вк уже новый логотип
                      +1
                      решили с твиттером не судиться)
                      • НЛО прилетело и опубликовало эту надпись здесь
                      +1
                      Лично для меня версия 2.0 намного приятнее выглядит, видео что проработали серьезно. У меня лента на github в основном была забита коммитами и обсуждениями bootstrap.
                        0
                        Да, версия 2 выглядит гораздо проработанней и богаче. Использовал предыдущую в 2-х проектах — остались очень приятные впечатления от простоты использования. Не вспоминая уже о том, что bootstrap позволяет сосредоточится на разработке логики, полностью решая вопрос с дизайном. Не годится во всех случаях жизненных, но часто — это супер выход. Отличная работа!
                          0
                          Ухх, круто. Пользуюсь еще с версии 1.0.0:)
                            0
                            >Поддержка идеологии 940-пиксельной сетки

                            Насколько просто адаптировать под резиновую вёрстку с минимальной шириной 800 пикселей.
                              +1
                              Там есть bootstrap-responsive.css. Если его использовать, то не просто ширина сайта меняется от размера экрана, но еще и перестраивается структура сайта.
                              0
                              Да, всегда надеялся, но не знал.
                              Теперь знаю.
                                +5
                                Пожалуй самый лучший и комплексный css-фреймоворк на сегодняшний день.
                                  0
                                  Поддержка идеологии 940-пиксельной сетки

                                  Вы про 960-пиксельную верстку говорите?
                                    0
                                    ну по 10 пикселей маргина же? или я не прав?
                                    +2
                                    Небольшой совет тем, кто захочет использовать Bootstrap'ные иконки: они сохранены в растре, поэтому для разных размеров/цветов нужно делать новые спрайты. Лучше выбрать WebSymbols — они прилично выглядят (см. driversworld.us/app/feedback/), векторные, да и лицензия у них приятнее: www.justbenicestudio.com/studio/websymbols/
                                      0
                                      А можно поподробнее? Действительно, когда хочешь просто покрасить их в фотошопе (открываешь файл, меняешь режим на RGB, перекрашиваешь) то все равно какая-то фигня получается.
                                      +4
                                      Неплохая вещь для создания всяких админок =)
                                        +4
                                        Для прототипирования кстати тоже очень хорошая вещь.
                                        0
                                        zebra-striped таблицы убрали? :(
                                          0
                                            0
                                            Раньше был класс zebra-striped, при наведении на строчку, она подсвечивалась. Теперь же просто table-striped без ховера.
                                              0
                                              Да, я тоже этого не нашел. Печаль…
                                          +1
                                          Отлично, конечно. Только эти граждане по какой-то причине убрали где-то за неделю до релиза поддержку tablesorter.js. Зачем, почему — неизвестно. Но лично мне теперь придётся использовать отдельный less-стиль для него :(
                                            +1
                                            Интересно, придет ли однажды интернет к полной унификации интерфейсов?
                                              +9
                                              Да это просто: не придет
                                              0
                                              Что-то слышно про связку h5bp + bootstrap?
                                                0
                                                заманчивый фреймворк.

                                                для разработчиков Drupal будуть интересны базовые темы

                                                D6 drupal.org/node/1276060
                                                D7 drupal.org/project/twitter_bootstrap
                                                  0
                                                  Если доделают, я сегодня смотрел под D7 решение, наколеночная поделка
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                  0
                                                  Вторая версия в разы лучше.
                                                    +2
                                                    Жаль, не сделали подменю. Но в любом случае, смотрится по симпатичнее. На выходных займусь прикручиванием новой версии к django-admintools-bootstrap.
                                                      0
                                                      Автор, вочему есть пост про новую версию, а про отличия от предыдущей ни слова не написано? :)
                                                      0
                                                      Эх, даже не знаю, стоит ли в этом копаться, недавно начал использовать HTMLKickstart, вроде всем устраивает.
                                                        0
                                                        Мне больше нравится Bootstrap. Чисто визуально. ИМХО, создатели HTMLKickstart не совсем удачно содрали многие идеи с Bootstrap'a.
                                                          0
                                                          например?
                                                            0
                                                            Сравните Bootstrap'ные формы и HTMLKickstart'ные. Или кнопки. Или алерт-боксы.
                                                        +4
                                                        Не хватает пака «все в одном»: со скриптами и примерами. Тут нужно собирать свою верстку.
                                                          0
                                                            +3
                                                            Я о паке, при распаковке которого получаете все показанные элементы реализованы на 1й странице, где подключены все модули.
                                                          +1
                                                          Я не знаю как всем, но мне не удалось перенести bootstrap 1.0 проект на bootstrap 2.0. Они поменяли названия многих классов, в результате видим что видим.

                                                          Надо было сделать специальный пакет с плавным переходом для старых проектов.

                                                          А вообще порадовало. Спасибо.
                                                            0
                                                            Они заменили очень много названий, и даже в некоторых местах изменили разметку. Но в целом, все одно и тоже. В основном, будет много работы с переименовыванием классов в шаблонах/вьюшках.
                                                              0
                                                              А ещё они не оставили возможность посмотреть документацию старой версии, 1.4. :(

                                                              К сожалению, для тех проектов, которые всё ещё используют бутстреп 1.4, это фатально — например, наш новый верстальщик позавчера принялся за работу, с бутстрепом работает первый раз, а документации нет. Ему остаётся только догадываться, в какой разметке верстать. Да и все остальные тоже плохо помнят, какая разметка была.
                                                              Нам бы сейчас в срочном порядке переехать на новый бутстреп, но проект большой, и это большие трудозатраты. Да и для коммерческих проектов молниеносный апгрейд на новую версию только потому, что он *лучше* — неправильно. Эх.)

                                                              Может, у кого-то каким-то чудом всё-таки осталась документация по 1.4?))
                                                            0
                                                            Bootstrap2 не дружит с JCrop плагином для JQuery: где-то там пересекаются стили, в итоге в выделении корректно не отображается картинко. Так и не нашла варианта, как это пофиксить. ):
                                                              0
                                                              Столкнулся с этой же проблемой
                                                              Бутстрап выставляет всем img свойство max-width: 100%;
                                                              решил проблему переопределением свойства

                                                              img
                                                              {
                                                              max-width: none;
                                                              }


                                                                0
                                                                Спасибо вам, добрый человек. (:

                                                                Кстати, вы не подскажете, где можно подсмотреть решение с выравниванием элементов в блоке?

                                                                У меня есть конструкция вида: pastebin.com/iJ9D1yGh

                                                                Я так и не разобралась, каким образом я могу вот эти самые li выровнять по центру блока ul. Вообще в этом плане бутстрап очень слабо документирован. Вы не могли бы подсказать?

                                                                Спасибо.
                                                              0
                                                              Люди, а объясните, пожалуйста, почему они вывешивают для даунлоада буквально 6 файлов (js и css), хотя во всех их демках учавствует с десяток другой?
                                                              Я тут только что попытался запустить btn-group с радио эффектом. Уже час убил, толком не заработало.
                                                              Приходится лезть в сорцы страницы искать там все реальные .js файлы которые используются. Собираться их по крохам.
                                                              В общем, никогда не видел более издевательского «фреймворка»…
                                                                0
                                                                А скажите, как тут проектировать интерфейс? :) Я имею в виду, не верстать, а именно проектировать.
                                                                Получается, что через сразу вёрстку?
                                                                  0
                                                                  да там вроде можно скачать psd файл с элементами

                                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                  Самое читаемое