Обучение bootstrap 4: Курс Bootstrap 4 программирования верстки веб-сайтов для начинающих фронтэнд разработчиков с интерактивными заданиями в браузере

Bootstrap Бутстрап 4 Utilities

Утилиты Bootstrap 4

Bootstrap 4 имеет множество утилит/вспомогательных классов для быстрого стиля элементов без использования CSS-кода.

Границы

Используйте border классы для добавления или удаления границ элемента:

Пример

Пример

<span></span>
<span></span>
<span></span>
<span></span>
<span class=»border border-bottom-0″></span>
<span></span>

Цвет границы

Добавьте цвет к границе с любым из контекстных классов цвета границы:

Пример

Пример

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

Радиус границы

Добавьте скругленные углы к элементу с помощью rounded

Пример

Пример

<span></span>
<span></span>
<span></span>
<span class=»rounded-bottom»></span>
<span></span>
<span></span>
<span class=»rounded-0″></span>

Поплавок и Clearfix

Float элемент вправо с .float-right классом или слева с .float-left, и очистить поплавки с .clearfix классом:

Пример

Пример

<div>
  <span>Float left</span>
  <span class=»float-right»>Float right</span>
</div>

Отзывчивые поплавки

Плавающий элемент влево или вправо в зависимости от ширины экрана, с адаптивными классами float (.float-*-left|right — where * is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

Пример

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none

Пример

<div>Float right on small screens or wider</div><br>
<div>Float right on medium screens or wider</div><br>
<div>Float right on large screens or wider</div><br>
<div>Float right on extra large screens or wider</div><br>
<div>Float none</div>

Выравнивание по центру

Центрировать элемент с помощью . mx-auto класса (добавляет маржу-левое и правое поле: Auto):

Пример

Пример

<div>Centered</div>

Ширина

Задать ширину элемента с классами w-* (.w-25, .w-50, .w-75, .w-100, .mw-100):

Пример

Width 25%

Width 50%

Width 75%

Width 100%

Max Width 100%

Пример

<div>Width 25%</div>
<div>Width 50%</div>
<div>Width 75%</div>
<div class=»w-100 bg-warning»>Width 100%</div>
<div>Max Width 100%</div>

Высота

Задание высоты элемента с помощью классов h-* (.h-25, .h-50, .h-75, .h-100, .mh-100):

Пример

Height 25%

Height 50%

Height 75%

Height 100%

Max Height 100%

Пример

<div>
  <div>Height 25%</div>
  <div>Height 50%</div>
  <div>Height 75%</div>
  <div class=»h-100 bg-warning»>Height 100%</div>
  <div style=»height:500px»>Max Height 100%</div>
</div>

Интервал

Bootstrap 4 имеет широкий диапазон полезных классов для гибких полей и отступов. Они работают для всех точек останова:

Классы используются в формате: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Где свойство является одним из:

• m — sets margin
• p — sets padding

Где стороны один из:

• t — sets margin-top or padding-top
• b — sets margin-bottom or padding-bottom
• l — sets margin-left or padding-left
• r — sets margin-right or padding-right
• x — sets both padding-left and padding-right or margin-left and margin-right
• y — sets both padding-top and padding-bottom or margin-top and margin-bottom
• blank — sets a margin or padding on all 4 sides of the element

Где Размер является одним из:

• 0 — sets margin or padding to 0
• 1 — sets margin or padding to . 25rem (4px if font-size is 16px)
• 2 — sets margin or padding to .5rem (8px if font-size is 16px)
• 3 — sets margin or padding to 1rem (16px if font-size is 16px)
• 4 — sets margin
  or padding to 1.5rem (24px if font-size is 16px)
• 5 — sets margin or padding to 3rem (48px if font-size is 16px)
• auto — sets margin to auto

Пример

У меня только верхняя обивка (1.5rem = 24px)

У меня есть обивка со всех сторон (3rem = 48px)

У меня есть маржа со всех сторон (3rem = 48px) and a bottom padding (3rem = 48px)

Пример

<div>I only have a top padding (1.5rem = 24px)</div>
<div>I have a padding on all sides (3rem = 48px)</div>
<div>I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

Дополнительные примеры интервалов

.m-# / m-*-#	margin on all sides
.mt-# / mt-*-#	margin top
.mb-# / mb-*-#	margin bottom
.ml-# / ml-*-#	margin left
.mr-# / mr-*-#	margin right
.mx-# / mx-*-#	margin left and right
.my-# / my-*-#	margin top and bottom
.p-# / p-*-#	padding on all sides
.pt-# / pt-*-#	padding top
.pb-# / pb-*-#	padding bottom
.pl-# / pl-*-#	padding left
. pr-# / pr-*-#	padding right
.py-# / py-*-#	padding top and bottom
.px-# / px-*-#	padding left and right

Тени

Используйте shadow- классы для добавления теней к элементу:

Пример

No shadow

Small shadow

Default shadow

Large shadow

Пример

<div>No shadow</div>
<div class=»shadow-sm p-4 mb-4 bg-white»>Small shadow</div>
<div>Default shadow</div>
<div>Large shadow</div>

Выравнивание по вертикали

Используйте align- классы для изменения выравнивания элементов (работает только на встроенных, встроенных блоках, встроенных элементах таблицы и ячейках таблицы):

Пример

baseline top middle bottom text-top text-bottom

Пример

<span>baseline</span>
<span class=»align-top»>top</span>
<span>middle</span>
<span>bottom</span>
<span class=»align-text-top»>text-top</span>
<span class=»align-text-bottom»>text-bottom</span>

Адаптивные встраивания

Создание адаптивного видео или слайд-шоу встраивается в зависимости от ширины родительского элемента.

Добавьте .embed-responsive-item к любым элементам встраивания (например, < IFRAME > или < Video >) в родительский элемент .embed-responsive и пропорции по вашему выбору:

Пример

<!— 16:9 aspect ratio —>
<div>
  <iframe src=»…»></iframe>
</div>

<!— 4:3 aspect ratio —>
<div>
  <iframe src=»…»></iframe>
</div>

<!— 1:1 aspect ratio —>
<div>
  <iframe src=»…»></iframe>
</div>

Видимость

Используйте . visible классы или .invisible для управления видимостью элементов.

Пример

I am visibile

I am invisible

Пример

<div>I am visible</div>
<div>I am invisible</div>

Позиции

Используйте .fixed-top класс, чтобы сделать любой элемент фиксированным/пребывание в верхней части страницы:

Пример

<nav>
  …
</nav>

Используйте .fixed-bottom класс, чтобы сделать любой элемент фиксированным/остаться в нижней части страницы:

Пример

<nav>
  …
</nav>

Используйте .sticky-top класс, чтобы сделать любой элемент фиксированным/остаться в верхней части страницы, когда вы прокрутите его мимо. Примечание: Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как

Пример

<nav>
  …
</nav>

Иконка закрыть

Используйте .close класс для оформления значка закрытия. Часто используется для оповещений и модальностей. Обратите внимание, что мы используем × символ, чтобы создать фактический значок (лучше лукионг «x»). Также обратите внимание, что он плавает вправо по умолчанию:

Пример

Пример

<button type=»button»>&times;</button>

Цвета

Как описано в разделе » цвета «, ниже приведен список всех классов текста и фона:

Классы для текстовых цветов: .text-muted, .text-primary, .text-success, .text-info, .text-warning, . text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет предупреждение.

Этот текст представляет опасность.

Вторичный текст.

Темно-серый текст.

Основного текста.

Светло-серый текст.

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

Вы также можете добавить 50% непрозрачность для черного или белого текста с .text-black-50 или .text-white-50 классов:

Пример

Черный текст с 50% непрозрачность на белом фоне

Белый текст с 50% непрозрачность на черном фоне

Цвета фона

Для цветов фона используются следующие классы: .bg-primary ,,,,, .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light .

Обратите внимание, что цвета фона не задается цвет текста, поэтому в некоторых случаях вы хотите использовать их вместе с .text-* классом.

Пример

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Типография/текстовые классы

Как описано в разделе типография, вот список всех типографий/текстовых классов:

Класс	Описание
.display-*	Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: . display-1, .display-2, .display-3, .display-4
.font-weight-bold	Полужирный текст
.font-weight-normal	Обычный текст
.font-weight-light	Легковесный текст
.font-italic	Курсивный текст
.lead	Выделяет абзац
.small	Обозначает меньший текст (значение 85% от размера родительского элемента)
.text-left	Указывает текст, выровненный по левому краю
.text-center	Обозначает текст, выровненный по центру
.text-right	Указывает текст с выравниванием по правому краю
.text-justify	Обозначает обоснованный текст
.text-monospace	Текст с интервалом
.text-nowrap	Обозначает отсутствие текста переноса
.text-lowercase	Обозначает текст в нижнем регистре
.text-uppercase	Указывает верхний текст
.text-capitalize	Обозначает текст с прописными буквами
.initialism	Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта
.list-unstyled	Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol> ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
. list-inline	Размещение всех элементов списка в одной строке (используется вместе с .list-inline-item каждым элементом <li>)
.pre-scrollable	Делает <pre> элемент прокручиваемым

Элементы блока

Чтобы сделать элемент элементом Block, добавьте .d-block класс. Используйте любой из d-*-block классов для управления, когда элемент должен быть элементом блока на определенной ширине экрана:

Пример

d-block d-sm-block d-md-block d-lg-block d-xl-block

Пример

<span>d-block</span>
<span>d-sm-block</span>
<span>d-md-block</span>
<span>d-lg-block</span>
<span class=»d-xl-block bg-success»>d-xl-block</span>

Flex

Используйте .flex-* классы для управления макетом с Flexbox.

Подробнее о Bootstrap 4 Flex читайте в следующей главе.

Пример

Horizontal:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Vertical:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Bootstrap Бутстрап 4 Navigation Bar

Панели навигации

Панель навигации — это заголовок навигации, расположенный в верхней части страницы:

Базовая навигационная

С помощью Bootstrap панель навигации может расширяться или сворачиваться в зависимости от размера экрана.

Стандартная панель навигации создается с помощью .navbar класса, за которым следует адаптивный класс свертывания: (стеки навигационной панели .navbar-expand-xl|lg|md|sm по вертикали на очень больших, больших, средних или маленьких экранах).

Чтобы добавить ссылки внутри навигационной области, используйте <ul> элемент с class="navbar-nav". Затем добавьте <li> элементы с .nav-item классом за которым следует <a> элемент с .nav-link классом:

Пример

  <!— Links —>
  <ul>
    <li>
      <a href=»#»>Link 1</a>
    </li>
    <li>
      <a href=»#»>Link 2</a>
    </li>
    <li>
      <a href=»#»>Link 3</a>
    </li>
  </ul>

</nav>

Вертикальная навигационная

Удалите .navbar-expand-xl|lg|md|sm класс для создания вертикальной панели навигации:

Пример

  <!— Links —>
  <ul>
    <li>
      <a href=»#»>Link 1</a>
    </li>
    <li>
      <a href=»#»>Link 2</a>
    </li>
    <li>
      <a href=»#»>Link 3</a>
    </li>
  </ul>

</nav>

Центрированная навигационная

Добавьте .justify-content-center класс для центрирования панели навигации.

Следующий пример будет центрировать панель навигации на средних, больших и очень больших экранах. На маленьких экранах она будет отображаться по вертикали и по левому краю (из-за. навигации-развернуть-SM класса):

Пример

<nav>
  <a class=»navbar-brand» href=»#»>Logo</a>
  …
</nav>

Цветной навигационной

Используйте любой из .bg-color классов для изменения цвета фона навигационной области (,,,,,, .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light )

Совет: Добавьте белый цвет текста ко всем ссылкам в навигационной навигации с помощью . navbar-dark класса или используйте .navbar-light класс для добавления черного цвета текста.

Пример

<!— Black with white text —>
<nav>…</nav>

<!— Blue with white text —>
<nav>…</nav>

Активное/отключенное состояние: добавьте .active класс к <a> элементу, чтобы выделить текущую ссылку, или класс, указывающий на то, .disabled что ссылка не является интерактивной.

Марка/логотип

.navbar-brand класс используется для выделения названия бренда/логотипа/проекта вашей страницы:

Пример

<nav>
  <a class=»navbar-brand» href=»#»>Logo</a>
  …
</nav>

При использовании .navbar-brand класса на изображениях Bootstrap 4 автоматически применяет стиль изображения для вертикальной навигации.

Пример

<nav>
   <a href=»#»>
    <img src=»bird.jpg» alt=»Logo»>
  </a>
  …
</nav>

Свертывание панели навигации

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

Чтобы создать складную панель навигации, используйте кнопку с class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Затем оберните содержимое навигационной панели (ссылки и т.д.) внутри элемента div с class="collapse navbar-collapse" , за которым следует идентификатор, соответствующий data-target кнопке: «сетаржет«.

Пример

  <!— Toggler/collapsibe Button —>
  <button class=»navbar-toggler» type=»button» data-toggle=»collapse» data-target=»#collapsibleNavbar»>
    <span></span>
  </button>

  <!— Navbar links —>
  <div id=»collapsibleNavbar»>
    <ul>
      <li>
        <a href=»#»>Link</a>
      </li>
      <li>
        <a href=»#»>Link</a>
      </li>
      <li>
        <a href=»#»>Link</a>
      </li>
    </ul>
  </div>
</nav>

Совет: Можно также удалить класс. навигации-Expand-MD, чтобы всегда скрывать ссылки панели навигации и отображать кнопку переключателя.

Навигационное меню с раскрывающимся списком

NavBars также может содержать выпадающие меню:

Пример

  <!— Links —>
  <ul>
    <li class=»nav-item»>
      <a href=»#»>Link 1</a>
    </li>
    <li>
      <a href=»#»>Link 2</a>
    </li>

    <!— Dropdown —>
    <li>
      <a href=»#» data-toggle=»dropdown»>
        Dropdown link
      </a>
      <div>
        <a class=»dropdown-item» href=»#»>Link 1</a>
        <a href=»#»>Link 2</a>
        <a href=»#»>Link 3</a>
      </div>
    </li>
  </ul>
</nav>

Формы и кнопки панели навигации

Добавьте <form> элемент, class="form-inline" чтобы сгруппировать входы и кнопки рядом друг с другом:

Пример

<nav>
  <form action=»/action_page.php»>
    <input type=»text» placeholder=»Search»>
    <button type=»submit»>Search</button>
  </form>
</nav>

Можно также использовать другие классы ввода, например .input-group-prepend или .input-group-append для прикрепления значка или текста справки рядом с полем ввода. Подробнее об этих классах вы узнаете в главе Bootstrap Inputs.

Пример

<nav>
  <form action=»/action_page.php»>
    <div>
      <div class=»input-group-prepend»>
        <span>@</span>
      </div>
      <input type=»text» class=»form-control» placeholder=»Username»>
    </div>
  </form>
</nav>

Текст навигационной навигации

Используйте . navbar-text класс для вертикального выравнивания любых элементов внутри навигационной области, которые не являются ссылками (обеспечивает правильное заполнение и цвет текста).

Пример

<!— Links —>
  <ul>
    <li class=»nav-item»>
      <a href=»#»>Link 1</a>
    </li>
    <li>
      <a href=»#»>Link 2</a>
    </li>
  </ul>

  <!— Navbar text—>
  <span>
    Navbar text
  </span>

</nav>

Фиксированная панель навигации

Панель навигации можно также зафиксировать вверху или внизу страницы.

Фиксированная панель навигации остается видимой в фиксированном положении (сверху или снизу) независимо от прокрутки страницы.

.fixed-topкласс делает навигационную панель фиксированной в верхней части:

Пример

<nav>
  …
</nav>

Используйте .fixed-bottom класс для того, чтобы сделать навигационную страницу в нижней части страницы:

Пример

<nav>
  …
</nav>

Используйте .sticky-top класс, чтобы сделать навигационную страницу фиксированной/оставаться в верхней части страницы, когда вы прокрутите ее мимо . Примечание: Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как position:relative ).

