На этом уроке узнаем, как скачать и подключить фреймворк 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 - Bootstrap
Бутстрап 4Начните работу с Bootstrap, самой популярной в мире структуры для создания быстродействующих мобильных сайтов с BootstrapCDN и стартовой страницей шаблона.
Быстрый стартХотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставленный людьми в MaxCDN. Использование диспетчера пакетов или загрузка исходных файлов? Перейдите на страницу загрузки.
CSSСкопируйте в таблицу стилей в свою перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.
JS
Многие из наших компонентов требуют использования JavaScript для работы. В частности, они требуют jQuery , Popper.js и наших собственных плагинов JavaScript. Поместите следующий рядом с вашими страницами, перед закрытия , чтобы включить их. jQuery должен быть первым, затем Popper.js, а затем нашими плагинами JavaScript.
Box-проклейкиДля более простой калибровки в CSS мы переключаем глобальное значение box-sizing из области content-box в border-box . Это гарантирует, что padding не влияют на конечную вычисленную ширину элемента, но это может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine.
В редком случае вам нужно переопределить его, используйте что-то вроде следующего:
Selector-for-some-widget { box-sizing: content-box; }
С приведенным выше фрагментом вложенные элементы, включая сгенерированный контент через::before и::after -will, наследуют указанный box-sizing для этого.selector-for-some-widget .
перезагружатьДля улучшения кросс-браузерного рендеринга мы используем Reboot для исправления несоответствий между браузерами и устройствами, предоставляя несколько более самоуверенные сбрасывания к общим элементам HTML.
сообществоБудьте в курсе развития Bootstrap и обратитесь к сообществу с этими полезными ресурсами.
- Следуйте
Всем привет! В предыдущей статье мы рассмотрели, что такое Boostrap и зачем он нужен, а в этой рассмотрим, как установить и начать использовать Bootstrap 4 .
Перейдите на официальный сайт и скачайте Bootstrap 4 , нажав кнопку Download . Вы найдете множество самых разных способов для скачивания и установки этого фреймворка: npm , composer , bower и другие. Также есть возможность скачать только некоторые нужные вам файлы, скачать исходники и так далее.
Вы можете выбрать любой из способов и скачать фреймворк на свой компьютер или зайти в раздел Introduction (справа в колонке на сайте), найти там раздел Starter template , скопировать весь код, написанный там, создать папку, где мы будем работать с фреймворком, в ней создать файл index.html и туда вставить скопированный ранее код.
Hello, world!
Коротко о том, что здесь происходит: это базовый шаблон, в котором подключены все нужные CSS и JS файлы с помощью CDN , а также выставлен мета-тег viewport для мобильных устройств. В принципе, это все. Благодаря CDN нам не нужно скачивать все необходимые файлы, а нужен только интернет.
Bootstrap v4.0.0-alpha.4 доступен для загрузки несколькими способами, включая некоторых из ваших любимых менеджеров пакетов. Выберите один из вариантов ниже, чтобы получить только то, что вам нужно.
Исходные файлыСкачать все: источники Sass, JavaScript, и файлы документации. Требуется Sass компилятор Autoprefixer , что postcss-flexbugs-исправления и некоторые установки .
Менеджеры пакетовВытащите исходные файлы Bootstrap практически в любой проект с некоторыми из самых популярных менеджеров пакетов. Независимо от менеджера пакетов, Bootstrap потребует компилятор Sass, Autoprefixer и postcss-flexbugs-fixes для установки, который соответствует нашим официальным скомпилированным версиям.
Внимание! Не все пакетные менеджеры имеют v4 alpha опубликован, но вскоре мы должны получить их!
npmУстановите Bootstrap в приложениях поддерживающих Node с пакетом npm :
$ npm install [email protected]require("bootstrap") загрузит все Bootstrap jQuery плагины на объект jQuery. На bootstrap сам модуль ничего не экспортировать. Вы можете вручную загрузить Bootstrap jQuery плагины индивидуально загрузки /js/*.js файлы верхнего уровня пакета каталог.
Bootstrap package.json содержит некоторые дополнительные метаданные в следующих разделах:
- sass - путь к Bootstrap главным источником Sass файл
- style - путь к Bootstrap не сжатый CSS, который был предварительно скомпилированные с использованием параметров по умолчанию (без настройки)
Установить Bootstrap В Ruby приложений с помощью Bundler (рекомендуется ) и RubyGems , добавив следующую строку в ваш Gemfile :
gem "bootstrap" , "~> 4.0.0.alpha3"Кроме того, если Вы не используете Bundler, можно установить gem выполнив следующую команду:
$ gem install bootstrap -v 4.0.0.alpha3Смотри gem README для получения дополнительной информации.
Метеор $ meteor add twbs:bootstrap@= 4.0.0-alpha.4 ComposerВы также можете установить и управлять Bootstrap Sass и JavaScript через
Выход новой версии Bootstrap4 подтолкнул меня к написанию этого руководства, потому что новая версия значительно отличается. На изучение её придется потратить некоторое количество времени, но оно того стоит. Данное руководство не является полным путеводителем по Bootstrap4, и несомненно, вам придется еще не раз заглянуть в документацию, но здесь мы рассмотрим базовые вещи по созданию макета сайта на bootstrap4 двумя различными способами
Установка В нашем случае мы будем использовать SASS и поэтому воспользуемся полной установкой.Если вам просто нужен Bootstrap для быстрого прототипирования, имеет смысл использовать метод CDN. Вы просто подключаете файлы, которые находятся на других ресурсах в интернете, без установки (скачивания). Таким образом вы добавляете их в ваш проект в виде ссылок.
Вы можете просто добавить код из примера ниже, в ваш файл проекта - index.html
Bootstrap 4 Starter Template Hello< /h1>
Этот код прямо из страницы начальной загрузки Bootstrap 4 .
С помощью этого шаблона вы можете сразу начать использовать Bootstrap. Преимущество в том, что это легко начать, но недостатком является то, что вам не хватает настройки, которую предлагает Sass.
Установка Bootstrap 4 через NPM Мы собираемся начать наш проект прямо здесь, на этом этапе. Это потребует использования Node.js и его менеджера пакетов для установки самого загрузочного устройства вместе с несколькими другими пакетами. Это даст нам доступ к Sass, перезагрузке в реальном времени и т.д.Во-первых, убедитесь, что вы установили Nodejs, открыв консоль или командную строку:
Если вы получите значение текущей версии, то все в порядке и можно продолжать, а если нет, то загрузите соответствующий установщик на основе вашей ОС и выполните процедуру установки с настройками по умолчанию.
Некоторые полезные сведения по настройке вы можете прочитать в моем посте - NPM Настройка Gulp и компиляции SASS
После завершения установки, перезагрузите консоль или командную строку, и у вас будет доступ к командам Node.js.
Давайте создадим папку для нашего проекта и перейдем в нее:
Mkdir bs4 && cd bs4
Затем мы запустим npm init, чтобы создать файл package.json, который просто хранит наши зависимости.
(Примечание. Флаг -y просто позволяет нам пропускать ответы на различные запросы и вместо этого предоставляет им значения по умолчанию)
Затем мы снова будем использовать npm для установки нескольких разных пакетов в зависимости от зависимостей разработки:
Npm install gulp browser-sync gulp-sass --save-dev
Затем мы будем использовать npm в последний раз, чтобы установить несколько пакетов в качестве регулярных зависимостей проекта:
Npm install bootstrap jquery popper.js --save
Теперь, настало время открыть наш проект в редакторе кода. Я буду использовать Sublime 3.
Мы должны создать папку src для нашего проекта и несколько вложенных в нее папок. Дерево выглядит так:
/src /assets /css /js /scss
Внутри / src также создайте 4 папки, как показано выше.
Затем создайте файл index.html внутри / src / со следующим содержимым:
Bootstrap 4 Layout< /title> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < /head> < body> < /body> < /html>
Я импортирую шрифт Raleway вместе с FontAwesome для иконок. Затем я ссылаюсь на bootstrap.css и файл styles.css. Они еще не существуют, но мы скоро их создадим.
Давайте также создадим файл styles.scss внутри папки / src / scss /. Мы собираемся ввести быструю переменную и набор правил для того, чтобы убедиться, что компиляция Sass работает:
$bg-color: red; body { background: $bg-color; }
В корневой папке (папке проекта) создайте файл gulpfile.js и вставьте следующее содержимое:
Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); // Compile sass into CSS & auto-inject into browsers gulp.task("sass", function() { return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"]) .pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); }); // Move the javascript files into our /src/js folder gulp.task("js", function() { return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js"]) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream()); }); // Static Server + watching scss/html files gulp.task("serve", ["sass"], function() { browserSync.init({ server: "./src" }); gulp.watch(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload); }); gulp.task("default", ["js","serve"]);
Я опишу, что здесь происходит, исходя из задач, определенных выше:
Давайте запустим gulp в командной строке:
Это работает следующим образом:
- Вы используете m для margin или p для padding
- После m или p вы добавляете либо: t (top -), b (bottom -снизу), l (left -слева), r (right-cправa), x (левый и правый), y (верхний и нижний) или ничего для всех 4 сторон.
- После дефиса вы указываете размеры от 0 до 5 (5 - наибольшее количество интервалов).
Итак, в нашем примере, похоже, нам нужно использовать margin и bottom , чтобы оттолкнуть карты под ним.
На первом карточном контейнере добавьте mb-4:
Теперь исправлено:
Вот как вы можете легко обрабатывать оба поля и отступы в Bootstrap 4.
Давайте немного поработаем с использованием различных компонентов Bootstrap 4.
Работа с «Типографией» в Bootstrap 4 Давайте добавим раздел под нашими 3 столбцами в конце закрывающего для класса строк, который будет иметь 2 столбца.Первый столбец будет использовать большинство столбцов (8), а правый столбец будет для вертикальной навигации в секции после этого.
An important heading
A sort of important subheading can go here, which is larger and gray.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
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.
..vertical navigation shortly..Bootstrap 4 имеет раздел «Типография» в своей Документации, который предоставит вам все вспомогательные классы на основе типа. Это довольно просто. Мы используем .lead , чтобы сделать акцент на подзаголовке под нашим элементом h3 .
В своей Документации также есть раздел «Утилиты текста», который предоставляет вам параметры выравнивания текста, преобразования, курсив и веса шрифтов.
В небольших видовых экранах предположим, что мы хотим, чтобы наш тип был центрирован, а не по умолчанию, который выравнивается по левому краю.
Это приведет к тому, что текст, содержащийся в div, будет сосредоточен в центре на небольших видовых экранах и выровнен по левому краю на среднем и большем.
Bootstrap 4 Вертикальная навигация Мы добавим еще один элемент, прежде чем мы займемся настройкой. В нашей правой колонке, которую мы только что добавили, добавим вертикальную навигацию:Secondary Menu
Результат в браузере должен выглядеть так:
Вы также можете проверить его на небольших видовых экранах и заметить, что он отлично реагирует. Есть, конечно, гораздо больше возможностей, связанных с навигацией.
Кастомизационная настройка в Bootstrap 4 Теперь у нас есть довольно стандартный макет, который вы можете найти на большинстве веб-сайтов.К счастью, Bootstrap 4 имеет прочную систему, которая позволяет легко настраивать простые элементы.
Откройте файл /src/scss/styles.scss и вставьте следующее:
// Variable Overrides // Bootstrap Sass Imports @import "node_modules/bootstrap/scss/bootstrap";
Согласно разделу Theming , вы можете выбрать либо включить все файлы Bootstrap 4 sass, либо добавить отдельные элементы в зависимости от ваших потребностей. Чтобы все было просто, мы просто импортируем все, как было выше.
Изменение цветов темы в Bootstrap 4 Возможно, наиболее распространенной проблемой является изменение цвета.Если вы откроете файл node_modules / bootstrap / scss / _variables.scss, вы заметите, что в верхней части он упоминает систему цветов. В этом разделе вы увидите все переменные, которые вы можете переписать, чтобы соответствовать цветам.
Давайте изменим только основной цвет, изменим styles.scss на следующее:
// Variable Overrides $theme-colors: ("primary": #d95700);
Сохраните его, и это результат:
Очень просто!
Давайте также изменим цвет фона:
// Variable Overrides $theme-colors: ("primary": #d95700); $body-bg: #ededed;
Теперь результат выглядит следующим образом:
Хм, теперь наша секция jumbletron (hero) выглядит уродливой, так как она также была серой.
Мы можем настраивать пользовательские настройки для определенных элементов, используя инспектор в chrome или firefox, находим связанные классы элементов, которые хотим изменить, и изменяем их в нашем файле styles.scss.
В этом случае класс, ответственный за jumbotron, является .jumbotron . Давайте изменим цвет фона и добавим небольшую границу к вершине, чтобы имитировать dropshadow из navbar:
// Variable Overrides $theme-colors: ("primary": #d95700); $body-bg: #ededed; .jumbotron { background-color: #ffffff !important; border-top: 3px solid rgb(219, 219, 219); }
Теперь результат:
