Изучите Bootstrap 4 за 30 минут, создав веб-сайт целевой страницы

1656675377 izuchite bootstrap 4 za 30 minut sozdav veb sajt czelevoj straniczy

от SaidHayani@

1*1_a4TocueD3AqEpsDDv4bA
с templatetoaster
1*a9OoxPsn-hrbjYpbNV6DzA

Руководство для начинающих

«Bootstrap – это бесплатная интерфейсная библиотека с открытым кодом для разработки веб-сайтов и веб-приложений. Он содержит шаблоны дизайна на основе HTML и CSS для всего от типографии, форм, кнопок, навигации и других компонентов интерфейса, а также расширений JavaScript. В отличие от многих других веб-фреймворков, Bootstrap занимается только интерфейсной разработкой». — Википедия

Привет! Прежде чем мы начнем, посмотрите мой полный курс, чтобы изучить Bootstrap 4, где вы узнаете о новых функциях Bootstrap и о том, как их использовать для улучшения взаимодействия с пользователем.

Существует множество версий Bootstrap, причем версия 4 является последней. В этой статье мы собираемся создать сайт с помощью Bootstrap 4.

предпосылки

Прежде чем начать, есть некоторые навыки, которые вы должны знать, чтобы изучить и использовать фреймворк Bootstrap:

  • Основы HTML
  • базовые знания CSS
  • и немного базового JQuery

Содержание

При создании сайта мы рассмотрим следующие темы:

Загрузка и установка Bootstrap 4

Есть три способа установить и включить Bootstrap 4 в ваш проект:

  1. Используйте npm

Вы можете установить Bootstrap 4, выполнив эту команду npm install bootstrap

2. Используйте сеть доставки содержимого (CDN)

Добавив эту ссылку в свой проект между тегами head:

<link rel="stylesheet" href=" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

3. Загрузите библиотеку Bootstrap 4 и используйте локально.

Структура нашего проекта должна выглядеть так:

1*cyhB-vVWlIwbNpDH_JNZYg

Новые функции Bootstrap 4

Что нового в Bootstrap 4? И какая разница между Bootstrap 3 и 4?

Bootstrap 4 теперь имеет несколько отличных функций, которых не было в предыдущей версии:

  • Bootstrap 4 написан с помощью Flexbox Grid, в то время как Bootstrap 3 был написан с помощью метода float.
    Если вы новичок в Flexbox, просмотрите это руководство.
  • Использование Bootstrap 4 rem Единицы CSS, в то время как Bootstrap 3 использует px.
    Посмотрите, чем отличаются эти две единицы.
  • Панели, миниатюры и колодцы полностью удалены.
    Подробнее о глобальных изменениях и удаленных функциях Bootstrap 4 вы можете прочитать здесь.

Не вдаваясь в подробности, давайте перейдем к другим важным вещам.

Система Bootstrap Grid

Bootstrap Grid поможет вам создать свой макет и легко создать адаптивный веб-сайт. Никаких изменений в названиях классов, кроме .xs класса, который больше нет в Bootstrap 4.

Сеть разделена на 12 столбцов, поэтому ваш макет будет базироваться на этом.

Чтобы использовать систему сеток, вам нужно будет добавить a .row класса до осн см.

col-lg-2 // class used for large devices like laptops
col-md-2 // class used for medium devices like tablets
col-sm-2// class used for small devices like mobile phones
1*VbIQyNsPrZ143nV8LaHLAg

Обертка навигационной панели достаточно крута в Bootstrap 4. Это очень полезно, когда дело доходит до создания адаптивной навигационной панели.

Чтобы получить его, мы собираемся добавить navbar класс к нашему index.html файл:

<!-- navbar -->  
 <nav class="navbar navbar-expand-lg fixed-top ">  
 <a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">  
 <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">     <ul class="navbar-nav mr-4">
 <li class="nav-item">
     <a class="nav-link" data-value="about" href="#">About</a>        </li>  
<li class="nav-item">
    <a class="nav-link " data-value="portfolio"href="#">Portfolio</a>    
 </li>
 <li class="nav-item"> 
    <a class="nav-link " data-value="blog" href="#">Blog</a>         </li>   
<li class="nav-item">  
   <a class="nav-link " data-value="team" href="#">         Team</a>       </li>  
<li class="nav-item"> 
 <a class="nav-link " data-value="contact" href="#">Contact</a>       </li> 
</ul> 
</div></nav>

Создать и включить a main.css файл, чтобы настроить стиль CSS.

