Download
Содержание:
- Форма связи
- Создание первой веб-страницы с помощью Bootstrap
- Секция портфолио
- Основной принцип верстки макета
- Пример адаптивной вёрстки на сетке Boostrap 4
- Important globals
- Два основных Bootstrap 4 страницы
- Community
- Quick start
- What is Bootstrap?
- Эффект скролла
- Important globals
- Community
- Quick start
- Секция блога
- Смещение адаптивных блоков
- Containers
- Responsive breakpoints
- Загрузка и подключение файлов Bootstrap 4
- Quick start
Форма связи
Форма обратной связи это последняя секция, которую нам надо добавить и затем мы закончим.
Эта секция будет содеражть форму, через которую посетители смогут отправить вам письмо или отзыв. И конечно же мы применим несколько классов Bootstrap, чтобы сделать дизайн красивым и адаптивным.
Как и Bootstrap 3, Bootstrap 4 также использует класс для полей , но в 4-й версии появился новый функционал, такой как — переход с устаревшего на , чтобы использовать иконки как лейблы.
В нашей форме обратной связи мы обернем каждый в , который имеет класс .
Теперь наш выглядит примерно так.
<!-- Contact form --><div class="contact-form"> <div class="container"> <form> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12"> <h1>Get in Touch</h1> </div> <div class="col-lg-8 col-md-8 col-sm-12 right"> <div class="form-group"> <input type="text" class="form-control form-control-lg" placeholder="Your Name" name=""> </div> <div class="form-group"> <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email"> </div> <div class="form-group"> <textarea class="form-control form-control-lg"> </textarea> </div> <input type="submit" class="btn btn-secondary btn-block" value="Send" name=""> </div> </div> </form> </div></div>
А вот стили для секции обратной связи:
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;}
Создание первой веб-страницы с помощью Bootstrap
1. Добавление документа HTML5
Bootstrap использует HTML-элементы и свойства CSS, для которых требуется документ HTML5.
Всегда включайте в начало страницы тег документа HTML5 вместе с атрибутом lang и правильным набором символов:
<!DOCTYPE html><html lang=»en»> <head> <meta charset=»utf-8″> </head></html>
2. Bootstrap 3-первый мобильный
Bootstrap 3 предназначен для реагирования на мобильные устройства. Стили мобильных устройств являются частью базовой платформы.
Чтобы обеспечить правильную визуализацию и масштабирование касания, добавьте следующий тег внутри элемента:
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
деталь устанавливает ширину страницы для того чтобы последовать за шириной экрана прибора (которая будет меняться в зависимости от прибора).
деталь задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
3. контейнеры
Bootstrap также требуется содержащий элемент для переноса содержимого сайта.
Есть два контейнера классов на выбор:
- класс обеспечивает адаптивный контейнер с фиксированной шириной
- класс предоставляет контейнер с полной шириной, охватывающий всю ширину видового экрана
.container
.container-fluid
Секция портфолио
Теперь давайте продвинемся дальше и сделаем секцию портфолио, которая будет включать в себя галерею.
Структура нашего HTML кода для секции порфолио выглядит так.
<!-- portfolio --><div class="portfolio"> <h1 class="text-center">Portfolio</h1> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/port13.png" class="img-fluid"> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/port1.png" class="img-fluid"> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/port6.png" class="img-fluid"> </div><div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/port3.png" class="img-fluid"> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/port11.png" class="img-fluid"> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/electric.png" class="img-fluid"> </div><div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/Classic.jpg" class="img-fluid"> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/port1.png" class="img-fluid"> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <img src="images/portfolio/port8.png" class="img-fluid"> </div> </div> </div></div>
Добавляя каждому изображению, мы делаем их адаптивными.
Каждый элемент в нашей галерее будет забирать себе четыре колонки, помните, что это для средних расширений экранов, а для больших экранов. Это равносильно на больших экранах, таких как десктопы или большие планшеты. А маленькие девайсы получат 12 колонок, то есть iPhone и другие мобильные устройства будут забирать по 100% контейнера.
Давайте добавим немного стилизации нашей галерее.
/*Portfolio*/.portfolio{ margin: 4em 0; position: relative; }.portfolio h1{ color:#F97300; margin: 2em; }.portfolio img{ height: 15rem; width: 100%; margin: 1em;}
Основной принцип верстки макета
Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.
При этом ширина адаптивных блоков это всегда относительная величина, которая задаётся в колонках Bootstrap и зависит только от ширины родителя, т.е. ряда.
Размещать контент веб-страницы следует только в адаптивных блоках.
Например, в имеющийся макет, а именно в адаптивный блок вложим ещё 2 блока:
<div class="container">
<div class="row">
<div class=col-8>...</div>
<div class=col-4>...</div>
</div>
</div>
Для этого предварительно необходимо в блок положить ряд (контейнер для адаптивных блоков):
<div class="container">
<div class="row">
<div class=col-8>
<div class="row">...</div>
<div class=col-4>...</div>
</div>
</div>
После этого добавим 2 адаптивных блока в ряд:
<div class="container">
<div class="row">
<div class=col-8>
<div class="row">
<div class=col-6>...</div>
<div class=col-6>...</div>
</div>
<div class=col-4>...</div>
</div>
</div>
Пример адаптивной вёрстки на сетке Boostrap 4
Создадим адаптивную разметку блока веб-страницы, приведённого на рисунке, с помощью сетки Bootstrap 4.
1. Создаём разметку блока для мобильных устройств ().
<div class="row">
<div class="col-12"> (1) </div>
<div class="col-12"> (2) </div>
<div class="col-12"> (3) </div>
<div class="col-12"> (4) </div>
<div class="col-12"> (5) </div>
</div>
2. Настраиваем разметку для контрольной точки :
<div class="row">
<div class="col-12 col-sm-6"> (1) </div>
<div class="col-12 col-sm-6"> (2) </div>
<div class="col-12 col-sm-6"> (3) </div>
<div class="col-12 col-sm-6"> (4) </div>
<div class="col-12 col-sm-12"> (5) </div>
</div>
3. Устанавливаем блокам количество колонок, которые они должны иметь на устройствах и :
<div class="row">
<div class="col-12 col-sm-6 col-md-4"> (1) </div>
<div class="col-12 col-sm-6 col-md-4"> (2) </div>
<div class="col-12 col-sm-6 col-md-4"> (3) </div>
<div class="col-12 col-sm-6 col-md-6"> (4) </div>
<div class="col-12 col-sm-12 col-md-6"> (5) </div>
</div>
4. Создаём разметку для :
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-xl"> (1) </div>
<div class="col-12 col-sm-6 col-md-4 col-xl"> (2) </div>
<div class="col-12 col-sm-6 col-md-4 col-xl"> (3) </div>
<div class="col-12 col-sm-6 col-md-6 col-xl"> (4) </div>
<div class="col-12 col-sm-12 col-md-6 col-xl"> (5) </div>
</div>
Убираем ненужные контрольные точки у адаптивных блоков:
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-xl"> (1) </div>
<div class="col-12 col-sm-6 col-md-4 col-xl"> (2) </div>
<div class="col-12 col-sm-6 col-md-4 col-xl"> (3) </div>
<div class="col-12 col-sm-6 col-xl"> (4) </div>
<div class="col-sm-12 col-md-6 col-xl"> (5) </div>
</div>
Кроме этого, изначально в Bootstrap 4 адаптивный блок имеет ширину, равную 100%. Это позволяет при создании адаптивных блоков не указывать количество колонок, если их первоначальная ширина должна быть равна 12 колонок (100%).
Important globals
Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.
HTML5 doctype
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.
Responsive meta tag
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .
You can see an example of this in action in the .
Box-sizing
For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.
On the rare occasion you need to override it, use something like the following:
With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .
Learn more about box model and sizing at CSS Tricks.
Reboot
For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
Два основных Bootstrap 4 страницы
В следующем примере показан код базовой загрузочной страницы 4 (с адаптивным контейнером с фиксированной шириной):
Пример контейнера
<!DOCTYPE html><html lang=»en»><head> <title>Bootstrap
4 Example</title> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css»>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js»></script>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js»></script>
</head><body><div class=»container»> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html>
В следующем примере показан код базовой загрузочной страницы 4 (с контейнером с полной шириной):
Пример с контейнерной жидкостью
<!DOCTYPE html><html lang=»en»><head> <title>Bootstrap
4 Example</title> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css»>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js»></script>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js»></script></head><body><div class=»container-fluid»> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html>
❮ Назад
Дальше ❯
Community
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
- Read and subscribe to The Official Bootstrap Blog.
- Join the official Slack room.
- Chat with fellow Bootstrappers in IRC. On the server, in the channel.
- Implementation help may be found at Stack Overflow (tagged ).
- Developers should use the keyword on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.
You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.
Quick start
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? Head to the downloads page.
JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.
Our and include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our section.
Show components requiring JavaScript
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
- Collapse for toggling visibility of content
- Dropdowns for displaying and positioning (also requires Popper.js)
- Modals for displaying, positioning, and scroll behavior
- Navbar for extending our Collapse plugin to implement responsive behavior
- Tooltips and popovers for displaying and positioning (also requires Popper.js)
- Scrollspy for scroll behavior and navigation updates
What is Bootstrap?
- Bootstrap is a free front-end framework for faster and easier web development
- Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
- Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.
Bootstrap 4 Example
<div class=»jumbotron text-center»> <h1>My First Bootstrap
Page</h1> <p>Resize this responsive page to see the effect!</p> </div><div class=»container»> <div class=»row»>
<div class=»col-sm-4″> <h3>Column 1</h3> <p>Lorem ipsum
dolor..</p> </div> <div class=»col-sm-4″> <h3>Column 2</h3> <p>Lorem ipsum
dolor..</p> </div> <div class=»col-sm-4″> <h3>Column 3</h3> <p>Lorem ipsum
dolor..</p> </div> </div></div>
Эффект скролла
Последнее, что нам нужно сделать это добавить эффект скролла. Тут мы снова применим JQuery. Не переживайте, если вы незнакомы с ним, просто добавьте этот код в ваш файл.
$(".navbar a").click(function(){ $("body,html").animate({ scrollTop:$("#" + $(this).data('value')).offset().top },1000) })
И добавьте атрибут каждой ссылке в панели навигации:
<li class="nav-item"> <a class="nav-link" data-value="about" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link " data-value="portfolio" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link " data-value="blog" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link " data-value="team" href="#"> Team</a> </li> <li class="nav-item"> <a class="nav-link " data-value="contact" href="#">Contact</a> </li>
Выставите атрибут для каждой секции.
Примите во внимание, должен быть идентичен атрибуту в ссылке панели навигации. Это нужно, чтобы скролл работал должным образом
<div class="about" id="about"></div>
Important globals
Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.
HTML5 doctype
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.
Responsive meta tag
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .
You can see an example of this in action in the .
Box-sizing
For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
On the rare occasion you need to override it, use something like the following:
With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .
Learn more about box model and sizing at CSS Tricks.
Reboot
For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
Community
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
- Read and subscribe to The Official Bootstrap Blog.
- Join the official Slack room.
- Chat with fellow Bootstrappers in IRC. On the server, in the channel.
- Implementation help may be found at Stack Overflow (tagged ).
- Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.
You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.
Quick start
Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the downloads page.
JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. We use jQuery’s slim build, but the full version is also supported.
Place one of the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
Bundle
Include everything you need in one script with our bundle. Our and include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our section.
Components
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re unsure about the page structure, keep reading for an example page template.
Show components requiring JavaScript
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
- Collapse for toggling visibility of content
- Dropdowns for displaying and positioning (also requires Popper.js)
- Modals for displaying, positioning, and scroll behavior
- Navbar for extending our Collapse plugin to implement responsive behavior
- Toasts for displaying and dismissing
- Tooltips and popovers for displaying and positioning (also requires Popper.js)
- Scrollspy for scroll behavior and navigation updates
Секция блога
Карточки
Карточки в Bootstrap 4 делают дизайн блога куда проще. В особенности, карточки хорошо подходят статей и постов.
Чтобы создать карточку, мы используем класс и назначаем его элементу. Сам класс карточки содержит много функций:
определяет карточку шапки
для карточки основного контента
заголовок карточки
определяет подвал карточки
для изображения карточки
<!-- Posts section --><div class="blog"> <div class="container"> <h1 class="text-center">Blog</h1> <div class="row"> <div class="col-md-4 col-lg-4 col-sm-12"> <div class="card"> <div class="card-img"> <img src="images/posts/polit.jpg" class="img-fluid"> </div> <div class="card-body"> <h4 class="card-title">Post Title</h4> <p class="card-text"> proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="card-footer"> <a href="" class="card-link">Read more</a> </div> </div> </div> <div class="col-md-4 col-lg-4 col-sm-12"> <div class="card"> <div class="card-img"> <img src="images/posts/images.jpg" class="img-fluid"> </div> <div class="card-body"> <h4 class="card-title">Post Title</h4> <p class="card-text"> proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="card-footer"> <a href="" class="card-link">Read more</a> </div> </div> </div> <div class="col-md-4 col-lg-4 col-sm-12"> <div class="card"> <div class="card-img"> <img src="images/posts/imag2.jpg" class="img-fluid"> </div> <div class="card-body"> <h4 class="card-title">Post Title</h4> <p class="card-text"> proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="card-footer"> <a href="" class="card-link">Read more</a> </div> </div> </div> </div> </div></div>
Нам нужно добавить немного стилизации этим карточкам.
.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;}
круто, да?
Смещение адаптивных блоков
В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:
- классов offset (на определённое количество колонок);
- служебных (утилитных) margin классов.
Классы offset
Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.
Данные классы имеют следующий синтаксис:
оffset-{1} или offset-{breakpoint}-{1}
– контрольная точка, начиная с которой к данному блоку будет применено смещение (если она не указана, то смещение будет применено, начиная с самых крохотных устройств).
– величина смещения, указываемая с помощью количества колонок Bootstrap.
В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.
<div class="row"> <div class="col-4"> (1) </div> <div class="col-4 offset-4"> (2) </div> </div> <div class="row"> <div class="col-3 offset-3"> (1) </div> <div class="col-3 offset-3"> (2) </div> </div> <div class="row"> <div class="col-6 offset-3"> (1) </div> </div>
Смещение с помощью margin классов
В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left: auto и (или) margin-right: auto). Эта вариант смещения появился благодаря тому, что сетка в новой версии Bootstrap (4) основывается на CSS Flexbox.
Данный вариант смещения (с помощью margin классов) используют, когда блоки необходимо сместить относительно друг от друга не которую переменную величину.
В Bootstrap 4 для более удобного и адаптивного задания блокам margin отступов ( и (или) ) можно использовать классы , , и .
<div class="row"> <div class="col-4"> (1) </div> <div class="col-4 ml-auto"> (2) </div> </div> <div class="row"> <div class="col-3"> (1) </div> <div class="col-3 ml-auto mr-auto"> (2) </div> <div class="col-3"> (3)</div> </div> <div class="row"> <div class="col-4 ml-auto mr-auto"> (1) </div> <div class="col-4 ml-auto mr-auto"> (2) </div> </div>
Containers
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
Bootstrap comes with three different containers:
- , which sets a at each responsive breakpoint
- , which is at all breakpoints
- , which is until the specified breakpoint
The table below illustrates how each container’s compares to the original and across each breakpoint.
See them in action and compare them in our .
| Extra small<576px | Small≥576px | Medium≥768px | Large≥992px | Extra large≥1200px | |
|---|---|---|---|---|---|
| 100% | 540px | 720px | 960px | 1140px | |
| 100% | 540px | 720px | 960px | 1140px | |
| 100% | 100% | 720px | 960px | 1140px | |
| 100% | 100% | 100% | 960px | 1140px | |
| 100% | 100% | 100% | 100% | 1140px | |
| 100% | 100% | 100% | 100% | 100% |
Responsive
Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply s for each of the higher breakpoints. For example, is 100% wide to start until the breakpoint is reached, where it will scale up with , , and .
Responsive breakpoints
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
We occasionally use media queries that go in the other direction (the given screen size or smaller):
Note that since browsers do not currently support , we work around the limitations of and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
Once again, these media queries are also available via Sass mixins:
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
These media queries are also available via Sass mixins:
Similarly, media queries may span multiple breakpoint widths:
The Sass mixin for targeting the same screen size range would be:
Загрузка и подключение файлов Bootstrap 4
Bootstrap 4 доступен для скачивания в скомпилированном виде, т.е. файлы, которые вы получите после распаковки архива будут в формате css и js, причем они будут размещены в соответствующих папках css и js.
Можно также скачать , которые подойдут для разработчиков, знакомых с SASS (SCSS). Этот вариант лучше подходит для тех, кто будет менять значение переменных для создания собственных параметров сетки, цветов, отступов или шрифтов. Если вы пока не разбираетесь в принципах SASS, имеет смысл подключать стандартную версию Bootstrap 4 и переопределять некоторые правила в собственном стилевом файле. Также можно будет подключать различные темы Bootstrap.
Если вы не хотите или не можете скачать архив с основными файлами Bootstrap, тогда ваш вариант — подключение файлов через Bootstrap CDN. В этом случае вам необходимо стабильное соединение с Интернетом.
Bootstrap CDN
<!— подключение css-файла —>
<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css»
integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»>
<!— подключение нужной версии jQuery —>
<script src=»https://code.jquery.com/jquery-3.3.1.slim.min.js»
integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo» crossorigin=»anonymous»>
</script>
<!— подключение popper.js, необходимого для корректной работы некоторых плагинов Bootstrap 4 —>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js»
integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=»anonymous»>
</script>
<!— подключение js-файла —>
<script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js»
integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T» crossorigin=»anonymous»>
</script>
|
1 |
<!—подключениеcss-файла—> <link rel=»stylesheet»href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css» integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB»crossorigin=»anonymous»> <!—подключениенужнойверсииjQuery—> <script src=»https://code.jquery.com/jquery-3.3.1.slim.min.js» integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo»crossorigin=»anonymous»> </script> <!—подключениеpopper.js,необходимогодлякорректнойработынекоторыхплагиновBootstrap4—> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js» integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″crossorigin=»anonymous»> </script> <!—подключениеjs-файла—> <script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js» integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T»crossorigin=»anonymous»> </script> |
Плюсом данного способа подключения файлов Bootstrap является то, что вы пользуйтесь кэшированной версией Bootstrap-4 для «облегчения» страницы и ускорения загрузки, т.к. такой способ использует ряд сайтов, которые уже, возможно, загружал пользователь на свой компьютер.
Для тех, кто использует npm или другие системы управления пакетами (например, Composer), существует ряд вариантов загрузок через пакетные менеджеры, представленные на или его .
Quick start
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? Head to the downloads page.
JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.
Show components requiring JavaScript
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
- Collapse for toggling visibility of content
- Dropdowns for displaying and positioning (also requires Popper.js)
- Modals for displaying, positioning, and scroll behavior
- Navbar for extending our Collapse plugin to implement responsive behavior
- Tooltips and popovers for displaying and positioning (also requires Popper.js)
- Scrollspy for scroll behavior and navigation updates
