Давайте создадим простую панель инструментов с помощью Bootstrap за 5 минут.

Эта статья была первоначально размещена на https://www.blog.duomly.com/bootstrap-tutorial/

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

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

В этой статье я собираюсь создать адаптивную панель инструментов с панелью навигации, боковым меню, несколькими карточками и таблицей. Я собираюсь использовать Bootstrap без каких-либо дополнительных плагинов. В этом уроке я пройду следующие шаги:

Создание стартового шаблона
Создание панели навигации
Пользовательские стили
Создание бокового меню
Создание таблицы
Создание карт

Давайте начнем!

P.S. Если вы предпочитаете смотреть, а не читать, присоединяйтесь к нам здесь:

1. Создание стартового шаблона

Вначале нам нужно создать простой файл HTML, чтобы начать наш проект. Я назову свою панель инструментов.html.

Внутри файла я не собираюсь создавать базовую структуру. Я собираюсь использовать стартовый шаблон Bootstrap со всеми добавленными ссылками CDN. Если вы хотите получить его со страницы Bootstrap, используйте форму поиска и введите «Стартовый шаблон». Начнем с кода ниже:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Далее, если вы запустите файл в браузере, вы увидите заголовок Hello world! Теперь давайте создадим первый компонент, панель навигации.

2. Создание панели навигации

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

Я буду использовать следующий код.

<nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow">
</nav>

Вы можете заметить, что я добавил несколько дополнительных классов, таких как bg-primary или fixed-top. Они дадут в результате липкий заголовок и синий цвет.

Моя панель навигации будет состоять из трех элементов: названия проекта, панели поиска и ссылки для выхода из системы. Добавим их.

<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Duomly Dashboard</a>
<input type="text" class="form-control form-control-primary w-100" placeholder="Search..." >
<ul class="navbar-nav px-3">
  <li class="nav-item text-nowrap">
    <a class="nav-link" href="#">Logout</a>
  </li>
</ul>

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

3. Пользовательские стили

Чтобы добавить пользовательские стили для элементов начальной загрузки, мне нужен файл CSS, так что давайте создадим его. Я назову свой файл dashboard.css, чтобы соответствовать проекту. Чтобы сделать этот файл доступным для чтения в вашей HTML-структуре, вы должны добавить ссылку в заголовок документа сразу под ссылкой Bootstrap.

<link rel="stylesheet" href="./dashboard.css" >

Теперь вы можете добавить несколько стилей в строку поиска в новом файле CSS.

.form-control-primary {
  margin: 10px;
  opacity: 0.2;
  border-radius: 2px;
}

Отлично, первый элемент готов; мы можем видеть, как это выглядит сейчас.

4. Создание бокового меню

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

<div class="container-fluid">
  <div class="row">
    <!-- Sidear -->
  </div>
</div>

Если контейнер готов, нам нужно освободить место для создания боковой панели, потому что Bootstrap не предоставляет ее готовой. Но не беспокойтесь, в нашем случае это просто вопрос стиля столбца и добавления меню. Давайте сначала создадим пространство для боковой панели со следующим кодом внутри строки div.

<div class="col-md-2 bg-light d-none d-md-block sidebar">
  <div class="left-sidebar">
  </div>
</div>

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

<ul class="nav flex-column sidebar-nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Candidates
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Jobs
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Orders
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Invoices
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Reports
    </a>
  </li>
</ul>

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

.sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: 100;
  padding: 70px 0 0 10px;
  border-right: 1px solid #d3d3d3;
}
.left-sidebar {
  position: sticky;
  top:0;
  height: calc(100vh - 70px)
}
.sidebar-nav li .nav-link {
  color: #333;
  font-weight: 500;
}

Теперь мы можем проверить, что получилось!

5. Создание раздела таблицы

На этом этапе мы создадим основное пространство на панели инструментов и добавим в раздел адаптивную таблицу.
Чтобы создать основной раздел, мы будем использовать следующий код после бокового меню.

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"></main>

Отлично, теперь мы можем добавить заголовок и таблицу. Я выбрал темную таблицу и добавил несколько поддельных данных. Также, чтобы было приятно, я добавил разделитель между заголовком и таблицей. Давайте создадим его.

<h3>Candidates</h3>
<hr>
<div class="table-responsive">
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Position</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>Project Manager</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>JS developer</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>Bird</td>
        <td>Back-end developer</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Martin</td>
        <td>Smith</td>
        <td>Back-end developer</td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>Kate</td>
        <td>Mayers</td>
        <td>Scrum master</td>
      </tr>
    </tbody>
  </table>
</div>

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

main {
  padding-top: 90px;
}

6. Создание раздела карт

Теперь давайте добавим еще один раздел с несколькими карточками, представляющими счета. Давайте добавим еще один заголовок и разделитель, чтобы сохранить согласованность.

<h3>Invoice</h3>
<hr>

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

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Invoice #184382</h5>
        <p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href="#" class="btn btn-primary">Print</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Invoice #184386</h5>
        <p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href="#" class="btn btn-primary">Print</a>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Invoice #184389</h5>
        <p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href="#" class="btn btn-primary">Print</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Invoice #184391</h5>
        <p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href="#" class="btn btn-primary">Print</a>
      </div>
    </div>
  </div>
</div>

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

main .card {
  margin-bottom: 20px;
}

Вуху. Готово. Проверим результат. Кроме того, не стесняйтесь проверить отзывчивость.

Вывод

В этом руководстве вы узнаете, как создать простую информационную панель с помощью Bootstrap без дополнительных стилей. Использование фреймворков CSS — отличный способ за короткое время создать простой макет, полностью адаптивный.

Благодаря огромному выбору готовых компонентов и сетке на основе flexbox Bootstrap является удобным инструментом. Новички могут делать более сложные вещи очень быстро, но также и для продвинутых разработчиков, которые не хотят тратить много времени на создание своей базы повторно используемого CSS для каждого проекта.

Я надеюсь, что вы найдете это руководство полезным и полезным в качестве основы для создания проектов с помощью Bootstrap. Если вы хотите научиться создавать более продвинутые макеты, присоединяйтесь к нам в Duomly, чтобы пройти наш новейший курс Создание электронной коммерции с помощью Bootstrap.

Спасибо, что читаете,
Анна из Дуомли