Пример

<nav>
  …
</nav>

Бутстрап 4 — уроки адаптивной верстки Bootstrap 4, обучение на itProger

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

Полезные ссылки:

Информация про Bootstrap

Bootstrap изначально разрабатывался для популярнейшей соцсети Twitter, но его роль выходит далеко за пределы одного сервиса. Сегодня является одним из самых используемых и эффективных модулей CSS. Данный фреймворк включает и другие широко известные языки – HTML и Javascript. 

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

Что такое Bootstrap 4?

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

В 4 версии была добавлена поддержка технологии FlexBox, а также поддержка системы CSS сеток.

Ознакомиться с технологией FlexBox можно из видео ниже:

Как работать с Bootstrap?

Принцип работы с Bootstrap прост. Вам предстоит:

• скачать или подключить Bootstrap при помощи CDN;
• выполнить верстку сайта с помощью Bootstrap, используя подготовленные стили. 

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

Версии Bootstrap

На сегодняшний день существует несколько основных версий Bootstrap. Последние крупные обновления это:

• Bootstrap 3 – добавлены классы для работы со множеством HTML5 объектов;
• Bootstrap 4 – представлена возможность строить адаптивную верстку Bootstrap на основе FlexBox;
• Bootstrap 5 – улучшены и добавлены стили к HTML объектам. Уменьшен код, увеличина производительность.

