

Посібник для початківців
«Bootstrap - це безкоштовна інтерфейсна бібліотека з відкритим кодом для проектування веб-сайтів та веб-додатків. Він містить шаблони дизайну на основі HTML та CSS для всього, від типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також розширень JavaScript. На відміну від багатьох інших веб-фреймворків, Bootstrap займається лише інтерфейсною розробкою ». - ВікіпедіяПривіт, перед тим, як ми почнемо перевіряти мій повний клас, щоб вивчити Bootstrap 4, де ви дізнаєтеся про нові функції bootstrap та як використовувати їх для покращення взаємодії з користувачем.Існує багато версій Bootstrap, остання версія якої 4. У цій статті ми збираємося створити веб-сайт за допомогою Bootstrap 4.
Передумови
Перед початком роботи є кілька навичок, які ви повинні знати, щоб навчитися та використовувати фреймворк Bootstrap:
- Основи HTML
- базові знання CSS
- і деякі основні JQuery
Зміст
Під час створення веб-сайту ми розглянемо теми нижче:
- Завантаження та встановлення Bootstrap 4
- Нові можливості Bootstrap 4
- Сітка Bootstrap
- Навбар
- Заголовок
- Кнопки
- Про розділ
- Розділ портфоліо
- Розділ блогу
- Картки
- Командна секція
- Контактний формуляр
- Шрифти
- Ефект прокрутки
- Підведення підсумків та висновок
Завантаження та встановлення Bootstrap 4
Існує три способи встановити та включити Bootstrap 4 для вашого проекту:
- Використовуйте npm
Ви можете встановити Bootstrap 4, виконавши цю команду npm install bootstrap
2. Використовуйте мережу доставки вмісту (CDN)
Включивши це посилання у свій проект між тегами head:
3. Завантажте бібліотеку Bootstrap 4 і використовуйте її локально.
Структура нашого проекту повинна виглядати так:

Нові можливості Bootstrap 4
Що нового в Bootstrap 4? А чим відрізняється Bootstrap 3 і 4?
Bootstrap 4 тепер має деякі чудові функції, яких не було в останній версії:
- Bootstrap 4 написано за допомогою Flexbox Grid, тоді як Bootstrap 3 написано методом float.
Якщо ви новачок у Flexbox, перегляньте цей посібник.
- Bootstrap 4 використовує
rem
одиниці CSS, тоді як Bootstrap 3 використовуєpx
.Подивіться, чим відрізняються ці дві одиниці.
- Панелі, ескізи та свердловини повністю скинуті.
Детальніше про глобальні зміни та вилучені функції Bootstrap 4 ви можете прочитати тут.
Не вдаючись тут занадто глибоко до деталей, перейдемо до деяких інших важливих речей.
Система Bootstrap Grid
Система Bootstrap Grid допоможе вам створити ваш макет та легко створити адаптивний веб-сайт. В іменах класів не було змін, за винятком .xs
класу, який більше не існує в Bootstrap 4.
Сітка розділена на 12 стовпців, тому ваш макет буде базуватися на цьому.
Щоб використовувати систему сіток, вам доведеться додати .row
клас до основного div .
col-lg-2 // class used for large devices like laptops col-md-2 // class used for medium devices like tablets col-sm-2// class used for small devices like mobile phones
Навбар

Обгортка навігаційної панелі досить крута в Bootstrap 4. Це так корисно, коли справа доходить до створення чуйної навігаційної панелі.
Щоб отримати його, ми збираємось додати navbar
клас до нашого index.html
файлу:
Home - About
- Portfolio
- Blog
- Team
- Contact
Створіть і включіть main.css
файл, щоб ви могли налаштувати стиль CSS.
Помістіть це в head
тег у своєму index.html
файлі:
Давайте додамо кілька кольорів на нашу панель навігації:
.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;}
The new Bootstrap Grid is built with the Flexbox system, so for alignment, you have to use a Flexbox property. For example, to place the navbar menu on the right we need to add a justify-content
property and set it to flex-end
.
.navbar-collapse{ justify-content: flex-end; }
Add the .fixed-top
class to the navbar to give it a fixed position.
To make the navbar background color light, add .bg-light
. For a dark background, add .bg-dark
, and for a light blue background, add
.bg-primary
.
Here’s how that should look:
.bg-dark{ background-color:#343a40!important } .bg-primary{ background-color:#007bff!important }
Header
Let’s try and create a layout for the header.
Here, we want to make sure the header takes up the window’s height so we are going to use a little JQuery
code.
First, create a file named main.js
and include it in the index.html
filebefore the closing body
tag:
In the main.js
file insert this a little code of JQuery:
$(document).ready(function(){ $('.header').height($(window).height()); })
It’d be pretty cool if we set a nice background image to the header:
/*header style*/ .header{ background-image: url('../images/headerback.jpg'); background-attachment: fixed; background-size: cover; background-position: center; }

Let’s add an overlay to make the header look a bit more professional:
Add this to your index.html
file:
Then, add this to your main.css
file:
.overlay{ position: absolute; min-height: 100%; min-width: 100%; left: 0; top: 0; background: rgba(244, 244, 244, 0.79); }
Now we have to add a description inside the header.
To wrap our description we’re first going to create a div
and give it a class .container
.
.container
is a Bootstrap class that will help you to wrap your content and make your layout more responsive:
Then, add another div
which will contain the description.
Hello ,Welcome To My official 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
We’ll give it a class of .description
and add the .text-center
class to make sure the content is placed in the center of the page.
Buttons
Add the class .btn btn-outline-secondary
to the button
element. there are many other Bootstrap classes for buttons.
Check some examples:
CodePen Embed — buttons in Bootstrap 4
Buttons Button primary Button default Button danger Button info Button warning Button dark Button success Buttons…codepen.io
Here’s how the styling for the .description
looks in the main.css
file:
.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; }
After all of that, our header will look like this:

Cool isn’t :).
About Section

In this section, we will use some Bootstrap Grid to divide the section into two parts.
To start our grid, we have to assign the.row
class to the parent div
.
The first section will be on the left and will contain a picture, the second section will be on the right and contain a description.
Each div
will take up 6 columns — that means half of the section. Remember that a grid is divided into 12 columns.
In the first div
on the left side:
// left side S.Web Developer
After adding the the HTML elements on the right-side, the structure of the code will look like this:
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 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Here’s how I’ve made it look:
.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 Section
Now, let’s move onto the next bit and make a portfolio section that will contain a gallery.

The structure of our HTML code for the Portfolio section looks like this:
Portfolio
Adding .img-fluid
to each image to makes it responsive.
Each item in our gallery will take up 4 columns (remember, col-md-4
for medium devices, col-lg-4
for large devices). That’s equal to 33.33333%on large devices such desktops and large tablets, and 12 columns on a small device (like iPhone, mobile devices) will take up 100% of the container.
Let’s add some styling to our Gallery:
/*Portfolio*/ .portfolio{ margin: 4em 0; position: relative; } .portfolio h1{ color:#F97300; margin: 2em; } .portfolio img{ height: 15rem; width: 100%; margin: 1em; }
Blog Section

Cards
Cards in Bootstrap 4 make blog design so much easier. The cards are appropriate for articles and posts.
To create a card, we use the class .card
and assign it to a div element,
The card class contains many features:
.card-header
: define the card header.card-body
:for the card body.card-title
: the title of the cardcard-footer
:define the footer of the card..card-image
: for the card’s image
So, our website’s HTML should now look something like this:
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
We need to add some CSS style to the cards:
.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; }
After adding the Blog section to our website, the design should now look something like this:

Cool isn’t it? ?
Team Section

In this section we will use the grid system to distribute even space between images. Each image takes up 3 columns (.col-md-3
) of the container — that equals 25% of the total space.
Our HTML structure:
Our Team
Sara Manager Chris S.enginner Layla Front End Developer J.Jirard Team Manger
And let’s add some style:
.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; }
Adding an overlay to the image on-hover using animation would be nice ?.

To make this effect , add the styles below to main.css
file:
.team .item:hover .des{ height: 100%; background:#f973007d; position: absolute; width: 89%; padding: 5em; top: 0; border-bottom-left-radius: 0; }
Super cool! ?
Contact Form

The Contact Form is the last section to add, then we are done ?.
The Contact Form section will contain a form through which visitors can send an email or give feedback. We will use some Bootstrap classes to make the design beautiful and responsive.
Like Bootstrap 3, Bootstrap 4 also uses the .form-control
class for input fields, but there are some new features added — like switching from .input-group-addon
(deprecated) to .input-group-prepend
(to use icons as labels ).
See Bootstrap 4 document for more information. In our Contact form we will wrap each input between a div
that has the class.form-group
.
The index.html
file now looks something like this:
Get in Touch
Contact section’styles :
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; }
Fonts
I think default fonts are ugly so we are going to use the Google Font API, and we’ll choose Raleway which is a nice font and appropriate to our template.
Add this link into your main.css
file:
@import url('//fonts.googleapis.com/css?family=Raleway');
and set the global style to HTML and heading tags:
html,h1,h2,h3,h4,h5,h6,a{ font-family: "Raleway"; }
Scroll Effect

The last thing missing is scroll effect. Here, we’ll have to use some JQuery. Don’t worry️ if you are not familiar with it, just add this code into yourmain.js
file:
$(".navbar a").click(function(){ $("body,html").animate({ scrollTop:$("#" + $(this).data('value')).offset().top },1000) })
and add a data-value
attribute to each navbar link:
About Portfolio Blog Team Contact
Set an id
attribute to each section.
Примітка : Щоб прокрутка могла працювати, атрибут у навігаційній панелі id
повинен бути ідентичним data-value
:
Підведення підсумків та висновок
Bootstrap 4 - чудовий варіант для створення веб-програми. Він забезпечує високу якість елементів інтерфейсу, його легко налаштувати, інтегрувати та використовувати. Це також допоможе вам включити реагування на ваш веб-сайт, отже, забезпечуючи своїм користувачам преміальний досвід роботи.
Файли проекту ви знайдете на GitHub.
Якщо вам потрібні деякі теми та шаблони Bootstrap, ви можете перевірити BootstrapBay, у них є чудові продуктиПерегляньте мій клас Bootstrap, щоб вивчити Bootstrap 4:
Аварійний курс Bootstrap 4: основи для просування | Саїд Хаяні | Поділитися навичками
У цьому класі ви збираєтесь вивчити bootstrap версії 4, фреймворк CSS для побудови гнучких шаблонів і… skl.sh