Урок 1: Подключение Bootstrap

Этот урок посвящен установке Bootstrap.

Bootstrap 4 уроки для начинающих

Если фреймворк у Вас уже установлен — переходите к следующему видео!

Урок 2: Основные классы Bootstrap — Container и Row

Этот урок посвящен базовым классам Bootstrap, таким как Container и Row.

Урок 3: Навигация в Bootstrap — как создать меню

Этот урок посвящен созданию горизонтального меню сайта с помощью фреймворка Bootstrap без изменения CSS стилей.

Урок 4: Трехуровневое меню на Bootstrap

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

Урок 5: Слайдер на Bootstrap

Этот урок посвящен созданию слайдера контента.

Урок 6: Система сеток

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

Урок 7: Кнопки

В этом уроке мы научимся пользоваться встроенными в Bootstrap кнопками.

Узнаем какого они бывают формата и как их группировать.

Урок 8: Кнопка с выпадающим меню

В этом уроке Вы научитесь создавать на фрэймворке Bootstrap кнопку с выпадающим меню.

Урок 9: Горизонтальная форма авторизации

В этом уроке мы с Вами создадим горизонтальную форму авторизации. И рассмотрим классы изменения размера форм ввода текста.

Урок 10: Вертикальная форма авторизации

В этом уроке мы с Вами разберем создание вертикальной формы авторизации для сайта на основе фреймворка Bootstrap 2.3.2.

❮ ПредыдущаяСледующая Глава ❯

---

Bootstrap Формы изображения

---

Закругленные углы

класс добавляет закругленные углы к изображению (IE8 не поддерживает скругленные углы):

---

Круг

класс формирует изображение в круг (IE8 не поддерживает скругленные углы):

---

Эскиз

класс формирует изображение в миниатюре:

---

Адаптивные изображения

Изображения приходит во всех размерах. Так что экраны. Адаптивные изображения автоматически подогнать размер экрана.

Создание реагирующие изображения путем добавления класс к тег. Изображение будет затем масштабировать красиво к родительскому элементу.

класс применяется и и к изображению:

---

Галерея

Вы можете также использовать Bootstrap's систему сетки в сочетании с класса для создания галереи изображений:

---

Отзывчивый Встраивание

Кроме того, пусть видео или слайд-шоу масштабируются на любом устройстве.

Классы могут быть применены непосредственно к <iframe>, <embed>, <video> и <object> элементов.

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

Вы можете выбрать между двумя классами соотношением сторон:

---

Проверьте себя с упражнениями!

Упражнение 1 »Упражнение 2»Упражнение 3 »Упражнение 4»

---

Полная Bootstrap Reference Image

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

❮ ПредыдущаяСледующая Глава ❯

Выпадающая форма авторизации в навигации на Bootstrap 3

Сниппет для быстрого создания формы авторизации в выпадающем меню на основе css-фреймворка Bootstrap 3.

---

---

Привет, друзья и коллеги!

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

На самом деле, никаких сложностей в этом нет. В итоге мы ограничимся сниппетом в несколько десятков строк html и css. 

Начнем с html-разметки:

<nav class=»navbar navbar-default navbar-inverse» role=»navigation»> <div class=»container-fluid»> <!— Brand and toggle get grouped for better mobile display —> <div class=»navbar-header»> <button type=»button» class=»navbar-toggle collapsed» data-toggle=»collapse» data-target=»#bs-example-navbar-collapse-1″> <span class=»sr-only»>Toggle navigation</span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> </button> <a class=»navbar-brand» href=»#»>Login dropdown</a> </div> <!— Collect the nav links, forms, and other content for toggling —> <div class=»collapse navbar-collapse» id=»bs-example-navbar-collapse-1″> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>Link</a></li> <li><a href=»#»>Link</a></li> <li class=»dropdown»> <a href=»#» class=»dropdown-toggle» data-toggle=»dropdown»>Dropdown <span class=»caret»></span></a> <ul class=»dropdown-menu» role=»menu»> <li><a href=»#»>Action</a></li> <li><a href=»#»>Another action</a></li> <li><a href=»#»>Something else here</a></li> <li class=»divider»></li> <li><a href=»#»>Separated link</a></li> <li class=»divider»></li> <li><a href=»#»>One more separated link</a></li> </ul> </li> </ul> <form class=»navbar-form navbar-left» role=»search»> <div class=»form-group»> <input type=»text» class=»form-control» placeholder=»Search»> </div> <button type=»submit» class=»btn btn-default»>Submit</button> </form> <ul class=»nav navbar-nav navbar-right»> <li> <p class=»navbar-text»>Already have an account?</p> </li> <li class=»dropdown»> <a href=»#» class=»dropdown-toggle» data-toggle=»dropdown»><b>Login</b> <span class=»caret»></span></a> <ul id=»login-dp» class=»dropdown-menu»> <li> <div class=»row»> <div class=»col-md-12″> Login via <div class=»social-buttons»> <a href=»#» class=»btn btn-fb»><i class=»fa fa-facebook»></i> Facebook</a> <a href=»#» class=»btn btn-tw»><i class=»fa fa-twitter»></i> Twitter</a> </div> or <form class=»form» role=»form» method=»post» action=»login» accept-charset=»UTF-8″ id=»login-nav»> <div class=»form-group»> <label class=»sr-only» for=»exampleInputEmail2″>Email address</label> <input type=»email» class=»form-control» id=»exampleInputEmail2″ placeholder=»Email address» required> </div> <div class=»form-group»> <label class=»sr-only» for=»exampleInputPassword2″>Password</label> <input type=»password» class=»form-control» id=»exampleInputPassword2″ placeholder=»Password» required> <div class=»help-block text-right»><a href=»»>Forget the password ?</a></div> </div> <div class=»form-group»> <button type=»submit» class=»btn btn-primary btn-block»>Sign in</button> </div> <div class=»checkbox»> <label> <input type=»checkbox»> keep me logged-in </label> </div> </form> </div> <div class=»bottom text-center»> New here ?

Что стоит изучить по Bootstrap 3?

<a href=»#»><b>Join Us</b></a> </div> </div> </li> </ul> </li> </ul> </div> <!— /.navbar-collapse —> </div> <!— /.container-fluid —> </nav>

Этот html-код, естественно, надо вставить в <body>. Обратите внимание, подключите bootstrap.css/.js и font-awesome самостоятельно.

Далее вносим некоторые правки в оформление выпадающего меню.

body{ background:url(‘http://www.wallpaperup.com/uploads/wallpapers/2012/10/21/20181/cad2441dd3252cf53f12154412286ba0.jpg’); padding:50px; } #login-dp{ min-width: 250px; padding: 14px 14px 0; overflow:hidden; background-color:rgba(255,255,255,.8); } #login-dp .help-block{ font-size:12px } #login-dp .bottom{ background-color:rgba(255,255,255,.8); border-top:1px solid #ddd; clear:both; padding:14px; } #login-dp .social-buttons{ margin:12px 0 } #login-dp .social-buttons a{ width: 49%; } #login-dp .form-group { margin-bottom: 10px; } .btn-fb{ color: #fff; background-color:#3b5998; } .btn-fb:hover{ color: #fff; background-color:#496ebc } .btn-tw{ color: #fff; background-color:#55acee; } .btn-tw:hover{ color: #fff; background-color:#59b5fa; } @media(max-width:768px){ #login-dp{ background-color: inherit; color: #fff; } #login-dp .bottom{ background-color: inherit; border-top:0 none; } }

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

---

---