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

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

Доброе время суток совместного.

Александр Пономаренко и мы продолжаем серию уроков по созданию адаптивного сайта при. Сотри на сегодня она стоит задача познакомиться с иконками векторами иконками быстро и фонд осам далее мы с вами продолжим верстку нашего. Макет как он выглядит вот так вот.

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

Ну я вам советую использовать всё-таки не стандартные иконки bootstrap, а он сам к примеру их там большое количество вод в своих проектах зачастую когда не так важны дизайнерские иконки там в качестве допустим какой-то социальных сетей могу использовать под глазом от векторные иконки которые не меняют своего качества при. Зуме то мы можем их увеличивать сколько мы хотим кстати при помощи CSS менять цвет при помощи CSS прижать сколько угодно и они не потеряют собака что-то с ним будет. Давайте познакомимся с этими иконками заемных официальный сайт вот сразу же разберёмся. Как можно подключить, но самый простой метод — это через сиди просто вы можете почитать. Здесь ничего сложного нет как обычные Framework. Но мы с вами воспользоваться именно себе далее здесь есть., а мы видим здесь вот огромное количество иконок. А сейчас. Открой иконки bootstrap и мы здесь. Увидим, что ну иконки так вот мельком так смотреть в принципе да. Тоже есть неплохие гонки. Но к примеру фантастом есть во-первых во-вторых в-третьих здесь есть те же социальные сети то есть здесь мы очень много всяких идёт икона которая реально используется. У нас такого нет здесь вот такой вот всё внимательно то есть нет в одной? такие красивые сегодня мы с вами воспользуется и таким и таким вот. Давайте Сначала посмотрим на то, что мы делали. На прошлом занятиях мы с вами вы сделали первую секцию сделали её полностью адаптивность делали вот так вот этот иконку. Я же послал при помощи вот такой вот меню с вами сделали для всех разрешений до которые не надо. Кто победил похоже. Вот такая вот так далее. Что ещё я ещё хочу вам показать как всё-таки подключать эти самые. Гонки через bootstrap смотрите вот под каждой иконкой есть вот — это вот написано класс — это их класс к примеру. Ну вот смотрите он нас есть кнопка. Да вот меню развертывания и полосочки гамбургер можно использовать пример напишем вот мы видим их три палочки с классом вот такие вот теперь у нас появится театре полосочки появляются внизу я заранее задал вот здесь вот в. Меге нас есть — это вот кнопочка белый цвет вот. Ну вот, а теперь экспонат позиционируем у этого вот. А класса glyphicon вот — это вот там потише наклейки есть такой класс есть такой совершеннолетие в топ один пиксель. Это стандартный вот если поджечь забывайте подавать сделать просто позиционируете вот там допустим просто центру всё ограничивается просто исключением одного класса в спам и всё то есть мы можем другую колонку поставить вот допустим картинку с именем. Азат класс. Вот и у нас здесь будет корзина всё просто вообще быстро отлично ещё, что хотелось бы вот я здесь добавил так и скажи модернизировал наш, а немножечко наш макет смотрите на разрешениях 4 пиксели 320 тебя добавил вот такой вот свойства для такое блок H1 и для travelblog. Посмотрите у нас на планшетах вот так вот на телефонах уменьшается шрифт просто через. Медиа запросы я прописал блок H1 немножко меньше 14 пикселей — это выглядит привлекательнее всё секции покончено. Мы можем с вами идти дальше и так, что она старше вот — это вот секция здесь у нас, что есть на свете есть иконки. У нас есть какое-то текст и у нас есть еще фото описание. Как можно знаю — это нас обычная. Коломны до 4 до 4 хорошо ещё советую вам сразу сделать вот такой вот делала до верха одни одинакового цвета пикселя вот там например вот эти вот что-то можно сделать там вот он поступили до сделать везде каждый вверху и внизу сделать пасту пиксели выступом для каждой секции и так, тогда давайте. Перейдем На, что мы создадим какой-то. Штеменко Да кстати вы, что взять. Вот так вот разделенный экран с текстом нужно зайти в карточку View layout и вот здесь колонка допустим там можно сделать пирсинг в моём случае удобно работать хорошо я все сюда здесь и так давай следующую секцию допустим у нас здесь будет считать параметры отдали идет контейнер. Почему когда непонятное думаю, что здесь есть здесь соответствует здесь уже будет контейнер флетрек контейнер дали Row col MD до 4 создаем ещё один блок который будет содержать в себе именно вот — это вот для того чтобы было проще кастомизировать я вам сейчас покажу некрасивая и вообще как она всё начало. Я хотел бы показать, что для укола nejtrino нужно применить квас чтобы не было отступов у него стандартного 15px внутренней политики государства такое World Class 2010. Теперь мы где нас не нужны осы просто будем добавлять тростниковый. О'кей хорошо. Теперь давайте сделаем эту шторку как бы ну по-человечески первое, что нужно сделать — это сделать наклейки для варлока вам погода, а так вот — это вот для блока котором нас лежит самое, что метафор блока нужно для блока нужно сделать позиция в балете для и матч брата мы делаем вот, что магазин. Абсолют топ 00 100% кстати. Восток добавить процент в таком формате через емиас.

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

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