Разместите это в пределах head тег в вашем index.html файл:

<link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/css/main.css">

Давайте добавим несколько цветов к нашей навигационной панели:

.navbar{ background:#F97300;}

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

Новая сеть Bootstrap создана с помощью системы Flexbox, поэтому для выравнивания нужно использовать свойство Flexbox. Например, чтобы разместить меню навигационной панели справа, нам нужно добавить a justify-content и установите для него значение flex-end.

.navbar-collapse{
 justify-content: flex-end;
}

Добавьте .fixed-top класс на навигационную панель, чтобы придать ей фиксированную позицию.

Чтобы сделать фоновый цвет навигационной панели светлым, добавьте .bg-light. Для темного фона добавьте .bg-darkа для светло-голубого фона добавьте
.bg-primary.

Вот как это должно выглядеть:

.bg-dark{
background-color:#343a40!important
}
.bg-primary{
background-color:#007bff!important
}
<header class="header">
  
</header>

Давайте попробуем сделать макет для заголовка.

Здесь мы хотим убедиться, что заглавие занимает высоту окна, поэтому мы собираемся использовать немного JQuery код.

Сначала создайте файл с названием main.js и включить его в index.html файл перед закрытием body тег:

<script type="text/javascript" src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/js/main.js"></script>

В main.js файл вставьте этот небольшой код JQuery:

$(document).ready(function(){
 $('.header').height($(window).height());
 
})

Было бы очень круто, если мы установили хорошее фоновое изображение для заголовка:

/*header style*/
.header{
 background-image: url('../images/headerback.jpg');
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}
1*LmLTI-enV2RSKjsO9hzPxQ

Давайте добавим наложение, чтобы заголовок выглядел немного профессиональнее:

Добавьте это к своему index.html файл:

<header class="header">
  <div class="overlay"></div>
</header>

Затем добавьте это к своему main.css файл:

.overlay{
 position: absolute;
 min-height: 100%;
 min-width: 100%;
 left: 0;
 top: 0;
 background: rgba(244, 244, 244, 0.79);
}

Теперь мы должны добавить описание в заголовок.

Чтобы завершить наше описание, мы сначала создадим a div и дайте ему класс .container.

.container это класс Bootstrap, который поможет вам обернуть содержимое и сделать ваш макет более чувствительным:

<header class="header">
  <div class="overlay"></div>
   <div class="container">
    
   </div>
  
</header>

Затем добавьте еще один div который будет содержать описание.

<div class="description ">
   <h1>    Hello ,Welcome To My official Website
    <p>    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>   
 <button class="btn btn-outline-secondary btn-lg">See more</button>   </h1>  
</div>

Мы дадим ему класс .description и добавьте .text-center чтобы убедиться, что содержимое находится в центре страницы.

кнопки

Добавьте класс .btn btn-outline-secondary к button элемент. Есть много других классов Bootstrap для кнопок.

Проверьте несколько примеров:

CodePen Embed – кнопки в Bootstrap 4
Кнопки Основная кнопка Кнопка по умолчанию Кнопка опасность Информация о кнопке Кнопка предупреждения Кнопка темная Кнопка успешно Кнопки…codepen.io

Вот как выглядит стиль для .description смотрит в main.css файл:

.description{
    position: absolute;
    top: 30%;
    margin: auto;
    padding: 2em;
    
}
.description h1{
 color:#F97300 ;
}
.description p{
 color:#666;
 font-size: 20px;
 width: 50%;
 line-height: 1.5;
}
.description button{
 border:1px  solid #F97300;
 background:#F97300;
 color:#fff;
}

После всего этого наш заголовок будет выглядеть так:

1*kV7umhOF5QPveMmADXUCSw

Круто не так :).

О разделе

1*VWnyo3Jg4brsW5YRZToCiQ

В этом разделе мы будем использовать сетку Bootstrap для разделения раздела на две части.

Чтобы запустить нашу сетку, мы должны назначить .row класс к родителям div.

<div class="row"></div>

Первый раздел будет слева и будет содержать изображение, второй раздел будет справа и будет содержать описание.

Каждый div займет 6 колонок – это означает половину раздела. Помните, что сетка поделена на 12 столбцов.

В первом div с левой стороны:

<div class="row"> 
 // left side
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src=" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
 </div>
 
</div>

После добавления элементов HTML вправо структура кода будет выглядеть так:

