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 ()

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

Ты хочешь сказать что написанное под 2.0 не будет работать под 3.0?
Может я чего не понимаю, но зачем тогда нужен такой фреймвек?

Смена мажорного номера версии на это жирно намекает. А что, версия 2 внезапно перестала работать?

Manhunt ★★★★★ ()

Теперь оно чуть менее отвратительно в дефолтной теме :)

vurdalak ★★★★★ ()

В бутстрапе не понравились названия без префиксов, пару раз смешивались с моими стилями. Если из исходников собирать — можно префикс ко всем классам задать?

Legioner ★★★★★ ()

Дефолтный дизайн у предыдущего бутстрапа был, имхо, приятнее, хоть и уже успел надоесть. Кнопки слишком плоские, имхо.

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

Смена мажорного номера версии на это жирно намекает.

В последнее время не так уж и ясно. Огнелис вон раз в день мажорную версию меняет и че...

А что, версия 2 внезапно перестала работать?

Эдак если рассуждать, то обратная совместимость вообще не нужна. Предыдущая версия же не перестает работать...

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

Если из исходников собирать — можно префикс ко всем классам задать?

Это еще зачем? В SCSS можно делать так:

div#my-id {
  @import что-то там;
}

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

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

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

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

Legioner ★★★★★ ()

отличный продукт стал еще лучше

umren ★★★★★ ()

Так чем оно лучше foundation?

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

В последнее время не так уж и ясно.

http://semver.org/

Огнелис вон раз в день мажорную версию меняет и че...

Огнелис не является библиотекой/фреймворком. А вообще, уроды они, вот чо.

Эдак если рассуждать, то обратная совместимость вообще не нужна.

Обратная совместимость бывает вредна. https://www.kernel.org/doc/Documentation/stable_api_nonsense.txt

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

чтобы можно было например сделать на десктопе товары в 6 колонок, а на мобилке в 2, старая версия такого не могла

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

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

эт я в курсе (= но на подобном ресурсе мой вариант релевантнее, на мой взгляд, должен быть (=

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

Так Огнелиса каждую версию плагины и отваливаются

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

блоки, раздельно видимые на десктопе и на мобилке

Вот именно чтобы избежать таких костылей они сделали разные префиксы

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

http://semver.org/

Признаю свою неправоту: я думал мажорная версия меняется когда сделаны очень существенные изменения функционала и/или кода, а не когда сделаны обратно-несовместимые изменения API.

А вообще, уроды они, вот чо.

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

Обратная совместимость бывает вредна.

Но не в общем случае, согласись? В общем - полезна им даже (для фреймверка, например - критична)

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

Ты хочешь сказать что написанное под 2.0 не будет работать под 3.0?

js оттуда не использую, поэтому не знаю. Ну а css быстро же проверить) Сразу вся верстка даже не едет а летит куда то в ад...)

В общем на миграцию нужно отдельно времени потратить. Кастомизировать теперь все по другому нужно.

Может я чего не понимаю, но зачем тогда нужен такой фреймвек?

Для меня это не фреймворк а именно бутстрап. То есть такой довольно неплохой дефолт стилей по сравнению с браузерным дефолтом.

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

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

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

может то, что никто и не задумывал CSS как средство переноски стилей между сайтами?

А давно пора. В мире огромное число вариантов готового дизайна, как свободных, так и коммерческого, но прикручивание каждого из них — это эпопея по полному переписыванию шаблонов. Скажем, взять тупую таблицу со списком. Существует довольно распространённый стиль оформления — с разделением строк на чётные/нечётные, выделенный заголовок, отделение полей. Казалось бы — опиши один раз класс такой таблицы и потом, при замене CSS, ничего в шаблонах не меняй. Но нет, в одном дизайне оно будет зваться .tab, в другом — .btab, в третьем — .data… Bootstrap, набрав фантастическую по сравнению с конкурентами популярность, диктует класс .table — ничем не лучше других вариантов, кроме того, что это де факто становится стандартом именования. И, написав в своём фреймворке в выдаче модуля <table class="table">...</table> я могу потенциально больше не ломать голову о переписывании этого модуля при замене CSS. Если пусть не все, но хотя бы многие, начнут следовать тому же стилю. Надо вывести предупреждение? <div class="alert">Achtung!</div>. И пофиг, какой там сейчас в общем шаблоне используется стиль. Отобразится оно как надо. Хоть, по-быстрому, на момент отладки, через bootstrap, хоть, потом, переписано.

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

