Вышел Twitter Bootstrap 2.2.1

[@korkholeh]

Супер!

[@codemake]

Вышли все те дополнения, которых не хватало раньше.
Респект.

[@s2d]

Да бутстреп — это мегавещь.
Мне, как дизайнеру, было очень просто разобраться и начать создавать прототипы сразу в хтмл, хотя до этого я никогда не верстал.

На мой взгляд очень сильно упростило разработку, если раньше я работал в такой последовательности:
— Прототип на бумаге
— Прототип в фотошопе
— Верстка
— Тестировние
— Ошибки опять правятся в фотошопе
— Снова отдается верстальщику

То теперь я стараюсь делать так веб проекты:
— Прототип на бумаге
— Верстка
— Тестировки и правки делаю я сам

В итоге большая экономия времени и готовая верстка без багов.
Идеально подходит для написания темплейта админки и прототипа клиентоориентированного сайта.
Есть конечно и минусы, это то что все проекты одинаковые на бутстрепе, да есть темплейты, но они все равно похожи, так как используют одни и те же элементы.

Но со своими задачами эта система справляется очень хорошо: а именно помогает создать быстро проект и не тратить время на всякий балшит)

[@PaulMaly]

> Есть конечно и минусы, это то что все проекты одинаковые на бутстрепе, да есть темплейты, но они все равно похожи, так как используют одни и те же элементы.

Не сказал бы что они такие уж одинаковые. Вот примеры шаблонов на основе бутстрапа:

Пример 1
Пример 2
Пример 3

[@s2d]

Это уже сложно назвать бутстрепом))
Это больше кастомный дизайн посаженый на скафолдинг от бутсрепа.

[@yurik417]

Скаффолдинг

[@PaulMaly]

Конечно это так, но ведь именно об этом речь. Бутстрап — это великолепный инструмент для прототипирования.
Далее, при необходимости, его стили могут быть перегружены кастомными, превратив изначальный прототип в конечный дизайн. ИМХО это очень сподручно, ведь на начальных этапах концентрация на форме убийственна, нужно думать о содержании. Бутстрап позволяет не тратить время на форму и в этом он является отличным инструментом для стартапера.

[@s2d]

Согласен на 100%. Вообще бы очень хотелось увидеть похожее решение для мобильного веба.

[@vitalets]

а jQuery Mobile не подойдет?

[@s2d]

Вся эта анимация, как в сенча тач, так и джиквери мобайл пока еще не поддерживается должным образом. Все очень сильно тормозит. Постоянно моргает и грузится.
Например нажать на любое меню в навигации: jquerymobile.com/demos/1.2.0/docs/about/platforms.html

• 1. Сначала идет лоайдер
• 2. Потом страница моргает
• 3. Потом пережимается
• 4. Затем сглаживаются шрифты.

Все это не имеет никакого смысла, лучше грузить страницу обычным старым хтмл методом. Эффект куда приятнее.

Плюс в этих двух платформах очень топорные дефолтные стили и непонятные шрифтовые решения, так уже никто не рисует. Бутстреп намного приятнее.

[@vitalets]

ок, спасибо за ответ!

[@fabiaN]

Отлично!

[@sparkle]

Что-то бутстрапа слишком много стало в последнее время. И на хабре и в вебе в целом.

[@grokru]

Бутстрапу всего год, то ли еще будет :)

[@sparkle]

Обидно, что из-за него веб становится немного однотипным.
Для прототипов все-таки хорошо подходит. Но чаще всего с дефолтной темой пускают проекты в продакшен…

[@Dr_Logic]

Раз пускают, значит не могу позволить себе разарботку кастомного дизайна. В таком случае акуратный бутстрап лучше чем ручной тяп-ляп

[@OKF]

Не обязательно разработку какого-то уникального дизайна.
Сам бутстрап позволяет себя неплохо кастомизировать. Для подбора цветов также существует множество ресурсов.

[@Dr_Logic]

Видимо и на это времени не хотят тратить, может быть просто из-за незнания, может просто нужен интерфейс, который работает с минимальными (стремящимися к нулю) затратами на его реализацию.

[@ozver]

Ну в случае с ручным тяп-ляпом хоть что-то творческое есть. Речь конечно не о розово-ядовито-зелёных мигающих текстах шрифтом Comic Sans, но можно же хоть что-то пытаться самостоятельно делать? К тому же, разметка становится всё проще, кроссбраузерных несовместимостей всё меньше…

[@Dr_Logic]

Согласен, но разве бутстрап как основа мешает проявлять творческий подход?

[@ozver]

Мешает конечно, люди совсем отвыкли что-то делать самостоятельно. Нет, я ни в коем случае не против Bootstrap но и его необходимо использовать с умом, так чтобы глаз радовался, а не тошнило от очередного твиттеро-подобного интерфейса, который кстати, довольно «тяжёлый» (то есть если вы его и используете — выкидывайте лишнее, оставляйте только то что вам нужно и добавляйте код по мере необходимости).

[@sparkle]