План курса

В курсе мы на практике ознакомимся с разработкой веб сайтов на Bootstrap (Бутстрап 4). Мы создадим веб сайт при помощи встроенных классов Bootstrap, а также добавим свои собственные стили, написанные на языке CSS.

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

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

Курс Bootstrap 4 с нуля

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

Создайте прочную основу HTML5, CSS3, Javascript и Bootstrap благодаря этому курсу.

• Создавайте сайты с нуля с помощью HTML5, CSS3, Javascript и Bootstrap
• Загрузите свой веб-сайт в Интернет и охватите миллионы веб-пользователей
• Делайте деньги с сайтов, показывая рекламу.

Этот курс поднимет вас с полного нуля до веб-разработчика за 5 недель. Вы узнаете следующее:

• Начало работы и настройка вашего Mac или ПК
• Основы веб-программирования
• Полный раздел по HTML 5
• Полный раздел по CSS3
• Полный раздел Javascript (JS)
• И многое другое…

Если вы посмотрите этот курс, знайте, что вы на пути к созданию прочной и стабильной основы для веб-разработки с использованием HTML5, CSS3, Javascript, JQuery и Bootstrap 4. Вам не нужно тратить годы и годы на обучение, с нами вы можете учиться всего 5 недель. ДА! Правильно, через пять недель вы сможете создавать и разрабатывать собственное приложение, и вы никогда не знаете.

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