Я говорил о замене дизайна сайта простой заменой CSS. А ты, если я правильно понял, говоришь о кросссайтной замене стилей.

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

<dl class="box">
    <dt>Заголовок</dt>
    <dd>Текст блока</dd>
</dl>
Но если я поменяю свои CSS на CSS от Bootstrap, то всё поедет нафиг. Так как там используется стиль:
<div class="well">
    <h2>Заголовок</h2>
    <p>Текст блока</p>
</div>

Да, мой вариант объективно лучше — он несёт логическую разметку, а в Bootstrap — визуальную. Но у Bootstrap есть более серьёзное преимущество — это де факто стандарт. Я могу задействовать в дальнейшем не сам Bootstrap, а что-то Bootstrap-совместимое и мне не придётся переписывать шаблоны, генерирующие HTML.

Так как-то… :)

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

То есть для тех, кто хочет создавать однотипные сайты, не желая изучать CSS?

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

KRoN73 ★★★★★ ()
Ответ на: комментарий от xorik
<div id="parent_block">
  <ul>
    <li>tovar 1</li>
    <li>tovar 2</li>
    ...
    <li>tovar N</li>
    <div style="clear: both;"></div>
  </ul>
</div>

#parent_block ul li {
  width: Npx;
  float: left;
}

Кто не дает?

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

За вкладывание дивов в ul дедушка Мороз подарков не принесёт.

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

Ловко, однако, задетектились чудаки, которым лень было даже пролистнуть официальные доки.

ловко задетектился пионэр, убивающий своё время на ковыряние всего попавшегося мусора подряд.

P.S. фреймворки не нужны, как давно известно
P.S.S. вэб превратился в одну огромную линкфарму. а теперь бана^Wс фреймворками. но без тем (((. вселенская пичаль.

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

каждую версию плагины и отваливаются

Ты неправильно произносишь идеологически-ненужную гонку с хромом :)

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

Почему не годится-то? Давай конкретику :)

Навскидку:
— Действия над плоскими элементами не очевидны. Если кнопка объемная или хотя бы с тенью — видно, что это не элемент оформления, а отдельная сущность. Над которой, вероятно, можно произвести действие. Плоский, ничем не выделяющийся элемент не отличается от простого оформления и требует сознанию больше усилий на выделение или поиск

— Плоские навигационные меню аналогично, «сливаются» с оформлением, в то время, как раньше сразу было ясно, что это элемент не страницы, а системы в целом.

— Группы кнопок. В варианте с тенью/объёмом сразу понятно, какие нажаты, какие нет. С голым плоским цветом — пойди, отличи, это две кнопки нажаты, а одна нет, или одна нажата, а две — нет. В старом стиле сразу видно состояние в любом оформлении, в новом — нужно заранее знать, какой цвет обозначает нажатие, какой — нормальное состояние

— Кстати, вообще с этим каша вышла. Часть элементов плоская, часть — осталась объёмной. Скажем, навигационные меню плоские, выпадающие меню — объёмные, с тенью. Модальные диалоги объёмные, тултипы — плоские и т.д.

Вообще, этот список можно долго продолжать. Реально кривое решение получилось :-/ В старом, хоть и примитивно оформленном, чувствовалась продуманность. В новом — каша какая-то.

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

Сразу вся верстка даже не едет а летит куда то в ад...)

Так говоришь, будто это не что-то такое, за которое расстреливать нужно :)

не фреймворк а именно бутстрап. То есть такой довольно неплохой дефолт стилей по сравнению с браузерным дефолтом.

Если так - то другой разговор. Лично я с браузерным дефолтом поступаю так:

<style type="text/css">
  * {
      margin: 0;
      padding: 0;
}
</style>

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

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

