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

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

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

Александр Пономаренко — это заключительное занятие по созданию веб сайта на bootstrap 3 сегодня мы с вами доверчивым. Вот эту вот секцию вот — это вот мы и сами начали с твоим делаем бутер и также я вам хотела рассказать про Just элементами страха и немножечко их всегда подключить сделать чтобы при нажатии на вот эту вот кнопку вылазила модальное окно регистрации. Да и там вот заработало — это вот, но показать вам как работает Java Script в.

Ватсапе рассмотрим еще некоторые элементы.

Напомни вам, что мы сделали мы сделали сами вот так вот Market на прошлом занятии мы сами сделали H3 вот этих вот и начали у тебя — это вот секцию для скачивания да давайте мы её доделаем продолжим до начала кнопка вверху. Как вы помните мы создавали с вами свойства точнее классы вот эти вот который задаёт цвет рамки и. Давайте эта кнопка у нас немножко больше чем там. Поэтому Давайте создадим ещё один, а у нас Band у него такие вопросы задаёт наши кнопки LG и сделаем отступы сверху допустим пускай будет 15, а справа слева 50 пикселей таким образом добавляю класс мамбетова стоит кнопки 100 секция и получаем. Диего цвет фона всё тело и ещё вот такой момент маленький смотрите у нас наверху у нас там было всего блока вот этого вот задан белый цвет для кнопки отдельно не задавали цвет. Давайте всё-таки надо кнопкой напишем отдельный. Цвет белый что. Нижняя кнопка тоже было белого цвета. Посмотрим сейчас её нас вот увидим белая кнопочка такая с белым шрифтом больше кнопка. Как появилась хорошо дальше. Давайте всё-таки ещё сделаем вот, что оформим как download Block которые мы делали напишем для него во-первых во-вторых для download блока H5 напишем немножечко допустим 32 пикселя также сделаем они в принципе и всё то есть там нет никакого жирного ничего такого, а вот здесь уже у этого не наверное на больше-меньше там и 32 2424. А вот да он блог птж для него сделаем как-то жирный шрифт и немножечко. Ну вот там — это правильно. текстом немного совсем исправил немножко сделать поменьше только на макете как мы видим на макете он нас жирный font-family calibri Bold вот этот вот как мы раньше вот — это transform uppercase так хорошо. Теперь давайте немножко оформим сам главную секцию download неё сделаем парень 90 сверху снизу всё вот получили вот — это вот вот — это плохо основатели диффузор с утра. Мы поступим. Таким образом мы сначала сделаем удар дальше сделаем какой-то блог в этом фу 3 Main Footer в нём зовут контейнер 34 даже сделаем copyright блок и в нём уже сделан также по такому же принципу здесь только она здесь будет колымда 400 am4 так и сделаем пишем будет идти мои блок-контейнер. Б4 в этом. Коломны до 4 у нас, что будет у нас во-первых. Мы с. Дианой какой-то футер — это уже блок — это всё будет супер в которых у нас будет какой-нибудь H5. ИП здесь об этом немножко позже мы поговорим как мы делаем с пользой тоже самое кнопки сделаем во-первых отступы вот здесь вот 74 я думаю будет примерно до 70 пикселей. У мэра сделаем сразу же. Давайте начнём оформлять наш хутор сделаем ещё. Да да у него сделаем 170 дальше background-color сделаем вот такой вот цвет и дальше. Вот здесь сделаем в нашем. Панда 4 классно в нём мы будем уже добавлять непосредственно high5 допустим сделаем Location ремонтом в сперме t7i сделаем более-менее было похоже на то, что вот здесь хорошо оформил данные блок фото, а у него в принципе ничего не сразу перейдем к. Да у него есть центр. Эдем H5 сделаем font-size где-то 18 пикселей дальше Font Family болт нежный цвет хорошо и белый ещё такс transform uppercase так хорошо такое нас получилось и вот этот вот давать наверное слишком крупный Skype 16 дальше у входа и т.п. делаем фон и цвет сейчас мы его возьмём вот так вот уже что-то более-менее похоже. Давайте продублировал вот эти вот этот блок ещё два раза и последняя думаю понятно, что там тоже самое только немножко другой текст вот поэтому мы не будем ничего менять вот работаем с этими кнопками знаки абсолютно такие же как и в предыдущей секции абсолютно никаких даже порядок такой же давайте мы возьмем их вместо поставим посмотрим, что из этого получится. Просто у нас вот, что они стали всё хорошо, но они серые я предлагаю сделать вот. Какую вещь в разделе к нашему кнопками сделать вот такой вот. Класс вот сделаем вот так она сейчас нам стоит памятник 90 мы сверху сделаем по 130 справа 0 снизу в принципе можно поставить в принципе ну вот так вот стало лучше немножечко даже можно давать наверно сверху тоже уберём получается сверху 020 снизу 30 пикселей с левой ноги до по идее не давать. И сверху наверное 20 пикселей снится 30. Да вот так вот. Вот вот так вот в принципе хорошо насчёт — это секции. Давайте Уменьши от. Стёпы у этой секции которая нас повыше tim-s между 95 пикселей. Вот давайте мы хотим. С секции сделаем сверху в принципе же 95 давайте сделаем сверху будет у нас 60 пикселей справа 0 снизу сорок писали слева, но я думаю будет хорошо. Вот супер на. Супер Теперь у нас тоже можно снизу добавить где-то 50 пикселей вот таким вот образом. Давай теперь ты был смотреться хорошо.

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

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