НЕ НУЖНО БЫТЬ ПРО! Наш курс разработан специально для людей, у которых есть нулевый предыдущий опыт программирования и никогда раньше не программил. Неважно, имеете ли вы никакого представления об основах (вот почему мы здесь!), мы научим вас всему, что вам нужно знать о разработке и программировании всего за 5 недель. Все что вам нужно — это страсть, намек на преданность делу, подключение к интернету и ноутбук или ПК. Это так просто!

Что я узнаю из этого курса?

• Вы будете изучать веб-разработку и программирование Bootstrap в кратчайшие сроки
• Вы создадите привлекательные и отвечающие реальности веб-сайты
• Вы можете узнать, как работать с API, веб-сервисами и расширенными базами данных. Загрузите свои веб-сайты в Интернет и охватите миллионы веб-пользователей.
• ЗАРАБОТАТЬ ДЕНЬГИ, продавая премиальные темы

Очевидно, что как только вы решились стать экспертом-разработчиком, вы станете сомневаться в том, почему вы должны выбрать нас? Ответ в том, что мы увлечены компьютерным программированием, дышим, живем и едим код! Мы находимся в отрасли уже более десяти лет, и вместе с нашими знаниями мы можем научить вас опыту. У нас есть десятилетний опыт работы и пятилетний опыт разработки приложений. Наш опыт может быть измерен более чем 50 приложениями и играми (разработанными нами) не только для Android Google Play, но и в Apple App Store. Вас будут обучать люди с более чем 5-летним опытом обучения, зарегистрированные Android-разработчики в Google Play и управляющие крупным сообществом, которое состоит из более чем 15 тысяч разработчиков. Мы преданные учителя и хотим распространять радость, которую мы получаем, развивая других. Мы разработали этот курс, убедившись, что эта радость сохраняется в каждом разделе и каждом уроке.