Я с вами абсолютно согласен.
Я к тому вообще, что разработчику с таким инструментарием порой становится настолько лень хоть что-то кастомизировать, что один от другого сайты на бутстрапе не отличишь.

Как написал товарищ ниже, есть платные wrapbootstrap.com и бесплатные решения вроде bootswatch.com.
Но даже к ним не сильно часто прибегают и оставляются все как есть из коробки.

[@bubuq]

bootswatch.com/

[@Softlink]

Поддерживаю. В последнее время бутстрап начал откровенно надоедать. Мало того, что почти любой верстальщик-блоггер считает своим долгом написать о том, какой же прекрасный, этот бутстрап, так еще стали делать сайты на нем, оставляя дефолтный стиль. Твиттер его сделал для демо-версии, а все и рады стараться.

[@Alinaki]

да хватит уже, я недавно админку для промо-проекта, который бессмысленно было писать на тяжёлой CMS, набросал за полчаса после серверной работы. Получилось красиво и аккуратно.

[@Goobs]

Ну юзайте например, только сетку, она там толковая. А кнопочки и формочки можно и кастомные нарисовать

[@Softlink]

Ну еще чего. Не вижу ни одной весомой причины, чтобы облениться до крайности, прекратить думать головой и клепать болванки как на конвейере. Это даже версткой не назовешь.
За сим откланиваюсь и предлагаю бутстрапперам за неимением реальной практики, хотя бы в целях расширения кругозора читать о новых технологиях, а-ля Flexbox и прочих.

[@Goobs]

Ай, ну вас…

[@Azy]

У вас кругозор как в гермошлеме лицом к стене.

Повзрослеете — поймете, что кроме нытья глупых верстальщиков и дизайнеров есть еще куча других параметров, по которым оценивается необходимость разработки или внедрения.

Хотя если так и стоять лицом к стене, то и не поймете.

[@motivateclock]

Только на днях наткнулся на инфу, что Монстры тоже стали делать шаблоны под bootstrap. Даже бесплатный пример выложили:) Так что есть надежда, что однотипности и дефолтности тем дадут достойный отпор.

[@Dr_Death]

Ну я тоже пустил, потому что сайт делался за выходные и для поисковиков :)

[@Zerstoren]

Зато это самая лучшая вещица для разработчика программера у которого на дизайн вообще руки из жопы растут.
К примеру меня бутстрап сейчас выручает просто страшно. Без него был-бы очередной унылый интерфейс.

Сначала я сам думал, нафиг фреймворк для CSS и так далее. Но потом уже оценил, что к чему и как.

[@OKF]

Именно так, я считаю, и нужно воспринимать подобные фреймворки.
Т.е. они в первую очередь предназначены не для профессионалов в верстке, а для тех кому нужен быстро сделанный и прилично выглядящий сайт или прототип. Ну и для админок он также хорош.

[@Zerstoren]

Я то хоть и умею верстать, но вот когда заходит за дизайн элементов — я полный профан и только такая вещица меня спасает.

[@yurik417]

Не вижу в этом ничего плохого. Сам бутстрапом не пользуюсь, но взял для себя у них несколько css и html строк

[@barkalov]

Уже 2.2.0, а sub-navbar (или как он там называется?) всё ещё в запрятан в исходниках документации.
Причём, по моим ощущениям, его оттуда руками выковыривает каждый второй.

[@turist_ua]

что за sub-navbar?

[@barkalov]

Хмм, кстати, sub-navbar из документации они выпилили. Заменив его навигацией слева. Жаль.

Раньше была полоска, которая прилипала кверху страницы (как обычный navbar) при скроллинге, при этом являясь как бы частью страницы, а не шапкой. Одна из киллер-фич Бутстрапа! Разработчики всё обещали её доделать до релиза, но никак не доделывали. Теперь, видимо, не сделают уже никогда.

Она была на всех демостраницах в документации, однако в самом Бутстрапе из коробки её (неожиданно) не было.

[@barkalov]

Вот так это раньше выглядело, поскролльте. (Typography Code Tables Forms Buttons Icons by Glyphicons)

[@vitalets]

Я раньше выковиривал)
а теперь просто второй nav ставишь и все…

[@barkalov]

И оно ведёт себя как sub-navbar? А можно пример, если не сложно? А то я что-то разобраться не могу, у меня просто два навбара получаются.

[@vitalets]

Мне как раз нужно было два нав-бара: верхний основной inverse, второй обычный.
пример ybe.demopage.ru
Возможно у нас требования к sub-nav разные)

[@Voenniy]

Впервые такое вижу.
При открытии ссылки
twitter.github.com/bootstrap/components.html#media

не увидел картинок (не подгрузились). Через консоль увидел что они лежат на сайте placehold.it/ который отдает 403 статус.
Открыв в броузере «картинку» placehold.it/260x180 увидел капчу.

Это вообще как?
Не могу понять, как можно вместо картинки (которая открывается на странице через тег отдать форму капчи?

[@psman]

Вы спрашиваете как технически можно отдать форму капчи или ??

[@Voenniy]

Не, технически я понимаю :)
Я про моральную сторону.

