Обучение технологиям в одном видеоуроке

16 уроков Консультации
/ Видеокурсы / Обучение технологиям в одном видеоуроке / Bootstrap верстка современного сайта за 45 минут!

Bootstrap верстка современного сайта за 45 минут!

Bootstrap верстка современного сайта за 45 минут!


Как создать сайт на Bootstrap 4? В этом видео мы с вами создадим полноценный адаптивный сайт на Bootstrap всего за 45 минут. Верстка сайта дело несложное, поэтому вы научитесь делать отличные сайты всего за 45 минут!

Видео урок:

Материалы для курса

bootstrap_website.zip Необходима подписка!

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Файл index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap сайт</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Домой</a></li>
          <li><a href="#">Про нас</a></li>
          <li><a href="#">Сервсиы</a></li>
          <li><a href="#">Работы</a></li>
          <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="headerwrap">
    <div class="container">
      <div class="row centered">
        <div class="col-lg-8 col-lg-offset-2">
          <h1>Bootstrap is awesome!</h1>
          <h2>Сайты на Bootstrap отличные</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="container w">
    <div class="row centered">
      <br><br>
      <div class="col-lg-4">
        <i class="fa fa-heart"></i>
        <h4>Дизайн</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
      <div class="col-lg-4">
        <i class="fa fa-laptop"></i>
        <h4>Компьютеры</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
      <div class="col-lg-4">
        <i class="fa fa-trophy"></i>
        <h4>Помощь</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
    </div>
    <br><br>
  </div>
  <div id="dg">
    <div class="container">
      <div class="row centered">
        <h4>Последние работы</h4>
        <br>
        <div class="col-lg-4">
          <div class="tilt">
            <a href="#"><img src="img/p01.png" alt=""></a>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="tilt">
            <a href="#"><img src="img/p02.png" alt=""></a>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="tilt">
            <a href="#"><img src="img/p03.png" alt=""></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container wb">
    <div class="row centered">
      <br><br>
      <div class="col-lg-8 col-lg-offset-2">
        <h4>Мы создаем сайты</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
        <p><br><br></p>
      </div>
      <div class="col-lg-2"></div>
      <div class="col-lg-10 col-lg-offset-1">
        <img src="img/munter.png" alt="" class="img-responsive">
      </div>
    </div>
  </div>
  <div id="lg">
    <div class="container">
      <div class="row centered">
        <h4>Партнеры</h4>
        <div class="col-lg-2 col-lg-offset-1">
          <img src="img/c01.gif" alt="">
        </div>
        <div class="col-lg-2">
          <img src="img/c02.gif" alt="">
        </div>
        <div class="col-lg-2">
          <img src="img/c03.gif" alt="">
        </div>
        <div class="col-lg-2">
          <img src="img/c04.gif" alt="">
        </div>
        <div class="col-lg-2">
          <img src="img/c05.gif" alt="">
        </div>
      </div>
    </div>
  </div>
  <div id="r">
    <div class="container">
      <div class="row centered">
        <div class="col-lg-8 col-lg-offset-2">
          <h4>Разарботка сайтов на профессиональном уровне</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
        </div>
      </div>
    </div>
  </div>
  <div id="f">
    <div class="container">
      <div class="row centered">
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-vk"></i></a>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>
Посмотреть остальной код можно после подписки на проект!

Домашнее задание

Новый блок
Сделайте еще один блок, который будет синего цвета. Этот блок будет на всю ширину экрана, расположен он будет после блока "Последние работы". Внутри блока находятся еще два блока, в каждом есть заголовок и текст.
Посмотреть ответ
Вы могли это сделать следующим образом, код htlm:
<div id="b">
    <div class="container">
      <div class="row centered">
        <div class="col-lg-6">
            <h4>Bootstrap отличный помощник!</h4>
            <p>Lorem 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</p>
        </div>
        <div class="col-lg-6">
            <h4>При помощи Bootstrap все написано!</h4>
            <p>Lorem 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</p>
        </div>
      </div>
    </div>
  </div>
Также вам понадобился бы код css, к примеру такой:
#b {
  background: #78D3ED;
  padding-top: 30px;
  padding-bottom: 30px;
}

#b h4 {
  color: #333;
  font-size: 45px;
  font-weight: bolder;
}

#b p {
  color: white;
}
Получить остальные домашние задания можно после подписки на проект!

Также стоит посмотреть