Основы Bootstrap 4 — видеоуроки Bootstrap 4 для для начинающих в ITVDN
О курсе
Bootstrap – это CSS-фреймворк для разработки кроссбраузерных веб-ориентированных интерфейсов. Он представляет собой набор инструментов, созданный для облегчения разработки веб-приложений и сайтов. Использует CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации и т. д., а также дополнительные расширения JavaScript, которые упрощают работу веб-разработчика. Продуманная структура кода HTML, JavaScript и CSS даст вам возможность создавать множество самых разнообразных элементов интерфейса и сетку сайта.
Читать дальше…
Этот курс входит в специальности:
Frontend Developer Верстальщик сайтов React Developer Ruby Developer
Предварительные Требования
Курс рассчитан на начинающих веб-разработчиков, владеющих HTML, CSS, JavaScript и jQuery на базовом уровне.
Читать дальше. ..
Вы научитесь
- Владеть азами использования фреймворка Bootstrap
- Применять уже имеющиеся знания HTML, CSS и JavaScript в Bootstrap
- Работать со всеми элементами и компонентами фреймворка
- Разбираться в принципах верстки адаптивных сайтов на Bootstrap 4
Читать дальше…
Скачать материалы курса Для получения материалов курса нужно авторизоваться
Получить сертификат Для получения сертификата нужно авторизоваться
Илья Краевский
Front-end developer
Другие курсы автора
- Длительность: 4 ч 4 м
- Курс создан: 30.01.2018
- Уроков: 5
- Обновлен: 03.12.2020
- Язык: русский
Что входит в курс
- 5 видео уроков
- Домашние задания
- Тестирование
- Сертификат
- Консультация с тренером
- Проверка ДЗ
СМОТРЕТЬ
Для прохождения теста нужно авторизироваться
Войти Регистрация
×
Вы открыли доступ к тесту! Пройти тест
Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео
Войти Регистрация
№1
Знакомство с Bootstrap 4
0:42:01
Материалы урокаДомашние заданияТестирование
В первом видео уроке автор познакомит вас с Bootstrap 4: расскажет краткую историю, преимущества фреймворка и причины его востребованности.
Дополнительно вы узнаете, какие компоненты в себя включает Bootstrap.
Читать дальше…
Типографика Bootstrap 4
0:35:17
Материалы урокаДомашние заданияТестирование
Типография, глобальные настройки, заголовки, основной текст, списки. Встроенный код, Блоки кода, переменные. Картинка, форматирование картинок. Таблицы, стили таблиц. Фигуры.
Читать дальше…
Компоненты Bootstrap 4
1:25:42
Материалы урокаДомашние заданияТестирование
Ознакомиться со всеми компонентами Bootstrap 4, способы их применения и форматирования.
Читать дальше…
JavaScript Bootstrap 4
0:34:22
Материалы урокаДомашние заданияТестирование
Ознакомить обучающего использовать компоненты, ккоторые требую JavaScript.
Читать дальше…
Утилиты Bootstrap 4 Служебные классы
0:46:44
Материалы урокаДомашние заданияТестирование
Bootstrap использует несколько важных глобальных стилей и настроек, которые нужно знать при использовании, которые почти целиком ориентированы на нормализацию перекрестных типов браузера.
Читать дальше…
Следующий курс:
Видео курс JavaScript Базовый — видео курсы ITVDN
ПОКАЗАТЬ ВСЕ
основные темы, рассматриваемые на уроке
0:01:33
Bootstrap — определение, история создания
0:03:30
Создание шаблона для работы
0:06:00
Добавление глобальных атрибутов
0:06:58
Подключение Bootstrap 4. Способ 1
0:09:50
Подключение jQuerry и Popper
0:11:49
Подключение Bootstrap 4. Способ 2
0:13:00
Создание сетки. Фиксированная и нефиксированная ширина сетки
0:21:25
Ширина колонок
0:27:30
Свойство сol-auto
0:28:40
Вертикальное и горизонтальное выравнивание
0:34:52
Порядок элементов
0:37:51
Вложенная сетка
0:40:15
Убираем отступы
0:41:05
Резюме урока
ПОКАЗАТЬ ВСЕ
Регистрация через
✖или E-mail
Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.
Уже есть аккаунт
Получите курс бесплатно
✖Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.
РЕГИСТРАЦИЯ
Спасибо за регистрацию
✖Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN.com
ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ
Спасибо за регистрацию
✖Ваш аккаунт успешно подтвержден.
Начать обучение вы можете через Личный кабинет
пользователя или непосредственно на странице курса.
НАЧАТЬ ОБУЧЕНИЕ
Подтверждение аккаунта
На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.
Отправить код еще раз
Изменить номер телефона
Ошибка
✖онлайн, обучение с нуля, для начинающих и продвинутых — Хабр Карьера
Специализация
Выберите специализацию
Ваша квалификация
ЛюбаяСтажёр (Intern)Младший (Junior)Средний (Middle)Старший (Senior)Ведущий (Lead)
Профессиональные навыкиTwitter Bootstrap
ДлительностьЛюбаяДо 3 месяцевОт 3 до 6 месяцевОт 6 до 12 месяцевБолее года
Местоположение Только онлайн
Учреждение
Стоимость до
₽€$₴₸
Только бесплатные
Дополнительно Сертификат об окончании Помощь с трудоустройством
Найдено 8 курсов
WAYUP
Фронтенд разработчик
3 месяца • По факту набора потока
HTML • CSS • JQuery • Twitter Bootstrap • WordPress • Node.
js • JavaScript
СертификатОнлайн
Devman
Бэкенд разработчик
13 месяцев • По факту набора потока
Python • Django • Базы данных • Redis • Kubernetes • Docker • Git • API Интерфейсы • SQL • Разработка программного обеспечения • Node.js • HTML • CSS • Twitter Bootstrap
СертификатТрудоустройствоОнлайн
GB (GeekBrains)
Десктоп разработчик
12 месяцев • По факту набора потока
C# • .NET • Visual Studio • XML • Twitter Bootstrap • LESS • MySQLi • ASP.NET MVC • HTML • CSS
СертификатОнлайн
Devman
Фронтенд разработчик
2 месяца • В любой момент
HTML • CSS • Twitter Bootstrap • Python
ТрудоустройствоОнлайн
FructCode
Фронтенд разработчик Для стажёров
3 недели • В любой момент
Twitter Bootstrap • HTML • CSS • JQuery
СертификатОнлайн
FructCode
Фулстек разработчик Для джуниоров
2 месяца • В любой момент
Yii framework • PHP • MySQL • Паттерны проектирования • Composer • Lamp • Twitter Bootstrap • Веб-разработка
СертификатОнлайн
FructCode
Фронтенд разработчик Для стажёров
4 недели • В любой момент
Twitter Bootstrap • HTML • CSS • Адаптивная верстка • Кроссбраузерная верстка • Веб-разработка • Верстка лендингов
СертификатОнлайн
GB (GeekBrains)
Бэкенд разработчик
16 месяцев • По факту набора потока
ООП • Паттерны проектирования • Git • Высоконагруженные системы • HTML • CSS • JavaScript • Twitter Bootstrap • RESTful API • Yii framework • XML • JQuery • PHP • Redmine • MongoDB • Redis • Ajax • MySQL
СертификатОнлайн
Оповещения· Bootstrap v4.
6 Посмотреть на GitHub
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.
Примеры
Оповещения доступны для любой длины текста, а также для дополнительной кнопки закрытия. Для правильной стилизации используйте один из восьми обязательных контекстных классов (например, .alert-success ). Для встроенного отключения используйте плагин оповещений jQuery.
Простое основное оповещение — проверьте!
Простое вторичное оповещение — проверьте!
Простое предупреждение об успехе — проверьте!
Простое предупреждение об опасности — проверьте!
Простое предупреждение — проверьте!
Простое информационное оповещение — проверьте!
Простое световое оповещение — проверьте!
Простое предупреждение о темноте — проверьте!
<роль div="предупреждение"> Простое основное оповещение — проверьте!
Передача значения вспомогательным технологиям
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.
Убедитесь, что информация, обозначенная цветом, очевидна из самого содержимого (например, видимый текст) или включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса
.sr-only .
Цвет ссылки
Используйте ссылку .alert-link для быстрого предоставления соответствующих цветных ссылок в любом предупреждении.
Простое основное оповещение с примером ссылки. Нажмите на него, если хотите.
Простое вторичное оповещение с примером ссылки. Нажмите на него, если хотите.
Простое уведомление об успехе с примером ссылки. Нажмите на него, если хотите.
Простое предупреждение об опасности с примером ссылки. Нажмите на него, если хотите.
Простое предупреждение с примером ссылки. Нажмите на него, если хотите.
Простое информационное оповещение с примером ссылки. Нажмите на него, если хотите.
Простое световое оповещение с примером ссылки. Нажмите на него, если хотите.
Простое темное оповещение с примером ссылки. Нажмите на него, если хотите.
<роль div="предупреждение"> Простое основное оповещение с примером ссылки. Нажмите на него, если хотите.
Нажмите на него, если хотите.
Дополнительный контент
Оповещения также могут содержать дополнительные элементы HTML, такие как заголовки, абзацы и разделители.
Молодец!
О да, вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет немного длиннее, чтобы вы могли увидеть, как интервалы в предупреждении работают с такого рода контентом.
Всякий раз, когда вам нужно, обязательно используйте утилиты для полей, чтобы все было красиво и аккуратно.
<роль div="предупреждение">Молодец!
О, да, вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет немного длиннее, чтобы вы могли увидеть, как интервалы в предупреждении работают с таким содержанием.
<час> Всякий раз, когда вам нужно, обязательно используйте утилиты маржи, чтобы все было красиво и аккуратно.
Увольнение
С помощью подключаемого модуля JavaScript для предупреждений можно отклонить любое встроенное предупреждение. Вот как:
- Убедитесь, что вы загрузили подключаемый модуль оповещения или скомпилированный Bootstrap JavaScript.
- Если вы собираете наш JavaScript из исходного кода, требуется
util.js. Скомпилированная версия включает это. - Добавьте кнопку отклонения и класс
.alert-dismissible, который добавляет дополнительные отступы справа от предупреждения и позиционирует.закрытькнопку. - К кнопке отклонения добавьте атрибут
data-dismiss="alert", который запускает функции JavaScript. Обязательно используйте с ним элемент - Чтобы анимировать оповещения при их отклонении, обязательно добавьте классы
.fadeи.show.
Вы можете увидеть это в действии на живой демонстрации:
Святое гуакамоле! Вы должны проверить некоторые из этих полей ниже.
<роль div="предупреждение"> Святое гуакамоле! Вы должны проверить некоторые из этих полей ниже.
Поведение JavaScript
Триггеры
Включить отклонение оповещения через JavaScript:
$('.alert').alert()
Или с атрибутами данных на кнопке в предупреждении , как показано выше:
Обратите внимание, что закрытие оповещения удалит его из DOM.
Методы
| Метод | Описание |
|---|---|
$().alert() |
Заставляет прослушивать оповещения о событиях кликов для дочерних элементов, которые имеют атрибут data-dismiss="alert" . (Не требуется при использовании автоинициализации data-api.) |
$().alert('закрыть') |
Закрывает оповещение, удаляя его из модели DOM. Если в элементе присутствуют классы
.fade и .show , предупреждение исчезнет, прежде чем оно будет удалено. |
$().alert('удалить') |
Уничтожает оповещение элемента. |
$('.alert').alert('закрыть')
События
Плагин предупреждений Bootstrap предоставляет несколько событий для подключения к функциям предупреждений.
| Событие | Описание |
|---|---|
close.bs.alert |
Это событие возникает немедленно при вызове метода экземпляра close . |
закрытое.бс.предупреждение |
Это событие запускается, когда оповещение закрыто (будет ожидать завершения переходов CSS). |
$('#myAlert').on('closed.bs.alert', функция () { // сделай что-нибудь... })
Примеры · Bootstrap v4.6
Пользовательские компоненты
Совершенно новые компоненты и шаблоны, которые помогут людям быстро начать работу с Bootstrap и продемонстрируют передовой опыт добавления в платформу.
Альбом
Простой одностраничный шаблон для фотогалерей, портфолио и многого другого.
Цены
Пример страницы с ценами, созданной с помощью карточек и имеющей настраиваемый верхний и нижний колонтитулы.
Касса
Пользовательская форма оформления заказа, показывающая наши компоненты формы и их функции проверки.
Продукт
Простая маркетинговая страница, ориентированная на продукт, с обширной сеткой и изображениями.
Крышка
Одностраничный шаблон для создания простых и красивых домашних страниц.
Карусель
Настройте панель навигации и карусель, а затем добавьте несколько новых компонентов.
Блог
Журнал как шаблон блога с заголовком, навигацией, избранным контентом.
Приборная панель
Базовая оболочка панели администратора с фиксированной боковой панелью и панелью навигации.
Вход
Пользовательский макет формы и дизайн для простой формы входа.
Липкий нижний колонтитул
Прикрепите нижний колонтитул к нижней части области просмотра, если содержимое страницы короткое.
Липкая панель навигации нижнего колонтитула
Прикрепите нижний колонтитул к нижней части окна просмотра с фиксированной верхней панелью навигации.
Каркас
Примеры, посвященные использованию встроенных компонентов, предоставляемых Bootstrap.
Стартовый шаблон
Ничего, кроме основ: скомпилированные CSS и JavaScript.
Сетка
Несколько примеров макетов сетки со всеми четырьмя уровнями, вложением и т. д.
Джамботрон
Создайте вокруг джамботрона панель навигации и несколько основных столбцов сетки.
Навбары
Берем компонент панели навигации по умолчанию и показываем, как его можно перемещать, размещать и расширять.
Навбары
Демонстрация всех адаптивных и контейнерных опций для панели навигации.
Статическая панель навигации
Одиночный пример статической верхней панели навигации вместе с некоторым дополнительным содержимым.
Исправлена панель навигации
Пример одной панели навигации с фиксированной верхней панелью навигации и некоторым дополнительным содержимым.
Нижняя панель навигации
Пример одной панели навигации с нижней панелью навигации и некоторым дополнительным содержимым.