itProger Відеокурси Обучение технологиям в одном видеоуроке Сайт на Bootstrap за 45 минут

Сайт на Bootstrap за 45 минут

Создание сайта на Bootstrap за 45 минут ⚡ Обучение основ верстки на Бутстрапе ⚡ Видео уроки верстки на Bootstrap для начинающих на itProger

Відеоурок

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

Как создать сайт на Bootstrap? В видео мы с вами создадим полноценный адаптивный сайт на 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>

Подивитися інший код можна після підписки на проект!

Завдання до уроку

Новый секция

Создайте дополнительную секцию и расположите её внутри сайта.

Секция должна выглядеть как на фото ниже:

Подивитися відповідь

Пропишите необходимый HTML:

<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;
}

Отримати інші домашні завдання можна після підписки на проект

Попередній

Наступний

Також варто подивитися