Абсолютно дилетантский подход: брать кондовую схему и подкрашивать буковки, чтобы хоть как-то её улучшить.

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

уже поперли кастомные темы для тройки

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

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

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

очень приличная

Windows 8 головного мозгаКакая безвкусица...

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

абсолютно дилетантский подход: делать на всех сайтах один и тот же дизайн, и не потрудиться даже цветовую схему поменять. Что б тебе жить в мире web 1.0, с белыми фонами и неизменяемыми синими ссылочками.

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

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

Кстати, вполне приличная. Но плоские кнопки подкачивают :-/

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

Выпей успокоительного, и прочти пост ещё раз.

делать на всех сайтах один и тот же дизайн

Вот именно, один и тот же дизайн = Bootstrap. Дизайн начинается с форэскизов, а не с таких штамповочных комбайнов.

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

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

Боюсь я не понимаю разницы

может то, что никто и не задумывал CSS как средство переноски стилей между сайтами?

А давно пора.

Кто мешает тебе лично запилить проект под названием «Стандарт на именование сущностей в каскадных таблицах стилей» и там все описать и призвать всех следовать этому стандарту? Отвечу сам: потому что «нинужно» переборет твоих последователей, иначе было бы уже. Грустно, но правда.

Скажем, взять тупую таблицу со списком. Существует довольно распространённый стиль оформления — с разделением строк на чётные/нечётные, выделенный заголовок, отделение полей. Казалось бы — опиши один раз класс такой таблицы и потом, при замене CSS, ничего в шаблонах не меняй. Но нет, в одном дизайне оно будет зваться .tab, в другом — .btab, в третьем — .data…

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

Bootstrap, набрав фантастическую по сравнению с конкурентами популярность, диктует класс .table — ничем не лучше других вариантов, кроме того, что это де факто становится стандартом именования. И, написав в своём фреймворке в выдаче модуля <table class=«table»>...</table>

Извини, но мне, человеку не знакомому с Bootstrap, кажется что

<style type="text/css">
  .table {
    ...
  }
</style>
<table class="table">...</table>
не совсем верно, по сравнению с
<style type="text/css">
  table {
    ...
  }
</style>
<table>...</table>

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

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

И снова: я понимаю мысль, но не верю чт такое возможно :)

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

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

Бутстрап нужен для быстрого прототипирования.

По канону, после быстрого прототипирования прототип нужно выбрасывать и писать нормальную версию. История Твиттера как раз подтверждает, что канону не следуют и прототип превращается в продукт. Поэтому нам нужен прототип, который (в случае если «выстрелит») можно будет безболезненно допилить до нормального состояния.

Если ты ставишь бутстрап для того, чтобы узнать, что синий сочетается с черным, то лучше пойди на google://free-web-templates и укради там что-нибудь (если не будешь красть непосредственно html-код, а просто нарисуешь похожую тему, вряд ли кто-то сможет доказать, что это кража)

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

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

Вай-вай-вай, погоди! Мне дизайнер присылаеит дизайн в формате .jpg (+, если попрошу, .psd) и я уже, используя свою магию, перевожу его в .htm + .css - разделение труда дизайнера и программиста чувствуется? Или дизайнер и верстальшик это по-твоему должен быть один и тот же человек?

pihter ★★ ()

Пообвешивают сайты всякими бутстрапами и жекверями, что потом 4-х ядерные камни не справляются...

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

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

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

Самое забавное, твоя слюна будет лететь дальше всех, когда проект начнут скатывать (по твоим меркам) в СГ.

OSS вообще не об этом. А такие проекты как firefox вообще очень далеки от OSS. Голимый энтерпрайз, чо.

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

За вкладывание дивов в ul дедушка Мороз подарков не принесёт.

Я знаю что некрасиво, но работает. Но пока CSS3 - не стандарт, способа лучше нет, или я ошибаюсь? сделать еще один <li> пустой? И ему сделать clear: both; ?

Или где?

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

Если очень надо, то li, как по мне. Хотя Ъ тут было бы применить :nth-child(), если я правильно понимаю, о чём тут речь. В IE8, правда, не работает :}

