Bootstrap 3.0 RC1 выглядит великолепно, и я очень рад сказать, что это отличный переход, и он выглядит намного лучше, чем Bootstrap 2.X.
Я чувствую, что, в целом, BS3 присоединяется к современной и окончательной главе своего существования. Плоский пользовательский интерфейс открывает всем возможность строить поверх него, как и должно быть, а не разрушать существующие эффекты.
И посмотрите на цвета тоже! BS3 выглядит намного ярче, чем тьма BS2.3.X. Это серьезное изменение по умолчанию, которое они сохранили при разработке Bootstrap. Мои постоянные читатели сразу поймут разницу, и нерегулярные пользователи могут легко изучить мое руководство по созданию темы Kirby CMS с Bootstrap 3.0 WIP .
Наслаждайтесь!
Что нового и лучшего
Более плоский и понятный интерфейс (кнопки и меню!)
Внешний вид Bootstrap 2.0 охватил интернет с невероятно простыми приложениями и унифицированным интерфейсом. Я открыто выступил против этого, как только понял, что не могу отличить одно от другого. С тех пор появились наборы пользовательского интерфейса, скины и тематические торговые площадки, чтобы обуздать чрезмерное использование бочкообразного главного меню на всю ширину, пластиковых кнопок y и многого другого. Интернет выглядит великолепно. Фреймворки без начальной загрузки приняли некоторые функции, но отказались от собственного уникального внешнего вида.
Bootstrap 3 поднял его на другой уровень. Мало того, что он обновил свой внешний вид, чтобы быть более независимым от тренда с его плоским взглядом, но он также представляет свою собственную тему для документации с его фиолетовыми цветами и его фиолетовой панелью навигации. Я думаю, что это ДЕЙСТВИТЕЛЬНО подтолкнет людей к экспериментам и ребрендингу по своему вкусу.
Это довольно опрятно. Это заставляет Bootstrap хорошо вести себя как на устройствах, так и в браузерах. Это означает, что даже IE8 и IE9 получают косметический уход от BS3.
Лучше всего то, что я лично не обязан увеличивать тени и копаться в кодовой базе, чтобы исправить прошлый вид.
Еще одна вещь: Bootstrap 3.0 также имеет более счастливые цвета! Это как пробуждение из темноты сети, которым был Bootstrap 2.X!
Сброс через нормализацию
Сброс через нормализацию
До меня дошло, что Bootstrap использует Normalize с первого выпуска. Я никогда не замечал этого раньше, наверное.
Некоторое время Фонд использовал Normalize , и другие фреймворки начали применять то же самое. Я рад, что Bootstrap тоже прыгает. Так создаются псевдо-веб-стандарты. Крупные игроки, такие как Foundation и Bootstrap, могут существенно изменить наш код.
Используя Normalize как таблицу стилей «reset», эти фреймворки могут кодировать с чистого листа. Не только это, но и внесение изменений между браузерами намного проще. Код сброса чрезвычайно мал, и это отличный баланс между чрезмерно объявленными элементами и недостаточным сбросом.
Glyphicons
Наконец, отделитесь , чтобы вы могли подключить собственное решение, глифы больше не являются частью базового кода. И не только это, но Bootstrap наконец-то преобразован в шрифт значка, а не в свою старую систему спрайтов.
Это было большое дело. Все, кого я знаю, использовали свое собственное решение, и некоторые генераторы Bootstrap предварительно упаковывали Bootstrap с такими расширениями, как Font Awesome .
Итак, подождите, это означает, что такие расширения, как Font Awesome, мертвы? Нет, совсем нет. Font Awesome имеет анимацию и много других значков. Тем не менее, использование Glyphicons по умолчанию вызовет новую тенденцию, поскольку … подождите … иконки были переработаны, а шрифт содержит несколько новых интересных элементов:
Сразу же, я уверен, вы заметите значки сортировки в правом нижнем углу. Вы также можете заметить стрелки указателя двумя рядами выше. Мне очень интересно, как это повлияет на Интернет в целом, учитывая, что Bootstrap стал своего рода законодателем мод из-за его широкого использования.
Новая сеточная система
Сетка системы в значительной степени напоминает сетку Фонда. Сетка больше не является линейной и общей 12-колоночной компоновкой, которая сворачивается в один столбец при уменьшении ширины браузера.
Новая сеточная система теперь позволяет декларировать переменные в соответствии с размером устройства. Так, например, у вас может быть макет содержимого с четырьмя столбцами, который сворачивается в два столбца для планшетов и макет с одним столбцом для телефонов. Это дает вам большую мощность, потому что вы можете более детально контролировать внешний вид вашего сайта на разных устройствах.
Хотите меньше энергии? Нет проблем, есть универсальный класс столбца, который вы можете использовать, который будет работать так же, как и предыдущие итерации Bootstrap. Однако обратите внимание на новый синтаксис!
Макеты форм согласно Cols, больше никаких элементов управления!
С переопределенными настройками столбцов приходит еще одно преимущество: Bootstrap наконец-то избавился от своих классов управления формой. Помните эти неприятные вещи:
<div class="control-group">
<label class="control-label">
<div class="controls">
<input type="text">
</div>
</div>
Итак, все прошло, и вы должны использовать обычные классы сетки. Что здорово. Синтаксис чище и имеет больше смысла. Кроме того, вы получаете больше контроля над внешним видом вашей формы и соотношением между метками и полями ввода.
Этот пример будет выглядеть так в BS3:
<div class="row">
<div class="col-4">
<label>
</div>
<div class="col-8">
<input type="text">
</div>
</div>
Список групп
Группа списков — это новый компонент в Bootstrap, который для меня очень важен Ранее я писал о том, как мне нужно было создать свою собственную платформу CSS, чтобы можно было легко создавать прототипы таких вещей, как каналы, статусы, списки ссылок и т. Д. Bootstrap несколько позаботился обо мне здесь.
Вы видите, что с помощью пользовательских групп списка контента вы можете легко создать прототип клона Reddit, комментариев и других элементов. Это показывает вам, насколько Bootstrap продвинулся к тому, чтобы стать окончательным прототипом CSS-фреймворка.
Контекстные панели
Надеемся, что в будущем мы заменим обычные всплывающие окна с ошибками, контекстные панели придадут цвет всей структуре. Шутки в сторону. Ну, это и цветные цитаты, которые вы можете найти где угодно.
Bootstrap более серьезно отнесся к своей системе окраски и разработал стили элементов для соответствия окраске, будь то предупреждение, информация или другое.
Опять же, это удивительное дополнение, отражающее то, что Foundation уже смог сделать. Я очень рад, что эти две структуры несколько работают друг с другом, чтобы продвигаться вперед.
Строка Mixins (Обновлено 8/1/2013)
Одна вещь, которую я не упомянул, это то, что использование mixins в Bootstrap изменилось с точки зрения гридов. Теперь вы можете легко создать свою собственную сетку или вырвать сетку и определить только те разделы, которые вам нужны (например: контент + боковая панель вместо полной 12-колоночной разметки). В дополнение к этому вы также можете указать точки разрыва для рядов жидкости. Вот код, который использует Bootstrap:
Вы можете указать различные переменные, которые изменяют поведение этих миксинов, а именно: @ grid-float-breakpoint, @ grid-columns и @ grid-gutter-width. Допустим, я хочу воссоздать макет моего конкретного сайта. Я мог бы сделать это:
@grid-float-breakpoints: 768px
@grid-columns: 16
//I like 16 col layouts
@grid-gutter-width: 20px
#wrap {
.make-row();
}
#header {
.make-column(3);
}
#inner {
.make-column(13);
}
.content-sidebar-wrap {
.make-row();
}
#content {
.make-column(12);
}
#sidebar {
.make-column(4);
}
Итак, мой сайт немного странный с точки зрения структуры (я использую Genesis), но вы поняли идею. Нет необходимости в сетке. И снова, вы можете очень легко создать свою собственную сетку — указать лучшие точки останова и т. Д. Это дает вам беспрецедентную власть над структурой вашего сайта и при создании ваших собственных макетов сайта.
Но это просто RC1
Да, это просто релиз кандидата один. Bootstrap объявил, что выпустит RC2 после того, как получит некоторую обратную связь, и тогда он будет готов сделать финальный запуск!