LINUX.ORG.RU

Twitter Bootstrap 3.0

 , , ,


0

0

Сегодня, в день двухлетия Twitter Bootstrap, разработчики представили новую версию 3.0. Работа над ней велась долго — более девяти месяцев, у фреймворка много нововведений. Наиболее значимые нововведения перечислены ниже:

  • Новый упрощенный дизайн. В стиле flat с таким оформлением будет проще кастомизировать стандартную тему фреймворка.
  • Оптимизация для мобильных устройств: Bootstrap теперь всегда адаптивный, для удобства отображения любого сайта на маленьких экранах.
  • Новый кастомайзер: более удобный и функциональный.
  • Улучшенная блочная модель: везде используется box-sizing: border-box.
  • Новая система сетки: добавлено больше возможностей, четыре типа классов сетки — телефон, планшет, десктоп и большой десктоп.
  • Переписаны JavaScript плагины: много улучшений, в том числе в производительности.
  • Новые иконки Glyphicons: 40 новых и все в формате иконочного шрифта.
  • Улучшенный navbar для повышения адаптивности навигации сайта.
  • Модальные окна оптимизированы для просмотра на мобильных устройствах.
  • Добавлены новые компоненты, убраны устаревшие.
  • Улучшение кастомизации элементов — кнопок, таблиц, форм, уведомлений и т.д.
  • Убрана поддержка Internet Explorer 7 и Firefox 3.6: для корректной работы в IE 8 необходим Respond.js.

>>> Подробности

★★★★

Проверено: maxcom ()

Ответ на: комментарий от KRoN73

Чем же не подходит нынешний, уже работающий вариант?

Тем что не работает :)

Вот если бы твои мысли включили бы в спецификацию CSS, которая одна на весь мир, тогда и унификация была бы, а так... не взлетит

pihter ★★ ()
Ответ на: комментарий от KRoN73

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

Ничто не мешает сделать велосипед из руды.

в мемориз, однозначно.

h4tr3d ★★★★★ ()
Ответ на: комментарий от KRoN73

Так почему я должен заниматься рутинной вёрсткой в проектах, где дизайн — не главное? :)

Мысль наконец ясна :)

Но, имхо, вот как должен выглядеть проект, где дизайн - не главное: http://www.debian.org/

На верстку потрачено минут пять, от силы...

pihter ★★ ()
Ответ на: комментарий от anonymous

Настройка, адаптация

Ну не то. Не так кратко и емко. И, да, настройка в общем смысле и кастомизация - немного разные понятия. Адаптация - вообще мимо

pihter ★★ ()
Ответ на: комментарий от xorik

Делай пожалуйста, но при чем тут бутстрап? :)

Я это к тому что чтоб сделать мало колонок на мобилке и много на десктопе, совсем не обязателен волшебный сабж. Все уже укра^W придумано до нас. Неужели в сабже до сих пор было так нельзя?

pihter ★★ ()
Ответ на: комментарий от KRoN73

а не как http://users.i.kiev.ua/~bonovox/resume.htm

Сначала огнелис не пускал, говорит имеется информация что сайт атакует компьютеры, но когда я все-таки пробрался, у меня кровь из глаз пошла :)

pihter ★★ ()
Ответ на: комментарий от ForwardToMars

Какой профит тратить время, если можно взять бутстрап, где уже есть набор стилей?

Да, мне уже растолковали. Да так растолковали что мне уже и поковырять захотелось :)

pihter ★★ ()
Ответ на: комментарий от pihter

Там можно было, но переключение сводилось к тому, что строка либо занимает N столбцов, либо 100%. А теперь полная швабодка.

Vit ★★★★★ ()
Ответ на: комментарий от pihter

Но, имхо, вот как должен выглядеть проект, где дизайн - не главное