Front-end / Разработка Web-приложений на базе Bootstrap 4 • IT Study

Название учебного плана:
Front-end / Разработка Web-приложений на базе Bootstrap 4

Учебная группа:
Arvutikasutus

Целевая группа:
Для начинающих и продолжающих обучение. Программа курса корректируется в зависимости от уровня знаний и потребностей учащихся.

Цель курса:

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

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

Предварительные знания:

• Уверенные знания языка разметки HTML и каскадных таблиц стилей CSS / для продолжающих
  * Ученик понимает HTML-код и селекторы CSS
• Базовые навыки работы с компьютером / для начинающих

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

Продолжительность:
120 академических часов, 72 ак. ч. практической классной работы и 48 ак. ч. самостоятельной работы. В процессе обучения слушатели реализуют проект по созданию веб-сайта.

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

Учащиеся имеют доступ к преподаваемой программе в любое время. Учитель предоставляет студентам конкретные ссылки в Интернете на справочные и учебные материалы, книги, видеоролики. Предоставляются печатные материалы. Студенты получают консультации и помощь от тренеров в течении 2-х месяцев после завершения обучения.

Стоимость:
2498.40 € / 34.7 € — 1 ак.ч.
При подаче индивидуальной налоговой декларации может быть возмещено 20% стоимости курса.

