Если вы такой же человек, как я, вы постоянно ищете следующий веб-сайт, который заставит вас сказать вау!. С учетом того, что поиск в Интернете на мобильных устройствах набирает обороты, а компьютерный поиск - на спаде, можно с уверенностью предположить, что дизайн должен быть гладким, чистым и оптимизированным для удобства пользователей. Многие обращаются к Bootstrap как к своей структуре, чтобы связать переднюю часть в аккуратный отполированный пакет. Вот как можно начать.

Установка

В этой истории основное внимание будет уделено пользователям, использующим Javascript в качестве интерфейса для своих мобильных / веб-приложений. Также будет упомянуто множество других библиотек, которые я настоятельно рекомендую установить, чтобы в полной мере использовать все возможности Bootstrap.

Начиная

Есть несколько способов установить Bootstrap в ваше приложение. Вот несколько самых простых способов установки:

Установить с помощью npm:

Bootstrap можно легко применить с помощью Node Package Manager (npm). В каталоге вашего проекта введите:

$ npm install bootstrap@3

Установите в свой HTML-файл:

Вы также можете установить / запустить Bootstrap прямо через свой HTML-файл. Это избавляет вас от необходимости устанавливать что-либо локально. Этот метод занимает немного больше времени, но на самом деле позволяет вам точно контролировать, какие библиотеки вы планируете использовать. Сначала вам нужно установить таблицу стилей, которая извлекается из CDN (сети доставки контента). Это должно быть сделано в заголовке вашего HTML-файла и обеспечит установку библиотек css:

<head>
     <link                                         rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"    crossorigin="anonymous">
</head>

Затем вам нужно установить скрипт CDN внизу вашей HTML-страницы. Обычно это находится прямо перед концом тега html:

<html>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</html>

После того, как вы добавили эти строки в свой HTML-файл, вам также следует установить jQuery, который необходим для всех плагинов Bootstrap Javascript. Это также будет прямо перед тегом html:

<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
</html>

Некоторые особенности Bootstrap

Bootstrap чрезвычайно мощный и может вывести ваше приложение на новый уровень. Давайте рассмотрим некоторые из замечательных функций, которые теперь доступны вам.

Крах

Свертывание должно быть одной из моих любимых функций в Bootstrap. Одним нажатием кнопки вы можете свернуть и отозвать набор данных. Чтобы использовать это, вы должны установить для атрибута «data-toggle» значение «collapse», а также вызвать класс в атрибуте «href». Вот пример ниже:

Вот окончательный результат:

Трещать

Popover может быть чрезвычайно полезен, когда вы хотите спросить об определенных требованиях, например, при создании пароля. Для этого требуется немного кода в вашем файле .js вместе с HTML. Не забывайте, что вам понадобится jQuery для правильного вызова этих методов!

Javascript:

Конечный результат:

Карусель

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

Чтобы это работало, вам нужно начать с добавления индикаторов целевых данных вместе с атрибутом ‘data-slide-to’. В этом примере мы будем использовать 3 отдельных слайда с разными городами. Важно, чтобы идентификатор div был вызван в целевом объекте данных под ним. Не забудьте добавить class = ”active” к первому элементу списка:

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Carousel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  </head>
<body>
<div class="container">
      <h2>Carousel Example</h2>
      <div id="cityCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#cityCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#cityCarousel" data-slide-to="1"></li>
          <li data-target="#cityCarousel" data-slide-to="2"></li>
        </ol>
<!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="https://images.unsplash.com/photo-1515896769750-31548aa180ed?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1668&q=80" alt="Los Angeles" style="width:100%;">
          </div>
<div class="item">
            <img src="https://images.unsplash.com/photo-1494522855154-9297ac14b55f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="Chicago" style="width:100%;">
          </div>
<div class="item">
            <img src="https://images.unsplash.com/photo-1534430480872-3498386e7856?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80" alt="New york" style="width:100%;">
          </div>
        </div>
<!-- Left and right controls -->
        <a class="left carousel-control" href="#cityCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#cityCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</html>

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

Ресурсы:

Компоненты начальной загрузки

Popper.js - Замечательное дополнение к бутстрапу!

Font Awesome - отлично подходит для иконок!

Подробное руководство по Bootstrap