CTO/Full-Stack Developer
0,0
рейтинг
21 августа 2012 в 05:19

Разработка → Вышел Twitter Bootstrap 2.1.0

image

Думаю расписывать о том, что из себя представляет данный фреймворк не надо, все и так знают.
Исправлено куча багов, добавлены новые компоненты и плагины.
Почитать документацию по нововедениям и увидеть их в действии можно тут.
По этой ссылке можно забрать релиз 2.1.0 в zip-архиве(только js и css с иконками).
Еще можно посетить официальный блог проекта и почитать о нововведениях.

Некоторые из нововведений:
  1. Появились субменю.
  2. Добавлен новый JavaScript плагин «Affix»(это как-раз то самое плавающее меню слева).
  3. Добавив к кнопке класс ".btn-block" можно растянуть ее по всей ширине.
  4. Улучшенная индикация «success», «warning» итд в таблице.
  5. Панель навигации теперь по умолчанию белая, но ее можно сделать темной как прежде, добавив класс ".navbar-inverse".
  6. Вроде нигде не упоминали что еще добавили несколько классов для картинок.


P.S. Самый первый релиз Bootstrap был ровно год назад. Сегодня разработчики собрались устроить вечеринку посвященную годовщине Twitter Bootstrap.
Даже не верится… фреймворку всего год, а какое широкое распространение он получил! Сколько дополнений и сервисов связанных с Bootstrap уже существует, и сколько в интернете сайтов использющих этот фреймворк…
Eugene @MechanisM
карма
46,5
рейтинг 0,0
CTO/Full-Stack Developer
Реклама помогает поддерживать и развивать наши сервисы

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

Самое читаемое Разработка