«Дизайн не главное» и «отсутствие дизайна» — это не синонимы. Bootstrap позволяет надеть вполне приличный дизайн и юзабельный, не заморачиваясь его разработкой. Что далеко не то же самое, что вообще не иметь дизайна :)

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

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

Да я уже проникся сей идеей и даже решил что в следующий раз, когда буду писать какой-нибудь веб-интерфейс, где дизайн - совсем не главное, попробую заюзать сабж. Ибо, а почему нет, вдруг понравится? :)

У меня сразу небольшой вопрос, о какой такой компиляции речь тут? Предполагается что что-то будет «компилироваться» в готовый шаблон + .css-ник к нему + .js-ник к ним?

pihter ★★ ()
Ответ на: комментарий от KRoN73

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

Ничто не мешает сделать велосипед из руды.

You make my day…

renya ★★★★★ ()
Ответ на: комментарий от pihter

У меня сразу небольшой вопрос, о какой такой компиляции речь тут?

Bootstrap изначально пишется в LESS. И в CSS компилируется из более высокоуровневых исходников. Соответственно, с сайта качаешь или готовый к использованию скомпилированный CSS или, если хочешь что-то унифицированно поменять, то исходники в LESS.

KRoN73 ★★★★★ ()

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

Komintern ★★★★★ ()
Ответ на: комментарий от pihter

Неужели в сабже до сих пор было так нельзя?

ЕМНИП нельзя. Там был один набор классов для колонки span*, например span3, означал 3 колонки на десктопе и одну на мобилке. В этой версии полностью систему колонок переделали

xorik ★★★★★ ()
Ответ на: комментарий от KRoN73

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

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

anonymous ()
Ответ на: комментарий от KRoN73

Я, как программист, не понимаю, почему я должен тратить время на _искусство_ вёрстки?

А я не понимаю, какое отношение к HTML и CSS ты имеешь вообще, раз ты программист? Вёрстку в движок встраивают верстальщики, а не программисты.

anonymous ()
Ответ на: комментарий от KRoN73

Ну как же не ставил? А для чего, по-твоему, создаются CSS-фреймворки? Их-то, как раз, полно. Просто Bootstrap сильно вырвался вперёд на фоне остальных.

CSS-фреймворки используют стандарт не по назначению. Ты удивляешься: почему раньше такого не было, почему сейчас кто-то против. Да потому что цели у CSS совсем другие. Не надо лезть в стандарт со своими требованиями. Пилите свой стандарт.

А я против потому, что вы таки влезли в стандарт и пытаетесь его подмять под себя. Вы, программисты, которые не хотят разбираться в CSS. Ничего удивительного в том, что у нас такое резкое отторжение сабжа.

anonymous ()

Всё конечно замечательно, бутстрап нужен, но дизайн ужасный.

ggrn ★★★★★ ()
Ответ на: комментарий от anonymous

И так практически у каждого свой стандарт! А тут хоть к одному пришли.

ggrn ★★★★★ ()
Ответ на: комментарий от KRoN73

«Дизайн не главное» и «отсутствие дизайна» — это не синонимы.

++

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

В прошлом. Версия 3.0 похожа на детскую книжку-раскраску, такая же плоская и выглядит «местячково». Так же, как нарисованные на строительной сетке фасады зданий архитектуры барокко.

Даже не знаю что теперь и делать.

soomrack ★★★ ()
Ответ на: комментарий от ggrn

И так практически у каждого свой стандарт! А тут хоть к одному пришли.

CSS сам по себе стандарт. Не надо, просто не надо лезть со своей бородато-программёрской любовью к дубовым десктоп-интерфейсам туда, где изначально был расчёт на абсолютную гибкость в проектировании дизайна и где разнообразие дизайнов - большой плюс.

anonymous ()

Новая система сетки: добавлено больше возможностей, четыре типа классов сетки — телефон, планшет, десктоп и большой десктоп.

Прекрасно! Меньше пляски с сеткой!

bug ()
Ответ на: комментарий от soomrack

