Горбань Ю. В., ст. гр.

КІ-18

Лабораторна робота № 4
Тема: «Створення сайтів на основі використання BootStrap»
Мета: навчитися створювати сайти на основі використання фреймворку
Bootstrap

Завдання для самостійного виконання

1. Освоїти теоретичний та практичний матеріал.
2. На оцінку 3 скомпілювати та пояснити принцип роботи лістингу сайту
представленого у лабораторній роботі.
3. На оцінку 4 створити сайт який буде містити ефекти згідно варіанту
представленого у таблиці 1 (Сітка, карусель, кнопки, підказки)

<!-- CAROUSEL -->

<div id="slides" class="carousel slide" data-ride="carousel">

<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/background.png">
<div class="carousel-caption">
<h1 class="display-2">Bootstrap</h1>
<button type="button" class="btn btn-outline-light btn-lg">Get
started</button>
<a href="https://getbootstrap.com"> <button type="button" class="btn
btn-primary btn-outline-light btn-lg" data-toggle="tooltip" data-placement="left"
title="Go to Bootstrap.com">Learn more</button></a>
</div>
</div>
<div class="carousel-item">
<img src="img/background3.png">
</div>
<div class="carousel-item">
<img src="img/background2.png">
</div>
</div>
</div>

<!-- WELCOME -->

<div id="welcome" class="container-fluid">

 Горбань Ю. В., ст. гр. КІ-18
<div class="row text-center">
<div class="col-12">
<h1 class="display-4 p-5">Build your website easily</h1>
</div>
</div>
</div>

<!-- THREE COLUMN SECTION -->

<div class="container-fluid p-4">

<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-code"></i>
<h3>HTML5</h3>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fab fa-css3"></i>
<h3>CCS3</h3>
</div>
<div class="col-xs-12 col-md-4">
<i class="fas fa-bold"></i>
<h3>BOOTSTRAP</h3>
</div>
</div>
<hr class="my-4">
</div>

CSS:
html, body{
height: 100%;
width: 100%;
}

.navbar-nav li{
padding-right: 25px;
}

.nav-item a{
font-size: 1.2em;
}

.carousel-inner img{
width: 100%;
height: 100%;
 Горбань Ю. В., ст. гр. КІ-18
}

.carousel-caption{
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.carousel-caption h1{
text-transform: uppercase;
font-size: 500%;
text-shadow: 1px 1px 15px #000;
}

#welcome h1{
font-size: 400%
}

.fa-code{
color: #e54d26;
}

.fa-css3{
color: #2563af;
}

.fa-bold{
color: #563d7c;
}

.fa-code, .fa-css3, .fa-bold{

font-size: 4rem;
padding-bottom: 0.7rem;
}

@media (max-width: 768px){

.carousel-caption{
top: 45%;
}

.carousel-caption h1{
font-size: 300%;
}
 Горбань Ю. В., ст. гр. КІ-18
#welcome h1{
font-size: 300%
}

.carousel-caption .btn{
font-size: 100%;
}

Рисунок 4.1 – Сайт

Висновок: в ході лабораторної роботи було отримано навички роботи з

фреймворком Bootstrap, створено сайт на основі використання фреймворку
Bootstrap.