Язык обучения:
русский

Количество человек в группе:
Индивидуальное обучение или в мини-группах по 2-3 человека.

Метод обучения:
Преподавание ведется в форме лекции.

Содержание курса:

• Установка и настройка Bootstrap 4
• Общие настройки проекта
• Сетка
• Утилиты
• Использование JavaScript и библиотеки jQuery

Знакомство с Bootstrap 4 и установка • 8 ак.ч.

• Знакомство с Bootstrap 4
• Как установить Bootstrap 4
• Начальный шаблон
• Font Awesome & SVG
• Адаптивные изображения
• Фигуры
• Таблицы

Grid System • 16 ак.ч.

• Классы container и container-fluid
• Классы col-*
• Выравнивание
• Изменение порядка элементов
• Смещения

Компоненты Bootstrap 4 • 16 ак.ч.

• Кнопки
• Карточки
• Медиа
• Адаптивное видео
• Навигация, навбары
• Scrollspy
• Хлебные крошки
• Формы
• Инпут группы
• Пагинация

Утилиты Bootstrap 4 • 16 ак.

• Цвета
• Текст
• Размеры
• Отступы
• Границы
• Тени
• Float
• Flex

JavaScript Bootstrap 4 • 16 ак.ч.

• Карусель
• Аккордеон
• Модальные окна
• Табы
• Owl Carousel
• Smooth scroll
• WOW.js

В конце обучения ученик:

• умеет создавать сайты на основе фреймворка Bootstrap 4
• умеет использовать специальные инструменты разработчика
• умеет использовать JavaScript и библиотеку jQuery
  Owl Carousel, FancyBox, WOW.js и др.

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

Место проведения:
Liimi 1-205, 10621 Tallinn

Лектор:
Сергей Королёв
HQS Development OÜ / ИТ-специалист. Full-stack программист.
Omis OÜ / лектор

HQS Development OÜ является партнером по учебной карте Эстонской кассы по безработице.

верстка шаблонов, мобильная верстка — Tokar.ua

Блочная система (Grid System) Bootstrap позволяет вам горизонтально разделить страницу на 12 столбцов. Если использовать все 12 частей вам нет необходимости, такие блоки можно легко группировать, создавая более широкие столбцы. Они будут состоять из двух, трех и так далее частей страницы, разделённой на 12 частей. Это около 8.3% на столбец.

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

Вот пример того, как можно разделить страницу при помощи Bootstrap.

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

Классы для ячеек

В блочной верстке Bootstrap есть четыре основных класса:

• xs (extra small) — для мобильных телефонов, до 767 пикс. включительно
• sm (small) — для планшетов, размер экрана 768—991 пикс.
• md (middle) — для десктопов, 992—1199 пикс.
• lg (large) — для больших экранов, от 1200 пикс.

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