Даже не знаю что теперь и делать.

Пойти на крайние меры и почитать документацию :) . Там есть пример со старой темой.

Vit ★★★★★ ()
Последнее исправление: Vit (всего исправлений: 1)
Ответ на: комментарий от ggrn

Да ладно, нормально там все :) . Цвета на любителя конечно, но это поменять тривиально. А то что градиенты выпилили - правильно. Потому что при кастомизации их намного проще добавить, чем убрать.

Vit ★★★★★ ()
Ответ на: комментарий от soomrack

местячково

барокко

чё-т, браток, ты по-моему лажанулся со своими аналогиями. попробуй ещё раз.

anonymous ()
Ответ на: комментарий от Vit

Пойти на крайние меры и почитать в документацию :) . Там есть пример со старой темой.

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

Если я чего-то не увидел, прошу ткнуть ссылкой.

soomrack ★★★ ()
Ответ на: комментарий от anonymous

С барокко я, конечно, загнул.

А вот аналогия «конструктивизм с элементами ампира» очень даже к месту, а теперь вместо него какая-то типовая архитектура: панельное строение, хрущевки.

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

soomrack ★★★ ()
Ответ на: комментарий от soomrack

Я понял предыдущее утверждение как то, что старого скина нет вообще. Как в ноль кликов его получить - не вникал.

У меня в проектах используется менеджер ассетов (нодовский аналог sprockets), который автоматически собирает бутстрап из исходников, с кастомизированной конфигурацией.

Vit ★★★★★ ()
Ответ на: комментарий от Vit

Ну да, в пару кликов стиль с градиентом не получить, а жаль.

soomrack ★★★ ()
Ответ на: комментарий от soomrack

Жаль конечно, но не смертельно. А вот выпиливать градиенты, когда они не нужны - намного гиморнее.

Vit ★★★★★ ()
Ответ на: комментарий от soomrack

Даже не знаю что теперь и делать.

Я пока на 2.x продолжаю сидеть, а там, глядишь, для 3.x сделают кастомный дизайн в духе 2.x :)

KRoN73 ★★★★★ ()
Ответ на: комментарий от Vit

Цвета на любителя конечно, но это поменять тривиально. А то что градиенты выпилили - правильно.

Я тут про цвета писал: Twitter Bootstrap 3.0 (комментарий)

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

И это плохо, потому что разработчику-недизайнеру, на которого ориентирован Bootstrap, снова придётся ломать голову о кастомизации дизайна. Если б уж так хотелось стать похожими на другие, «неоформительские» фреймворки, не занимаясь никакой раскраской, могли бы просто сделать раздельные файлы для разметки и для раскраски.

KRoN73 ★★★★★ ()
Ответ на: комментарий от soomrack

Версия 3.0 похожа на детскую книжку-раскраску, такая же плоская и выглядит «местячково». Так же, как нарисованные на строительной сетке фасады зданий архитектуры барокко.

+100500

iVS ★★★★★ ()
Ответ на: комментарий от Vit

Виндовато как-то стало. Да и Крон хорошо сказал

Группы кнопок. В варианте с тенью/объёмом сразу понятно, какие нажаты, какие нет.

//Ого на 4 звезды нафлудил

ggrn ★★★★★ ()
Последнее исправление: ggrn (всего исправлений: 1)
Ответ на: комментарий от KRoN73

И это плохо, потому что разработчику-недизайнеру, на которого ориентирован Bootstrap, снова придётся ломать голову о кастомизации дизайна.

++

soomrack ★★★ ()
Ответ на: комментарий от anonymous

лучше видеть на 90% сайтов дефолтный дизайн от хоть каких но проффи чем то что по ссылке

Профи не делают дефолтный дизайн. И на то, что по ссылке, ровняться не надо. Тот сайт был сделан, когда твиттера ещё не существовало. Как не существовало яндекса и даже гугла, а win 95 считалась мощной современной системой.

