Создание адаптивного сайта с Bootstrap 3. Урок 3. Верстка адаптивного макета на Bootstrap. Часть 1

Автор Georgiy Dronov
Создание адаптивного сайта с Bootstrap 3. Урок 3. Верстка адаптивного макета на Bootstrap. Часть 1

доброй ночи..

С вами снова. Александр Пономаренко и я. Рад приветствовать вас на третьем уроке курс адаптивного сайта при помощи bootstrap-3 хочу вас познакомить с планом сегодняшнего дня мы видим установка с ним познакомиться.

Немного попозже.

Надо ли у нас нет обзор Nokia то есть мы с вами посмотрим уже на него взглядом людей которые немножко знакомы с под страхом и с нашими знаниями сетки bootstrap которые мы получили от предыдущих занятиях можно оценивать на 4 и будем уже приблизительно знать как её делать. Мы состоим структуру нашей первой потом добавим снести Windows верстаем я полностью адаптивно то сделаем на всех экранах и также рассмотрим такую маленькую мини тему. Кто подключение bootstrap Theme напиток, что ж такое-то редактор для кода для редакторов кода он есть для быстрого написания кода Java на примерах покажу как с ним работать когда мы будем с вами приступать к верстке на следующем слайде изложена короткая такая вот инструкция по установке я сейчас я покажу начала. Нам нужно перейти на этот сайт он у меня уже открыт вот он мы должны, но я буду показывать способ как в саблайм текст драма саблайм текст 3 вот весь код переходим в саблайм текст открываем нашу консоль оставляю далее нажимаем Enter на становится контрольную наш редактор и дальше reference package Control нас появится. ждём и вот здесь напишем просто и вот у вас здесь на первом месте будет просто написано имя как он меня установлен только здесь будет то у меня его здесь нет здесь будет ещё написано просто вы нажимаете просто на него. Езжайте пока он восстановится вот здесь будет идти загрузка заканчивается и всё то есть мы установили наше перезагружу очень перезагружаем редактор и можем уже в принципе достать с его помощью я вам покажу как дома, но но ты начала второму пункту по плану. Ну допустим восстановить. Давайте посмотрим макет ещё раз как же мы будем его верстать. Ну сегодня. Мы совершенно только вот эта вот часть его полностью адаптивность делаем сразу же хочется отметить, что у нас здесь вот идет контейнер bootstrap контейнер дальше в этом хедере. У нас есть навигация будем пользоваться html5 Tag komme думаю вы все знаете уже — это будет нам также слово тут будет немножко особенная структура та которую нам предлагают быстро там были немножко по-другому структуре — это делать есть меню список документов которые при экрана до уменьшения разрешения экранов мобильных и планшетов будет убираться вместо него была такая симпатичная красивая круглая кнопочка при нажатии на которую надо будет так выкладываться симпатична вниз. Даша даёт блок с текстом и в нём уже идёт H1 поебатт почему — это один блок потому, что во-первых во-первых — это у нас калым для 80 см2 мы так вот днём уже будет именно какой-то блог так ему нужно будет задавать какие-то отступы для позиционирования — это будет удобнее. Вот и в принципе — это всё, что нужно знать. Давайте приступать верстки. Я сначала вас ознакомиться со структурой нашего макетам, а точнее нашла наших ног нашего проекта здесь будет Word файл презентации здесь мы на фоне этого всего дела. Я вам покажу как пользоваться темами bootstrap как подключать заметил, что везде одинаковая структура то есть, что во втором уроке. Что такое одинаковая структура файлов вот здесь в. Карпатах то, что значит, что ты что. Вы не забыли, что мы расстались шапку и вот здесь тоже абсолютно пустая только картинки уже будут всё нарезал с. Маркета чтобы не тратить на — это время время занятия и есть такая палочка на которой есть psd шаблон в формате psd Photoshop. Вот вы можете сами нарезать попрактиковаться мы с вами будем верстать не пиксель пиксель пиксель наша цель с вами выучить как адаптивно поэтому все эти измерения. Вы можете практиковать сами в принципе — это у себя дома и так ну, что ж приступим открываем данную папку в тексте Open Folder и выбираем данную папку структура, что все пустые файлы кроме фон связь Tele2 шрифта который разбирается патефон — это вам рассказывала как делать дали какие-то основные средства и минимальная. Копейске для медалей медиана салют на пустой только отключение анимации на планшет дали. Вот здесь мы абсолютно стандартный строчка для адаптивности bootstrap CSS media files jquery bootstrap icon. Даня так. Мы с вами уже говорили у нас будет Fender огнём уже будет всё остальное — это приступим пока, что ты ему ничего не пишем их уже будет наф-наф наши навигационная панель она уже как бы не идет контейнер. И вот я вам рассказывал уже как пользоваться ими там чуть не забыл смотрите помолчи можем написать. контейнер угадывает, что нам сейчас нужен за элемент. Ну как бы. Дина сейчас надо так и будет если AB и AC 21 с классом контейнер если мы напишем здесь решетку. Зевс и так далее. Также мы можем вкладывать допустим напишем стрелочку такое. Вот дальше. и у нас вот так вот и замечательно раскладывается. Как вставить нужное всё. То есть все эти примеры есть на сайте я буду этим. Походу дела пользоваться вы просто смотрите некоторые аббревиатура. Всё я буду останавливаться них рассказывать, но в основном всё будет. Вот так вот делать при помощи вот таких вот, что есть классом контейнер. Да ещё одна маленькая. Соня если мы создаем дальше пишем допустим класс nwlink пример да то у нас вот — это класс. Ленка применяется к элементу так вот таким вот образом нажимаю и. Валя у нас.

0 комментариев
0

Читайте также