Разное

Bootstrap 4 beta: Bootstrap 4 Beta | Bootstrap Blog

Содержание

Пишем небольшой проект на Bootstrap 4

Третья часть масштабной статьи о четвертой версии популярного фреймворка Bootstrap. В этой части будет рассмотрена работа с Bootstrap 4 на практике.

Предыдущая статья

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

Если вы новичок в Bootstrap, я позаботился о том, чтобы вы поняли все необходимые принципы для построения нашего приложения.

Для более опытных разработчиков я в своих примерах выделил некоторые новые возможности Bootstrap 4.

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

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

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

Первым делом мы сосредоточим внимание на отображении нашей начальной страницы на экране. Экран будет заполнен «небольшим» фоновым изображением, блоком текста и CTA (call to action)-кнопкой.

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

Ниже приведен пример макета мобильной версии:

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

Если вы работаете локально, то вам необходима следующая разметка для добротного Bootstrap-проекта:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!—Необходимые мета теги -->
    <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://maxcdn. bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>  <body>
     <div></div>
  </body>
</html>
Во-первых, рассмотрим тег <meta>:
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Он предназначен для корректного отображения разрабатываемой страницы на мобильных устройствах. Если вы определите мультимедийные запросы без тега <meta>, то изображение может быть не таким, каким вы ожидаете его увидеть.

Интересно, что делают атрибуты content и initial-scale? Чтобы это узнать, посмотрите ответ на stackoverflow.

Во-вторых, рассмотрим тег <link>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
 integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

Представленный выше тег <link> абсолютно не отличается от таких же тегов <link>, которые вы использовали ранее. Он включает в себя атрибут href, который содержит ссылку на cdn Bootstrap-а.

Атрибут integrity проверяет источник, откуда загружается cdn, и не влияет на загружаемый файл. Это мера безопасности, обеспечивающая загрузку того, что вы ожидаете.

Атрибут crossorigin необходим, когда запрос загружается с использованием «CORS».

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

Я буду использовать CodePen для более простой установки. В CodePen вы можете добавить <meta> теги внутри модального окна html-настроек. Взгляните на следующий скриншот:

Добавьте meta и link теги в раздел «Stuff for <head>».

Давайте пойдем вперед и внутри html напишем следующее:

<h2>Привет, мир</h2>

Если на вашем экране отобразилась надпись «Привет, мир», то вы готовы продвигаться дальше без каких-либо затруднений.

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

Когда вы посмотрите на окончательный дизайн, то поймете, что контент разбит на категории.

Из них первый раздел с вызовом действий. Далее идет раздел с разметкой приложения и раздел, в котором освещаются некоторые особенности бизнеса. Последний – раздел отзывов. Думаю, вы уловили суть.

Правило номер один – это разделение уровней контента с помощью тега <section> или любого другого семантически подходящего HTML5-тега. Почему? Использование Bootstrap по определению подразумевает большое количество div-ов в вашей разметке. За счет использования тега <section> ваша разметка становится более управляемой.

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

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

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

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

Итак, у нас есть 8 тегов <section>, которые готовы к тому, чтобы их правильно использовали.

Что мы имеем? section, который составляет начальный экран пользователя. В него входят наше сообщение и CTA-кнопка, которые расположены вертикально по центру и выровнены по горизонтали к началу раздела (section).

Применим знания Bootstrap-сетки к нашему только создающемуся проекту.

Так выглядит начальный экран на разных устройствах.

Начальный экран будет иметь собственную внутреннюю структуру:

<section>
   <div>
    <div>
       <div></div>
    </div>
   </div>
</section>

Итак, теперь у нас есть базовая структура.

Обратите внимание на использование класса колонок .col-12: это позволяет нашему div-у заполнять все 12 колонок Bootstrap-сетки, что является всей ее шириной.

Далее нужная разметка, которую мы помещаем в наш div.col-12:
<h2>Coding on steroids</h2>
<p>Stop hiring engineers to write your code. Just use the 1kb script that 
magically solves all your problems and algorithms.</p>
<a href="#" role="button">Try it yesterday</a>

И что мы имеем? Страницу без ничего:

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

  1. Стилизация section#introduction. Раздел introduction нуждается в фоновом изображении, и он должен заполнять все пространство экрана пользователя.
  1. Правильное позиционирование блока с контентом. Он в свою очередь состоит из текстовых блоков h2 и p, что содержит “Coding on Steroids…”, и должен быть идеально выровнен вертикально в отношении центра.
  1. Стилизация заголовка и вводного абзаца. Элементы h2 и p нуждаются в стилизации вне зависимости от всего остального.
  1. Стилизация CTA-кнопки. Кнопка должна быть читабельной и чётко выраженной. Как и другие, элемент button стилизуется.
  1. Расширение на больших экранах. Блок с контентом НЕ должен занимать всю доступную ширину экрана, а брать только 50% от неё (если только это не мобильное устройство).

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

#introduction {
  background: linear-gradient(rgba(100,181,246 ,1), rgba(0,0,0,0.8)), 
              url('http://bit.ly/2fBj6OJ') 0% 0%/cover 
}

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

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

section#introduction должен занимать все пространство экрана. В Bootstrap нет класса для решения этой задачи, поэтому нам необходимо написать свой:

.fill-viewport {
  min-height: 100vh 
}

Теперь добавим класс к разделу:

<section>
 <div>
   <div>
       ...
   </div>
 </div>
</section>
Что я здесь сделал?

Вы могли заметить, что я добавил класс .fill-viewport к элементу div.row, а не ко всему контейнеру, div.container или section#introduction.

Сделано это преднамеренно. Каждый нужный вспомогательный класс, применяемый к содержимому контента, должен находится в .row (за исключением особых случаев). Также данный подход делает разметку аккуратной, без каких-либо лишних названий классов, которые присутствуют повсюду.

Используя все это, ваш раздел (section) будет выглядеть предельно хорошо:

Как вы можете заметить, блок с контентом имеет плохое позиционирование. Сделаем выравнивание вертикально в отношении центра страницы.

Каждый столбец в Bootstrap четвёртой версии по умолчанию является flex-container. Это предоставляет возможности, которых не было в предыдущих версиях фреймворка. Поскольку.row является flex-container, то мы можем использовать вспомогательный Bootstrap-класс align-items-center, и каждый flex-container будет выровнен по центру.

Примерно такая реализация:

<section>
 <div>
   <div>
       ...
   </div>
 </div>
</section>
Добавляем класс к элементу .row.

Ниже приведен результат:

В Bootstrap 4 есть еще много других вспомогательных Flexbox-классов.

Приступим к стилизации элементов h2 и p.

Для того чтобы стилизовать данные элементы сделайте следующее:

<h2>Coding on steroids</h2>
<p>Stop hiring engineers to write your code. Just use the 1kb script that 
magically solves all your problems and algorithms. </p>

Как вы уже знаете, класс text-white сделает текст белым, а класс .lead придаст нашему абзацу немного другой вид относительно всех остальных абзацев. Выглядит хорошо, но я хочу, чтобы абзац имел чуть более тусклый оттенок. Для этого напишем вспомогательный класс:

.text-white-70 {
  color: rgba(255,255,255,0.7)
}
Теперь текст слегка прозрачно-белого цвета.

Используем этот класс на вводном абзаце:

<p>Stop hiring engineers to write your code. 
Just use the 1kb script that magically solves all your problems and algorithms.</p>

У вас должно получиться следующее:

Обратите внимание, как мы абстрагируем крошечные функциональные возможности в многоразовые CSS-классы. Это важно для повторного использования.

Кнопки в Bootstrap стилизуются с помощью класса .btn. Есть несколько вариантов с соответствующими цветами. Например, класс .btn-primary и .btn-secondary дадут голубой и серый цвета. Документация по кнопкам в Bootstrap.

Для стилизации нашей ссылки выполните следующее:
<a href="#" role="button">Try it yesterday</a>

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

<div>
   ....
</div>
Чтобы на больших устройствах была занята только половина колонок, нужно сделать следующее:
<div> 
    ...
</div>

Этим мы подводим итог разработки первоначального экрана пользователя.

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

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

На больших устройствах отображено еще больше текста, но также останется превью приложения.

Приступим к созданию.

Создадим мобильную версию приложения. Заполните раздел section#info—1 следующей разметкой:

<section>
  <div>
    <div>
      <div>
        <h6>
          million dollar info
        </h6>
        <h3>We do what our competitors do, but with 500% more</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error
        sit voluptatem accusantium doloremque laudantium,
        totam rem aperiam..</p>
     </div>
    </div>
  </div>
</section>
Рассмотрим .row:
<div></div>

Внутри row у нас есть следующая колонка:

<div>...</div>

Класс col-12 обеспечивает то, что наш div займет всю ширину, то есть 12 колонок по умолчанию. Здесь также можно наблюдать два дополнительных класса. Класс pt-5 добавляет внутренний отступ сверху нашего div, а класс align-items-center обеспечивает выравнивание вертикально по центру всех flex-элементов.

Следующий блок кода представляет собой блоки текста:
<h6>million dollar info</h6>
<h3>We do what our competitors do, but with 500% more</h3>
 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem  accusantium doloremque laudantium,totam rem aperiam..</p>

Класс text-uppercase является вспомогательным Bootstrap-классом, использование которого дает прописной текст. Класс text-black-40 – еще один крошечный класс, использование которого даёт тексту черный цвет и делает его на 40% прозрачным.

.text-black-40 {
  color: rgba(0,0,0,0.4)
}

После всего этого у вас должно получиться следующее:

Для средних устройств нам нужно две колонки. Одна для размещения макета/превью нашего приложения, а вторая для блока с текстом.

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

<section>
  <div>
    <div>
       <div>
         <img src="http://bit.ly/2fyUtlS"/>
       </div>
       <div>
        <h6>
          million dollar info
        </h6>
        <h3>We do what our competitors do, but with 500% more</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error
        sit voluptatem accusantium doloremque laudantium,
        totam rem aperiam..</p>
     </div>
    </div>
  </div>
</section>

Новый блок кода, содержащий наше изображение, приведён ниже:

<div>
    <img src="http://bit.ly/2fyUtlS"/>
</div>

Мы можем наблюдать еще некоторое количество новых вспомогательных Bootstrap-классов. Рассмотрим их более детально.

Классы, название которых начинается с d- представляют множество классов, отвечающих за работу с экраном. Класс d-none скроет любой элемент, к которому будет применен, в то время как класс d-block покажет элемент, применив к нему CSS-свойство display: block. В свою очередь класс align-self-end вертикально выравнивает элемент к низу flex-контейнера. Здесь и проявляются некоторые преимущества Flexbox!

Сейчас у нас есть две колонки, и каждая имеет класс .col. Следующее изменение заключается в том, что вместо класса col-12 мы использовали класс .col:

<section>
  <div>
    <div>
       <div>
         <img src="http://bit.ly/2fyUtlS"/>
       </div>
       <div>
        <h6>
          million dollar info
        </h6>
        <h3>We do what our competitors do, but with 500% more</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error
        sit voluptatem accusantium doloremque laudantium,
        totam rem aperiam. .</p>
     </div>
    </div>
  </div>
</section>

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

Ниже приведен итоговый результат:

Мы практически закончили с данным разделом, осталось только исправить отображение дополнительных блоков с текстом на больших устройствах.

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

<!—колонки могут быть вложенными -->
 <div>
   <div>
      <h5>killer feature</h5>
       <p>veritatis et quasi architecto beatae vitae
       dicta sunt explicabo.</p>
       <a href="#">learn more</a>
    </div>
    <div>
       <h5>second killer feature</h5>
        <p>veritatis et quasi architecto beatae vitae
        dicta sunt explicabo. </p>
        <a href="#">learn more</a>
    </div>
 </div>

По умолчанию оба div элемента внутри ряда (row) скрыты благодаря классу d-none. Следовательно, они не будут отображаться на мобильных устройствах. Класс .col отвечает за то, что обе колонки занимают одинаковое пространство. Но второй блок с текстом будет показан только на больших устройствах за счет класса .d-lg-block.

За счет класса d-md-block первый текстовый блок также будет виден на больших устройствах. Пока у нас вот такой результат:

Третий раздел очень похож на второй раздел, о котором мы говорили ранее. Однако вот небольшой список едва заметных различий:

  1. Использование тега <pre>;
  2. Изменён порядок колонок при отображении на мобильных устройствах.

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

<section>
 <div>
   <div>
     <div>
       <p><strong>faster development</strong></p>
       <h3>Coding has never been this fast.  It's almost magical</h3>
       <p>Stop hiring engineers to write your code. 
                     Just install one script that magically solves all your problems.</p>
       <a href="#" role="button">Read the docs</a>
     </div>
     <pre>
      <span>1</span> <span> //codingSteroids.js</span> 
      <span>2</span>
      <span>3</span>   const data = {
      <span>4</span>        "purpose": {
      <span>5</span>        "getId": "#element",
      <span>6</span>        "companyName": "coolStartup",
      <span>7</span>      }
      <span>8</span>    }
      <span>9</span>     
      <span>10</span>   function codingSteroids(  
      <span>11</span>       data,
      <span>12</span>       getSteroidsType
      <span>13</span>   ) 
      <span>14</span>     
      <span>15</span>   function getSteroidsType() {
      <span>16</span>     return "codeHellish!"
      <span>17</span>   }
      </pre>
   </div>
 </div>
</section>

Раздел начинается с уже привычной нам разметки:

<section>
 <div>
   <div>
     . ..
   </div>
 </div>
</section>
Я всегда присваиваю разделам id. Также в каждом row есть по две колонки:
<section>
 <div>
   <div>
     <div
     </div>
     <pre
     </pre>
   </div>
 </div>
</section>

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

На средних устройствах и выше колонки займут равное количество пространства:

<section>
 <div>
   <div>
     <div
     </div>
     <pre
     </pre>
   </div>
 </div>
</section>

Класс .bg-dark даёт разделу темный задний фон.

Класс align-items-center является вспомогательным Flexbox-классом, задача которого это выравнивание контента ряда вертикально по центру. Также не забывайте, что каждый ряд является flex-контейнером.

Класс fill-80-viewport крошечный:

.fill-80-viewport {
  min-height: 80vh
}

Он отвечает за то, что раздел займет только 80% высоты экрана.

Итак, далее то, что мы еще не обсуждали:

<section>
 <div>
   <div>
     <div
     </div>
     <pre
     </pre>
   </div>
 </div>
</section>

Допустим, вы знакомы с устройством работы Flexbox. Свойство order определяет визуальный порядок отображения flex-элементов. Элемент с наименьшим значением свойства order отобразится первым, а с наибольшим значением последним.

Классы название которых начинается с order- являются попыткой воссоздать подобное поведение. Эти классы являются вспомогательными Flexbox-классами в Bootstrap, в названии классов может быть любое целочисленное значение, например, order-5 или order-10.

Теперь вам должно быть понятно следующее:
<div
</div>
<pre
</pre>

По умолчанию тег <pre> отображен первым, а затем уже div. Дело в том, что сначала отображается order-1, потом order-2. Соотносим это с принципом увеличения значения приоритета и получаем правильную работу. Но на больших девайсах сперва отобразится контент внутри div-а, затем контент внутри тегов <pre>.

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

<section>
  <div>
    <div>
      <div>
        <h6>
          what others think
        </h6>
        <h4>"Coding on Steroids is breath taking. I focus less on writing codes 
          while taking model shots around the world."</h4>
        <p>Founder, The Ocumpious Startup</p>
      </div>
  </div>
  </div>
</section>

Классы align-items-center и justify-content-end делают ровно то, что написано в их названии. Наша колонка, являющая flex-элементом, будет выровнена вертикально по центру и горизонтально к концу.

По умолчанию колонка занимает все доступное пространство, благодаря классу .col-12. Тем не менее, на средних устройствах и выше колонка будет занимать только 50% доступной ширины.

Класс basis-md-50 также небольшой:

@media screen and (min-width: 768px ){
  .basis-md-50 {
    flex-basis: 50%
  }  
}

Когда колонка занимает 100% доступной ширины, она не может дойти до конца страницы. Лишь когда ширина колонки уменьшается до 50%, все становится понятно.

Данный раздел содержит список значков, которые выровнены горизонтально по центру внутри раздела.

Разметка состоит из списка иконок, выполненных в отличном иконочном шрифте.

