Всем привет! В предыдущей статье мы рассмотрели, что такое Boostrap и зачем он нужен, а в этой рассмотрим, как установить и начать использовать Bootstrap 4 .
Перейдите на официальный сайт и скачайте Bootstrap 4 , нажав кнопку Download . Вы найдете множество самых разных способов для скачивания и установки этого фреймворка: npm , composer , bower и другие. Также есть возможность скачать только некоторые нужные вам файлы, скачать исходники и так далее.
Вы можете выбрать любой из способов и скачать фреймворк на свой компьютер или зайти в раздел Introduction (справа в колонке на сайте), найти там раздел Starter template , скопировать весь код, написанный там, создать папку, где мы будем работать с фреймворком, в ней создать файл index.html и туда вставить скопированный ранее код.
Hello, world!
Коротко о том, что здесь происходит: это базовый шаблон, в котором подключены все нужные CSS и JS файлы с помощью CDN , а также выставлен мета-тег viewport для мобильных устройств. В принципе, это все. Благодаря CDN нам не нужно скачивать все необходимые файлы, а нужен только интернет.
На этом уроке узнаем, как скачать и подключить фреймворк Bootstrap (версию 3 или 4) к сайту.
Набор инструментов для изучения BootstrapМинимальный набор инструментов (программ) для создания веб-проектов на фреймворке Bootstrap:
- текстовый редактор для работы с кодом ("Блокнот", "Brackets", "Notepad++" или др.);
- браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.).
Создание веб-проекта, в основу дизайна которого положен фреймворк Bootstrap всегда начинают с его загрузки. Загрузить фреймворк Bootstrap можно различными способами . Например, посредством ссылки, расположенной на сайте getbootstrap.com или с помощью пакетного менеджера npm, Composer, Bower или др. Способ как это осуществить зависит от вашего опыта или конкретной ситуации .
Как установить фреймворк Bootstrap с помощью пакетных менеджеров, а также как осуществить его сборку посредством Grunt, можно почитать в этой статье .
Наиболее просто выполнить загрузку – это воспользоваться ссылкой . На сайте Bootstrap присутствуют 2 ссылки.
Первая ссылка содержит готовые к использованию файлы CSS и JavaScript . Эту сборку в основном используют для изучения фреймворка или для использования в проектах, дизайн которых может быть выполнен в стилях заложенных авторами по умолчанию.
Скачать Bootstrap 3.4.1 Скачать Bootstrap 4.3.1Вторая ссылка содержит фреймворк в исходных кодах . Эта версия более удобна для разработки сайтов, т.к. позволяет очень просто изменить стили, цветовую гамму компонентов, выполнить их настройку и др. Но эти исходные файлы, перед тем как использовать на странице, нужно будет скомпилировать и минимизировать. Данный процесс обычно автоматизируют, например, с помощью Gulp.
Исходные коды Bootstrap 3.4.1 Исходные коды Bootstrap 4.3.1 Распаковка архива BootstrapПосле скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего веб-проекта.
Если рассмотреть архив, то можно заметить, что он имеет следующее содержимое (на примере Bootstrap 3.4.1):
Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
В каталоге css находятся стили фреймворка Bootstrap, а в js - плагины для обеспечения работы некоторых компонентов. Плагины написаны с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery.
Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min , она просто минимизирована (сжата).
В продакшене (на рабочем сайте) лучше использовать минимизированные версии файлов. Эти файлы имеют меньший размер, и, следовательно, обеспечивают более быструю загрузку страниц сайта.
Не минимизированные версии более удобно использовать при разработке, а также для изучения.
Кроме этих файлов, в данный архив ещё входит иконочный шрифт "Glyphicons" . Шрифт "Glyphicons" насчитывает более 250 иконок из набора "Glyphicon Halflings". Шрифт представлен с помощью 4 файлов: glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff).
Такое разнообразие форматов одного и того же шрифта необходимо для того чтобы обеспечить его отображение во всех браузерах.
Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье .
Архив фреймворка Bootstrap 4 практически ничем ни отличается от Bootstrap 3 . Основное его отличие в том, что он не содержит шрифт "Glyphicons" . Если вам нужны шрифтовые иконки, то их необходимо будет подключить самостоятельно. Например, воспользовавшись одним из следующих наборов: FontAwesome , Octicons, Glyphicons, IcoMoon или др. Если же вы не хотите использовать готовый шрифт, а создать свой, который будет состоять только из нужных значков, то воспользуйтесь этой информацией .
Кроме этого архив Bootstrap 4 содержит ещё файлы bootstrap-grid.css и bootstrap-reboot.css . Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть .
Первый файл (bootstrap-grid.css) содержит сетку Bootstrap , а второй (bootstrap-reboot.css) - нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.
Подключение Bootstrap к HTML страницеПроцесс установки фреймворка Bootstrap 3 состоит из подключения следующих файлов к HTML 5 странице:
Примечание: Файлы JavaScript лучше подключать перед закрывающим тегом body (), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы.
...
Подключение фреймворка Bootstrap 4 осуществляется так:
...
Подключить Bootstrap 4 можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):
Скопировано
...
CDN Bootstrap 3.4.1:
Скопировано
Для проверки работоспособности фреймворка, создадим кнопку, при поднесении к которой будет показываться всплывающая подсказка popover.
Поднеси ко мне курсор $(function () { $("").popover({trigger:"hover"}); });
Bootstrap 4 — это набор инструментов, который включает в себя множество интересных и новых функций, таких как Flexbox, SASS для стилей CSS, карты, совместимость с Font Awesome и т. д.
Все эти функции помогут вам перенесите свои веб-проекты на новый уровень, используя новейшие стандарты веб-дизайна и разработки. Мы подобрали список одних из лучших шаблонов на основе Bootstrap 4, которые доступны для бесплатной загрузки, а также несколько высококачественных премиум шаблонов Bootstrap 4.
Существует множество наборов пользовательских интерфейсов Bootstrap 4, которые доступны для вас, чтобы начать проект веб-дизайна. Кроме того, в этом посте мы рассмотрим множество шаблонов, которые построены с помощью Bootstrap 4 во многих разных стилях, таких как шаблоны целевой страницы, шаблоны админпанелей, шаблоны блога, шаблоны портфолио и т. д.
Если вы начинаете свое путешествие в Bootstrap 4, мы рекомендуем использовать популярный набор пользовательского интерфейса, такой как Paper Kit 2, который основан на Bootstrap 4 и предлагает профессионально разработанные компоненты и множество готовых разделов и примеров страниц. Набор пользовательского интерфейса, такой как Paper Kit 2, может помочь вам в долгосрочной перспективе и будет стоить вам меньше, если вы собираетесь создавать несколько сайтов с Bootstrap 4. У них также есть бесплатная версия.
Мы разделили коллекцию шаблонов на основе Bootstrap 4 на несколько разделов, чтобы упростить поиск необходимого вам шаблона. Вы можете перейти на любой из разделов, используя приведенные ниже ссылки.
Bootstrap 4 Шаблоны Coming SoonШаблон Coming Soon используется до фактического запуска веб-сайта и является некой «заглушкой».
Эти шаблоны обычно содержат таймер обратного отсчета и предоставляют пользователям возможность связаться с владельцами веб-сайтов или подписаться на уведомление о запуске.
Смотрите ниже Coming Soon шаблон, построенный с помощью Bootstrap 4.
Coming Soon Bootstrap 4(Бесплатный)
Этот Coming Soon шаблон Bootstrap 4, созданный командой в TemplateFlip. Он имеет полноэкранное фоновое изображение, а также современную типографику и значки социальных символов Font Awesome.
В шаблоне уже встроена форма подписки по email. Данная форма отображается при нажатии кнопки «Уведомить меня» (анг. «NOTIFY ME»).
Шаблон полностью бесплатны по лицензии CCA3 и может использоваться как для личных, так и коммерческих проектов.
Fluid – анимированный Coming Soon шаблон (платный)
Fluid — это премиальный анимированный Coming Soon шаблон, созданный с помощью Bootstrap 4. Он предлагает четыре различных варианта: фон-изображения, фоновый рисунок, фоновый слайдер и минимальная компоновка.
Анимация оснащена CSS3, а PSD шаблона также предоставляется с загрузкой.
Bootstrap 4 Шаблоны Landing PageШаблоны Landing Page (посадочная страница) часто используются для демонстрации функций продукта, сервиса или приложения. Они часто имеет кнопки Call to action, чтобы пользователи могли попробовать или изучить продукт / услугу. Они также могут включать разделы, такие как отзывы пользователей и таблицы сравнения характеристик, цены.
Ниже размещаем как бесплатные, так и платные шаблоны Landing Page, созданные с помощью Bootstrap 4.
Material Landing (Бесплатно)
Material Landing — шаблон посадочной страницы, построенный с использованием набора MDB UI Kit и Bootstrap 4.
Он имеет чистый вид кода, который идеально подходит для создания целевой страницы с оптимизацией для продукта или веб-сайта агентства или компании.
В шаблоне есть разделы, разработанные в дизайне HTML5 шаблона для отображения функций продукта / компании, лучших проектов, плана ценообразования, а также членов команды.
При прокрутке посадочной страницы воспроизводятся захватывающие анимации.
Start Simple (Бесплатно)
Start Simple — это еще один бесплатный шаблон посадочной страницы (Landing Page) для стартапов и малого бизнеса, построенный командой TemplateFlip.com.
Шаблон основан на Bootstrap 4 и содержит прокрутку параллакса в заголовке и адаптивный анимированный слайдер для раздела пользовательских отзывов.
Awesome App (Бесплатно)
Awesome App — это бесплатный шаблон Landing Page, созданный с помощью Bootstrap 4 и PaperKit 2. Он подходит для создания веб-сайтов и целевых страниц мобильных приложений, а также программных продуктов.
Шаблон разработан командой TemplateFlip.com, и у него есть творчески разработанная посадочная страница в великолепной цветовой гамме.
В шаблоне есть разделы для демонстрации возможностей приложений, скриншотов приложений, отзывов пользователей, ссылок на скачивание приложений и т. д.
И их легко настраивать и расширять.
Pixels – креативный шаблон App Landing HTML5
Если вы любите творчество и ищете потрясающий дизайн для страницы приложений / продуктов или бизнес-целей, то этот премиальный шаблон Bootstrap 4 Pixels, будет наилучшим образом подходит для вас.
Предлагая более 15 различных дизайнов, этот шаблон имеет интеграцию MailChimp, а также рабочую форму обратной связи.
Bootstrap 4 Шаблоны Startup/AgencyШаблон Startup/Agency подходит для любого бизнеса, который хотел бы продемонстрировать свои услуги.
Ниже собраны некоторые из лучших шаблонов Bootstrap 4, которые подходят для стартапов и компаний.
Agency (Бесплатный)
Как следует из названия, это шаблон веб-сайта бесплатного агентства и малого бизнеса, который был создан с использованием Bootstrap 4. В нем есть разделы домашней страницы, такие как сетка портфолио, адаптивная шкала времени, список участников команды и многое другое.
Bell Bootstrap 4 Theme (Бесплатный)
Bell — это одностраничный Bootstrap 4 шаблон, подходящий для любого типа бизнес-сайта. Он включает блоки параллакса с анимированной прокруткой и доступен бесплатно, а также имеет платную версию, которая включает премиум-поддержку по электронной почте.
Fitness (Бесплатно)
Fitness — это бесплатный шаблон сайта с чистым исходным кодом, созданный с помощью HTML5, Sass, jQuery, Bootstrap 4 и Gulp.
Версия PSD этого шаблона также включена в бесплатную версию.
Bootstrap 4 Шаблоны админпанелейBootstrap является выбором «по умолчанию» для многих веб-дизайнеров и разработчиков, когда дело доходит до создания шаблона панели админпанели сайта или приложения. Используя Bootstrap, вы можете создать адаптивную панель управления admin с расширенными элементами управления и пользовательскими интерфейсами.
Ниже вы можете найти платные и бесплатные шаблоны панели управления Bootstrap 4 Admin.
Light Bootstrap Dashboard (Бесплатно)
Это шаблон администрирования Bootstrap 4, созданный CreativeTim.
Он имеет простой и чистый дизайн и предлагает набор готовых компонентов, плагинов и примерных страниц шаблонов, чтобы вы начали с создания панелей администратора, для веб-приложений, а также CMS или CRM.
Это бесплатный шаблон администрирования Bootstrap, который полностью можно использовать в ваших проектах. Если вам нужны дополнительные компоненты, плагины и примеры страниц, вы можете перейти к версии PRO.
Версия PRO также дает вам доступ к полной документации, файлам SASS, а также к файлам Sketch для шаблона.
Modular Admin (Бесплатно)
Modular Admin — это бесплатная и ориентированная на MIT тема панели мониторинга, построенная на Bootstrap 4. Эта тема панели инструментов построена модульным способом, который позволяет легко масштабировать, изменять и поддерживать. Документация для начала работы с этим шаблоном предоставляется в репозитории GitHub.
CoreUI Bootstrap 4 Admin (Free)
CoreUI — это еще один бесплатный шаблон с открытым исходным кодом (MIT) Bootstrap. CoreUI основан на Bootstrap 4 и предлагает 6 версий: HTML5 AJAX, HTML5 Static, AngularJS, Angular 2+, React.js и Vue.js.
Pages – Bootstrap 4 Admin Dashboard шаблон
Pages — это красиво оформленный премиум шаблон Bootstrap 4 Admin Dashboard, который предлагает несколько макетов и готовых компонентов, а также 6 различных цветовых схем.
Всем привет, друзья! В середине 2013 года вышел Bootstrap 3, который за прошедшие годы неплохо зарекомендовал себя как удобный, расширяемый CSS каркас для быстрого создания адаптивных макетов. Миллионы сайтов успешно используют этот фреймворк и мы уже порядком привыкли к нему.
Класснуть
Запинить
18 января 2018 года случилось важное событие - вышла из беты долгожданная версия Bootstrap 4 , основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет поддержку всех современных браузеров и является более удобной и гибкой для разработчиков, нежели классическая модель разметки, основанная на Float. Теперь с полной уверенностью можно сказать, что на «Флексах» не можно, а НУЖНО верстать!
Дополнительные материалы урока Bootstrap 4Сегодня мы подробно разберем работу с сеткой Bootstrap 4, по ходу дела сравнивая её со старой версией. Данный урок будет полезен вам не только если вы новичок и знакомитесь с Bootstrap, но и в том случае, если вы опытный разработчик и хотите изучить все правила и нюансы верстки с использованием сетки Bootstrap 4 и Flexbox инструментов, входящих в её состав.
1. Основные параметры сетки по-умолчаниюПо-умолчанию сетка Bootstrap 4 очень похожа на сетку третьей версии, однако появились некоторые важные отличия.
Из таблицы основных опций мы можем заметить явные отличия от сетки третьей версии. Теперь отсутствует префикс класса «.col-xs-», отвечающий за самые маленькие разрешения, вместо него указывается упрощенный префикс «.col-». Можно ошибочно подумать, что префикс «.col-» отвечает за минимальные разрешения мобильных устройств, однако это не совсем так. Помимо всего прочего, префикс «.col-» - это одно из важнейших новшеств Bootstrap 4. Это класс, который отвечает за автоматическую разметку колонок на любом разрешении. Но об этом позже.
За малые разрешения (small) отвечает префикс «.col-sm-» с медиа-запросом от 576 пикс. Ширина контейнера составляет 540 пикс. Средние разрешения отрабатываются от 768 пикс. Ширина контейнера - 720 пикс. Большие разрешения работают с разрешения устройств от 992 пикс. Ширина контейнера - 960 пикс. И самые большие - от 1200 пикс. Ширина контейнера фиксируется на значении 1140 пикс.
Обратите внимание, что максимальные значения медиа-запросов имеют неточные значения с дробной частью «.98» в пикселях. Это заметно при выборе Desktop First метода верстки, где максимальная ширина медиа-запроса ограничена. Например, при компиляции Sass «+media-breakpoint-down(lg)» мы получим «@media (max-width: 1199.98px)». Здесь 0.02 пикселя освобождаются для старта следующего медиа-запроса. Имейте это ввиду. В следующих выпусках «Джедай верстки 8» мы рассмотрим этот и множество других моментов из этого урока на реальном примере.
2. Автоматическая разметка колонок 2.1 Колонки одинаковой шириныС помощью нового универсального класса «.col» можно указать до 12 колонок в ряду (родитель «.row»), ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.
Например:
2.2 Установка ширины одной колонки
Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.
1 из 3
2 из 3 (широкое)
3 из 3
1 из 3
2 из 3 (широкое)
3 из 3
В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая всё оставшееся пространство.
2.3 Контент переменной шириныМожно использовать класс «col-{breakpoint}-auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint - размер экрана (xl, lg, md или sm).
1 из 3
Контент переменной ширины
3 из 3
1 из 3
Контент переменной ширины номер два
3 из 3
Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.
2.4 Мульти-рядБлагодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.
col
col
col
col
col
Очень интересная возможность Bootstrap 4 - возможность задавать универсальные колонки, которые будут отображаться на всех разрешениях. Это упомянутый ранее класс «.col». Кроме того, можно определить класс, указывающий конкретное количество колонок, занимаемое содержимым - это классы с префиксом «.col-{число колонок}», например «.col-6» говорит нам о том, что содержимое займёт 6 колонок из 12. В случае, когда конкретное количество задавать не обязательно, можно смело использовать универсальный класс «.col».
col
col
col
col
col-8
col-4
Вы можете использовать префикс класса «.col-sm-{количество занимаемых колонок}» для того, чтобы задать базовую сетку на всех разрешениях, кроме самых маленьких. На небольших экранах колонки такой сетки будут складываться друг под друга. На разрешениях больше - будут занимать столько места, сколько вы определили в классах.
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Здесь мы видим, что первый ряд на устройствах с разрешением более «sm», то-есть больше, чем 576 пикс. разбивается на 2 колонки - шириной 8 и 4 из 12-ти соответственно. Ширина колонок во втором ряду вычисляется автоматически, но на самых малых разрешениях эти колонки также складываются друг под друга, благодаря классу «.col-sm».
3.3 Создание сложной комбинированной сеткиС помощью Bootstrap вы можете создавать любые комбинации колонок при создании сетки. Для каждой колонки можно задать любое поведение на различных разрешениях с помощью адаптивных классов. Здесь отличия от третьей версии - только в наименованиях классов.
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Bootstrap 4 основан на «флексах» и дарит нам все возможности данной модели, которые доступны в простых готовых классах. В числе возможностей - вертикальное и горизонтальное выравнивание.
4.1 Вертикальное выравнивание Верх Верх Верх Середина Середина Середина Низ Низ Низ
Помимо управления выравниванием через родительский «.row», можно выравнивать колонки, задавая им соответствующие классы:
Верх
Середина
Низ
Кроме того, Bootstrap 4 имеет в своём арсенале инструменты для горизонтального выравнивания колонок при помощи префикса «.justify-content-» у «.row».
row justify-content-start
row justify-content-start
row justify-content-center
row justify-content-center
justify-content-end
justify-content-end
justify-content-around
justify-content-around
justify-content-between
justify-content-between
Очень часто встречаются ситуации, когда необходимо убрать поля между колонками. Например, если вы создаете галерею и элементы должны быть расположены вплотную, например так:
Для этого достаточно у элемента «.row» задать дополнительный класс «.no-gutters».
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
Если ряд (.row) заполняется суммарным количеством колонок более 12-ти, последующая колонка переносится на новую строку.
.col-9
.col-4
9 + 4 = 13 колонок - это больше 12. Данный элемент шириной в 4 колонки будет перенесён на новую строку.
.col-6
Следующие колонки расположатся вдоль строки.
Можно использовать специальные классы с префиксом «.order-» для определения порядка элементов. Если вы знакомы с Flex-вёрсткой, данные правила будут вам знакомы. Bootstrap 4 даёт возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую (.order-1.order-md-2):
Первый неупорядоченный элемент
Или можно использовать специальные классы, которые определяют порядок первого и последнего элементов (.order-first, .order-last):
Первый неупорядоченный Второй, упорядоченный как последний Третий, упорядоченный как первый
5.2 Смещение колонокПо аналогии с Bootstrap 3, в 4-й версии также есть возможность горизонтального смещения колонок, однако реализовано это несколько иначе и для этого есть специальные классы с префиксом «.offset-».
5.2.1 Классы смещенияСдвигать колонку вправо можно, используя классы «.offset-md-*», которые увеличивают левый отступ на * количество элементов. Из примера ниже, класс «.offset-md-2» сдвинет колонку «.col-md-4» на 2 колонки вправо, остальные примеры работают по аналогии:
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
Весьма ожидаемо, что Bootstrap 4 поддерживает вложенность элементов. Работает здесь всё также, как в третьей версии - чтобы вложить колонки в другие, необходимо создать дочерний класс «.row» и уже в него вкладывать колонки.
Уровень 1: «.col-sm-9»
Уровень 2: «.col-8 .col-sm-6»
Уровень 2: «.col-4 .col-sm-6»
Мы рассмотрели основные особенности работы с сеткой Bootstrap 4. Если у вас есть желание более подробно ознакомиться со всеми возможностями фреймворка, рекомендую изучить документацию на официальном сайте.
В следующем уроке мы рассмотрим настройку Bootstrap сетки под ваш конкретный проект на примере использования в стартовом шаблоне OptimizedHTML 4. А именно настройку, работу с переменными отступов, брейкпоинтов, количества колонок и прочего.
По количеству звёзд на GitHub.
Если вы хотите освоить Bootstrap, в частности, его самую свежую, четвёртую версию, значит, этот материал подготовлен специально для вас. Здесь, на небольшом сквозном примере, который реально освоить за полчаса, будут продемонстрированы основы Bootstrap, разобравшись с которыми вы вполне сможете сделать что-то своё, использовав этот фреймворк.
Вот одностраничный веб-сайт, о создании которого средствами Bootstrap мы будем говорить.
Готовый проект, созданный средствами Bootstrap
Npm install bootstrap
Bootstrap можно подключить к странице с использованием сети доставки контента. Для этого надо добавить следующую ссылку в тег :
Свежую версию Bootstrap можно загрузить отсюда и использовать локально.
Структура проекта должна выглядеть так, как показано на следующем рисунке.
Структура проекта О возможностях Bootstrap 4 Первая стабильная версия Bootstrap 4 вышла в конце января сего года. Теперь Bootstrap включает в себя некоторые интересные возможности, которых не было в его предыдущей версии. А именно, если говорить об улучшениях и изменениях, можно отметить следующее:
- Bootstrap 4 переписан с использованием технологии flexbox, в то время как в Bootstrap 3 применялась технология float. Если вы не знакомы с flexbox - взгляните на этот материал .
- В Bootstrap 4, в CSS, применяются единицы измерения rem , в то время как раньше применялись единицы измерения px . можно узнать о том, чем они отличаются.
- Некоторые компоненты, такие, как панели (panels), были удалены. можно найти подробности об изменениях внесённых в Bootstrap 4.
Сетка разделена на 12 колонок, эта структура, настроенная так, как нужно разработчику, является основой макета страницы.
Для того чтобы использовать Bootstrap-сетку, нужно добавить класс.row к главному элементу страницы. При настройке размеров вложенных элементов используют следующие классы (вместо звёздочки в конце имени класса указывается число столбцов базовой 12-колоночной сетки, которое должен занимать конкретный элемент):
- col-lg-* - класс, используемый для страниц, предназначенных для устройств с большим экраном вроде ноутбуков;
- col-md-* - класс для страниц, рассчитанных на устройства с экраном среднего размера, таких, как планшеты;
- col-sm-* - класс для страниц, которые рассчитаны маленькие экраны, например, такие, как у смартфонов.
Навигационная панель
Итак, для того, чтобы на странице появилась навигационная панель, добавим в index.html тег с классом.navbar , внутри которого, с использованием других классов, вроде.navbar-brand , .navbar-toggler и.nav-item , создают некоторые специальные элементы и структуру системы навигации по сайту. Класс.fixed-top позволяет зафиксировать навигационную панель в верхней части страницы. Вот разметка навигационной панели:
Home
Теперь создадим файл main.css и подключим его к странице, поместив в тег файла index.html следующее:
Это позволит настраивать стили элементов страницы, размещая в этом файле CSS-правила. Добавим в этот CSS-файл правила, задающие цветовое оформление навигационной панели:
Navbar{
background:#F97300;
}
.nav-link , .navbar-brand{
color: #f4f4f4;
cursor: pointer;
}
.nav-link{
margin-right: 1em !important;
}
.nav-link:hover{
background: #f4f4f4;
color: #f97300;
}
.navbar-collapse{
justify-content: flex-end;
}
.navbar-toggler{
background:#fff !important;
}
Новая сетка Bootstrap построена на основе flexbox, поэтому для выравнивания содержимого нужно пользоваться соответствующими свойствами. Например, для того, чтобы поместить меню навигационной панели справа, нужно использовать свойство justify-content и установить его значение во flex-end:
Navbar-collapse{
justify-content: flex-end;
}
Для настройки цвета фона навигационной панели можно воспользоваться классами.bg-light (светлый фон), .bg-dark (тёмный фон) и.bg-primary (основной цвет фона). Мы используем следующие настройки:
Bg-dark{ background-color:#343a40!important } .bg-primary{ background-color:#343a40!important }
Шапка страницы Для описания шапки страницы применяется тег :
Подготовим макет для шапки страницы. Мы хотим, чтобы она занимала всю высоту окна, поэтому тут нам пригодятся возможности jQuery. Создадим файл main.js и подключим его к index.html перед закрывающим тегом :
В файл main.js добавим следующее:
$(document).ready(function(){
$(".header").height($(window).height());
})
Нелишним будет поместить в шапку страницы какую-нибудь приятную фоновую картинку. Сделаем это следующим образом:
/*header style*/
.header{
background-image: url("../images/headerback.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center;
}
Вот что у нас в итоге получилось.
Шапка страницы с фоновым изображением
Пока шапка сайта выглядит пустовато, поэтому добавим в неё элемент , назначив ему класс.overlay , что приведёт к созданию блока, который расположен поверх фонового изображения шапки. Изменим тот участок файла index.html , где мы описывали шапку, следующим образом:
Затем, в main.css , добавим следующее:
Overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}
Теперь добавим в шапку описание проекта. Его мы поместим в новый элемент с классом.containter . Это - вспомогательный класс фреймворка Bootstrap, предназначенный для размещения содержимого с учётом нужд отзывчивого макета. Вот как изменится разметка на данном шаге:
Теперь добавим сюда ещё один элемент , которому назначим класс.description:
▍ Hello ,Welcome To My officail Website
Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
See moreЭтому тегу мы назначим ещё и класс.text-center , что позволит выровнять его содержимое по центру страницы. В конце описания сайта имеется кнопка. Поговорим о том, как её настроить.Кнопки В Bootstrap предусмотрено множество классов, предназначенных для кнопок. Посмотреть некоторые примеры оформления кнопок можно . Мы, как видно в примере разметки из предыдущего раздела, добавили к элементу классы.btn и. btn-outline-secondary .
Теперь настроим стили для класса.description:
Description{
position: absolute;
top: 30%;
margin: auto;
padding: 2em;
}
.description h1{
color:#F97300 ;
}
.description p{
color:#666;
font-size: 20px;
width: 50%;
line-height: 1.5;
}
.description button{
border:1px solid #F97300;
background:#F97300;
color:#fff;
}
Вот как будет выглядеть шапка страницы после выполнения вышеописанных действий:
Шапка страницы, содержащая описание проекта Раздел About Для начала посмотрим на то, что мы хотим создать. Перед вами - раздел страницы со сведениями о веб-разработчике.
Раздел About
Здесь мы воспользуемся возможностями сетки Bootstrap для того, чтобы сформировать макет раздела, состоящий из двух частей. Приступим к работе, добавив к родительскому элементу раздела класс.row:
Первая часть макета будет расположена слева, она будет содержать фотографию. Вторая часть, расположенная справа, вместит описание.
Вот как выглядит разметка левой части этого раздела:
// левая часть
S.Web Developer
А вот что получится после того, как сюда будет добавлено описание правой части макета:
S.Web Developer
▍D.John
Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
Обратите внимание на настройку ширины столбцов с использованием вышеописанных классов col-lg-* , col-md-* и col-sm-* .
Вот стили для всего этого:
About{ margin: 4em 0; padding: 1em; position: relative; } .about h1{ color:#F97300; margin: 2em; } .about img{ height: 100%; width: 100%; border-radius: 50% } .about span{ display: block; color: #888; position: absolute; left: 115px; } .about .desc{ padding: 2em; border-left:4px solid #10828C; } .about .desc h3{ color: #10828C; } .about .desc p{ line-height:2; color:#888; }
Раздел Portfolio Займёмся теперь разделом, в котором будет представлено портфолио разработчика. Он будет содержать галерею работ.
Раздел Portfolio
При формировании макета этого раздела применяются те же принципы работы с сеткой, которые мы рассматривали выше:
Portfolio
Добавление класса.img-fluid к каждому из изображений делает их отзывчивыми.
Каждый элемент в нашей галерее, на средних и больших экранах, занимает 4 колонки (напомним - класс col-sm-12 используется для устройств с маленькими экранами, класс col-md-4 используется для средних экранов, col-lg-4 - для устройств с большими экранами). Как результат, на больших и средних экранах на один элемент придётся примерно 33.3% элемента-контейнера, на маленьких устройствах каждый элемент будет занимать весь экран (12 колонок).
Стилизуем галерею работ:
/*Portfolio*/ .portfolio{ margin: 4em 0; position: relative; } .portfolio h1{ color:#F97300; margin: 2em; } .portfolio img{ height: 15rem; width: 100%; margin: 1em; }
Раздел Blog и работа с карточками Поговорим о создании раздела, в котором содержатся анонсы материалов из блога, который ведёт наш условный веб-разработчик.
Раздел Blog
Для создания этого раздела нам понадобятся так называемые карточки (cards в терминологии Bootstrap).
Для того чтобы создать карточку, нужно включить в макет элемент и добавить к нему класс.card . Для настройки различных элементов карточки можно использовать следующие классы:
- .card-header: шапка
- .card-body: основное содержимое
- .card-title: заголовок
- .card-footer: подвал
- .card-image: изображение
Blog
Post Title
Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Read more
Post Title
Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Read more
Post Title
Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Read moreВот стили для карточек:
Blog{
margin: 4em 0;
position: relative;
}
.blog h1{
color:#F97300;
margin: 2em;
}
.blog .card{
box-shadow: 0 0 20px #ccc;
}
.blog .card img{
width: 100%;
height: 12em;
}
.blog .card-title{
color:#F97300;
}
.blog .card-body{
padding: 1em;
}
Вот как будет выглядеть наш одностраничник после создания раздела Blog:
Страница после добавления раздела Blog Раздел Team В этом разделе будут размещены сведения о команде проекта.
Раздел Team
Для формирования этого раздела мы воспользуемся сеткой, поровну разделив имеющееся пространство между изображениями. Каждое изображение (на больших и средних экранах) будет занимать 3 колонки сетки, что составляет 25% общего пространства.
Вот HTML-разметка этого раздела:
Our Team
Sara
Manager
Chris
S.enginner
Layla
Front End Developer
J.Jirard
Team Manger
А вот - стили:
Team{
margin: 4em 0;
position: relative;
}
.team h1{
color:#F97300;
margin: 2em;
}
.team .item{
position: relative;
}
.team .des{
background: #F97300;
color: #fff;
text-align: center;
border-bottom-left-radius: 93%;
transition:.3s ease-in-out;
}
Украсим этот раздел анимацией, появляющейся при наведении указателя мыши на изображения. Это должно выглядеть так, как показано на рисунке ниже.
Анимация при наведении указателя мыши на изображение
Для того чтобы достичь такого эффекта, добавим в main.css следующие стили:
Team .item:hover .des{ height: 100%; background:#f973007d; position: absolute; width: 89%; padding: 5em; top: 0; border-bottom-left-radius: 0; }
Форма обратной связи В данном разделе страницы будет находиться форма, с помощью которой посетители сайта могут отправлять владельцу сайта сообщения. Тут, как обычно, для того, чтобы стилизовать элементы и обеспечить их отзывчивость, мы воспользуемся возможностями Bootstrap.
Форма обратной связи
Как и в Bootstrap 3, в Bootstrap 4 используется класс.form-control для полей ввода, но теперь тут имеется кое-что новое. Например - вместо устаревшего класса.input-group-addon используется новый класс.input-group-prepend (для значков и меток). Подробности об этом можно найти в документации к Bootstrap 4. В нашем случае каждое поле ввода будет помещено в элемент , которому назначен класс.form-group .
Добавим в файл index.html следующее:
Get in Touch
Вот стили для раздела с формой обратной связи, которые надо поместить в файл main.css:
Contact-form{ margin: 6em 0; position: relative; } .contact-form h1{ padding:2em 1px; color: #F97300; } .contact-form .right{ max-width: 600px; } .contact-form .right .btn-secondary{ background: #F97300; color: #fff; border:0; } .contact-form .right .form-control::placeholder{ color: #888; font-size: 16px; }
Шрифты Стандартные шрифты подходят далеко не всем. Мы, воспользовавшись возможностями Google Font API, применим в нашем проекте шрифт Raleway. Он будет смотреться здесь очень хорошо. Для импорта шрифта добавим в файл main.css следующую директиву: @import url("https://fonts.googleapis.com/css?family=Raleway");
Затем зададим глобальные стили для различных HTML-тегов:
Html,h1,h2,h3,h4,h5,h6,a{ font-family: "Raleway"; }
Эффекты прокрутки На рисунке ниже показано поведение страницы, которого мы хотим добиться.
Прокрутка страницы при нажатии на ссылки в навигационной панели
Для того, чтобы страница, при щелчках по ссылкам навигационной панели, плавно прокручивалась к нужному разделу, нам понадобится прибегнуть к возможностям jQuery. Если вы не очень хорошо знакомы с этой библиотекой, знайте, что ничего сложного тут нет - просто добавьте нижеприведённый код в файл main.js:
$(".navbar a").click(function(){
$("body,html").animate({
scrollTop:$("#" + $(this).data("value")).offset().top
},1000)
})
После этого добавьте атрибут data-value к каждой из ссылок в навигационной панели и приведите разметку к следующему виду:
Для того чтобы всё это, наконец, заработало, осталось лишь добавить атрибут id к основному элементу каждого из разделов страницы. При этом нужно проследить, чтобы его значение было идентично тому, которое задано в атрибуте data-value соответствующей ссылки. Например, вот соответствующий атрибут для раздела About:
На этом наш пример завершён.
Добавить метки