Сегодня мы рассмотрим: Настоящие ценители музыки знают, что для качественного...
Думаю, это незаменимый набор компонентов для инлайн-редактирования. Поддерживает различные версии Bootstrap и отлично работает без него (на jQuery).
Jasny
Небольшой набор дополнительных элементов к Bootstrap. В него включены как боковое меню, функциональные кнопки, маски для инпутов и т. п.
Bootstrap Form Helper
Еще один интересный набор элементов. В премиум версию входят такие элементы, как инпуты для выбора валют, стран, временных зон, языков и т. п.
Leapstrap
Набор элементов для поддержки плагина Leapstrap контроллера. Это довольно-таки необычная вещица, поэтому включаю ее в этот список.
Отдельные компоненты
jQuery Bootpag
Дополнительный компонент, которого зачастую не хватает в стандартном комплекте Bootstrap - Pagination. Особенностью является возможность динамической обработки.
Tocify
Компонент для отслеживания содержания страницы. Очень часто не хватает именно этого компонента для создания современных вебсайтов.
Bootstrap Link Preview
Небольшой и очень простой в использовании компонент для предпросмотра контента по ссылке (наподобие Facebook-предпросмотра).
Flippant.js
Небольшой скрипт для создания «двусторонних» блоков. Идеально для создания форм, карточек портфолио и т. п.
Bootstrap Tour
Отличное дополнение к Bootstrap, которое позволяет создавать пошаговый тур для новых посетителей вашего сайта.
Bootstro.js
Вариант предыдущего инструмента. Предназначен также для создания пошагового тура для вашего сайта или веб приложения.
Yet Another MegaMenu (YAMM)
Компонент, необходимый практически любому современного сайта. Позволяет создать главное меню навигации практически любой сложности.
Dropdown Menus Enhancement
Дополнение к стандартному меню Bootstrap. Включает такие возможности, как позиционирование меню, вывод в меню радио- и чекбокс-инпутов и многое другое.
Bootstrap Tree View
Простое решение для отображения древовидной структуры. Данный компонент поддерживает стандартные Glyph-иконки.
GTreeTable
Еще одно дополнение, позволяющее создавать древовидную структуру. Отличается обилием функционала: Drag&Drop, редактирование и т. п.
Bootstrap Star Rating
Gridmanager.js
Редактор контента, основанный на строках и колонках Bootstrap-фреймворка. Пока не нашел, как применить на практике. Выложил больше, как пример реализации.
Компоненты Для Форм
Bootstrap Tags
Компонент для простого создания тегов. Очень прост в использовании и тоже легко кастомизируется. Работает со всеми версиями Bootstrap.
Bootstrap Switch
Компонент для создания аккуратных переключателей. Подойдет для любого дизайна сайта, к тому же тут легко настраиваются все параметры: размеры, анимация, цвет и т. п.
Bootstrap Maxlength
Неплохой «ограничитель» для текстовых полей ввода. Прост в использовании, иногда бывает просто незаменимым дополнением.
Bootstrap Select
Очень легкий компонент, позволяющий значительно расширить функционал обычного списка. Пройдите по ссылке ниже, чтобы увидеть все примеры использования.
Chosen
Очень простой скрипт для значительного улучшения поля со списком. Поддерживает множество опций и вариаций для использования этого поля.
Bootstrap Multiselect
Еще один вариант расширения поля списка. Данный скрипт обрабатывает события при открытии / закрытии / выборе и т. п. Никогда ведь не знаешь, что попросит клиент…
Bootstrap Validator
Незаменимый компонент при работе с формами в Bootstrap-фреймворке. Экономит очень много времени: кроме проверки, содержит уже готовое оформление полей формы.
jqBootstrapValidation
Еще один компонент (вариант) для валидации форм на Bootstrap-фреймворке. Содержит большое количество опций для создания проверки введенных пользователем данных.
jQuery File Upload
Неплохой компонент, позволяющий значительно сэкономить время, если необходимо добавить поле для загрузки файлов. Поддерживает множество серверных платформ.
Bootstrap Tag Autocomplete
Компонент для простого создания автодополнения. Очень простой в использовании и легкий (по весу) скрипт. Думаю, заслуживает добавления в копилку инструментов.
Tokenfield for Bootstrap
Компонент для простого создания тегов. Полностью стилизирован, имеет много опций. Поддерживает ввод и с клавиатуры, и из буфера обмена.
Label in Place
Легкий скрипт для создания необычного эффекта объединения label-элемента с полем ввода. Имеет множество опций. Иногда даже может пригодиться:).
Strength Meter
Компонент для определения сложности введенного пароля. Простое решение для распространенной проблемы. Включает много опций и готовое оформление.
Здравствуйте, уважаемые читатели блога сайт. Хочу продолжить сегодня приводить примеры использования на благо упрощения и стандартизации верстки сайтов. Конечно же, это не конструктор сайтов, где нужные элементы сайта можно перетащить мышью в нужное место и для работы с которым особых знаний не потребуется. Нет. Но эта штука позволяет верстать «зачетные сайты» всем , кто освоит небольшой набор «хитростей».
К разочарованию большинства, приходится признать, что и при изучении Bootstrap необходимы, без них для вас все это будет одна сплошная галиматья. Но вот филигранного владения стайлингом от вас уже не потребуется — нужно будет лишь изучить способы подключения возможностей этого фрейморка для реализации ваших задумок на «профессиональном» уровне. А потом все пойдет уже по накатанной...
Чуть ранее мы с вами уже кое о чем побеседовали, кое чему научились и даже появилось желание разбираться дальше. Последнее похвально, ну, а для тех, кто присоединился к нам только сейчас, предложу к ознакомлению предыдущие опусы на тему овладения Бутстрапом, которые неплохо было бы изучить (и желательно в приведеном порядке следования):
Сегодня же у нас на очереди оформление с помощью функционала Бутстрапа различных элементов навигации — хлебных крошек, вертикальных и горизонтальных меню, а также меню выпадающих. Все это не так, чтобы было сложно, но на примерах учиться, как правило, легче. Ну, а в следующей статье мы уже рассмотрим создание переключающихся вкладок с контентом в горизонтальном и вертикальном (типа аккордеона) исполнении. Ну, а сегодня навигация и все, что с ней связано. Поехали...
Оформляем через Bootstrap хлебные крошки
Еще раз акцентирую ваше внимание, что этот фреймворк фактически задает вашему сайту «зачетный» внешний вид, что позволяет сделать восприятие имеющегося на сайте контента более простым и естественным для его посетителей. Мы будем продолжать рассматривать его применение на неком аналоге простейшего Html сайта, для работы которого не используется никакого движка. Т.е. в нем отдельные страницы сайта представляют отдельные Html файлики, к которым подключается описанными в первой статье средствами Бутстрап, чтобы они выглядели «не хуже, чем у людей».
Это вовсе не означает, что Bootstrap нельзя прикрутить к движку. Можно, и если будет время и желание мы поговорим про это на примере Joomla. Но объяснять принципы использования этого фреймворка удобнее именно на примере отдельных страниц некоего простейшего Html сайта, о создании которого и подключении к нему Бутстрапа мы говорили в первых статьях этой серии. Однако, приступим к делу.
Итак, сегодня у нас навигация по сайту . Бутстрап по этой теме предлагает довольно-таки много решений, включая вкладки, навигационные кнопки, выпадающие меню, списки, навигационные панели, хлебные крошки и даже нумерацию страниц. Все это, на самом деле, очень важно, ибо без должным образом настроенной и хорошо оформленной навигации посетители будут теряться на вашем сайте, что может привести к ухудшению поведенческих факторов.
Некоторые элементы потребуют кооперации с Джава-скриптом (например, выпадающие меню или переключающиеся вкладки с контентом). Но в этом фрейворке это все достигается элементарно — простым добавление нужного класса или ID к нужному элементу Html кода. Ну, да вы и сами все увидите (в этой статье — на примере выпадающих меню, а в следующей — на примере вкладок).
Давайте начнем с чего попроще, а именно с . По приведенной ссылке вы найдете пример их реализации на WordPress, а сегодня мы говорим не об их реализации на каком-либо движке, а именно о придании им «зачетного» вида. Саму необходимость использования на сайте подобных элементов навигации, думаю, обосновывать не требуется.
Обычно хлебные крошки располагаются вверху веб-страниц и служат для быстрого понимания того, где пользователь находится в данный момент (относительно глобальной иерархии сайта). Другими словами, они добавляют интерактивности вашему проекту.
Т.е. вы понимаете, в каком именно разделе содержится данная статья (товар, услуга) и можете в него непосредственно перейти для просмотра остальных предложений. Давайте сымитируем их. В Html коде это будет оформлено как банальный список, в котором важен порядок расположения пунктов.
Для наилучшего понимания создадим Html страницу, чем-то напоминающую реальную вебстраницу с заготовкой для хлебных крошек. Ну, а после эту самую заготовку разметим с помощью классов Bootstrap 3 так, чтобы глаз порадовался.
Точнее, создам заготовку я сам, а вам лишь предложу по аналогии с предыдущими статьями этой рубрики скачать файлик sait-7.html (для этого и выберите из контекстного меню пункт «Сохранить как...»), чтобы уже потом вместе дописывать к этой «рыбе» нужные классы бутстрапа. Его также нужно будет поместить в папку Bootstrap (в ее корень).
Если вы посмотрите исходный код файла sait-7.html, то увидите, что в нем уже подключен Бутстрап и jquery, а также добавлен контент для имитации содержимого страницы. Да, еще папочка с используемыми на этой странице изображениями вам понадобится. Скачать ее можно отсюда - img-6.zip . Просто распакуйте архив и поместите содержащиеся в нем картинки в папку img. Структура получится такая:
Наша заготовка на данный момент выглядит довольно-таки непрезентабельно — обычный нумерованный список никак не сподвигающий пользователя думать, что это и есть знаменитые хлебные крошки:
Но не беспокойтесь, сейчас все будет. Нужно будет только нужные классы добавить к элементам этого списка (их можно будет , а заодно там и про пагинацию чуть ниже написано) и он заиграет новыми красками. Вы теги списка в коде файла sait-7.html нашли? Замечательно, теперь добавьте к тегу OL класс breadcrumb , а также отметьте классом active тот пункт LI (последний), который обозначает текущее местоположение пользователя в навигации по сайту.
В итоге должно в коде получиться примерно так:
Ну, а на нашей подопытной странице все тоже станет очень даже симпотно и похоже на настоящие хлебные крошки (навигационная последовательность), оформленные через Бутстрап:
Понятно, что если Бутсрап прикручивать к самописному или общедоступному движку, то вписывать данные классы придется в те файлы шаблона, где описывается работа хлебных крошек. В нашем же случае имеет место быть тривиальный Html сайт с небольшим числом страниц, где все вручную прописывается (и навигационная последовательность в том числе) для каждой страницы. В принципе, небольшой проект вполне можно именно так и делать, ибо прикручивание движка не всегда целесообразно.
Как поменять разделитель в хлебных крошках?
Однако, вернемся к нашим баранам. По умолчанию в качестве разделителя используется слеш (это задано в CSS-стилях от Bootstrap). Не скажу, что это плохо (мне нравится), но если у вас возникнет вполне здоровое желание поэкспериментировать, то в двух словах опишу те шаги, которые нужно будет для этого предпринять. Например, давайте вместо слеша добавим какую-нибудь подходящую по смыслу (стрелку или еще что-нибудь), о которых мы уже вели речь в одной из предыдущих статей. Давайте?
В общем, в файлике CSS от бутстрапа (bootstrap.css или bootstrap.min.css — в зависимости от того, какой из них вы подключили) этот самый разделитель добавляется с помощью , которые позволяют формировать контент страницы на лету (добавлять то, чего в Html коде нет). Например, в самом верху этой страницы вы видите ее оглавление, но не сможете скопировать слово «Оглавление» в буфер, ибо его нет в контенте (оно добавлено через CSS в качестве элемента оформления). Но не суть.
Нам нужно будет просто найти это место в файле стилей Бутстрапа bootstrap.css, и с помощью поиска по странице в ищите breadcrumb. То, что вы найдете, будет выглядеть примерно так:
Breadcrumb > li + li:before { padding: 0 5px; color: #ccc; content: "/\00a0"; }
Страшная конструкция, но нам требуется лишь отключить добавления слеша. Однако, советую вам не вносить правки непосредственно в bootstrap.css. Для добавления своих стилей , если помните, мы специально создали и соответствующим образом подключили (читайте ) файлик manual.css . Вот именно в него (в самом конце) и добавим что-то типа этого:
Breadcrumb > li + li:before { content: none; }
После сохранения изменений обновите открытую страницу и увидите, что разделитель в крошках бесследно исчез:
Полдела сделано. Осталось только глиф-иконки добавить. Сделать это проще простого — где должен быть разделитель, там ставите тег SPAN с классом нужной глиф-иконки. Например, так:
Получилось в итоге так:
Как поставить другую иконку или сменить ее цвет, мы уже с вами разбирали в предыдущей статье. Идем дальше.
Оформление меню в виде вкладок или навигационных кнопок
Пожалуй, сейчас трудно найти сайт, который не имел бы панели навигации (меню). Именно оно связывает все страницы между собой и позволяет посетителю без проблем по ним перемещаться. Достойное оформление меню является тоже очень важной задачей, которую Бутстрап позволяет существенно облегчить не потеряв в качестве.
Чтобы не особо заморачиваться для иммитации меню, просто добавьте в уже существующий файлик sait-7.html, сразу после тега div с классом container, следующую конструкцию, представляющую из себя по сути список, который будет размещен в отдельной строке сетки Бутстрапа (будет занимать все 12 колонок по ширине):
Тут я, правда, извратился и вместо обычного контейнера DIV с классом строки (row) прописал тег семантической разметки NAV (обозначающий основную навигацию по сайту в спецификации Html 5). По сути это тот же DIV, но с намеком для поисковиков, что это есть менюшка. Не обращайте на это особого внимания. Данный список без должного оформления выглядит довольно-таки убого:
Давайте его облагородим (отстайлим) с помощью возможностей Bootstrap 3. Все, что для этого нужно, вы найдете в этом разделе хелпа , а я просто приведу конкретные примеры реализации этих инструкций.
Чтобы создать меню на манер вкладок , достаточно будет добавить к тегу списка класс nav nav-tabs , ну, а к тегу LI, соответствующему текущей странице, нужно будет по традиции добавить класс active (чтобы пользователь знал ответ на вопрос: «и где я нахожуся»).
В результате ни о чем не говорящий список по мановению волшебной палочки превращается в достойное взгляда посетителя меню:
Класс, да? Мне нравится Бутстрап.
Если нужно оформить вертикальное меню , то нужно будет добавить всего лишь еще один класс: nav-stacked . Получится что-то типа:
Правда в нашем случае это будет излишне, но в вертикальные меню очень часто добавляют не основные элементы навигации (заключая их в левую или правую колонку сайта), поэтому нужно понимать как их можно оформить.
Кстати, вариант вкладок в случае вертикальных меню смотрится в исполнении Bootstrap не айс, поэтому лучше в этом случае использовать навигационные кнопки , которые задаются заменой класса nav-tabs на nav-pills:
Выглядеть на реальном сайте это может примерно так:
Открытая в данный момент страница в меню опять же отмечается добавлением класса active к нужному тегу LI. Получается, как вы могли убедиться, все очень даже презентабельно и без каких-либо заморочек. Как поменять цвета, чтобы они подходили под стиль вашего сайта, мы уже говорили в предыдущих статьях.
Собственно, и верхнее меню можно тоже сделать в виде навигационных кнопок простой заменой классов (nav-tabs на nav-pills) в теге списка, который и задает это самое меню в Html коде страницы. Получится, например, так:
Правда верхняя менюшка по умолчанию не растянута на всю ширину страницы. Кому-то это нравится, а кому-то захочется больше. В общем, чтобы растянуть в Bootstrap 3 меню на всю доступную ему ширину (у нас это вся ширина макета, ибо в строке с меню оно занимает все колонки невидимой сетки), нужно будет опять же всего лишь добавить еще один класс nav-justified:
Выглядеть это будет примерно так:
Таким образом, используя описанный выше пяток классов, можно поменять внешний вид (и даже ориентацию) панели навигации всего лишь в несколько кликов.
Как подготовить меню к просмотру на малых экранах?
Все возможности по оформлению навигационной панели вы можете найти в этом разделе хелпа . Там много чего описано, но на показ всех времени просто нет. Поэтому давайте что-нибудь сконструлим для примера, а с остальным, думаю, вы и сами освоитесь.
Бутстрап 3 — это прежде всего отзывчивый дизайн (это когда при изменении размера экрана используются разные модели построения контента, чтобы его было проще воспринимать). В принципе, меню и по умолчанию будет подстраиваться под размер экрана, но можно сделать так, чтобы для смартфонов оно отображалось бы лишь в виде одной кнопки (с тремя горизонтальными полосками), тем самым не занимая весь первый экран. Сделать это не так уж и сложно.
Замените строки:
На «немного» доработанный вариант:
Давайте посмотрим что получилось, а я потом коротенько поясню, что здесь к чему. Итак, на экранах мониторов и ноутбуков пользователи будут видеть вот такое меню:
Ну, во-первых, бросается в глаза, что оно стало черным, а текст пунктов наоборот белым . Собственно, за это отвечает добавление класса navbar-inverse . Но не это главное. Если вы будете уменьшать область просмотра (окно браузера), то в определенный момент от всего меню останется лишь одна кнопка с тремя полосками:
Как я уже упоминал, это будет удобно при просмотре сайта со смартфона . Нажав на эту кнопку пользователь увидит содержимое меню в таком вот виде:
По-моему прикольно получилось. Если хотите, чтобы на кнопке отображались четыре горизонтальных полоски, то добавьте еще одну строку:
Вообще конструкция:
отвечает за отображение этой самой кнопки с тремя полосками при очередном коллапсе сетчатой системы Бутстрапа. Атрибуты начинающие с data отвечают за взаимодействие Html и Джаваскрипта.
отвечает за перемещение пунктов меню «под кнопку» при просмотре сайта на малых разрешениях экрана. Объяснять более подробно просто не хватит времени и статья будет раздута до безобразия. Просто возьмите на вооружение этот метод оптимизации меню в Bootstrap, если он вам понравился. А если нет, то забудьте...
Как сделать фиксированное меню средствами Bootstrap?
Что я имею ввиду под фиксированным меню? Ну, это как на этом блоге — верхнее меню при начале прокрутки страницы как бы прилипает в верхней части области просмотра и остается в поле видимости посетителя на все время его нахождения на сайте. О пользе такого подхода можно спорить, но я лишь опишу способ реализации такой фичи в Бутстрам 3 (тем более, что для этого и делать-то особо ничего не нужно — один класс дописать).
Собственно, уже проговорился, что для прикрепления меню нужно будет лишь добавить класс navbar-fixed-top , чтобы оно зафиксировалось в верхней области просмотра. При этом оно еще и растянется на всю ширину экрана, чтобы смотреться более органично.
Единственное, что при этом в самом начальном моменте, когда страницу посетитель еще прокручивать не начал, меню загораживает собой верхнюю область .
Поправить это дело не сложно. В нашем собственном файле стилей manual.css, который мы благоразумно создали и подключили ко всем страницам сайта, нужно будет в самом начале добавить лишь одно дополнительное правило для видимой области сайта (тега body):
Body { padding-top: 70px; }
После этого все выглядит просто замечательно:
Ну, а при прокрутке страницы меню, как и договаривались, будет оставаться прижатым к самому верху области просмотра (зафиксированным).
Как организовать выпадающее меню в Бутстрап 3?
В заключении хочу дать необходимые пояснения по созданию выпадающих меню средствами Bootstrap. Говорить о пользе выпадающих меню не приходится, тем более на сайтах, где без разветвленной навигации бывает очень сложно построить удобное юзабилити. В общем, кому нужно — тот оценит.
Вся информация, необходимая вам для создания выпадающего меню, содержится в этом разделе хелпа Бутстрапа . Мы же рассмотрим пример применения этих знаний к созданной ранее навигационной панели. Просто добавим в уже существующее меню к одному из пунктов несколько подпунктов путем вставки вложенного списка. Выглядеть в коде это будет примерно так:
Но стоит нам добавить к тегу LI (того пункта меню, из которого будут выпадать вновь добавленные подпункты) класс dropdown и... Ничего не произойдет. Просто еще чуток поколдуем, чтобы получилась подобная конструкция:
Вот тогда уже все заиграет как надо. Или нет? Все получится как надо:
Теперь немного пояснений. Для чего нужен фрагмент, показанный ниже?
Правильно, чтобы вот такой вот замечательный треугольничек, направленный вниз, добавить рядом с пунктом меню, который имеет выпадающие подпункты. Это поможет посетителям об этом без труда догадаться. Ну, а всю машинерию выпадания запускает атрибут data-toggle="dropdown" , задействуя для этого дела возможности джаваскрипта.
Последнее обновление: 31.10.2015
Bootstrap имеет ряд компонентов, которые не сводятся к стандартным кнопкам или текстовым полям, а представляют более сложные элементы. Полный список компонентов Bootstrap можно найти на официальной странице проекта http://getbootstrap.com/components/ . Рассмотрим вкратце некоторые из них.
Навигационные панели
Первый компонент Bootstrap, с которым мы сталкиваемся в проекте, это навигационная панель. Данный компонент располагается на мастер-странице _Layout:
И даже если мы сузим границы веб-браузера или запустим сайт на мобильном устройстве, то мы увидим, что панель навигации остается достаточно функциональной:
Компонент представляет класс navbar . Чтобы панель была фиксирована по верху страницы, используется также класс navbar-fixed-top . Если бы мы, наоборот, захотели фиксировать панель по низу, то в этом случае использовали бы класс navbar-fixed-bottom
И также в объявлении блока навигации используется класс navbar-inverse , который инвертирует цвета по умолчанию. Вместо этого класса мы могли бы использовать navbar-default , тогда в этом случае у нас бы было меню стандартных светлых тонов.
Для создания ссылок навигации применяется класс nav . Bootstrap представляет несколько классов для оформления ссылок навигации. По умолчанию используется класс navbar-nav , но мы можем использовать и другие возможности.
Для создания навигации по типу вкладок применяется класс nav-tabs . Так, например следующее меню:
даст такой эффект:
Еще один вариант создания панели ссылок представляет класс nav-pills :
А комбинируя классы nav-pills и nav-stacked, мы можем создать вертикальное меню:
Пагинация
Класс pagination позволяет создать панель ссылок в виде постраничной навигации:
- «
- 1
- 2
- 3
- 4
- 5
- »
Заглавия
Для создания ссылок заголовков применяется класс breadcrumb :
Кнопки
Для создания кнопок Bootstrap имеет класс btn . Как правило, кнопки офрмляются в группу с помощью класса btn-group :
Кнопка с выпадающим списком
Для создания выпадающего списка по примеру элемента нам надо использовать кнопку вместе со списком, который должен иметь класс dropdown-menu :
Метки
Для оформления кусков текста в качестве меток мы можем использовать класс label . Также мы можем использовать дополнительные классы меток, чтобы конкретизировать тип сообщения:
Default Primary Success Info Warning Danger
Похожую функциональность предлагает класс alert :
Задача успешно завершена
Дополнительная информация
Внимание!
Опасно!
Это только некоторые компоненты, которые предлагает Bootstrap. Но уже по ним можно увидеть, что Bootstrap довольно гибок, и даже сложные по структуре компоненты может легко адаптировать и приспособить под конкретные устройства.
От автора: В данной статье рассказывается о том, как настроить Bootstrap перед скачиванием, и рассматриваются некоторые моменты, касающиеся выбора компонентов. Вы узнаете, какие возможности данного фреймворка вам нужны, а какие нет, в зависимости от ваших потребностей.
Из прошлой статьи вы уже знаете, что такое , когда его следует использовать, а также из чего он состоит. Сейчас вы узнаете, как выбирать компоненты для вашего проекта, как настроить фреймворк под ваши задачи, как убрать все лишнее и не запутаться при этом. Это начальный этап практической работы с Bootstrap, и любой базовый проект начинается с данного этапа.
Зачем настраивать Bootstrap
Это очень хороший вопрос, поскольку вы же можете просто скачать целиком весь архив, не настраивая его, и работать с ним. Есть две причины: во-первых, скорее всего вам не понадобятся все компоненты Bootstrap, а, во-вторых, размер всего фреймворка не такой уж незначительный (даже в сжатом виде) — 525 Кб. Плюс 95 Кб весит jQuery, потому что без него фреймворк не будет работать. Такую роскошь не может позволить себе ни один фронтенд разработчик, поэтому вам нужно убрать все лишнее. В любом случае всегда удаляйте ненужные компоненты.
Выбор компонентов
На странице загрузки Bootstrap вы увидите форму с чекбоксами. Здесь вам нужно отметить те компоненты, которые пригодятся вам в работе над проектом. И давайте теперь взглянем на некоторые составляющие Bootstrap и их предназначение.
Базовый CSS (Common CSS)
Это набор базовых элементов, необходимых для базовой разметки. Его всегда рекомендуется оставлять отмеченным.
Стили для печати (print media styles)
Это стили, которые используются браузерами перед печатью страниц. Вы можете настроить их, как вам нравится, используя следующую запись:
@media print { /* ваши стили */ }
Типографика (Typography)
Базовое оформление текста: различные отступы, абзацы, цитаты, подсветка кода, форматированный текст, заголовки, индексы – все это оформляется с помощью данных стилей.
Даже если вы не будете использовать предустановленные классы на странице, ее содержимое будет отображено в стиле Bootstrap. Это полезно для тех, кто не может или не хочет копаться в старом коде. Просто подключите библиотеку, чтобы сделать текст привлекательнее.
Вот как можно изменить простой текст без использования дополнительных стилей:
Код (Code)
Форматирование кода на страницах. Конечно, здесь не будет подсветки синтаксиса. Для этого нужно будет использовать сторонний плагин (не имеющий никакого отношения к Bootstrap). Но фреймворк позволит вам отличать код от обычного текста с помощью использования тегов code, pre или kdb.
Сеточная система (Grid system)
Магия, которую используют CSS фреймворки, до сих пор вызывает благоговейный трепет у бывалых разработчиков, которые начинали работать еще 10 лет назад, и перед началом проекта им предстояло сделать выбор между табличной или блочной версткой. А сегодня, просто путем добавления нужных классов, вы получаете адаптивный (отзывчивый) макет для вашего веб-сайта всего за 10 минут.
Давайте посмотрим на пример того, как это может выглядеть:
Таблицы (Tables)
Табличная верстка давно ушла в прошлое, но табличные данные должны отображаться соответствующим образом, если не предусмотрено ничего другого. Без хорошо подобранного дизайна, данные будут смотреться не очень привлекательно. Постарайтесь избегать следующего отображения:
После простого добавления Bootstrap, без внесения каких-либо изменений в HTML, таблица будет выглядеть вот так:
Формы (Forms)
Если вам нужно создать формы, вы можете использовать Bootstrap:
Отметьте чекбокс «Форма» («Form»), если вам предстоит создание формы.
Кнопки (Buttons)
Кнопки Bootstrap достойны отдельного обсуждения: по умолчанию они бывают 4 размеров и 7 разных типов. Дополнительно есть кнопка с выпадающим меню, блочные кнопки и т.д. По умолчанию кнопки в Bootstrap выглядят вот так:
Утилиты для отзывчивого дизайна (Responsive utilities)
В Bootstrap есть набор полезных инструментов для быстрого и легкого создания макета под мобильные устройства. Благодаря этим инструментам вы можете скрывать и показывать некоторые компоненты на разных устройствах, изменять их размеры, отдельно для больших, средних и маленьких экранов. Данный компонент существенно сокращает количество кода и состоит из следующих классов:
Как видите, один и тот же блок может быть скрыт на планшете, но отображен на настольном компьютере или мобильном устройстве.
Компоненты (Components)
Здесь дается лишь краткое объяснение, потому что сами по себе компоненты малы и можно легко понять их предназначение по названию.
1. Глиф-иконки (Glyphicons). Иконочный шрифт. Весит около 250 Кб и редко используется. Поэтому если он не нужен, отключите его.
2. Группы кнопок (Button groups). Блоки, состоящие из пары кнопок.
3.Группы полей ввода (Input groups). Расширение для текстовых блоков и полей, например, «Имя пользователя» (Username):
4. Навигация (Navs). Навигация по табам (вкладкам). Для использования нужно подключить js-модуль.
5. Навигационная панель (Navbar). Навигация для главного меню; может быть фиксированной, светлой или темной.
6. «Хлебные крошки» (Breadcrumbs). Позволяет пользователям отслеживать местонахождение на сайте.
7. Постраничная навигация (Pagination). Отображает количество страниц на веб-сайте. Особенно полезно для блогов.
8. Переключатель страниц (Pager). Кнопки «вперед» и «назад».
9. Этикетки (Labels). Имеется 6 типов:
10. Бейджи (Badges). Используются, например, для отображения количества непрочитанных сообщений.
11. Приветственный блок (Jumbotron). Большой блок с вступительным текстом. Обычно используется на промо-сайтах и содержит короткое описание проекта.
12. Миниатюры (Thumbnails). Отвечает за отображение уменьшенных вариантов изображений.
13. Предупреждения (Alerts). Указывают на успех, ошибку, информацию или подсказку.
14. Индикатор процесса (Progress bars). Процесс выполнения отображается в процентах. Дополнительно можно применять анимацию и добавлять полосатый фон.
15. Медиа объекты (Media items). Форматирование блоков с комментариями, твитами и т.д. Это обычно списки с вложенными элементами, у которых может отличаться отступ слева, как у традиционных древовидных комментариев.
16. Группы списков (List groups). Форматирование списков с дополнительными возможностями: сноски, ссылки, примечания, уведомления (смотрите «этикетки» («labels»)).
17.Панели (Panels). Блоки с хедером, основным контентом и футером. Могут использоваться для усовершенствованных уведомлений, а также для элементов управления или форм.
18. Встраивание отзывчивых элементов (Responsive embed). «Отзывчивые» объекты могут расширяться и подстраиваться под разные размеры экрана для отображения видео в нужных пропорциях и без непосредственного указания размера.
19. Вдавленные элементы (Wells). Блоки с подсказками, альтернативным оформлением для цитат и т.д.
20. Иконка закрытия (Close icon). Предназначение должно быть понятно по названию.
Компоненты JavaScript
Bootstrap расширяет возможности динамических функций. Работа данного раздела фреймворка основывается на jQuery, и он обязательно должен быть подключен к bootstrap.min.js. Состоит данный раздел из следующих компонентов:
1. Анимация компонентов (Component animations) (для JS). Плавные переходы, анимация.
2. Выпадающие элементы (Dropdowns). Выпадающие списки.
3. Всплывающие подсказки (Tooltips). Небольшие появляющиеся подсказки.
4. Всплывающие элементы (Popovers). По сути такие же всплывающие подсказки, к которым вы можете добавить динамический контент, хедер и основной текст:
5. Модальные окна (Modals). Всплывающие окна. Вы можете изменять их размеры, добавлять заголовок, основной текст, футер, изменять их так, как вам захочется. По умолчанию они выглядят так:
6. Карусель (Carousel). Простой слайдер с выбором анимации.
Настройка переменных
Вы можете изменять стандартные настройки, исходя из ваших потребностей. Вы можете создать собственную тему для Bootstrap двумя способами:
Создайте ваш файл style.css и уже в нем определяйте стили, которые «перезапишут» стили по умолчанию.
В блоке с переменными Less вы можете изменить параметры на те, которые вам действительно нужны, и скачать измененный под вас архив с Bootstrap.
Скачивание
После того как вы закончите с изменением настроек, нажмите на кнопку «Компилировать и скачать» («Compile and download»). В загруженном архиве у нас будут содержаться только выбранные нами элементы. Для сравнения: небольшой проект использует лишь какую-то часть функционала, поэтому размер фреймворка очень легко уменьшить с 600 Кб до 100 Кб. Полученные в результате файлы можно сохранить в папке с проектом, а затем подключить bootstrap.min.css и (если нужно) bootstrap.min.js.
Ребята, я считаю, что Bootstrap — очень классная вещь. Почему так, я попытаюсь объяснить в этой статье. Что ж, поехали Я сразу извиняюсь за то, что почти вся первая половина статьи написана без картинок, там только теория, объяснение работы сетки. Но это очень важно! Кому из вас надо, тот возьмет в себя в руки, прочитает, и, я надеюсь, поймет. Вторая половина статья уже воспринимается попроще, там больше примеров со скриншотами.
Bootstrap — что это?
Итак, начинаем с важного вопроса. Бутстрап — это css и js-фреймворк, по сути, по сути, набор файлов с готовым написанным кодом. Цель разработчиков практически любого фреймворка — упростить разработку сайта себе и другим, кому будет доступен инструмент. В случае с Bootstrap он полностью бесплатен, так что вы можете использовать его любым образом, редактировать исходный код и как угодно переделывать фреймворк под себя. Это отлично.
Установка Bootstrap
Если вам нужно просто подключить файлы фреймворка к html-документу (например, для практики), просто скачайте фреймворк с официального сайта getbootstrap.com , скопируйте его файлы в проект и подключите те, которые вам нужны. Сделаю краткий обзор этих файлов:
- bootstrap.css и bootstrap.min.css — несжатая и сжатая версии css-кода фреймворка. К рабочему проекту рекомендуется подключать сжатый файл, таким образом вы чуть-чуть улучшите скорость загрузки. Но если вы планируете смотреть код в файле, подключайте несжатую версию.
- bootstrap.js и bootstrap.min.js — файл со скриптами
- папка fonts и в ней файлы glyphicons — это иконочный шрифт Bootstrap. В нем около 200 иконок. Для большинства случаев вам их хватит, иногда требуется подключение других. Об иконочном шрифте мы еще поговорим.
Это стандартный набор фреймворка. На самом деле вы легко можете его кастомизировать и изменять под себя. Например, вообще не использовать скрипты или подключить одну только сетку. В общем, об этом мы также поговорим.
Русская документация Bootstrap
Зайдя на getbootstrap вы наверняка заметили, что тут все на английском. Нам же пригодилась бы русская справка по фреймворку. Найти ее легко. Для этого перейдите с главной страницы в раздел Getting Started . Листайте в самый низ, там будет ссылка на переводы. Ищите там русский и кликайте по нему. Все, теперь вы на русскоязычной версии сайта. Правда, тут переведено не все, но где-то 70-80% точно, так что все разберетесь.
Сетка Бутстрапа
Как ни крути, а главным элементом Bootstrap является адаптивная сетка. В общем-то, без нее фреймворк утратил бы практически всю свою ценность, потому именно благодаря сетке можно быстро создавать адаптивные шаблоны. При этом вы можете быть вообще не знакомы с медиа-запросами, они вам и не нужны, потому что фреймворк берет на себя реализацию адаптивности, нужно лишь задать блокам правильные классы.
Что это за классы? Отправляемся к документации, она нам сильно поможет. Зайдите в раздел CSS — Grid System . Общие правила работы с сеткой просты, сейчас перечислю их.
Как работать с сеткой?
Представьте себе ее, как html-таблицу. Если вы когда-нибудь писали html-код для таблиц, то знаете, что все содержимое помещается в тег table , один ряд помещается в тег tr , а уже в него помещаются ячейки — td .
Так вот, в сетке все аналогично. Класс container служит общим контейнером для сетки. Есть 2 варианта сетки бутстрапа — полностью резиновая и имеющая все-таки конечную максимальную ширину. Так вот, при задании общему блоку класса container сайт будет иметь максимальную ширину в 1170 пикселей. Больше он расширяться не будет. Естественно, содержимое будет отцентрировано.
Если же задать класс container-fluid , то сетка будет полностью резиновой, то есть не будет ограничений по размеру. Например, если человек откроект сайт на мониторе шириной 1920 пикселей, он увидит его на всю ширину.
Соответственно, первым делом при разработке сайта вы должны определиться, каким будет шаблон — полностью резиновым, или его ширину все-таки нужно ограничивать.
Отлично, в блоке container следует размещать ряд сетки. В него нужно поместить все блоки, которые стоят в одной строке. То есть если мы возьмем самый типичный шаблон: шапка, основная часть, колонка справа и футер, то тут 3 колонки. В первой будет только шапка, во второй — контент и боковая колонка, а в последней — футер. Разметка для такого сайта будет примерно такой:
Шапка
Контент... и боковая колонка
Футер
Но пока это неправильная разметка, потому что не хватает... чего? Правильно, ячеек! В случае с Bootstrap их еще называют колонками. Сетка бутстрапа состоит из 12 колонок. Ее можно внедрить в любой блок любой ширины, хоть 1200 пикселей, хоть 100. Все это потому, что ширина колонок задана не в пикселях, а в процентах.
Как же работает эта самая 12-ти колоночная система?
Итак, мы подошли к самому важному вопросу, связанному с фреймворком. Поверьте, если вы поймете это, все остальное это уже ерунда. Главное понять, как работает сетка, и путь к быстрой адаптивной верстке будет для вас открыт.
Для этого пролистайте документацию чуть ниже, там вы найдете таблицу, в которой содержатся важные свойства сетки.
К слову, сами колонки помечаются в Bootstrap классом col- , но это составной класс, поэтому просто col- никогда не пишут. В Bootstrap есть 4 специальных класса, которые предназначены для управления размерами блоков на разной ширине, вот они:
- ld — для больших экранов, шириной более 1200 пикселей (десктопные компьютеры);
- md — для средних экранов, ширина от 992 до 1199 (компьютеры, нетбуки);
- sm — для маленьких экранов, ширина от 768 до 991 пикселя (планшеты);
- xs — экстра-маленькие экраны, ширина менее 768px.
Вот такие 4 класса, ну а для управления размерами элементов используются числа от 1 до 12, потому что, как помните, колонок в сетке именно 12.
Шапка
Контент
Боковая колонка
Футер
Разобраться в ней достаточно просто. Первым делом создаем шапку, ее вообще можно не помещать в сетку, так как она в любом случае будет занимать 100% ширины (обычно). Но мы все-таки поместим. Что это за класс col-md-12 ? Как я вам уже говорил, просто col- никто не пишет, этим классом мы, по сути, сообщаем браузеру:
Это ячейка | колонка
На средних устройствах (класс md) ее ширина должна составлять 12 колонок из 12, то есть 100% от ширины ряда (row).
Ну а что с шириной на других устройствах? На large (lg) экранах она тоже будет 100%, потому что значения для больших экранов наследуются, а для меньших нет. Все просто: если вы бы написали col-xs-4 , то ширина колонки была бы 33% на всех устройствах, а если col-lg-4 , то только на больших. Вот такая особенность, запомните ее.
Ну а если на меньшие экраны значение ширины не сохраняется, то что происходит? Оно сбрасывается. Вот как это происходит:
col-sm-4 — на маленьких экранах блок будет занимать 33% ширины, таким же он будет на экранах md и lg, но на xs, то есть самых маленьких, ширина сброситься до 100%. Итак, запомните еще 1 простое правило: Если для меньших экранов ничего не задано, то на них блок будет отображаться на 100% ширины.
Контент
Боковая колонка
По сути, мы указываем браузеру:
Пусть блок контента будет на ширину 8 из 12-ти колонок и такая ситуация будет на маленьких, средних и больших экранах (достаточно указать для маленьких, для больших экранов, как вы помните, значение наследуется). А вот на самых маленьких экранах блок будет заниматься 100%. Это правильно, обычно на мобильных устройствах сайты идут именно в 1 колонку.
Пусть боковая колонка будет шириной в одну треть ширины ряда на все тех же маленьких, средних и больших экранах.Ну а на самых маленьких, как вы уже поняли, ее ширина также сбрасывается до 100%. Вот так все просто.
Ну а с футером и разбираться нечего. Что ж, базовые принципы работы сетки мы разобрали, но нужно еще посмотреть как работает…
Вложенная сетка Bootstrap
Дело в том, что сейчас с вами мы разбили шаблон лишь на основные блоки, но ведь у них внутри тоже может быть разделение на колонки. Например, в контенте могут выводиться товары в несколько колонок. Как быть? Очень просто — мы создаем внутри точно такую же сетку. Она будет вложенной, но тоже содержит в себе 12 колонок. Если все это обобщить, то вот к какому заключению приходим:
Внутри любого блока может быть неограниченное количество сеток. Например, в блоке с товарами сетка для разделения товаров, в самом блоке с одним товаром можно создать еще одну сетку, например, для разделения цены, информации о наличии и доп. информации.
Сейчас мы с вами попробуем сделать еще одну сетку внутри блока с контентом, чтобы расположить в 3 колонки товары. Итак, берем блок, в котором у нас контент:
Контент
И пишем в него:
Каталог товаров:
Название товара
Описание товара
Как видите, мы создали внутри контента новую сетку — вложили внутрь ряд, а в ряду уже будут 3 блока с товарами. Просто скопируйте блок col-sm-4 с карточкой товара и вставьте его еще 2 раза, получится вот что (картинку товара можно взять любую, я взял велик):
Упустил еще один важный момент, чтобы картинки адаптировались под блоки, в которых находятся, каждой из них нужно задать класс img-responsive . Я если вы, как и я, считаете, что это делать неудобно, то просто напишите в собственном style.css так:
Img{ max-width: 100%; height: auto; display: block; }
Все, сохраните этот код и подключите свой css-файл к проекту. Теперь картинки будут по умолчанию адаптивными.
Ну что, вполне ровненько получилось? Да, а без бутстрапа вам пришлось бы мучиться дольше. Единственное, при создании сетки внутри любого блока уже не нужно создавать в нем блок с классом container . Почему в этом нет необходимости? Да потому что тот блок, в котором создается сетка, и служит контейнером.
Таким образом, вы можете создать сколько угодно колонок в любом блоке и сделать шаблон любой сложности. И все это намного быстрее, чем без Bootstrap, потому что весь css вам придется писать с нуля.
Responsive-утилиты
Это еще одна замечательная возможность бутстрапа. Заключается она в том, что вы можете скрывать или делать видимыми любые блоки на нужной вам ширине. Например, полностью скрыть боковую колонку на узких экранах, добавить какие-то новые элементы на мобильных устройствах, добавить колонку на широких экранах и т.д.
Вариантов применения очень много, но я вам не сказал о самом главном, как использовать эти утилиты? Для этого всего лишь добавьте классы нужному блоку. Если его нужно скрыть, достаточно указать такой класс:
Что в данном случае сделает класс hidden-xs ? Он скроет футер на экстра-маленьких устройствах. На всех остальных блок будет виден.
Если же вам нужно наоборот показать его только на самых маленьких экранах, нужно использовать класс visible-xs-block . В таком случае блок будет скрыт на всех экранах, кроме самых узких. Итак, классы адаптивных утилит прописываются так:
- Слово hidden или visible, в зависимости от того, что вам нужно
- Сокращение xs, sm, md или lg, указывающее, на каких экранах скрывать или показывать блок.
- Для visible также нужно добавить одно из трех значений: block — отображать элемент как блочный, inline-block — как строчно-блочный, inline — строчный.
Ну и парочку примеров, чтобы было понятно:
- hidden-xs hidden-lg — скроет элемент на самых маленьких и больших экранах. Как видите, можно указывать несколько классов через пробел.
- visible-xs-inline visible-md-block — на маленьких и large-экранах элемент отображаться не будет вообще. На экстра-маленьких он будет строчным, а на средних — блоком.
- visible-lg-block — элемент будет виден только на самых больших экранах, на всех остальных будет скрыт
Вот так вот все работает. Именно так и никак иначе. Надеюсь, вы это поняли. Давайте закрепим на практике. У нас есть тестовый шаблон, хоть и очень примитивный.
Задача: сделать так, чтобы на маленьких экранах исчезала боковая колонка, а на самых маленьких еще и один товар. И чтобы на xs-устройствах товары были уже в 2 колонки, а не в 3.
Попробуйте сделать это самостоятельно, редактируя лишь html-код. Что же нужно сделать? Сначала разберемся с колонкой, чтобы скрыть ее на sm-экранах, всего лишь нужно добавить ей класс hidden-sm .
Отлично, теперь третьему товару нужно добавить класс hidden-xs , и он исчезнет на самых маленьких экранах. Ну а классы оставшихся двух товаров будут таковыми:
То есть на средних устройствах блок будет занимать 4 колонки из 12, что можно перевести в 33,33% ширины, а на экстра-маленьких — 50%. И поскольку один блок с товаром исчезнет на этой ширине, оба блока с товарами аккуратно расположатся в 1 ряд, вот так:
Отлично! Поняв это вы уже сможете манипулировать блоками на веб-странице практически так, как угодно вам. Попробуйте сами себе придумать задачи и реализовать их.
Сдвинь меня полностью
Дальше я покажу еще 1 очень хороший прием — возможность сдвигать блок вправо или влево. Допустим у нас не 3 товара в ряду, а 1. И он занимает далеко не всю ширину. А ваша задача — выровнять его по центру. Это легко сделать, если держать в уме, что вы работаете с 12-ти колоночной системой.
Оставим один блок с товаром:
Достаточно произвести простые расчеты, чтобы понять, насколько нужно сдвинуть блок, чтобы отцентрировать его. Его нужно сдвинуть на 4 колонки влево на средних и больших экранах, и на 3 колонки на маленьких. Вот так это выглядит:
Класс col-md-offset-4 говорит: на средних и больших экранах сдвинь блок влево на 33% ширины родительского контейнера (1/3 отступ слева, 1/3 ширина блока, ⅓ отступ справа, получается центровка).
Класс col-xs-offset-6: на экстра-маленьких и маленьких экранах сдвинь влево на 25% (¼ отступ слева, ½ ширина блока, ¼ отступ справа).
Надеюсь, суть вы поняли, и в случае необходимости примените эти классы.
Компоненты Bootstrap и примеры их использования
Я поздравляю вас. Только что мы прошли самую важную тему, связанную с фреймворком. Именно сетка и работа с ней важны. Работа с компонентами уже заключается в том, что вы просто идете в документацию, копируете там код нужного компонента и, если необходимо, изменяете под себя. Но я все же приведу дальше несколько примеров того, как использовать компоненты.
Быстрые флоаты и отмена обтекания
Классы pull-left и pull-right позволяют быстро сделать любой блок плавающим, отправив его влево или вправо. Не забывайте при этом про отмену обтекания. Для этого вы можете использовать класс clearfix .
Bootstrap: Горизонтальное адаптивное (мобильное) меню
Следующие компоненты мы добавим прямо в шаблон, поэтому, если есть желание работать с кодом, а не просто читать, выполняйте все действия за мной.
Собственно, на Bootstrap очень легко можно сделать не просто адаптивное меню, а так называемое мобильное, которое полностью сворачивается на маленьких экранах и прячется под одну кнопку. Такой прием можно наблюдать во многих адаптивных шаблонах и реализовать его на самом деле очень легко. Код примера мобильного меню есть в документации, я возьму его оттуда и немного переделаю.
Итак, первым делом я удалю блок с шапкой, потому что наше меню, по сути, и будет шапкой в случае с моим шаблоном. Код меню нужно разместить перед всем содержимым сайта, даже перед блоком container . Почему? Да вы сейчас сами увидите, что сетка уже встроена в панель навигации. Итак, вот код:
То, что кода много, этому не пугайтесь. Вот так теперь выглядит сайт:
Но если меню у вас будет занимать не всю ширину экрана, есть смысл его отцентрировать. Для этого следует после следует создать дополнительный блок-обертку для меню, который разместить после блока с классом container-fluid . Не забудьте закрыть этот блок. Я дал ему класс navbar-wrap . Вот такие стили для него:
То есть можно просто ограничить ширину и отцентрировать. Либо изначально замените container-fluid на container .
Как видите, в меню мы добавили логотип, два простых пункта, выпадающий пункт, форму поиска. То есть получилось много элементов. Вы можете легко кастомизировать меню под себя, добавив ему свои классы. Но сейчас моя цель просто показать вам этот компонент.
Вот так меню будет выглядеть на устройствах с шириной экрана менее 768 пикселей:
Как видите, меню свернулось. Оно раскрывается при клике по кнопке в правом верхнем углу. На экране остался только логотип.
Выпадающее меню
Заодно из примера выше вы сможете понять, как делается в Bootstrap выпадающий пункт меню, выдернем этот код для более детального рассмотрения:
Итак, контейнером для выпадающего пункта служит обычный пункт списка с классом dropdown . Внутри него лежит основная ссылка, клик по которой раскрывает выпадающее меню. Очень важно прописать ей data-атрибут , который вы видите в коде, без него ничего не будет работать. Также вы должны убедиться, что файл bootstrap.js подключен к веб-страницам.
Спан с классом caret — это не что иное, как стрелочка, благодаря которой можно понять, что пункт выпадающий, ну а ниже формируется само меню с помощью стандартного маркированного списка. Вот так, все достаточно просто, вы можете применять этот код для реализации выпадающих пунктов.
Добавляем с помощью Bootstrap хлебные крошки (навигационная цепочка)
Во многих магазинах можно встретить так называемый блок хлебных крошек, в котором содержится полный путь к текущей странице. С помощью фреймворка такое тоже легко сделать, смотрите код:
По сути, достаточно нумерованному списку указать класс breadcrumb , а в него вписать обычные пункты списка. Кстати, выровняю по центру заголовки второго уровня в шаблоне (это нужно прописать в css):
H2{ text-align: center; }
Если вы хотите как-то изменить внешний вид хлебных крошек, достаточно обратится в css к селектору.breadcrumb . Например, так можно убрать фоновый цвет:
Breadcrumb{ background: transparent; }
Вот так сейчас выглядит сайт:
Bootstrap таблицы
По умолчанию таблица будет растянута на все окно, поэтому оборачивайте ее в блок с ограниченной шириной, чтобы ограничить размеры. По умолчанию она выглядит ужасно, но если добавить тегу table класс table , все будет уже гораздо приятнее:
