0

Створення макету сторінки з компонентів Bootstrap 4


Порядок виконання дій

Bootstrap - складний і багатогранний фреймворк, який має стандартні компоненти і модулі. для створення макету веб-сторінки. 

1. У папці проекту "Portfolio" створити файл index.html

2. Створити  базову структуру сторінки з підключенням Bootstrap 4 у голові сторінки  https://bootstrap-4.ru/docs/4.5/getting-started/introduction/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
та скриптів: 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
3. Підключити власну CSS
4. Підключити шрифт Font awesome 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
 5. У тілі сторінки додати код компоненту "Навігаційна панель" з розкривним меню https://bootstrap-4.ru/docs/4.5/components/navbar/ 
6. Стилізувати стадартну  навігаційну панель у власній таблиці каскадних стидів таким чином:

.navbar{
    background:#ff6914 !important;
    padding-top: 1rem!important;
   }
   .nav-link , .navbar-brand{
    color: #f4f4f4 !important;
    cursor: pointer !important;
   }
   .nav-link{
    margin-right: 1em !important;
   }
   .nav-link:hover{
    background: #f4f4f4 !important;
    color: #887cf5 !important;
    }
    
     .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;
     }
 також до пунктів меню додати  іконки шрифта Font Awesome https://fontawesome.com/icons?d=gallery&m=free
7. В HTML після навігаційної панелі додати  блок <main role="main"></main> у який додати  компонент Jombotron https://bootstrap-4.ru/docs/4.5/components/jumbotron/
8. Для того  щоб текст  компоненту Jombotron не був притиснутий до лівого краю вікна браузера, варто в блоці з класом Jombotron  додати  ще блок-обгортку для h1 та p з класом .container
9. Стилізувати компонент Jombotron додавши для нього фонове зображення, яке має бути завантажено в папку portfolio/img 
 іконка  


фон

CSS доповнити таким кодом:
    .jumbotron{
        height: 100vh !important;
        background-image: url('../img/banner.jpg');
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
       }
       .jumbotron>.container>.display-4{
         color: #f4f4f4 !important;
         margin-top: 50px;
       }
       .jumbotron>.container>p{
         color:#fff;
       }
       .jumbotron>.container>.btn-primary{
       background-color: #fff;
       }
       .btn-primary {
        color: #007bff#fff;
        background-color:#ffa101 ;
        border-color:#ffa101;}
        .btn-primary:hover{
         background-color: #00c6ed;
        }
10. Після компоненту Jombotron додати сітку з блоком класу container, у рядку row розмістити три блоки <div class="col-md-4"> 
11. В блоках класу col-md-4  розмістити  заголовки h2, p - з текстом  опису і другий абзац в якому розміщено посилання класу btn btn-secondary
12. Стилізувати ці блоки за власним уподобанням