<section>
  <div>
    <div>
      <div>
          <i 
             aria-hidden="true"></i>
          <i 
             aria-hidden="true"></i>
          <i 
             aria-hidden="true"></i>
          <i 
             aria-hidden="true"></i>
          <i 
             aria-hidden="true"></i>
          <i 
             aria-hidden="true"></i>
          <i 
             aria-hidden="true"></i>
          <i 
             aria-hidden="true"></i>
      </div>
    </div>
  </div>
</section>

Класс . text-center отвечает за то, что иконки всегда будут выровнены горизонтально по центру. Сам раздел состоит из множества классов для работы с отступами. В разметке выше можно увидеть следующие классы: my-3, mx-4 и py-5.

Раздел состоит из заголовка и пары объектов, которые выровнены в каждой из колонок.

Полная разметка раздела представлена ниже:

<section>
  <div>
    <div>
      <div>
        <h6>
          The bitter truth
        </h6>
        <h4>On a scale of 1 to 10, we make your life easier 10/10, period.</h4>
      </div>
    </div>
    <div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>24/7 support</strong>  For
            your sake, we do not sleep.
          </p>
        </div>
        <div>
          <img src="http://bit. ly/2yE6Z8h"/>
          <p>
            <strong>Fast</strong>  Like flash.
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Reliable</strong>  We never have a server downtime.
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Computational Analysis</strong>  like no other.
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Analytics</strong>  like no other.
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Affordable</strong> as coffee. 
          </p>
        </div>
    </div>
  </div>
</section>
Как и в других разделах, этот имеет свой id и вложенный контейнер:
<section>
  <div>
    ...
  </div>
</section>

Но также содержит два вложенных ряда:

<section>
  <div>
    <div>
    </div>
    <div>
    </div>
  </div>
</section>

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

Второй состоит из списка иконок:

Ниже приведена разметка первого ряда:

<div>
        <h6>
          The bitter truth
        </h6>
        <h4>On a scale of 1 to 10, we make your life easier 10/10, period.</h4>
</div>

По умолчанию ряд занимает всю ширину Bootstrap-сетки. Но на средних устройствах он занимает только половину за счет использования класса col-md-6. Также ряд выровнен горизонтально по центру благодаря mx-auto.

Второй ряд (row) состоит из списка изображений и соответствующего им текста:
<div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>24/7 support</strong>  For
            your sake, we do not sleep.
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Fast</strong>  Like flash.
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Reliable</strong>  We never have a server downtime.
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Computational Analysis</strong>  like no other. 
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Analytics</strong>  like no other.
          </p>
        </div>
        <div>
          <img src="http://bit.ly/2yE6Z8h"/>
          <p>
            <strong>Affordable</strong> as coffee.
          </p>
        </div>

По умолчанию колонки занимают все доступное пространство, но на средних устройствах и выше это лишь треть пространства, а текст и изображения выровнены по центру: все за счет использования классов col-12, col-md-4 и text-center.

Класс text-info на теге <strong> придает тексту цвет морской волны.

Как можно заметить, раздел состоит из сетки с ценами.

Ниже приведена полная разметка этого раздела:

<section>
    <div>
        <div>
          <div>
              <h6>
                pricing
              </h6>
              <h4>we are very affordable</h4>
            </div>
        </div>   
        <div>
        <div>
        <h6>
            Personal
          </h6>
        <img src="http://bit. ly/2y9EpP2"/>
        <p>Good enough power</p>
        <ul>     
          <li><strong>10k</strong> monthly requests</li>
          <li><strong>9am-5pm</strong> 
            technical support</li>
          <li><strong>Public</strong> 
            API access</li>
        </ul>
        <a href="#">Start</a>
        </div>   
        
        <div>
          <h6>
              Business
            </h6>
          <img src="http://bit.ly/2xKjVeS">
          <p>Perfect for small 
            businesses.</p>
          <ul>     
            <li><strong>100k</strong> monthly requests</li>
            <li><strong>9am-5pm</strong> 
              technical support</li>
            <li><strong>Public and Private</strong> 
              API access</li>
          </ul>
          <a href="#">Start</a>
        </div>  
        
        <div>
          <h6>
              Corporate
            </h6>
          <img src="http://bit. ly/2wjsVEl"/>
          <p>Unlimited super powers</p>
          <ul>     
            <li><strong>10,000k</strong> monthly requests</li>
            <li><strong>9am-5pm</strong> 
              technical support</li>
            <li><strong>Public and Private</strong> 
              API access</li>
          </ul>
          <a href="#">Start</a>
        </div>
      </div>
      </div>  
</section>

Раздел начинается с вложенного контейнера и двух рядов:

<section>
    <div>
        <div>
        </div>
        <div>
        </div>
    </div>
</section>

Класс bg-light добавляет светлый фон разделу. Контейнер настроен таким образом, чтобы заполнить по крайне мере 80% доступной высоты области просмотра пользователя:

. fill-80-viewport {
  min-height: 80vh
}
Внутри первого ряда находится область заголовка:
<div>
     <h6>
         pricing
     </h6>
     <h4>we are very affordable</h4>
</div>

Заголовки вложены в колонку, которая занимает все доступное пространство на мобильных устройствах и половину доступного пространства на средних устройствах и выше. Это достигается за счет использования классов col-12 и col-md-6. Кроме того, текст внутри колонки выровнен по центру благодаря классу text-center и занимает всю доступную ширину колонки благодаря mx-auto.

Тут также присутствуют написанные классы text-black-40 и text-black-70:

.text-white-40 {
  color: rgba(255,255,255,0.4)
}
.text-white-70 {
  color: rgba(255,255,255,0.7)
}

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

Каждая из этих таблиц сделана по следующей разметке:

<div>
        <h6>
            Personal
          </h6>
        <img src="http://bit. ly/2y9EpP2"/>
        <p>Good enough power</p>
        <ul>     
          <li><strong>10k</strong> monthly requests</li>
          <li><strong>9am-5pm</strong> 
            technical support</li>
          <li><strong>Public</strong> 
            API access</li>
        </ul>
        <a href="#">Start</a>
</div>

Выше представлен пример таблицы с ценами, в которой выделены все её составляющие. Таблица состоит из заголовка, изображения, неупорядоченного списка возможностей и CTA-кнопки.

Дублируем три раза и получаем сетку из 3 колонок с ценами. Видите, насколько управляемой стала разметка?

Большинство классов в этой разметке вам уже знакомы, но давайте взглянем на следующие:
<ul> 
   ... 
</ul>

list-unstyled является Bootstrap-классом, который убирает внутренний отступ и стилизацию списка, что по умолчанию присутствует в неупорядоченном списке ul.

Также обратим внимание на следующие:

list-border-black-20,  list-border-y

Класс list-border-y – это класс для добавления границ сверху и снизу элемента списка:

.list-border-y li {
  border-top: 1px solid
}
.list-border-y li:last-child {
  border-bottom: 1px solid
}

Ниже приведен пример добавленных границ со значением 1px:

Еще один вспомогательный класс – list-border-black-20, который добавляет прозрачно-черный цвет к границам. Класс не является встроенным в Bootstrap, поэтому нам самим необходимо его написать:

.list-border-black-20 li,
.list-border-black-20 li:last-child{
  border-color: rgba(0,0,0,0.2)
}

Разметка этого раздела:

<section>
  <div>
    <div>
        <div>
          <ul>
            <li><h6>ABOUT</h6></li>
            <li>We’ve been working on Coding on Steroids 
              for the all our lives.  
              A groundbreaking tech deserves such dedication, huh?  
              If you’d like to learn more, or are interested in a job, 
              contact us anytime at 
              <a href="https://twitter.com/OhansEmmanuel" target="_blank">@ohansemmanuel</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li><h6>PRODUCT</h6></li>
            <li>Features</li>
            <li>Examples</li>
            <li>Tour</li>
            <li>Gallery</li>
          </ul>
        </div>
        <div>
          <ul>
            <li><h6>APIS</h6></li>
            <li>Rich data</li>
            <li>Simple</li>
            <li>Real time</li>
            <li>Social</li>
          </ul>
        </div>
        <div>
        <ul>
          <li><h6>LEGAL</h6></li>
          <li>Terms</li>
          <li>Legal</li>
          <li>Privacy</li>
          <li>License</li>
        </ul>
      </div>   
    </div>
  </div> 