[@akurganow]

Placehold.it отдают контент через Cloudflare и в настроиках безопасности не выключили капчу, я им уже писал по этому поводу, но реакции ни какой.
Такое теперь на многих сайтах встречается.

[@Goobs]

похоже, поломался placehold.it. Жаль, хороший сервис был

[@iStyx]

Уже починили

[@macik_spb]

Нет, это от IP зависит. Я до сих пор ничего не вижу (надо сказать уже несколько недель).
Написал Бутстраперам — пусть меняют на нормальный сервис dummyimages.com.

[@HabraSvarog]

Хорошо, что добавили унифицированный «sticky-футер», у пользователей частенько возникали вопросы, как это лучше сделать. Так держать!

[@ShpuntiK]

В опере карусель не работает…

[@lkart]

У меня в Chrome 22 карусель не реагирует на клики по стрелкам для смены слайда. А сами слайды периодически начинают очень быстро бежать.

[@shpaker]

Вообще-то медиа не для комментов и твитов, а

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

А в целом новость конечно хорошая

[@reiser]

>Новый медиа-компонент для комментариев, твитов и др.

Медиа-компонент непонятный какой-то, не стилизован ни разу.

UPDATE: Он вовсе не для комментариев оказывается

[@de1vin]

В предыдущей версии их dropdown меню не работало если на странице присутствовал fancybox — анбиндилось событие на клик. Пришлось костыль писать. Интересно в этой версии починили?

[@turist_ua]

У меня и в предыдущей версии работало, вызывал fancybox.iframe из dropdown-меню

[@de1vin]

У меня ajax по ссылке подгружается. Завтра обновлюсь — проверю.

[@battrack]

Народ, просвятите темного человека. witter Bootstrap 2.2.0 — это что-то типа набора готовых сверстанных элементов, которые можно сразу брать и использовать? Или это уже готовые сверстанные шаблоны страниц?

[@Bonch]

Эх, жалко что мой пулл-реквест в этой версии не выпустили.

[@MikeLP]

В хроме слайдер сходит с ума. По крайней мере у меня.

[@merqlove]

Ха, шаблоны, как раз из того, над чем недавно карпел)
По поводу комментариев и твитов также правильная мысль.

Да и вообще молодцы, правильные вещи развивают товарищи!

[@Any1]

Вышло обновление до 2.2.1, карусели в 2.2.0 не работали

[@LordMicro]

Использую Bootstrap в своём проекте, но есть у него две проблемы, которые мне мешают:

1. нельзя открыть модальное окно из модального окна, т.е. отсутствие multiple modal(т.е. сделать такое можно — окно откроется, но firefox и chrome умрут от бесконечного цикла)
2. tooltip на TD, вставляется DIV после TD и создаётся пустая ячейка

Проблема 1.
Решается легко.
Вот Diff:

@@ -155,7 +157,7 @@
 
         this.escape()
 
-        $(document).off('focusin.modal')
+        this.$element.off('focusin.modal')
 
         this.$element
           .removeClass('in')
@@ -168,7 +170,7 @@
 
     , enforceFocus: function () {
         var that = this
-        $(document).on('focusin.modal', function (e) {
+        this.$element.on('focusin.modal', function (e) {
           if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
             that.$element.focus()
           }

Проблема 2.
Хотел её решить средствами CSS, но видимо либо мало опыта, либо через CSS это не решается. Мне виделся лишь один выход — вынести DIV за .
Предположил что возможно такая же проблема есть с UL/OL, но не проверял.
Вот Diff:

@@ -832,6 +832,8 @@
         , actualHeight
         , placement
         , tp
+        , list_els = {'table':2, 'ul':1, 'ol':1}
+        , ins_after_obj
 
       if (this.hasContent() && this.enabled) {
         $tip = this.tip()
@@ -847,10 +849,16 @@
 
         inside = /in/.test(placement)
 
+        ins_after_obj = this.$element;
+        
+        $.each(list_els, $.proxy(function(tag,max){
+            if(this.$element.parentsUntil(tag).length<=max) {ins_after_obj=this.$element.closest(tag);return false;}
+        }, this));
+        
         $tip
           .detach()
           .css({ top: 0, left: 0, display: 'block' })
-          .insertAfter(this.$element)
+          .insertAfter(ins_after_obj)
 
         pos = this.getPosition(inside)
 

P.S. Хочу эти правки внести в issue в github, но пока не успел это сделать(не до конца разобрался с github), поэтому если кто-то считает что эти изменения нужны и правильны — сделайте issue и напишите сюда, чтобы не было дубликатов, когда соберусь сделай свой issue.

P.P.S. Мой первый коммент, не судите строго :)

[@LordMicro]

Предположил что возможно такая же проблема есть с UL/OL, но не проверял.

Проверил. Проблемы нет, то есть никакой лишней пустоты не появляется, но семантически не верно держать DIV внутри UL/OL. Поэтому код выше решает эту маленькую проблему.