Комментарии (91)

  • +5
    Хорошо переработали документацию!
    • +4
      да, мне очень понравилось как они сделали «Example» блоки, и сделал по аналогии badger.
      Писал об этом разработчикам намекая что .badge который сейчас на вид и по сути просто переделанный .label, тогда как github.com/twitter/bootstrap/issues/3808 такой вариант выглядит намного лучше имхо. Там конечно не доделано, я набросал быстро. Копипастил с их css. Но потом у себя локально сделал по-другому.
  • +2
    У кого Chrome, советую почистить кэш — у меня поначалу выдал старый сайт с 2.0.4
    • +3
      Или просто Ctrl+F5
      • +1
        =) ну, да)
      • –5
        Просто F5 не достаточно? Зачем ctrl?
        • +1
          Если жмякните ctrl / shift то страница перезагрузится как будто с «Pragma: No-cache и „Cache-Control: no-cache“
          • –1
            Всегда F5 помогало, по этому и спросил.
            • +1
              Не минусовал.
              Называется «Hard Refresh», обычный F5 или клик по иконке «обновить» это «Soft Refresh».
              • +2
                Хабр такой хабр. 7 минусов и только один человек не поленился 2 строчки с пояснением написать. Гуру бл**ь.
              • +1
                Спасибо за нормальный ответ.
              • 0
                Кстати в хроме Ctrl+F5 работает как-то странно и иногда не помогает. Приходится совсем уж по-жесткому Ctrl+Shift+Del и «Очистить кэш».
                • 0
                  Попробуйте еще Shift+F5, но это алиас Ctrl+F5;
                  Также есть Pragma: No-cache с помощью Ctrl+Shift+F5, если я не ошибаюсь.
  • +2
    Что-то не то… подстава! Или мне кажется или он реально шустрей стал?
    Ладно дальше покопаюсь, а там видно будет.
  • +1
    Вот жеж, буквально на днях написал плагин с функционалом, подобным плагину affix
  • 0
    Как вовремя! Новый проект на обновленном и шустром бутстрапе!
  • +1
    Раздел LESS пропал, теперь это маленькая незаметная ссылка Extend под заголовком, но где скачать Bootstrap с LESS я с ходу ни разу не нашёл, к сожалению. Неудобно стало в этом плане с документацией.
  • +1
    Фреймворк хорош, но меня больше www.getskeleton.com привлекает.
    • 0
      Да, интересная штука но не хватает функционала.
      • 0
        Меня он как раз и привлекает своим минимализмом. Все, чего не хватает — можно прикрутить самому. Все основные вещи в нем есть. В общем, тут уже на вкус и цвет все фломастеры разные. Такие же противоречия возникают между любителями Gentoo Linux и монстрообразных дистрибутивов :)
        • 0
          Какие-то у вас сравнения. У меня у самого был фреймворк свой, похожий по функционалу на тот, что вы привели выше. Написан он был от скуки и за пару дней. Если уж выбирать — выберу бутстрап так как там ничего и прикручивать ненадо. А если что-то не нужно — кастомайзится сборка легко.
        • 0
          А кто мешает взять лишь нужное из Twitter Bootstrap то?
    • 0
      Я бы не решился что-то разрабатывать на основе проекта, который еле дышит. Ему примерно столько же, как Bootstrap, а состоялось всего-лишь несколько релизов с минорными изменениями.
      • 0
        Я бы Вас понял, если бы речь шла о серверной части. CSS фреймворки — каркас для построения своего дизайна. Для меня главное, чтобы он был актуален на сегодняшний день.
  • +3
    Народ, не закидывайте сразу помидорами, просто я еще пока немного не в теме. Этот фреймворк — это подборка готовых CSS-классов разных элементов, которые можно использовать в своих проектах?
    • +2
      Да, причем для разных разрешений экранов. А также полезные js лпагины
    • 0
      Там вот прям на главной такими большими буковками написано: Sleek, intuitive, and powerful front-end framework for faster and easier web development.
      • 0
        Ну, это рекламная речь, которая говорит про «зачем» вместо «как» — а battrack интересовался, какие в Bootstrap используются языки.
        • –1
          Этот фреймворк — это подборка готовых CSS-классов разных элементов, которые можно использовать в своих проектах?

          front-end framework for faster and easier web development

          По-моему это вполне точный ответ. Да и про языки не вижу, и судя по комментам не я один.
    • +2
      В первую очередь — ИХМО готовый дизайн (стили) который прикрутить к своим формам спискам и таблицам, и будет выглядеть как конфетка.
      • +2
        А вы знаете старую народную поговорку, что если говно скрестить с конфеткой, то получится говно? :)

        Нет, я не лично к вам, но не стоит уповать на то, что вот вы внедрите кнопочки из Бутстрапа — и ваш сайт преобразится. Всё должно быть уместно и в меру.
        • 0
          Увы обычно эта поговорка немного не работает…

          Бутстрап это все же неплохой способ быстренько набросать прототипчик верстки, ну или там админку делать на ней просто радость. А дизайн… мне вот стандартный не нравится, благо уже тьма сервисов по настройке оформления с возможностью превью.
        • 0
          Ну я пока уповаю и радуюсь. До сих пор было однозначно лучше, чем просто дефолтовый внешний вид.
  • 0
    Из нововведений — черная штука (панель) стала серенькой и побольше размерами. Т.е. если старый проект перевести на новую систему, то дизайн станет светлее.
    И примеры (такие как .brand) теперь на светлом фоне.
    • 0
      Это во первых хорошо, а во вторых — всегда можно это дело вернуть.
  • +1
    И ещё .controls-row вроде не было (http://twitter.github.com/bootstrap/base-css.html#forms), когда инпуты плавали
  • –14
    Так это же получается что сотни тысяч сайтов в нете будут иметь одинаковое оформление?
    И при чем тут твиттер? Это они делают этот фреймворк?
    • +21
      Лучше сотни тысяч таких одинаковых, чем сотни тысяч вырвиглазных.
      Да, они.
      • +3
        И на каждый апдейт на хабре будет такая цепочка комментариев :)
        • +2
          Мы должны на опыте учиться без устали проповедовать и разъяснять истину.
    • 0
      У многих сайтов на известных платформах (WordPress, DLE and etc.) оно и сейчас такое, а при использовании фреймворков, стиль может и будет одинаковый, но сама верстка сайта вряд ли повторится, если только не повторят умышлено, имхо.
      • –1
        Хочется думать, что адекватные разработчики стараются уникализировать свои труды, хотя бы через Customize =)
        • 0
          Мда. Из таких мыслей и получаются интерфесы вроде Nero.
        • +3
          уникализировать — тут без добавления кала не обошлось.
          • +1
            на самом деле сделать на бутстрапе что-то дельное и не сильно похожее на дефолтную тему занимает всего час, гибкий скаффолдинг по сетке, less… У меня сейчас висит один проект с версткой на Bootstrap, дизайнер постарался на славу, и оформление вроде бы более менее уникальное, и смотрится хорошо, и сверстать это на бутстрапе заняло всего пару дней. Словом, вина же не во фреймворке а в разработчиках.
            • 0
              Абсолютно согласен. Бутстрап потому и фреймворк, а не очередной шаблон с template-monster. Кстати, думаю на таких сайтах сейчас много появилось разных «скинов» на основе бутстрапа, ибо на нем действительно просто все делается.
    • +1
      Можно проявить немного фантазий и поиграться в разделе Customze. Или же less.
    • 0
      Берете less версию и ни в чем себе не отказываете… В итоге на прочном базисе фреймворка, можно без особого труда кастомизировать bootstrap в любое свое «нечто».
    • 0
      Ничто не мешает сделать свое оформление на базе Bootstrap. Посмотрите, например, Kippt или Fleetio.
      • –1
        Soglasen, nekotorie kopaut ne slishkom gluboko(dazhe ne smotryat v storonu papochki «less» i ne hotyat znat' chto mozhno s etim sotvorit) i shitaut chto bootstrap goditsya tolko dlya adminok =)
        odin iz sozdateley vimeo, zapuskaya svoi proekt, tozhe vospolzovalsya bootstrap.
  • 0
    О, как раз плавающее меню понадобилось.
    А пульсирующая кнопка Download Bootstrap по центру — разве доступна в форке?
    • +2
      Нет, пульсация описана в docs.css:
      /* Download button */
      @-webkit-keyframes downloadButton {
        from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
        50% {  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 25px rgba(0,68,204,.9); }
        to {   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
      }
      .masthead .btn {
        -webkit-animation-name: downloadButton;
           -moz-animation-name: downloadButton;
      }
      
  • –2
    А-а-а!
    Круто-круто!
  • +3
    Не понимаю, зачем меню второго уровня в документации вынесли в колонку. Раньше оно занимало одну полосочку сверху, а теперь треть окна.
    • +1
      >> Не понимаю, зачем меню второго уровня в документации вынесли в колонку.
      Полагаю, что это для демонстрации Affix’а
    • 0
      Согласен. Пространство стало менее рационально использоваться.
      Полезно было бы сделать элемент типа subnav, который при скролинге прикреплялся бы к верхней панели — как было в прошлых доков.
      • 0
        Ага, я как раз этот сабнав полюбил и использовал )
        • 0
          До, он удобный. Я тоже его из доков выковыривал)
  • +1
    CDN для Bootstrap http://netdna.bootstrapcdn.com/

  • +1
    C аккордеоном в IE 8, 9 явно какая то беда:
    • 0
      По ходу бага, там для чего-то хак стоит:
      .collapse {
        overflow: hidden;
        overflow: visible \9;
      }
      
  • +2
    Сколько дополнений и сервисов связанных с Bootstrap уже существует…


    А есть ли обзор лучших или просто интересных дополнений и сервисов?
  • 0
    Я использую Twitter Bootstrap и мне он нравится. Но я не подписан на его блог.
    Задумался, как так получилось?

    Да у него RSS, похоже, нет. Это вообще можно считать блогом, если без RSS?
    • 0
      Можно, вообще их блог — это простые html-страницы, сгенерированные Jekyll и использующие github-pages. Этакий минимализм :)
      • 0
        Минимализм это круто. уважаю.

        Как люди подписываются на такие блоги? Как-то через github?
        • 0
          Вот вам ссылка на Atom (думаю подавляющее большинство ридеров — поймут) Коммитов в Мастер ветку на Гитхабе
          github.com/twitter/bootstrap/commits/master.atom
          Я только за этим слежу. Плюс к каждому коммиту есть комментарий.
          • 0
            Мой ридер понял. Спасибо.
      • +2
        В принципе, можно было ведь и xml'ку для rss так же по шаблону генерить при обновлении :)
    • +1
      • 0
        Это хабрачудо!

        Хотя было бы лестно оказаться в числе «а few awesome folks». :)

        Спасибо!
  • 0
    Очень много нового и хорошего добавлено.
    Жаль только в Dropdowns так и оставили выпадение списка на клику, а не при наведении.
    • 0
      Если для себя — так форкните и пофиксите, опенсурс же:)
    • +4
      Вероятно для совместимости с touch-девайсам?
  • –2
    @baseFontSize заменили на 14px, как пошутил коллега, зрение у команды разработчиков садится, к Bootstrap v5 будут все 20px
    А еще раздел сайта где можно сделать Customize не работает.
  • 0
    А что за атрибуты aria-hidden и aria-labelledby у модального окна появились?
    Вроде, раньше не было их.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Интересно, когда Bootstrap сумеет в AutoGrow Textarea?
    • 0
      Форкните, пропатчите, вышлите им запрос на слияние.
  • 0
    В этих цветах на Ubuntu смахивает как-то.
  • 0
    До вчерашнего дня по какой-то непонятной причине обходил стороной эту штуку. Вчера сел, прочитал доки — заразился. Может быть, я сайт на нем полностью делать никогда и не буду, зато админки верстать с ним — самое то! На энтузиазме почти сделал сделал мини-crm для своего проекта с интерфейсом из bootstrap, думаю завтра закончить уже. До этого пользовался активно html5 boilerplate, но тут, очевидно, больше каких-то полезных стандартных вещей, заменяющих собой jquery.ui и boilerplate, так что для простых проектов и для быстрой разработки, когда суть приложения важнее оригинального внешнего вида, bootstrap, имхо, великолепно подходит…
  • 0
    Как обычно, порт для SAAS можно найти здесь:

    github.com/yury/bootstrap

    и gem для rails:

    github.com/anjlab/bootstrap-rails
  • 0
    В каталоге с CSS лежит файл error следующего содержания:

    A less error occured trying to build your bundle. Please paste the error below in an issue for us at github.com/twitter/bootstrap! thanks!

    {«type»:«Parse»,«message»:«Syntax Error on line 766»,«index»:24273,«filename»:«bootstrap.css»,«line»:766,«column»:31,«extract»:["// ------------------",".buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba (0,0,0,.25)) {"," // gradientBar will set the background to a pleasing blend of these, to support IE
    • 0
      тут два варианта: либо вы вписали неверное значение какого-то параметра на странице Customize, либо просто приложение по генерации кастомного css обновлялось во время вашего запроса. повторное формирование должно помочь
  • 0
    еще одна подборка плагинов к бутстрапу:
    superdit.com/2012/08/25/15-more-twitter-bootstrap-resources/

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