</section>

Теперь проанализируем данный блок кода.

Наш раздел начинается с вложенного контейнера и ряда:
<section>
  <div>
    <div>
    </div>
  </div>
</section>

Класс bg-dark добавляет футеру тёмный фон. Внутри этой колонки есть еще 4 дополнительные, как показано ниже:

Именно эти 4 колонки составляют наш футер:

<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>

Каждая из колонок займет все доступное место внутри своего ряда при отображении на мобильных устройствах (col-12). На средних устройствах и выше первая колонка будет занимать половину доступного пространства (col-md-6), в то время как остальные колонки «захватят» по 1/3 от оставшейся половины (col-md-2).

Внутри первой колонки располагается неупорядоченный список и набор элементов списка. Класс list-unstyled по умолчанию добавляет отступы и убирает стиль с элемента ul:

<ul>
   <li><h6>ABOUT</h6></li>
   <li>We’ve been working on Coding on Steroids 
       for the all our lives.  
       A groundbreaking tech deserves such dedication, huh?  
       If you’d like to learn more, or are interested in a job, 
       contact us anytime at 
       <ahref="https://twitter.com/OhansEmmanuel" target="_blank">@ohansemmanuel</a></li>
</ul>

Оставшиеся колонки также содержат неупорядоченный список и набор элементов списка:

<ul>
    <li><h6>PRODUCT</h6></li>
    <li>Features</li>
    <li>Examples</li>
    <li>Tour</li>
    <li>Gallery</li>
 </ul>

Да, это полезный материал, но мы не успели затронуть некоторые моменты:

  1. Введение в Sass/SCSS.
  2. Как персонализировать Bootstrap с помощью Sass.
  3. Как использовать инструмент Bootstrap CLI для быстрой настройки.
  4. Как создать свой процесс сборки программного продукта с помощью Gulp и Webpack.
  5. Как создать профессиональную Bootstrap-тему (например, тема панели администрирования).
  6. Как использовать Bootstrap 4 в связке с ReactJS.

Если вы хотите стать ведущим разработчиком (senior developer), старайтесь охватить изучение самых различных технологий, так как это поможет существенно расширить уровень знаний.

Ссылка на оригинальную статью
Перевод: Александр Давыдов

Что нового и как это работает в Bootstrap 4

Приветствую всех, друзья!

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

Так что я заполняю этот пробел и расскажу о нововведениях в Bootstrap.

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

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

Начинаем

Bootstrap имеет новый дизайн сайта, который сам построен с использованием последней версии системы Bootstrap (версия 4 на момент написания).

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

Как только вы распакуете архив, то увидите множество файлов и папок, которые не требуются для нашей статьи. Перейдите прямо в каталог «dist» и скопируйте все папки в новое место назначения, которое будет вашим проектом.

В предыдущих версиях среды загрузка включала дополнительную папку шрифтов. Теперь шрифты не включены, но мы можем легко взять некоторые приятные из Font Awesome например, или из вашего любимого ресурса для шрифтов-значков. В нашем случае у нас есть две директории, поэтому давайте посмотрим на каждую из них. Папка «css» содержит шесть CSS файлов:

  • bootstrap.css
  • bootstrap.min.css
  • bootstrap-grid.css
  • bootstrap-grid.min.css
  • bootstrap-reboot.css
  • bootstrap-reboot.min.css

Как вы можете видеть, последняя версия Bootstrap намного более модульная, чем предыдущая. Если вам просто нужен хороший сброс стилей CSS, просто используйте bootstrap-reboot.css (или его сокращенную версию bootstrap-reboot.min.css). Аналогично, если вы просто хотите использовать сетку, подключите bootstrap-grid.css (или сокращенную версию bootstrap-grid.min.css) в свой проект.

Для этой статьи наш основной файл CSS будет bootstrap.css, и мы должны подключить его во все наши HTML-страницы. Файл bootstrap.min.css — это тоже самое, только сокращенная версия bootstrap.css. Это необходимо, когда мы действительно будем развертывать наш сайт онлайн.

Перейдя к папке «js» — у нас есть следующие четыре файла:

  • bootstrap.bundle.js
  • bootstrap.bundle.min. js
  • bootstrap.js
  • bootstrap.min.js

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

Начиная с Bootstrap 4 beta 2, папка «js» включала две новые папки bootstrap-bundle.js (вместе со своей мини-версией), а также Popper.js — интеллектуальную библиотеку JavaScript для управления poppers в веб-приложениях.

Итак, что именно мы собираемся построить?

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

Измените размер окна браузера, и вы увидите некоторые удивительные преобразования в макете веб-страницы. Он настраивается на размер окна. Вы также заметите, что панель меню автоматически скрывается в приятном сенсорном меню.

Поэтому мы собираемся построить это! В восторге? Да, я тоже!

Структура

Bootstrap понимает элементы HTML5, поэтому нам нужно добавить соответствующий тег «doctype» на нашу веб-страницу. Давайте создадим новую HTML-страницу и добавим следующий тег «doctype».

	<!DOCTYPE html>

Теперь мы добавим основные теги, которые присутствуют в каждом документе HTML:

<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	</head>
	<body>
		<h2>Hello, world!</h2>
		<script src="//code.jquery.com/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Глядя внутрь <head>, у нас есть элемент «title», который достаточно легко понять: он дает название странице.

Также у нас есть элемент «meta», который очень важно понимать при использовании Bootstrap. Поскольку эта версия Bootstrap построена для совместимости с различными типами устройств (мобильные телефоны, планшеты, настольные компьютеры, дисплеи Retina и т. д.), вы должны сообщить браузеру, что он должен масштабировать вашу веб-страницу соответствующим образом на каждом устройстве.

Мета элемент «viewport» делает это: здесь мы установили начальную ширину устройства «content-width» и масштабировали его только один раз.

После установки мета-элемента «viewport» мы импортировали версию разработки файла bootstrap.css.

Перейдем к разделу «body» приведенного выше фрагмента HTML. Чтобы что-то вывести, мы написали «Hello, world» внутри тега «h2». Затем мы подлючили необходимые файлы JavaScript из папки «js». Убедитесь, что эти файлы JavaScript подлючены на каждой странице. Документация Bootstrap рекомендует включать все JavaScript в конце страницы.

Погружение в Bootstrap

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

Раздел меню

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

Меню реагирует по умолчанию и получает новый вид на более мелких устройствах. Поскольку у нас есть весь CSS, готовый в нашем файле «bootstrap.css», нам просто нужно добавить правильную разметку и правильные классы для каждого элемента.

Начнем с <nav> элемента:

	<nav>
  		/* navbar code here */
	</nav>

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

  • «navbar» является классом обертки для «navbars».
  • «navbar-expand-lg» добавляет гибкую функциональность, беря на себя ответственность за расширение или свертывание навигации в зависимости от размера экрана. Вместо -lg, чтобы быть большим, вы также можете выбрать -md(средние экраны), -sm(маленькие экраны) и -xl(очень большие).
  • «navbar-light» — это класс цвета для навигации со светлым фоном.
  • «bg-light» далее настраивает цвет фона навигации. В этом случае навигация имеет светлый цвет. Если мы заменим «bg-light» на «bg-dark», цвет фона навигационной панели будет темным а цвет текста будет светлым.

Далее добавьте следующий фрагмент внутри элемента <nav>:

	<a href="#">Vacation Rentals</a>
	<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  		<span></span>
	</button>

Класс «navbar-brand» используется для брендинга целей. В нашем случае отображается имя веб-сайта.

Затем обратите внимание на классы в элементе <button>. Эта кнопка видна только на маленьких экранах, и она используется для включения и выключения видимости меню data-target=»#navbarSupportedContent», что является ссылкой на значение идентификатора элемента «div», содержащего это меню. Давайте добавим этот элемент сейчас, чуть ниже предыдущего кода:

	<!-- div containing the toggable navigation -->
	<div>

	<!-- navigation menu -->
	   <ul>
	    <!-- active link corresponding to the current page -->
	    <li>
	      <a href="#">Home <span>(current)</span></a>
	    </li>
	    <li>
	      <a href="#">Trip Description</a>
	    <li>
	      <a href="#">About Us</a>
	    </li>
	    <li>
	      <a href="#">Book Travels</a>
	    </li>
	    <li>
	      <a href="#">Reservations</a>
	    </li>
	  </ul>
	  <!-- inline form inside the navbar -->
	  <form>
	    <input type="search" placeholder="Search" aria-label="Search">
	    <button type="submit">Search</button>
	  </form>
	</div>

Вышеприведенный код является основным содержанием нашего меню. «navbar-collapse» применяется, чтобы сделать меню сенсорным, а также изменить его форму для небольших устройств. Содержимое внутри довольно легко понять. Мы использовали базовые элементы ul и li для перечисления пунктов меню. Также есть форма, которая классифицируется «form-inline» так, чтобы она отображалась правильно внутри панели навигации. И, наконец, я показал основную структуру, чтобы разместить раскрывающееся меню внутри навигации.

Здесь важны две вещи:

  • Использование utility classes, таких как mr-sm-2, mr-auto и т. д. Это довольно ново для Bootstrap, и их много.
  • Внимание к доступности с помощью класса «sr-only», который обрабатывает контент, предназначенный для чтения с экрана, и такие атрибуты, как «aria-controls» и «aria-expanded».

Вы также можете обратиться к документации, которая настоятельно рекомендуется всякий раз, когда вы находитесь в каком-либо замешательстве.

Итак, мы, наконец, закончили навигационное меню. Давайте перейдем к построению остальной части разметки внутри раздела <body>.

Область заголовка

Bootstrap предлагает класс полезного использования «jumbotron», который можно использовать для отображения больших заголовков и содержимого. Это в основном используется на веб-сайтах, основанных на продуктах. Для этого нам нужно добавить следующую разметку:

	<div>
	  <header>
	    <div>
	      <h2>
	        Best Vacation Rentals
	      </h2>
	      <p>Sed placerat fringilla quam et.</p>
	      <button type="button">Start Now!</button>
	    </div>
	  </header>
	</div>

Мы поставили «jumbotron» внутри div с классом «row» и дали самому «jumbotron» дополнительный класс «col». Это классы, которые использует Bootstrap для построения своей 12-колонной сетки.

Также обратите внимание на использование классов «container-fluid» и «jumbotron-fluid». Эти классы гарантируют, что «container» и «jumbotron» принимают 100% ширину родительского элемента контейнера или браузера, если родительский элемент отсутствует.

Внутри элемента div c классом «jumbotron» мы поместили элементы: h2, p и, наконец, причудливую кнопку.

Класс «display-4» является одним из последних дополнений в Bootstrap. Это класс отображения заголовка, который вы можете использовать, когда вам нужны заголовки, чтобы он действительно выделялся.

Класс «text-light» также является новым дополнением в Bootstrap. Это один из классов полезности цвета, позволяющий быстро контролировать цвет и цвет фона элементов.

Обновите браузер и посмотрите на область заголовка. Потрясающие!

Область содержимого

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

Bootstrap обеспечивает 12-колонную сетку. Он делит экран на 12 равных частей, и нам нужно указать, какой элемент HTML занимает какие части сетки. Короче говоря, любой элемент будет занимать минимум одну сетку.

Давайте сначала посмотрим на разметку.

	<div>
		<!-- first column -->
	  	<div>

		</div>

		<!-- second column -->
	  	<div>

		</div>

		<!-- third column -->
	  	<div>

		</div>
	</div>

Во-первых, есть три элемента div, которые содержатся внутри одной строки. Итак, мы начинаем новую строку, добавляя новый класс «row».

Строка теперь содержит еще три тега div с классом «col-sm». Перед выпуском Bootstrap 4 достижение этого результата потребовало бы добавления класса «col-md-4» к каждому из этих элементов. Число 4 в классе означало, что сетка состояла из четырех столбцов. Таким образом, три div с четырьмя столбцами занимали 12 столбцов.

Новая сетка Bootstrap использует силу Flexbox, чтобы сделать вещи способом менее сложным. Класс «col-sm» в каждой колонке div само по себе гарантирует, что содержание равномерно делится между тремя div-ами, пока размер экрана не станет 576px, это точка, где столбцы начнут складываться друг на друга.

Класс «pb-4» один из новых служебных классов, которые приходят с Bootstrap 4. Это создает некоторый отступ снизу внутри элемента на основе значения.

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

	<!-- first column -->
	<div>

	<!-- column content here -->
	  <a href="#">
	    <img src="path/to/img" alt="">
	  </a>
	  <h4>Type 1</h4>
	  <p>
	    Lorem Ipsum...
	  </p>
	  <button>Book Now @ $599></button>

	</div>

Добавленное изображение имеет класс «img-fluid», который позволяет соответствовать размеру родителя независимо от его собственного размера. Изображение реагирует на размер каждого div. Также у нас есть нормальные теги h4 и p. Вы можете заполнить тег p любым контентом. На моей демо-странице я использовал автоматически генерируемый текст Lorem Ipsum. Затем, в конце, я добавил кнопку.

Класс «btn-success» используется, чтобы сделать кнопку зеленой. Есть другие классы как «btn-info», «btn-default», «btn-warning» и «btn-danger». Вы можете просмотреть страницу документации для всех цветов.

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

Футер (подвал сайта)

Область футера соответствует тем же принципам, что и область содержимого. Вот разметка:

	<footer>

	<!-- first column -->
	  <div>
	    <small><p>© 2018</p></small>
	  </div>

	<!-- second column -->
	  <div>
	    <ul>
	      <li>
	        <a href="#">About Us</a>
	      </li>
	      <li>
	        <a href="#">Support 24x7</a>
	      </li>
	      <li>
	        <a href="#">Privacy Policy</a>
	      </li>
	    </ul>
	  </div>

	<!-- third column -->
	  <div>
	    <small><p>Vacation Rentals</p></small>
	  </div>

	</footer>

Я использовал элемент HTML5 «footer» и создал еще одну строку одновременно. Затем я разделил всю область на три равные части, так же, как и в основной области содержимого выше. Затем я заполнил каждый столбец.

Некоторые дополнительные классы

Классы таблиц: если вы используете элемент <table>, вы можете использовать этот класс «.table», чтобы таблица выглядела немного более привлекательной, как это обозначено в стилях Bootstrap.

Обтекания (floats): вы можете использовать «.float-left» — помещает содержимое слева, а контент обтекает блок справа, «.float-right» — чтобы поместить содержимое справа, а контент обтекал блок слева и «float-none» — удаляет float из этого элемента.

Класс «clearfix»: этот класс используется для очистки float в любом элементе.

И в завершении

Итак, это было мое маленькое руководство «Как мне начать» для последней версии Bootstrap. Основной мотив состоял в том, чтобы вы поняли, как работает Bootstrap. Как вы могли видеть, я не написал больше нескольких строк кода CSS. Bootstrap обрабатывает все самостоятельно с помощью своего предопределенного набора файлов CSS и JS.

Одним из основных недостатков Bootstrap является то, что он не совместим со старой своей версией. Итак, если ваш сайт построен с помощью Bootstrap 3 и вы замените все файлы CSS и JS на файлы Bootstrap 4, ваш дизайн сломается. Создатели Bootstrap внесли огромные изменения в имена классов CSS и улучшили отзывчивость полученных веб-сайтов.

Вы также можете добавить свой CSS на сайт. Создайте свой собственный файл CSS с любым именем — например: customstyles.css — и импортируйте в него Bootstrap CSS. Затем определите свой собственный стиль, используя соответствующий класс элемента или идентификатор. В этой демонстрации я использовал бы свой файл customstyle.css, чтобы изменить фон элемента «jumbotron».

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

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

Но на сегодня это все. Не забывайте подписываться на обновления моего блога и до скорых встреч!

Навигация по записям

Юрич:

Занимаюсь созданием сайтов на WordPress более 6 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг — не стесняйтесь — пишите. Рад буду помочь!

Не забудьте подписаться на обновления:

Похожие записи

Оставить свой комментарий

Bootstrap 4 — Настройка среды

Вы можете начать использовать Bootstrap 4 на своем веб-сайте, включив его из CDN (Content Delivery Network) или загрузив с веб- сайта getbootstrap.com .

Использование CDN

Bootstrap 4 можно использовать на веб-сайте, включив его из сети доставки контента .

