Научитесь создавать первый сайт Bootstrap 4

1656645732 nauchites sozdavat pervyj sajt bootstrap 4

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

Z4irOKS7b5aR5aWnh4yuB3Yme-IU9BM0vraJ

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

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

Если вы хотите правильно изучить Bootstrap 4.0, посмотрите этот бесплатный курс на Scrimba!

Нажмите на изображение, чтобы перейти к курсу
Нажмите на здесь чтобы попасть на курс.

Теперь начнем.

Что мы построим

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

1*kEPuAx-hfMY6IYJRryX_Hg

Если вы хотите поиграть с кодом, посмотрите эту игровую площадку Scrimba. Не стесняйтесь использовать его в качестве справочника, если вам что-то не понятно в статье и нужно поэкспериментировать самостоятельно.

Навигационная панель

Начнём с навигационной панели. В Bootstrap 4.0 они сделали навигационные панели более простыми, поскольку теперь для них нужно немного меньше разметки. Вот что нам нужно для создания простейшей возможной панели навигации:

Мое портфолио

Что приводит к следующему:

1*h6pEAqF3q0nsD3bM38_pLQ

The bg-light делает фон светло-серым, тогда как navbar-light класс придает тексту темный цвет. По умолчанию цвет текста на навигационных панелях синий, однако, я думаю, он выглядит лучше с navbar-light класс.

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

<ul class="navbar-nav">  
  <li class="navbar-item">  
    <a href="#" class="nav-link">Homepage</a>  
  </li>  
  <li class="navbar-item">  
    <a href="#" class="nav-link">Blog</a>  
  </li>  
  <li class="navbar-item">  
    <a href="#" class="nav-link">About</a>  
  </li>  
  <li class="navbar-item">  
    <a href="#" class="nav-link">Contact Us</a>  
  </li>  
</ul>

Следует обратить внимание на три класса. navbar-nav,navbar-link и navbar-item. Вместе они создают параметры навигации так, как вы хотите.

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

1*fpG4uxcu7-iKPpTHBcNCeA

Однако теперь нам нужно сделать его адаптивным, поскольку мы хотим, чтобы наши параметры навигации сворачивались в значок гамбургера на экранах поменьше. Чтобы добиться этого, нам нужно сделать две вещи:

  1. Сообщите Bootstrap, в какой момент параметры навигации должны сломаться, чтобы превратиться в гамбургер.
  2. Создайте разметку для гамбургера

Чтобы свернуть его, мы добавим navbar-expand-md класса до nav сам элемент:

<nav class="navbar navbar-light bg-light `**navbar-expand-md**`">  
...  
</nav

Это сообщает Bootstrap, что мы хотим, чтобы параметры навигационной панели переключались между развернутым и свернутым состояниями на md точка разрыва, которая находится при768px.

Нам также нужно обратить наши параметры навигации в div (с двумя классами collapse и navbar-collapse), который сообщает Bootstrap, что это та часть, которую мы хотим свернуть.

<div class="collapse navbar-collapse" id="navbarNav">  
  <ul class="navbar-nav">  
  ...   
  </ul>  
</div>

Идентификатор navbarNav состоит в том, чтобы соединить этот предмет с data-target атрибут в значке гамбургера, который мы создадим так:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">  
  <span class="navbar-toggler-icon"></span>  
</button>
```html
We now have a great looking navbar, which collapses and expands at our chosen breakpoint:

![](

### Jumbotron

The next step is to create something that welcomes our users to the website below the navbar. To do that, we’ll use the [jumbotron]( component. It’s super simple:
```html
<div class="jumbotron jumbotron-fluid">  
  <div class="container">  
  <h1 class="display-3">Welcome to my website</h1>  
  <p class="lead">I'm a developer and designer. Check my portfolio below</p>  
</div>

Что приводит к следующему:

1*6gtZU68RZIRChydZ7_nNxg

The display-3 и lead классы — это классы типографики, которые, на мой взгляд, делают текст более уверенным и лучше. Вы можете прочитать больше о типографии в Bootstrap 4.0 здесь.