<div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src=" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
   </div>
   <div class="col-lg-8 col-md-8 col-sm-12 desc">
     
    <h3>D.John</h3>
    <p>
       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. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   </div>
  </div>

Вот как я это выглядел:

.about{
 margin: 4em 0;
 padding: 1em;
 position: relative;
}
.about h1{
 color:#F97300;
 margin: 2em;
}
.about img{
 height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
 display: block;
 color: #888;
 position: absolute;
 left: 115px;
}
.about .desc{
 padding: 2em;
 border-left:4px solid #10828C;
}
.about .desc h3{
 color: #10828C;
}
.about .desc p{
 line-height:2;
 color:#888;
}

Раздел портфолио

Теперь давайте перейдем к следующему фрагменту и создадим раздел портфолио, который будет содержать галерею.

1*fNaqxcagCvh8Ue3lZvK6Vw

Структура нашего HTML-кода для раздела Портфолио выглядит так:

<!-- portfolio -->
<div class="portfolio">
     <h1 class="text-center">Portfolio</h1>
 <div class="container">
  <div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src=" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port6.png" class="img-fluid">
   </div>
      
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port3.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port11.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/electric.png" class="img-fluid">
   </div>
      
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/Classic.jpg" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port8.png" class="img-fluid">
   </div>
  </div>
 </div>
</div>

Добавление .img-fluid к каждому изображению, чтобы сделать его отзывчивым.

Каждый элемент в нашей галерее будет занимать 4 столбца (помните, col-md-4 для средних устройств, col-lg-4 для больших устройств). Это равно 33,33333% на больших устройствах, таких как настольные компьютеры и большие планшеты, и 12 столбцов на маленьких устройствах (например, iPhone, мобильные устройства) будут занимать 100% контейнера.

Давайте добавим немного стиля к нашей галерее:

/*Portfolio*/
.portfolio{
 margin: 4em 0;
    position: relative; 
}
.portfolio h1{
 color:#F97300;
 margin: 2em; 
}
.portfolio img{
  height: 15rem;
  width: 100%;
  margin: 1em;
  
}

Раздел блога

1*3y9bIjRwf2RtGRzMIXwZIQ

карты

Карточки в Bootstrap 4 значительно упрощают дизайн блога. Карточки подходят для статей и постов.

Для создания карты используем класс .card и назначить его a см элемент,

Класс карт содержит много функций:

  • .card-header: определите заголовок карты
  • .card-body: для тела карты
  • .card-title: название карты
  • card-footer: определить нижний колонтитул карты.
  • .card-image: для изображения карты

Итак, HTML-код нашего сайта должен выглядеть примерно так:

<!-- Posts section -->
<div class="blog">
 <div class="container">
 <h1 class="text-center">Blog</h1>
  <div class="row">
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src=" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/images.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
        <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/imag2.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Нам нужно добавить в карты стиль CSS:

.blog{
 margin: 4em 0;
 position: relative; 
}
.blog h1{
 color:#F97300;
 margin: 2em; 
}
.blog .card{
 box-shadow: 0 0 20px #ccc;
}
.blog .card img{
 width: 100%;
 height: 12em;
}
.blog .card-title{
 color:#F97300;
  
}
.blog .card-body{
 padding: 1em;
}

После добавления раздела блога на наш веб-сайт дизайн должен выглядеть примерно так:

1*mHMPSea2jWdZ2dc_b658eA

Круто, не правда ли? ?

Командный раздел

1*1PaKtdHChKl534aExUfjCQ

В этом разделе мы используем систему сетки для равномерного распределения пространства между изображениями. Каждое изображение занимает 3 колонки (.col-md-3) контейнера – это 25% от общего пространства.

Наша структура HTML:

<!-- Team section -->
<div class="team">
 <div class="container">
    <h1 class="text-center">Our Team</h1>
  <div class="row">
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src=" class="img-fluid" alt="team">
    <div class="des">
      Sara
     </div>
    <span class="text-muted">Manager</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src=" class="img-fluid" alt="team">
    <div class="des">
       Chris
     </div>
    <span class="text-muted">S.enginner</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src=" class="img-fluid" alt="team">
    <div class="des">
      Layla 
     </div>
    <span class="text-muted">Front End Developer</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src=" class="img-fluid" alt="team">
     <div class="des">
      J.Jirard
     </div>
    <span class="text-muted">Team Manger</span>
   </div>
  </div>
 </div>
</div>

И добавим немного стиля:

.team{
 margin: 4em 0;
 position: relative;  
}
.team h1{
 color:#F97300;
 margin: 2em; 
}
.team .item{
 position: relative;
}
.team .des{
 background: #F97300;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 93%;
 transition:.3s ease-in-out;
 
}

Было бы неплохо добавить наложение к изображению при наведении курсора с помощью анимации?

1*SxGguj9S8JMncs-D3uNcsA

Чтобы создать этот эффект, добавьте следующие стили. main.css файл:

.team .item:hover .des{
 height: 100%;
 background:#f973007d;
 position: absolute;
 width: 89%;
 padding: 5em;
 top: 0;
 border-bottom-left-radius: 0;
}

Супер круто! ?

Контактный формуляр

1*vaI3jh3TFwSKBn6BcsBedw

Контактная форма – последний раздел, который нужно добавить, тогда мы готовы?

Раздел «Контактная форма» будет содержать форму, с помощью которой посетители смогут отправить электронное письмо или оставить отзыв. Мы будем использовать некоторые классы Bootstrap, чтобы сделать дизайн красивым и отзывчивым.

Как и Bootstrap 3, Bootstrap 4 также использует .form-control для полей ввода, но добавлены некоторые новые функции, например переключение с .input-group-addon (устаревшее) к .input-group-prepend (для использования значков в качестве меток).

Дополнительную информацию см. в документе Bootstrap 4. В нашей контактной форме мы обратим каждый вход между a div что имеет класс .form-group.

The index.html теперь файл выглядит примерно так:

<!-- Contact form -->
<div class="contact-form">
 <div class="container">
  <form>
   <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h1>Get in Touch</h1> 
    </div>
    <div class="col-lg-8 col-md-8 col-sm-12 right">
       <div class="form-group">
         <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
       </div>
       <div class="form-group">
         <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
       </div>
       <div class="form-group">
         <textarea class="form-control form-control-lg">
          
         </textarea>
       </div>
       <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
    </div>
   </div>
  </form>
 </div>
</div>

Стили раздела контактов:

main.css

.contact-form{
 margin: 6em 0;
 position: relative;  
}

.contact-form h1{
 padding:2em 1px;
 color: #F97300; 
}
.contact-form .right{
 max-width: 600px;
}
.contact-form .right .btn-secondary{
 background:  #F97300;
 color: #fff;
 border:0;
}
.contact-form .right .form-control::placeholder{
 color: #888;
 font-size: 16px;
}

Шрифты

Я считаю шрифты по умолчанию безобразными, поэтому мы собираемся использовать Google Font API, и мы выберем Raleway хороший шрифт, соответствующий нашему шаблону.

Добавьте эту ссылку к своему main.css файл:

@import url('https://fonts.googleapis.com/css?family=Raleway');

и установите глобальный стиль на HTML и теги заголовков:

html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Raleway";
}

Эффект прокрутки

1*a9OoxPsn-hrbjYpbNV6DzA

Последнее, чего не хватает, это эффект прокрутки. Здесь нам придется использовать JQuery. Не беспокойтесь, если вы с ним не знакомы, просто добавьте этот код в свой main.js файл:

$(".navbar a").click(function(){
  $("body,html").animate({
   scrollTop:$("#" + $(this).data('value')).offset().top
  },1000)
  
 })

и добавьте a data-value атрибут для каждой ссылки на панели навигации:

<li class="nav-item">
         <a class="nav-link" data-value="about" href="#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="portfolio" href="#">Portfolio</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="blog" href="#">Blog</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="team" href="#">
         Team</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="contact" href="#">Contact</a>
       </li>

Установить id атрибут для каждого раздела.

Примечание: The id должно быть идентичным data-value атрибут в ссылке панели навигации для работы прокрутки:

<div class="about" id="about"></div>

Подведение итогов и заключение

Bootstrap 4 – отличный вариант для создания вашего веб-приложения. Он обеспечивает высокое качество элементов интерфейса и легко настраивать, интегрировать и использовать. Это также поможет вам включить скорость реагирования на ваш сайт, следовательно, обеспечивая премиум-пользование вашим пользователям.

Вы найдете файлы проекта GitHub.

Если вам нужны темы и шаблоны Bootstrap, вы можете проверить BootstrapBay, у них есть отличные продукты

Просмотрите мой курс Bootstrap, чтобы изучить Bootstrap 4:

Ускоренный курс Bootstrap 4: базовый для продвижения Саид Хаяни | Skillshare
В этом классе вы будете изучать исходную версию 4, структуру CSS для создания гибких шаблонов и…ст.ш

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *