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

• Оригинальный адрес:Learn Bootstrap 4 in 30 minutes by building a landing page website
• Оригинальный автор:SaidHayani@
• Перевод с:Программа перевода самородков
• Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
• Переводчик:Zheng7426
• Корректор:Park-ma, Moonliujk

отtemplatetoaster

Руководство для новичков

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

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

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

Основные знания

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

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

содержание

Темы, которые мы рассмотрим при создании нашего веб-сайта:

• Загрузка и установка Bootstrap 4
• Новое в Bootstrap 4
• Система сетки Bootstrap
• Панель навигации
• заглавие
• кнопка
• Раздел "Обо мне"
• Раздел портфолио
• Раздел блога
• карта
• Раздел команды
• Форма обратной связи
• шрифт
• эффект смахивания
• Суммировать

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

Есть три способа добавить Bootstrap 4 в ваш проект:

1. Через npm (менеджер пакетов узла)

Вы можете установить Bootstrap 4 с помощью этой строки команды:npm install bootstrap.

2. Через CDN (сеть доставки контента)

Вы можете добавить эту ссылку между тегами заголовка вашего проекта:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

3. скачав этоBootstrap 4кодовую базу и использовать ее локально.

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

Новое в Bootstrap 4

Что нового в Bootstrap 4? Чем он отличается от Bootstrap 3?

По сравнению с предыдущей версией Bootstrap 4 добавляет следующие замечательные новые функции:

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

Пока не беспокойтесь об этих деталях, давайте перейдем к другим важным темам.

Bootstrap Grid-система

Система сетки Bootstrap помогает с легкостью создавать макеты и создавать адаптивный веб-сайт. Единственное изменение имени класса в Bootstrap 4 — это удаление.xsсорт.

Всего сетка разделена на 12 столбцов, поэтому ваш макет будет реализован на основе этих 12 столбцов. Предпосылкой использования этой системы сетки является то, что вы должныdivдобавить.rowсорт.

col-lg-2 // 这个 class 适用于大型设备（如笔记本电脑）
col-md-2 // 这个 class 适用于中型设备（如平板电脑）
col-sm-2// 这个 class 适用于小型设备（如手机）

Навбар

Можно сказать, что инкапсуляция панели навигации в Bootstrap 4 очень крутая, и она может сильно помочь при создании адаптивной панели навигации.

Чтобы использовать панель навигации, мы должны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" href="#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Portfolio</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Team</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Post</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Contact</a>
       </li>
     </ul>
     
   </div>
</nav>

создать и присоединиться кmain.cssфайл для определения ваших собственных стилей CSS.

В твоемindex.htmlфайл, поместите следующую строку кода в дваheadСреди тегов:

<link rel="stylesheet" type="text/css" href="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 для размещения элементов вашего сайта. Например, если вы хотите поместить меню панели навигации справа, мы должны добавитьjustify-contentсвойства и назначитьflex-end.

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

После этого добавьте панель навигации.fixed-topclass и дать ему фиксированное положение. Чтобы сделать фон панели навигации светлым, добавьте.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='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;
}

Чтобы титульная страница выглядела более профессионально, добавьте наложение:

Добавьте следующий код в свой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);  
}

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

Для того, чтобы добавить описание, сначала нужно написатьdivи назови это.containerсорт.

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

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

После этого напишите еще один с разделом описанияdiv.

<div class="description text-center">  
   <h3>  
    Hello ,Welcome To My officail 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">See more</button>  
   </h3>  
  </div>

мы здесьdivнаписать в классе.description, и добавить.text-centerЧтобы содержимое этого раздела описания отображалось в центре всей страницы.

Кнопки

теперь кbuttonэлемент плюс именованный.btn btn-outline-secondaryсорт. В Bootstrap есть много других классов для кнопок.

Давайте посмотрим несколько примеров:

• CodePen Embed — Кнопка в начальной загрузке 4: различные стили кнопок

Ниже приведеныmain.cssв файле.descriptionCSS-код для:

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

На данный момент наш заголовок будет выглядеть так:

Это круто? :)

Раздел "Обо мне" (О нас)

Мы будем использовать несколько сеток Bootstrap, чтобы разделить этот раздел на две части. Предпосылка начала использования сеток заключается в том, что мы должны позволить.rowэтот класс становится родительскимdiv. (Примечание переводчика: поместите этот div на крайний край)

<div class="row></div>

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

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

первый слеваdivв:

<div class="row"> 
 // 左边
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/team-3.jpg" 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="images/team-3.jpg" 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;
}

портфолио

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

Структура 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="images/portfolio/port13.png" 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,3333% ширины больших устройств, таких как настольные компьютеры и большие планшеты. Аналогично, 12 столбцов на небольших устройствах (таких как мобильные телефоны) будут занимать 100% всей ширины контейнера. Добавьте немного стиля в нашу галерею:

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

Раздел блога (Блог)

Карта

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

Для создания карты мы используем файл с именем.cardКласс, и написано в одномdivв элементе.

Этот класс карт содержит ряд функций:

• .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="images/posts/polit.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/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;  
}

После добавления раздела блога дизайн сайта будет выглядеть так:

Это очень круто? 😄

Раздел команды

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

<!-- 团队版块 -->
<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="images/team-2.jpg" 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="images/team-3.jpg" 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="images/team-2.jpg" 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="images/team-3.jpg" 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;
}

Было бы неплохо анимировать наложение поверх эффекта наведения изображения 😄.

Для достижения этого эффекта вmain.cssДобавьте следующие стили:

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

Супер крутой и древесный! 😙

Форма обратной связи

Прежде чем мы закончим, контактная форма — это последний раздел, который нужно добавить 😃.

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

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

Для получения дополнительной информации об этом см.Документация по Bootstrap 4. В нашей контактной форме мы будем инкапсулировать каждый класс, который имеет класс.form-groupизdivмежду полями ввода. Сейчасindex.htmlКод для файла будет выглядеть так:

<!-- 联络表单 -->
<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, а затем выбираю шрифт в Google Fonts.Raleway. Это хороший шрифт, и он хорошо подходит для нашего шаблона.

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

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

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

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

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

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

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

Затем добавьте к каждой ссылке на панели навигации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Атрибуты.

запомнить: чтобы эффект притяжения работал правильно,idдолжен быть связан с панелью навигацииdata-valueСвойства точно такие же:

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

Суммировать

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

Документация по этому проекту доступна нанашел здесь.

Чтобы изучить Bootstrap 4, также ознакомьтесь с моим курсом по Bootstrap:

• Ускоренный курс Bootstrap 4: от начального до продвинутого | Саид Хаяни | Skillshare: В этом курсе вы изучите Bootstrap 4th edition, CSS-фреймворк для создания гибких страниц и...

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

---

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.