Базовая структура макета

Это пример верстки макета при помощи блочной системы Bootstrap:

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

Для начала создайте строку с ячейками: <div> и далее добавьте в нее нужное количество столбцов с соответствующими классами .col-*-*.

Обратите внимание, что сумма ячеек для каждого типа (sm, xs, md, lg) в ячейке .col-*-* не должна превышать 12 частей для каждой строки.

Отступы для колонок

Вы можете указывать, какой отступ будет у колонки, если вы хотите “отодвинуть” ее вправо. Для этого используйте класс .col-md-offset-*. Такой класс увеличит отступ слева на количество колонок, указанное в *

<div> 
  <div>.col-sm-5 .col-md-6</div> 
  <div> .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> 
</div>

Смена порядка отображения ячеек

Можно указывать, в каком порядке будут отображаться ячейки, при помощи классов .col-md-push-* и .col-md-pull-*.

<div> 
  <div>.col-sm-4 .col-sm-push-8</div> 
  <div>.col-sm-8 .col-sm-pull-4</div> 
</div>

Ниже приведено несколько примеров вёрстки самых популярных макетов при помощи блочной верстки Bootstrap.

Пример: три одинаковые колонки

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

<div>
 <div>.col-sm-4</div>
 <div>.col-sm-4</div>
 <div>.col-sm-4</div> 
</div>

Пример: две колонки разной ширины

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

<div>
 <div>.col-sm-4</div>
 <div>.col-sm-8</div> 
</div>

Пример: две колонки с двумя вложенными колонками

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

<div>
  <div> 
   .col-sm-8 
   <div> 
    <div>.col-sm-6</div> 
    <div>.col-sm-6</div> 
   </div> 
 </div> 
 <div>.col-sm-4</div> 
</div>

Отзывчивая мобильная верстка

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

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

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

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

17 стартовых шаблонов адаптивных страниц Bootstrap 4

Фреймворк Bootstrap 4.3.1 — это последняя версия (на ноябрь 2019 г.) самого популярного и известного инструмента при создании адаптивных сайтов.

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

В комплект стартовых шаблонов Bootstrap 4 входят следующие страницы:

Особенности стартовых шаблонов Bootstrap 4:

В комплект архива дополнительно входит описание для начинающих веб-строителей:
— редактирование шаблонов сайтов;
— работа с кодом страниц и файлов;
— редактирование и размещение изображений;
— вставка видео;
— размещение интерактивной карты конкретного объекта;
— и т.д.

Для ускорения работы страниц в шаблонах подключены минимизированные файлы bootstrap.bundle.min.js и bootstrap.min.css. Для наглядности, в дистрибутив входят полновесные не подключенные файлы bootstrap4.3.1.css и bootstrap4.3.1.js. Не рекомендую их редактировать, все изменения и дополнения в шаблонах корректируйте при помощи пользовательского файла style.css.

Bootstrap 4 Учебник

Попробуйте сами Примеры

Это руководство по Bootstrap 4 содержит сотни примеров Bootstrap 4.

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

Bootstrap 4, пример

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.

Bootstrap 3 vs.Бутстрап 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако новые функции НЕ будут добавлены в Это.

Базовый шаблон Bootstrap 4

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

Ссылки на Bootstrap

Полный список всех CSS-классов Bootstrap 4 с описанием и примерами:

Если вы хотите сделать больше с компонентами Bootstrap, ознакомьтесь с полным справочником Bootstrap 4 JavaScript / jQuery — все с примерами «Попробуйте сами»:

Bootstrap 4 упражнения

Тест-тест Bootstrap 4

Проверьте свои навыки Bootstrap 4 в W3Schools!

Начать тест на Bootstrap 4!

Знаете ли вы?

W3.CSS — отличная альтернатива Bootstrap 4.

W3.CSS меньше, быстрее и проще в использовании.

Если вы хотите изучить W3.CSS, перейдите на наш W3.CSS Руководство.

Bootstrap 4 Все классы CSS

  прокручиваемым ( максимальная высота  350 пикселей и обеспечивает полосу прокрутки по оси Y)

Bootstrap 4 Navs

Меню навигации