Основное содержимое — сетка и карты

Ниже нашего jumbotron мы собираемся добавить основное содержимое нашего веб-сайта, которое будет состоять из четырех карт. Карта – это совершенно новый компонент Bootstrap 4.0, который заменяет панели, колодцы и миниатюры из Bootstrap 3.0.

Давайте сначала посмотрим, что мы хотим создать:

1*atNp4J0OetHwEbTx0w0Twg

Создание сетки

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

Мы начнем с создания очень простой сетки без содержимого. В Bootstrap вы всегда создаете строки сначала а затем оберните столбцы внутри строк. По умолчанию сетку можно разделить на 12 столбцов по ширине.

Над sm точка остановлю, мы хотим, чтобы каждая карточка занимала половину ширины, поэтому мы дадим столбцам a col-sm-6 класс. Когда экран достигает lg хотя точка остановлю, нам нужны четыре карты шириной, поэтому мы это сделаем col-lg-3.

<div class="container">  
  <div class="row">  
    <div class="col-sm-6 col-lg-3">column</div>  
    <div class="col-sm-6 col-lg-3">column</div>  
    <div class="col-sm-6 col-lg-3">column</div>  
    <div class="col-sm-6 col-lg-3">column</div>  
  </div>  
</div>

Это дает такой адаптивный макет:

1*cFB-CAHtMUqhu4C1P8Vcdw

Создание карт

Теперь нам просто нужно заменить текст столбца компонентом карты. Вот разметка нашей карты:

<div class="card">  
  <img class="card-img-top" alt="Card header image" src="  
  <div class="card-body">  
    <h5 class="card-title">Project 1</h5>  
    <p class="card-text">An awesome project</p>  
    <a href="#" class="btn btn-info">See project</a>  
  </div>  
</div>

To turn a div в а карточку мы просто добавим класс card. Если мы хотим, чтобы изображение появилось в заголовке карты, мы добавим card-img-top. Что касается остального содержимого, мы будем использовать классы card-body, card-title и card-text.

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

1*Q6VaR_rIriYA3ct6putJPQ

Это познакомит вас с новой концепцией интервалов в Bootstrap 4.0, где вы можете добавлять классы для установки отступов и полей. Мы просто добавим класс mt-3 к card см.

<div class="card mt-3">  
...  
</div>

The mt выступает за margin-top, а 3 – это число по шкале от 1 до 5, где 5 – наибольшее. Вы также можете сделать, например pb-4который бы установилpadding-bootom к 4. Наверное, вы уже поняли суть. Когда мы добавим это, у нас появится хорошая сетка с картами на нашем веб-сайте.

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

Наконец, давайте также прибавим контактную форму. Это будет просто новая строчка в нашей сетке. На этот раз мы также воспользуемся offset класса, поскольку мы не хотим, чтобы он был полной ширины, по крайней мере не выше md точка остановки.

Так от md и выше мы дадим ему ширину в шесть столбцов и смещение в три:

<div class="row mt-5">  
  <div class="col-sm-12 **col-md-6 offset-md-3**">  
    <h3>Reach out!</h3>  
    _...form goes here..._  
  </div>  
</div>

Теперь давайте посмотрим на код самой формы:

<form>  
  <div class="form-group">  
    <input type="text" class="form-control" id="email" placeholder="Your email..">  
  </div>  
  <div class="form-group">  
    <textarea class="form-control" placeholder="Your message..">              
    </textarea>  
  </div>  
  <button type="submit" class="btn btn-primary">Submit</button></form>

Элементы управления. <input> и <textarea>— стилизованные из form-control класс. Они делают его похожим на классическую форму Boostrap:

1*3yIL5iR0__uNFnHkXgSivw

И все это! Теперь вы создали свой первый веб-сайт Bootstrap 4.0. Если вы хотите правильно изучить библиотеку, обязательно просмотрите наш бесплатный курс на Scrimba.

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

буткемп-баннер
Нажмите здесь, чтобы перейти к расширенному учебному лагерю.

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

Ваш адрес email не будет опубликован.