UNiTE ★★★★★ ()
Ответ на: комментарий от KRoN73

а не как http://users.i.kiev.ua/~bonovox/resume.htm

Ну уж такое вырвиглазие надо было поискать :) ...О боже, он ещё и дизайнер... Вообще, мне кажется, что настоящие технарские сайты - это что-то, скорее, более близкое к http://afanas.ru/ - и без всяких бутстрапов.

За первую ссылку спасибо. Правда, я не очень увидел, что там такое есть, чего не мог бы наваять технарь с минимальными знаниями HTML/CSS...

hobbit ★★★★★ ()
Ответ на: комментарий от hobbit

Правда, я не очень увидел, что там такое есть, чего не мог бы наваять технарь с минимальными знаниями HTML/CSS...

Сделать можно что угодно. Но нормальный дизайн с нормальным функционалом требует уйму времени. И в итоге тысячи разработчиков страдают фигнёй, в то время, как могли бы пользоваться чем-то универсальным. И сюда очень здорово вписался Bootstrap.

KRoN73 ★★★★★ ()
Ответ на: комментарий от hobbit

А изучение Bootstrap легче, чем изучение HTML+CSS?

Что проще, научиться пользоваться Web-браузером или написать его?

KRoN73 ★★★★★ ()
Ответ на: комментарий от UNiTE

лучше видеть на 90% сайтов дефолтный дизайн от хоть каких но проффи чем то что по ссылке

Профи не делают дефолтный дизайн.

ORLY? Ещё как делают.

И на то, что по ссылке, ровняться не надо. Тот сайт был сделан, когда твиттера ещё не существовало. Как не существовало яндекса и даже гугла, а win 95 считалась мощной современной системой.

Ну ты и лопухнлся !!! :-) Там вообщето _тема_ для обсуждаемого тут бустрапа лежит ! Типа нет предела совершенству :-)))))

anonymous ()

Диагноз: бутстрап головного мозга.

skywarp ()
Ответ на: комментарий от soomrack

A вы вообще архив с бутстрапом открывали? Там же лежит собранный bootstrap-theme.css, со старыми градиентами.

У меня пару минут заняло найти, как руки дошли. Не совсем понимаю, чего тут народ уже вторую страницу упарывается.

Vit ★★★★★ ()
Ответ на: комментарий от Vit

Точно, спасибо. А я и не заметил. Впрочем на сайте о том, что эта тема с градиентами нигде внятно не написано.

soomrack ★★★ ()
Ответ на: комментарий от anonymous

Ещё как делают

Это эникейщики от дизайна.

Типа нет предела совершенству

Гм. Пятница, вроде, ещё не наступила.

UNiTE ★★★★★ ()

Нинужно. Для особо ленивых неосиляторов верстки, испытывающих боли в верхней части бедер в процессе кроссбраузерной верстки есть замечательный modernizr, позволяющий детектить поддерживаемые фичи браузера. А это поделие для любителей кнопки «Сделать все хорошо не напрягаясь» не нужно и должно быть закопано.

anonymous ()
Ответ на: комментарий от hobbit

Для применения Bootstrap таки необходимо знание этих ваших HTML+CSS. Вопрос не в противопоставлении этих двух вещей, вопрос в кроссбраузерной верстке и ленивых неосиляторах, которым не хочется копать для каждого браузера чейнджлоги и багтрекеры. а хочется чтобы один раз наверстал и работало везде и попа при этом не болела и не воспалялась.

anonymous ()
Ответ на: комментарий от pihter

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

В этом вы правы.

mammuthus ()
Ответ на: комментарий от pihter

Нет, table нельзя сильно оформлять без класса

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

А вот и нет. table даже в этом веке часто может использоваться не только для представления табличных данных, но и для чего-то другого, соответственно, украшательства для всех таблиц без разбору может сильно всё испортить.

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

anonymous ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.