Видео курсы по Bootstrap — онлайн обучение ITVDN
О курсе
Twitter Bootstrap – это CSS фреймворк для разработки кроссбраузерных веб-ориентированных интерфейсов. Bootstrap представляет собой набор инструментов от Twitter, созданный для облегчения разработки web-приложений и сайтов, и который использует CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации и т. д., а также дополнительные расширения JavaScript, упрощающие работу веб-разработчика. Продуманная структура кода HTML, JavaScript и CSS даст вам возможность создавать множество самых разнообразных элементов интерфейса и сетку сайта.
Курс рассчитан на начинающих веб-разработчиков, владеющих HTML, CSS, JavaScript и jQuery на базовом уровне, а также на программистов с опытом, которые занимаются Frontend-разработкой.
Чему вы научитесь с помощью данного видео курса:
- скачивать и подключать Bootstrap Framework 3 к своей странице;
- создавать адаптивную колоночную верстку;
- оформлять текстовые элементы, таблицы, элементы форм, изображения;
- добавлять фрагменты кода в HTML-страницу;
- использовать вспомогательные классы;
- использовать шрифтовые иконки;
- создавать навигационное меню, навигационные панели и окна сообщений;
- использовать JavaScript-плагины для создания модальных окон, кнопок, слайдеров, закладок.
Читать дальше…
Этот курс входит в специальности:
Frontend Developer Верстальщик сайтов
Предварительные Требования
Уверенное владение HTML, CSS, JavaScript, jQuery.
Читать дальше…
Вы научитесь
- Скачивать и подключать Bootstrap Framework v3 к своей странице.
- Создавать адаптивную колоночную верстку.
- Оформлять текстовые элементы.
- Добавлять фрагменты кода в HTML-страницу.
- Оформлять таблицы, элементы форм, изображения.
- Использовать вспомогательные классы.
- Использовать шрифтовые иконки.
- Создавать навигационное меню и навигационные панели.
- Создавать окна сообщений.
- Использовать JavaScript-плагины для создания модальных окон, кнопок, слайдеров, закладок и многое другое.
Читать дальше…
Скачать материалы курса Для получения материалов курса нужно авторизоваться
Получить сертификат Для получения сертификата нужно авторизоваться
Сергей Швайцер
Тренер-консультант, квалифицированный Web Frontend Developer
Другие курсы автора
- Длительность: 3 ч 8 м
- Курс создан: 16. 10.2014
- Уроков: 4
- Обновлен: 22.12.2018
- Язык: русский
10.2014Что входит в курс
- 4 видео уроков
- Домашние задания
- Тестирование
- Сертификат
СМОТРЕТЬ
Для прохождения теста нужно авторизироваться
Войти Регистрация
×
Вы открыли доступ к тесту! Пройти тест
Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео
Войти Регистрация
№1
Знакомство с Bootstrap
0:50:23
Материалы урокаДомашние заданияТестирование
В этом видео уроке будут рассмотрены следующие темы:
- Загрузка и подключение Twitter Bootstrap 3.
- Введение в Bootstrap CSS. Колоночная верстка.
- Оформление и шрифты.
- Добавление фрагментов кода в HTML-страницу.
Читать дальше…
№2
Bootstrap CSS
0:34:44
Материалы урокаДомашние заданияТестирование
В этом видео уроке будут рассмотрены следующие темы:
- Таблицы.
- Формы.
- Кнопки.
- Картинки.
- Вспомогательные классы.
Читать дальше…
№3
Компоненты в Bootstrap. Часть 1
0:48:43
Материалы урокаДомашние заданияТестирование
В этом видео уроке будут рассмотрены следующие темы:
- Типографика Glyphicon.
- Выпадающие меню.
- Навигационные панели.
- Сообщения и многое другое.
Читать дальше…
№4
Компоненты в Bootstrap. Часть 2
0:55:07
Материалы урокаДомашние заданияТестирование
В этом видео уроке будут рассмотрены следующие темы:
- Модальные окна.
- Выпадающие списки.
- SсrollSpy.
- Закладки.
- Всплывающие подсказки.
- Всплывающие окна.
- Кнопки.
- Аккордеон.
- Создание слайдера.
- Автодополнение.
- Affix.
Читать дальше…
Следующий курс:
Видео курс JavaScript Базовый — видео курсы ITVDN
ПОКАЗАТЬ ВСЕ
основные темы, рассматриваемые на уроке
0:00:42
Ключевые моменты Twitter Bootstrap и видеокурса
0:01:28
Кратко об уроке
0:02:04
Что такое Twitter Bootstrap
0:03:17
Откуда скачать Twitter Bootstrap
0:05:33
Откуда скачать jQuery
0:06:19
Подключение фреймворка Twitter Bootstrap к своему сайту (2 примера)
0:09:02
Принцип фреймворка
0:09:42
Создание адаптивной колоночной структуры таблиц (6 примеров)
0:36:13
Форматирование текстовых элементов (8 примеров)
0:47:31
Отображение фрагментов кода на HTML-странице (3 примера)
ПОКАЗАТЬ ВСЕ
Регистрация через
✖или E-mail
Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.
Уже есть аккаунт
Получите курс бесплатно
✖Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.
РЕГИСТРАЦИЯ
Спасибо за регистрацию
✖Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN.com
ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ
Спасибо за регистрацию
✖Ваш аккаунт успешно подтвержден.
Начать обучение вы можете через Личный кабинет
пользователя или непосредственно на странице курса.
НАЧАТЬ ОБУЧЕНИЕ
Подтверждение аккаунта
На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.
Отправить код еще раз
Изменить номер телефона
Ошибка
✖Bootstrap, урок 17, написал такой же код но button не работает?
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<!— The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags —>
<title>GitFilms Bootstrap</title>
<!— Bootstrap —>
<link href=»assets/css/bootstrap.
min.css» rel=»stylesheet»>
<!— HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries —>
<!— WARNING: Respond.js doesn’t work if you view the page via file:// —>
<!—[if lt IE 9]>
<script src=»https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js»></script>
<![endif]—>
</head>
<body>
<div>
<div>
<nav role=»navigation»>
<div>
<div>
<button type=»button» data-targe=»#navbarCollapse» data-toggle=»collapse»>
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
</div>
<div>
<ul>
<li> <a href=»#»>Главная</a> </li>
<li><a href=»#»>Фильмы</a></li>
<li><a href=»#»>Рейтинг фильмов</a></li>
<li><a href=»#»>Контакты</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!— jQuery (necessary for Bootstrap’s JavaScript plugins) —>
<script src=»https://ajax.
googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js»></script>
<!— Include all compiled plugins (below), or include individual files as needed —>
<script src=»assets/js/bootstrap.min.js»></script>
</body>
</html>
Захар Максимишин
1 year ago
Похожие вопросы
- Bootstrap урок 17 не появляется меню при нажатии на кнопку?
- Bootstrap 3, урок 2. какая таблица имеется ввиду?
- Как правильно написать тег header и стиль?
- Bootstrap, не показывает в браузере изменение, как исправить?
- Дз по курсу bootstrap 3 #27 (header). формулировка задачи не совпадает с решением (скрытым)?
- Как сделать картинку во весь экран шапки ?
- Что делать,если страница не видит панель bootstrap 3(37)?
- Не работает кнопка меню, где ошибки?
- Как исправить проблему сдвига блока в версии сайта под iphone 5/se?
- Почему не появляется меню с кнопки
- Все вопросы
- Старые
- Голоса
<link href=»assets/css/bootstrap.
min.css» rel=»stylesheet»>
может локальный bootstrap не подключил?
Попробуй через cdn, как в упражнениях
student_BFScU1U-
1 year ago
Скопировал код из упражнений всьо заработало сейчас буду проверять что пропустил или не так написал. (Изменено: в строчке с target я написал «targe» из-за этого и не работало
Захар Максимишин
1 year ago
Bootstrap 5 Типографика и форматирование текста
Рекламные объявления
В этом руководстве вы узнаете о стилях и форматировании текстового содержимого, такого как заголовки, абзацы, цитаты и т. д., с помощью Bootstrap.
Работа с заголовками
Вы можете определить все заголовки HTML, от от
— Точно так же, как вы определяете в простом документе HTML. Вы также можете использовать классы заголовков .h2 от до 9.0009 .h6 для других элементов, если вы хотите применить стиль к тексту элемента так же, как к заголовкам.
Пример
Попробуйте этот код »h2. Заголовок начальной загрузки
h3. Заголовок начальной загрузки
h4. Заголовок начальной загрузки
h5. Заголовок начальной загрузки
h5. Заголовок начальной загрузки
h6. Заголовок Bootstrap
— вывод приведенного выше примера будет выглядеть примерно так:
Настройка заголовков
Кроме того, вы можете использовать тег с классом .text-muted для отображения вторичного текста любого заголовка в более мелком и легком варианте. Вот пример:
Пример
Попробуйте этот код »Необычный заголовок дисплея
С блеклым второстепенным текстом
— вывод приведенного выше примера будет выглядеть примерно так:
Отображение заголовков
Bootstrap также предоставляет отображаемые заголовки, которые можно использовать, когда вам нужно, чтобы заголовок выделялся.
Заголовки отображаются более крупным шрифтом , размер шрифта , но более мелким шрифтом , плотностью .
Доступны шесть различных заголовков дисплея. Вот пример:
Пример
Попробуйте этот код »Отобразить заголовок 1
Отобразить заголовок 2
Отобразить заголовок 3
Отобразить заголовок 4
Отобразить заголовок 5
Отобразить заголовок 6
— вывод приведенного выше примера будет выглядеть примерно так:
Работа с абзацами
Глобальное значение Bootstrap по умолчанию font-size равно 1rem (обычно 16px), с line-height из 1.5 (обычно 24px), который применяется к 0 909
margin-bottom of 1rem также применяется ко всем пунктам. Вы также можете выделить абзац, добавив к нему класс ..
lead
Пример
Попробуйте этот код »Вот как выглядит обычный абзац в Bootstrap.
Вот как абзац выделяется в Bootstrap.
— HTML-код в приведенных выше примерах даст следующий результат:
Совет: В CSS rem означает «root em». 1rem равен размеру шрифта корневого элемента (т. е. элемента ), который по умолчанию в большинстве браузеров составляет 16 пикселей.
Выравнивание текста
Вы можете легко выровнять текст по левому краю, правому краю и по центру, используя классы выравнивания текста.
Пример
Попробуйте этот код »Текст с выравниванием по левому краю на всех размерах окна просмотра.
Выравнивание текста по центру на всех размерах окна просмотра.
Текст, выровненный по правому краю, на всех размерах окна просмотра.
— вывод приведенного выше примера будет выглядеть примерно так:
Вы также можете выравнивать текст по размеру экрана, используя классы адаптивного выравнивания текста.
Пример
Попробуйте этот код »Текст будет выравниваться по центру на малых (sm) экранах просмотра и выше.
Текст будет выравниваться по центру в окне просмотра среднего размера (md) и выше.
Текст будет выравниваться по центру на больших (lg) экранах просмотра и выше.
Текст будет выравниваться по центру на окнах просмотра очень большого размера (xl) и выше.
Форматирование текста
Вы можете использовать теги форматирования текста, такие как , , , чтобы сделать текст жирным, курсивным, мелким и т. д., таким же образом вы делаете на простой HTML-странице. Вот пример:
Пример
Попробуйте этот код »Это жирный текст
Это компьютерный кодЭто выделенный текст
Это курсив
Это выделенный текст
Это мелкий текст
Это сильно выделенный текст
Это нижний индекс и верхний индекс
Этот текст вставляется в документ
Этот текст удален из документа
— вывод приведенного выше примера будет выглядеть примерно так:
Преобразование текста
Вы также можете преобразовать текст в нижний или верхний регистр или сделать его заглавным.
Пример
Попробуйте этот код »Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
— Результат приведенного выше примера будет выглядеть примерно так:
Раскрашивание текста
Цвета — это мощный способ передачи важной информации в дизайне веб-сайтов.
В Bootstrap есть несколько специальных служебных классов, которые можно использовать для этой цели, например, отображение сообщения об успехе зеленым цветом, предупреждения или сообщения об ошибке красным цветом и т. д.
Пример
Попробуйте этот код »Основной: Прежде чем продолжить, внимательно прочитайте инструкции.
Дополнительно: эта функция была удалена из последней версии.
Успешно: Ваше сообщение успешно отправлено.
Информация: вы должны согласиться с условиями, чтобы завершить процесс регистрации.
Предупреждение. Возникла проблема с сетевым подключением.
Опасно! При отправке ваших данных произошла ошибка.
Без звука: этот абзац текста отображается серым цветом.
— вывод приведенного выше примера будет выглядеть примерно так:
Пожалуйста, ознакомьтесь с главой вспомогательных классов Bootstrap, чтобы узнать о других классах раскраски текста и фона, а также о других служебных классах.
Стилизация цитат
Вы также можете придать красивый вид своим цитатам — просто определите цитаты, используя стандартный элемент
Пример
Попробуйте этот код »Воображение важнее знаний.
— вывод приведенного выше примера будет выглядеть примерно так:
При указании авторства оберните
. класс, например:
blockquote-footer
Пример
Попробуйте этот код » <рисунок>
<цитата>
Мир — опасное место для жизни; не из-за злых людей, а из-за людей, которые ничего с этим не делают.
от Альберта Эйнштейна
— вывод приведенного выше примера будет выглядеть примерно так:
Вы также можете выровнять цитаты по правому краю или по центру, просто применив классы выравнивания текста .text-end или .text-center к элементу
Обрезка длинного текста
Для более длинного текста можно использовать класс .text-truncate , чтобы обрезать текст многоточием. Значение свойства display элемента должно быть равно 9.0009 встроенный блок или блок
Это особенно полезно в ситуации, когда вы хотите отобразить фрагмент текста в одной строке, но для этого недостаточно места.
Давайте рассмотрим пример и посмотрим, как это работает:
Пример
Попробуйте этот код »
<дел>
<дел>
Быстрая коричневая лиса прыгает через ленивую собаку.
