Подключаем Bootstrap!

Уроки Сент. 27, 2019 0 4380 Добавить в список чтения

Подключаем Bootstrap в нашу пробную страничку сайта.

Сегодня на уроке подключим Bootstrap к нашей страничке.

Для этого сначала скачаем готовый bootstrap.min.css который я подготовил уже для вас и сохраним его в папке "css"

На предыдущем уроке мы подключали уже файл css к нашему сайту, проделаем эту операцию еще раз.

Теперь наш файл index.html выглядит так

<!-- это комментарии. их не видно при отображении файла в браузере-->
<html> <!-- тег html обозначает открытие файла html-->

   <head> <!-- head обозначает открытие головной части документа-->
   <link rel="stylesheet" href="css/bootstrap.min.css" /> <!-- Подключаем bootstrap -->
   <link rel="stylesheet" href="css/style.css" type="text/css"/> <!-- Подключаем основной css файл -->
      <!-- title обозначает название документа. Отображается вверху браузера -->
      <title> 
      Название Вашей первой странички 
      </title> <!-- закрываем тег title иначе у нас всё последующее будет считаться заголовком-->

   </head> <!-- тег head также нужно закрыть-->

 <body>  <!-- наконец открываем тело нашего документа. Здесь будет всё его содержание-->

    <!--начиная отсюда вставляем любые текст, заголовки, ссылки и тп-->
    <h1>Заголовок моей странички</h1> <!--h1 служит для обозначения заголовка. 
    Есть ещё h2, h3 и так до h6. самого маленького заголовка-->
    Это моя первая web-страничка! 

	

 </body> <!--тело также следует закрыть, после него уже не вставляем текст и тп-->

</html> <!-- закрывающий тег html обозначает закрытие файла html-->

Теперь проверим работает ли у нас bootstrap

Вставим между тегами <body> </body> вот такой код

	
<button class = "btn btn-success">Ура, я подключил Bootstrap!</button>

Запускаем index.html и если вы сделали все правильно то видим

Как видите бутстрап на много облегчает верстку страницы, за нас уже все сделали.

Теперь мы разобрались в как подключать к сайту необходимые стили. Вы теперь представляете как редактировать нужные файлы, как коментировать свой код. Теперь можно приступать к серьезной работе. На следующем уроке мы будем строить свой сайт на примере лицензионного шаблона, я подготовлю архив с необходимыми файлами и мы построим профессиональный сайт, с красивым слайдером, с необходимыми блоками, такими как Контакты и Портфолио.