не стандарт

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

Deleted ()
Последнее исправление: Mystra_x64 (всего исправлений: 1)
Ответ на: комментарий от stevejobs

если не будешь красть непосредственно html-код, а просто нарисуешь похожую тему, вряд ли кто-то сможет доказать, что это кража

Рецепт записан :)

pihter ★★ ()

это такая замена новостям про убунту, новости о веб-деве?)

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

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

Отсос - слишком, а руку бы пожал. Ку? Ты думаешь там девушки? Разница в том, что после них - останется куча GPL-кода, который будет актуален еще годы (если не десятки) вперед, а после тебя - повышенная метанизация лужи (если конечно ты - не GPL-разработчик)

Самое забавное, твоя слюна будет лететь дальше всех, когда проект начнут скатывать (по твоим меркам) в СГ.

Какой проект? Firefox? Что бы они с ним не сделали - они УЖЕ сделали для свободного ПО больше, чем мы с тобой вместе взятые. Уверен. Если я через 10 лет скажу что от разрабов Firefox больше вреда было, чем пользы - ткни меня в этот коммент.

OSS вообще не об этом. А такие проекты как firefox вообще очень далеки от OSS. Голимый энтерпрайз, чо.

OSS - это Open Source Software? Или это я не понял?

Мозиловцы вообще не что живут?

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

Кто мешает тебе лично запилить проект под названием

Никто не мешает. Но никто кроме меня не будет ему следовать :) Bootstrap же — уже формальный стандарт.

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

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

(Ну и именно по этому вопросу, без относительно дизайна — у разных таблиц может быть разный стиль)

Извини, но мне, человеку не знакомому с Bootstrap, кажется что

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

И снова: я понимаю мысль, но не верю чт такое возможно :)

Конечно, это не повсеместное явление. И даже 10% всего дизайна не охватывает. Но в абсолютных цифрах количество bootstrap-совсестимых тем уже прилично. Скажем (и это не единственный ресурс) — https://wrapbootstrap.com/

Главное тут именно в заделе. Bootstrap показал, что можно работать в рамках общего стандарта. И именно потому печально, что в 3-й версии частично сломали обратную совместимость. Это несколько дискредитирует идею. Будем надеяться, что не до конца :)

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

Или дизайнер и верстальшик это по-твоему должен быть один и тот же человек?

Да нет, это по-твоему получается, что, по крайней мере, верстальщик и программист должен быть одним человеком. Я, как программист, не понимаю, почему я должен тратить время на _искусство_ вёрстки? Когда для прототипирования и простых проектов есть готовые решения. А в солидном проекте мне просто пришлют готовую вёрстку.

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

В IE8, правда, не работает :}

Расскажи заказчику, у которого осел 7 :) сразу поймешь что не все люди умеют думать головой. :)

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

Тем не менее, некоторые части человечества продолжают использовать АЙЙЭ 7, и это печально. Ничего умнее описанного мной метода я не придумал... :( хоть и сам знаю что дико некрасиво...

pihter ★★ ()

А что это за хреновина вообще?

mv ★★★★★ ()

С таким примитивно-упрощенным дизайном и убирать поддержку IE7? Ну бред же.

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

у разных таблиц может быть разный стиль

именно по этому разные таблицы могут быть вложены в разные контейнеры и иметь разный стиль в зависимости от этого?

Bootstrap же — уже формальный стандарт.

Хорошо бы, если бы так, но я, до сего дн не слышал...

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

Ответ, никак, потому что так и не должно быть, на современном уровне развития отрасли. Никто такой цели не ставил, а почему? Очевидно, потому что нет потребности...

Важно, чтобы это было единнобразно для всех. Или хотя бы для многих.

Тогда нужно пересматривать концепцию CSS.. боюсь, случится это не в обозримом будущем...

Конечно, это не повсеместное явление. И даже 10% всего дизайна не охватывает.

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

Главное тут именно в заделе. Bootstrap показал, что можно работать в рамках общего стандарта.

Если так - я лорчую, но донатов пока не дождуться :) ибо все еще не вериться...

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