Используйте скомпилированный ниже CDN CSS и JS Bootstrap в своем проекте.

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

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Включите CDN-версии jQuery и Popper.js (Bootstrap 4 использует jQuery и Popper.js для использования таких компонентов JavaScript, как модалы, всплывающие подсказки, всплывающие окна и т. Д.) Перед минимизированным Bootstrap JavaScript , если вы используете скомпилированную версию JavaScript.

Ниже приведены некоторые компоненты, которые требуют JQuery —

  • Используется для закрываемых предупреждений

  • Переключите состояния с помощью кнопок и флажков / переключателей и сверните для переключения содержимого

  • Карусель для слайдов, элементов управления и индикаторов

  • Dropdowns (для идеального позиционирования используется Popper.js )

  • Откройте и закройте модалы

  • Для свертывания Навбара

  • Всплывающие подсказки и всплывающие подсказки (для идеального позиционирования используется Popper.js )

Используется для закрываемых предупреждений

Переключите состояния с помощью кнопок и флажков / переключателей и сверните для переключения содержимого

Карусель для слайдов, элементов управления и индикаторов

Dropdowns (для идеального позиционирования используется Popper.js )

Откройте и закройте модалы

Для свертывания Навбара

Всплывающие подсказки и всплывающие подсказки (для идеального позиционирования используется Popper.js )

Загрузка Bootstrap 4

Вы можете скачать Bootstrap 4 с https://getbootstrap.com/docs/4.1/getting-started/download/ . Когда вы нажмете на эту ссылку, вы увидите экран, как показано ниже —

Здесь вы можете увидеть две кнопки —

  • Загрузка — щелкнув по этой ссылке, вы можете загрузить предварительно скомпилированные и свернутые версии CSS и JavaScript Bootstrap. Никакая документация или оригинальные файлы исходного кода не включены.

  • Скачать исходный код — нажав на него, вы можете получить последнюю версию Bootstrap SCSS, исходный код JavaScript и файлы документации.

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

Скачать исходный код — нажав на него, вы можете получить последнюю версию Bootstrap SCSS, исходный код JavaScript и файлы документации.

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

Файловая структура

Предварительно скомпилированный Bootstrap 4

Как только скомпилированная версия Bootstrap 4 будет загружена, извлеките ZIP-файл, и вы увидите следующую структуру файлов / каталогов:

Как видите, есть скомпилированные CSS и JS (bootstrap. *), А также скомпилированные и минимизированные CSS и JS (bootstrap.min. *).

Bootstrap 4 Исходный код

Если вы скачали исходный код Bootstrap 4, структура файла будет выглядеть следующим образом:

  • Файлы в js / и scss / являются исходным кодом для Bootstrap CSS и JavaScript.

  • Папка dist / включает все, что перечислено в разделе предварительно скомпилированных загрузок выше.

  • Документы / examples / , содержит исходный код документации Bootstrap и примеры использования Bootstrap.

Файлы в js / и scss / являются исходным кодом для Bootstrap CSS и JavaScript.

Папка dist / включает все, что перечислено в разделе предварительно скомпилированных загрузок выше.

Документы / examples / , содержит исходный код документации Bootstrap и примеры использования Bootstrap.

Создание первой веб-страницы с помощью Bootstrap 4

Приведенный ниже пример определяет простую веб-страницу Bootstrap 4 —

пример

Live Demo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h3>Hello, world!!! Welcome to Tutorialspoint...</h3>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Это даст следующий результат —

Web-разработка • HTML и CSS


Bootstrap 4 — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрого создания адаптивных дизайнов сайтов. В сущности — это просто набор сss- и js-файлов. После подключения этих файлов к странице станут доступны большое количество готовых классов и компонентов.

Сетка


Сетка — это набор предопределённых css-классов, с помощью которых можно задать необходимое поведение блокам и построить с их помощью адаптивный макет сайта.

Оберточный контейнер


Оберточный контейнер — это элемент сетки, с которого начинается создание макета для всей страницы или её части (шапка, основной области, подвал). Контейнер может быть адаптивно-фиксированным (класс container) или адаптивно-резиновым (класс container-fluid).

  • Адаптивно-фиксированный контейнер имеет постоянную ширину в пределах некоторого диапазона ширины окна браузера. Кроме того, контейнер центрирует себя в горизонтальном направлении и задает внутренние отступы (padding) слева и справа по 15рх.
  • Адаптивно-резиновый контейнер занимает всю ширину окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер, задает внутренние отступы (padding) слева и справа по 15рх.
.container { /* адаптивно-фиксированный контейнер */
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.container-fluid { /* адаптивно-резиновый контейнер */
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Ряды и адаптивные блоки


Следующий элемент сетки — это ряд (блок div с классом row), который применяется для оборачивания других элементов (адаптивных блоков). Первое назначение ряда — это нейтрализация положительного внутреннего отступа (15px слева и справа) контейнера. А второе — он служит flex-контейнером для flex-элементов (адаптивных блоков). Как нетрудно догадаться, сетка Bootstrap 4 построена на Flexbox.

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}


Последний элемент сетки — адаптивные блоки (div с классом col-{1…12} или col-{sm…xl}-{1…12}). Эти блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру. Адаптивный блок на разных устройствах может иметь разную ширину.

/* xs устройства */
.col, .col-auto,
.col-1, .col-2, ..., .col-11, .col-12,
/* sm устройства */
.col-sm, .col-sm-auto,
.col-sm-1, .col-sm-2, ..., .col-sm-11, .col-sm-12,
/* md устройства */
.col-md, .col-md-auto,
.col-md-1, .col-md-2, ..., .col-md-11, .col-md-12,
/* lg устройства */
.col-lg, .col-lg-auto,
.col-lg-1, .col-lg-2, ..., .col-lg-11, .col-lg-12,
/* xl устройства */
.col-xl, .col-xl-auto
.col-xl-1, .col-xl-2, ..., .col-xl-11, .col-xl-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}


Адаптивные блоки (или колонки) имеют горизонтальные отступы, но их можно удалить, если добавить класс no-gutters для ряда:

<div>
    <div>
        <div>.....</div>
        <div>.....</div>
        <div>.....</div>
    </div>
</div>
.no-gutters > .col, .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

Медиа-запросы

/* Очень маленькие устройства (xs, менее чем 576px) */
/* Без медиа запросов, так как в Bootstrap это по умолчанию */

/* Маленькие устройства (sm, 576px и выше) */
@media (min-width: 576px) { ... }

/* Средние устройства (md, 768px и выше) */
@media (min-width: 768px) { ... }

/* Большие устройства (lg, 992px и выше) */
@media (min-width: 992px) { ... }

/* Очень большие устройства (xs, 1200px и выше) */
@media (min-width: 1200px) { ... }




Extra small ( Small (≥576px) Medium (≥768px) Large (≥992px) Extra large (≥1200px)
Ширина контейнера auto 540 720 960 1140
Класс префикса .col- .col-sm- .col-md- .col-lg- .col-xl-

Заготовка страницы

<!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.3.1/css/bootstrap.min.css" 
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
/*
Стили для самых маленьких устройств, концепция «Mobile First». Эти стили будут применяться
и для всех других экранов (sm, md, lg, xl), если не будут переопределены в media-запросах.
*/
body {
    font-family: 'Open Sans', sans-serif;
}
img {
    max-width: 100%;
}

/*
Медиа-запросы, переопределяющие стили для xs-устройств
*/

/* Маленькие устройства (sm, 576px и выше) */
@media (min-width: 576px) { ... }

/* Средние устройства (md, 768px и выше) */
@media (min-width: 768px) { ... }

/* Большие устройства (lg, 992px и выше) */
@media (min-width: 992px) { ... }

/* Очень большие устройства (xs, 1200px и выше) */
@media (min-width: 1200px) { ... }

Примеры использования сетки

Первый пример

<div>
    <div>.....</div>
</div>


Данный адаптивный блок будет иметь:

  • на xs-устройствах: ширину, равную 12 колонкам
  • на sm-устройствах: ширину, равную 9 колонкам
  • на md-устройствах: ширину, равную 7 колонкам
  • на lg-устройствах: ширину, равную 5 колонок
  • на xl-устройствах: ширину, равную 3 колонкам

Второй пример


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

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>


Третий пример


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

<div>
    <div>
        <div>Sidebar left</div>
        <div>Page content</div>
        <div>Sidebar right</div>
    </div>
</div>


На устройствах md, lg и xl:



На устройствах sm:



На устройствах xs:


Четвертый пример


Группа классов col, col-sm, col-md, col-lg, col-xl предназначена для создания адаптивных блоков, ширина которых будет зависеть от свободного пространства линии. Распределение не занятой ширины (свободного пространства) линии между всеми такими блоками осуществляется равномерно.

<!-- Пять колонок одинаковой ширины -->
<div>
    <div>1/5</div>
    <div>1/5</div>
    <div>1/5</div>
    <div>1/5</div>
    <div>1/5</div>
</div>
<!-- Расчет ширины блоков при наличии блока с указанием ширины -->
<div>
    <div>Ширина 1/3 свободного пространства</div>
    <div>Блок с указанием ширины</div>
    <div>Ширина 1/3 свободного пространства</div>
    <div>Ширина 1/3 свободного пространства</div>
</div>
<!-- Четыре адаптивных блока по 50% ширины в двух линиях -->
<div>
    <div>.....</div>
    <div>.....</div>
    <!-- Имеет ширину 100%, что позволяет перенести блоки на вторую линию -->
    <div></div>
    <div>.....</div>
    <div>.="col"] {
        background-color: #00BFFF;
    }
}

Поиск:
Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк • Шаблон сайта • Сетка

Таблицы в Bootstrap 4 | WebReference

Bootstrap 4 добавил несколько новых классов таблиц, которые помогают создавать единообразно оформленные и адаптивные таблицы.

Базовая таблица

Для базовой таблицы, с небольшим padding у ячеек и горизонтальными разделителями, примените класс .table к элементу <table>.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Тёмная таблица

Вы можете использовать класс .table-dark для инвертирования цветов, чтобы на тёмном фоне был светлый текст.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Новое в Bootstrap 4

Тёмные таблицы являются новыми в Bootstrap 4.

Полосатая таблица

Для чередования фоновых цветов в строках добавьте класс .table-striped (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Таблица с обрамлением

Для границ по всей таблице используйте класс .table-borded (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Подсветка строк

Чтобы добиться эффекта «подсветки», когда курсор наводится на строки таблицы, используйте класс .table-hover (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Стили заголовка таблицы

Вы можете добавить фоновый цвет к элементу <thead> с помощью .thead-default или .thead-inverse.

Светлый

Используйте класс .thead-light.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Тёмный

Используйте класс .thead-dark.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Новое в Bootstrap 4

Стили заголовка таблицы являются новыми в Bootstrap 4.

Маленькие/сжатые таблицы

Если вы считаете, что в таблице слишком много отступов, то можете убрать их наполовину через класс .table-sm (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table> <thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Bootstrap 4 против Bootstrap 3

Обратите внимание, что Bootstrap 4 использует .table-sm для сжатия таблицы, а Bootstrap 3 использует .table-condensed. Оба уменьшают padding для ячеек вполовину.

Контекстные классы

Вы можете применить цвет к отдельным строкам или ячейкам с помощью пяти контекстных классов Bootstrap: .table-active, .table-success, .table-info, .table-warning и .table-danger.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Активный</td>
<td>Успех</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Информация</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Опасность</td>
<td>&nbsp;</td>
<td>Предупреждение</td>
</tr>
</tbody>
</table>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 не задействует префикс .table- для своих контекстных классов. К примеру, Bootstrap 3 использует .active, тогда как Bootstrap 4 .table-active. Кроме этого, обе версии используют одни и те же пять контекстных ключевых слов (active, success, info, warning, danger).

Адаптивные таблицы

Адаптивные таблицы автоматически создают горизонтальную полосу прокрутки при просмотре на устройствах меньше заданной точки останова. Чтобы создать адаптивную таблицу, заключите таблицу в элемент <div> с классом .table-responsive (или один из классов .table-responseive-*).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<div>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
<th>Заголовок 4</th>
<th>Заголовок 5</th>
<th>Заголовок 6</th>
<th>Заголовок 7</th>
<th>Заголовок 8</th>
<th>Заголовок 9</th>
<th>Заголовок 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>
</div>

Классы .table-responseive-* могут использоваться для указания конкретной точки останова. Это .table-response-sm, .table-response-md, .table-responseive-lg и .table-responseive-xl. С указанной точки останова и выше таблица будет вести себя обычно, а не прокручиваться горизонтально.

Класс .table-responseive эквивалентен .table-responseive-md.

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Bootstrap: что это такое и как его установить

Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.

Что нужно знать о Bootstrap перед началом работы

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

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

Какую версию Bootstrap выбрать?

Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает, что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11. 

В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.

В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.

  • В пятой версии не будет поддержки Internet Explorer. 
  • Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.

Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

  • Подключить компилированные файлы c помощью BootstrapCDN.
  • Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
  • Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров. 
  • Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

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

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

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:


<!DOCTYPE html>

<html lang="ru">

<head>

     <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Эта ссылка загружает с CDN все необходимые файлы Bootstrap -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Перед закрывающим тегом <body> подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты  -->     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>

</body>

</html>

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js. 

В папке css — файлы стилей. 

  • bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
  • bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
  • bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.

В папке js — файлы для работы JavaScript.

  • bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
  • bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS. 

Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:


<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Сначала подключаем библиотеку JQuery, затем — Bootstrap JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="js/bootstrap.js"></script>    

</body>

</html>

Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.

Начинаем верстать с помощью Bootstrap

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

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

Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно. 

Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента. 

Изначально карусель выглядит вот так.

Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править. 

Находим в коде карусель. Вот она:


<div data-ride="carousel">

Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами. 

Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.

Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.

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

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

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

Что нового в Bootstrap 4 Beta

Наконец-то !! , 10 августа 2017 года, Bootstrap 4 имеет свою первую бета-версию . Всего за 9 дней до завершения двухлетнего выпуска первой альфа-версии Bootstrap 4 вышла первая бета-версия Bootstrap 4 с еще 5 альфа-версиями между ними.

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

Изменения


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

. Если вы не знакомы с изменения в Bootstrap 4 читаются Bootstrap 3 Vs.Bootstrap 4: Что нового?

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

Последний выпуск Bootstrap 4 Beta также содержит множество изменений. Если вы уже знакомы с Bootstrap 4 или создали что-то с помощью Bootstrap 4 alpha, вам может потребоваться внести некоторые изменения, иначе ваш дизайн может сломаться.

Давайте посмотрим на некоторые изменения в Bootstrap 4 beta.

  • Всплывающие подсказки теперь зависят от библиотеки Popper.js, а не от привязки для позиционирования.
  • В имена некоторых классов и служебных классов внесены изменения. Некоторые классы были переименованы, а некоторые заменены. Например,
    • используйте имя класса navbar-expand вместо. navbar-toggleable ,
    • переименовали утилиты flexbox в порядок , чтобы лучше соответствовать схеме именования утилит для значения свойства .
    • в сетках классы push, pull и offset были удалены и заменены на. order - модификатор и утилиты полей
  • Цветовая палитра была изменена для существующих классов для цветов, с добавлением новых классов. * -темный и . * - светлый вместе с существующими классами.

В Bootstrap 4 alpha 6 кнопки выглядят следующим образом:

В бета-версии Bootstrap 4 кнопки выглядят так:

  • jQuery и Popper находятся в peerDependencies вместо зависимостей. Это потому, что они требуются не только в определенных частях Bootstrap, но не во всех.
  • Изменения в отображении и отзывчивых утилитах.
  • Схема именования стала более последовательной за счет переименования множества переменных.
  • Обновлена ​​поддержка браузеров для более поздних версий.

Ознакомьтесь со списком поставок Bootstrap 4 Beta 1, чтобы узнать обо всех изменениях в новом выпуске.

Наряду с изменениями цветовой схемы и системных шрифтов в бета-версии, компоненты и документы также имеют свежий вид.

Целевая страница для Bootstrap была изменена, макет документации теперь имеет закрепленную навигационную панель и боковую панель, а также правую боковую панель с фиксированным положением и новым оглавлением.

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

«… поставка бета-версии означает, что мы больше не ломаем все ваши вещи до следующей основной версии (v5).Мы не идеальны, но мы сделаем все возможное, чтобы URL-адреса всех классов, функций и документов остались такими же, как сейчас, в этом выпуске. Мы всегда можем добавить больше вещей, но не можем убрать ».

Следующие выпуски


Bootstrap 4 alpha 1 был выпущен 19 августа 2017 года. Bootstrap 4 Beta 1 был выпущен почти двумя годами позже, 10 августа 2017 года. Между тем было 5 других альфа-выпусков. Альфа-версия 6 была выпущена 6 января 2017 года.

Затем будет один или два бета-релиза, и больше не будет никаких разрывов и накоплений.Поскольку в последнем выпуске немало изменений, в следующих выпусках будет много исправлений ошибок.

После бета-релизов перед финальной версией Bootstrap 4.0.0 появятся два релиз-кандидата.

Что происходит с Bootstrap 3?


Команда Bootstrap остановила разработку Bootstrap 3. Однако Bootstrap 3 будет продолжать поддерживаться и поддерживаться. Все внимание разработки теперь сосредоточено на Bootstrap 4.

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

Однако те проекты, которые трудно перенести на Bootstrap 4, или те, которым по-прежнему нужны браузеры более старых версий, могут продолжать использовать Bootstrap.

Заключение


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

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

Bootstrap 4 导航 栏 _Bootstrap 中文 网

一个 一个 导航 的 容器 代码 组合 , 它 很 的 扩展 板 插件 000 轻松 其它

运行 原理

这些 是 你 开始 使用 导航 条 之前 需要 知道 的 东西 :

  • 导航 栏 需要 使用 .navbar 来 定义 , 并 使用 .navbar-expand {-sm | -md | -lg | -xl} 用于 响应 式 布局 以及 使用 配色 Class。
  • 栏 默认 内容 是 式 的 , контейнерах 容 喇 来 限制 的 水平 宽度。
  • 提供 的 间隙 flex 布局 classes 来 定义 导航 栏中 元素 的 间距 和 对齐。
  • Navbars 栏 默认 支持 响应 式 , 在 修改 上 也 很 容易 , 你 可以 使用 的 来 定义 它们 — 取决于 我们 的 JavaScript 插件。
  • 打印 时 , 导航 栏 默认 隐藏。 如果 需要 , 可以 加入 .d-print 样式 到 .navbar 中 , 点此 参阅 display 块 元素 通用 class 定义。
  • 使用

继续 阅读 以 获取 支持 的 子 组件 的 示例 和 列表。

支持 的 内容

Navbar 导航 栏 内置 支持 少量 子 组件。 根据 需要 从 以下 选择 ::

  • .navbar-brand 为 您 的 公司 , 产子 或 项目 名称。
  • .navbar-nav 完整 的 高 和 轻便 的 导航 (包括 对 下拉 菜单 的 支持))
  • .navbar-toggler 用於 我們 的 折疊 插件 和 переключение навигации 行為。
  • .form-inline 用于 任何 表单 控件 和 操作。
  • .navbar-text 用于 添加 垂直 居中 的 文本 字符串。
  • .collapse.navbar-collapse 用于 通过 父 断点 进行 分组 和 隐藏 导航 列 内容。

以下 是 一个 自动 在 lg (大) 断点 处 的 自动 响应 轻型 中 包含 的 所有 子 组件 的 示例。

    

В этом примере используются служебные классы цвета ( bg-light ) и интервала ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ).

Номер

.navbar-brand 可以 用于 大多数 元素 , 但 对于 链接 最 有效 , 因为 某些 可能 需要 通用 样式 класс 或 自 定义 样式。

  



  

如果 你 喜欢 , 可以 完全 不 使用 列表 法 来做 导航。

  
  
  
  

nav 导航

在 的 .nav , 享有 使用 专属 的 class 样式 , 并 toggler 切换 来 的以 保持 导览 列 内容 安全 对齐。

活动 状态 指示 : 用 .активный 表示 当前 页面 , 可 直接 应用于 .nav-link .nav-item 上。

    

如果 你 喜欢 (或 有 需要) , 也 可以 不 使用 ul 、 ol 式 的 列 (直接 用 A 其它 元素 作为 列表 子 项 — 译者 注)。

    

您 还 可以 在 中 使用 下拉 列表 , 下拉 菜单 最好 使用 一个 菜单 进行 位置 定位 , 请 确保 使用 的 元素 嵌套 .nav-item .nav-link , 如下 所示。

    

Форма 表单

在 导航 栏中 使用 .form-inline 放置 各种 表单 控制 元件 和 组件。

    

根据 需要 将 内 联 表单 引用 系统 提供 的 内容 与 对齐 等 class 样式。

    

还 可以引用 группа ввода 输入 框 组 控件 :

    

的 导航 中 需要 用到 各种 按钮 , 可以 使用 通用 样式 Class 来 作 居中 对齐 处理。

Главная кнопка
Меньшая кнопка

    

Текст 文本 处理

可以 使用 .navbar-text 选择 器 来 包裹 文字 — 这 已经 对 文本 字符串 的 垂直 对齐 、 水平 间距 作了 处理 优化。

Текст навигационной панели со встроенным элементом

    

根据 需要 与 其它 元件 或 通用 样式 定义 组合 使用。

    

Цвет 颜色 选择 器 (配色 方案)

background class 和 background-color class 导航 栏 的 配色 方案 从未 如此 简单 可以 选择 .navbar-light 来 定义 导航 颜色 反转 (强 黑白 对比) , 也 可以 使用 .navbar-dark 用于 深色 背景 定义 , 然后 再 引用 .bg- * 类 通用 定义 来 大小 处理。

  



  

.Контейнер 主 内容 — 容器

你 可以 把 导航 条 包裹 在 一个 .container 容器 中 , 从而 使 之 在 中 呈现 居中 效果 (或 在 导航 居中) — 虽然 这 不是 强制。。

    

Когда контейнер находится внутри вашей навигационной панели, его горизонтальное заполнение удаляется в точках останова ниже, чем указано вами .navbar-expand {-sm | -md | -lg | -xl} класс. Это гарантирует, что мы не будем без надобности удваивать заполнение нижних окон просмотра, когда ваша панель навигации свернута.

    

定位

使用 系统 提供 的 position 位置 间距 定位 通用 样式 可以 导航 栏 呈现 出 随 浏览 器 的 效果 (非 固定 位置) , 可选 的 流动 可以 包括 固定 在 顶部 固定 粘 (( 与, 直到 顶部 并 属性)。 固定 导航 栏 可以 使用 position: fixed 属性 , 这 它们 从 DOM 的 正常 流动 和) CSS (如 在 上 定义 обивка ) , 以 防止 其 重叠 覆盖 了 其它 元素。

注意 : .липкая вершина 使用 позиция: липкая , 目前 不 支持 所有 常用 浏览 器

    
    
    
    

响应 式 行为 处理

当 内容 在 按钮 后面 折叠 时 , 导航 栏 可以 使用 .navbar-toggler .navbar-collapse .navbar-expand {-sm | -md | -lg | -xl} 的 class 来 更改 , 其它 常用 样式 , 你 需要 定义 显示 或 隐藏特定 元素。

— это класс .navbar-expand, класс .navbar-expand,

永不 崩溃 .navbar-expand 的 导航 栏 , 请 在 导航 栏 上 添加 该类。 对于 的 导航 栏 , 不要 .navbar-expand 类。

不需要 折叠 (隐藏) 的 导航 栏 , 请 栏 上 增加 .navbar-expand class 定义 , 对于 总是 () 的 导航 栏 , 不要 的 .navbar-expand класс 样式。

Тумблер 切换 触发器

Navbar 的 Toggler 切换 触发器 (即 手机 模式 下 的 MENU 下拉 项)) 它们 默认 是 左 对齐 的。 如果 在 中间 定义 元素 .navbar-brand 它们 会 自动 对齐 到 窗口 反转 你 的 的 (LOGO 或 主 标题) 元素 的 位置 , 以下 是 切换 (位置) 000

在 最 下 小 浏览 界面 中 定义 .navbar-brand 的 样式 (MENU 切换 按钮 在 默认 左边)

    

左侧 有 一个 ЛОГОТИП (主 标题) , 右边 是 МЕНЮ 切换 按钮 :

  

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

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

2023 © Все права защищены. Карта сайта