Урок 2. Фреймворк VUE JS. Создание макета

Автор Ruslana Chernenko
Урок 2. Фреймворк VUE JS. Создание макета

Приветствую вас уроки данного курса по бюджету и.

Давайте начинать нашу разработку приложения для начала нам придётся разработать каркас всего этого приложения используя со своим bootstrap-4. Ну просто потому, что быстрее делать более-менее эстетические какие-то вещи да. Поэтому будем его использовать и быстренько.

Давайте посмотрим найти файлы которые у меня уже есть в приложении у меня по сути пустой пока проект у меня один Index HTML файл.

Где самые базовые теги можно написать тату например всё здесь. И он мне так же уже заготовлено. Папочка имаджес где у меня находится три картинки вы видели как раз-таки в первом уроке. То есть у нас Focus Mondeo I номера. Вы можете взять любые другие картинки или все данные картинки в дополнительных материалах. Когда нам урок где будет. Исходный код всего этого приложения и собственно. Давайте начинать то есть сам проект очень пока пустой. Я начала заходим браузер. Давайте подключим bootstrap-4 переходим на официальный сайт обычная всё ещё в. Гугле И вот перехожу на getbootstrap.com здесь у нас слева должно быть поле download и давайте мы просто возьмём сидим. То есть просто подключен соответственно. Да тут ссылку и даже не будем ничего скачивать пока, что сделаем таким образом отлично быстро поставился и теперь давайте пробовать разрабатывать значит в теге Body давайте мы с вами заведём контейнер div с классом контейнер допустим давайте мы заведем Nippon дополнительные классы утилиту padding Top 5 который просто добавят некоторые отступ от верха нашего экрана далее соответственно. Давай заведём например какой-нибудь div с классом ролл надо тех кто не знает я пишу. ролл. То есть как все со селектор класса нажимаю на tab и у меня соответственно получается вот такой уже готовы оплатить называется emmet webstorm или он уже стандартный для других редакторов нужно наверное будет установить его. Так теперь заходим внутрь данного класса создаем ещё один глаз и здесь. Давайте допустим было заголовки H1 мы просто напиши название например course Application. А я буду писать всё на английском языке просто чтобы не тратить время для того чтобы переключаться русский да потому, что в принципе тех. Здесь нам так важен и теперь давайте запустим всё — это у нас в браузере обновляю страницу и. Как увидеть мы получаем данные H1. Давайте проверим применились какому стилю какие-то которые нам нужны и. Как видите действительно есть какие-то стиле да то есть файлы которые у нас поступают от bootstrap 4 замечательно всё — это можно закрыть и. Давайте продолжать разрабатывать наш макет так 1 40 заводе вторую строку и здесь давайте заведем пару колонок. Значит у нас должно быть колонка для списка всех наших машин плюс для поиска и соответственно секция где он будет детальное изображение каждый из машин поэтому давайте мы заведем допустим. МТ4 и соответственно ещё одну колонку мд-85а исходя из того, что колонки быстро. Пионер разделяются на 12 частей тест на четыре части мы собираем на левое меню и 8 частей на детальное изображение здесь соответственно в первой колонке. Давайте разберем, что нам нужно в первую очередь требуется form-group для поиска здесь у нас по bootstrap у нас должен быть пробел для чего для такие Search я допустим издавать напишем find your например что-нибудь вроде этого и. Дали возле я была у нас должен быть Input с типом из классом form-control и также. Давайте создадим майдин всё для того чтобы я буду переходить сразу же на данный Input. И после этого после форум группы давайте мы приведем еще вертикальную черту horizontal line. Давайте браузере посмотрим как всё — это выглядит пока, что выглядят они плохо можно нажимать на волейбол и попадаем сразу же на Input. Единственное, что мне не нравится маленький отступ между заголовком и соответственно такой давайте мы — это исправим можно допустим в данной строки ролл. Где находится соответствие заголовок добавить класс допустим MP3 да то есть младшим братом 35 элементов есть 12345 обновляем. Да я уже немного лучше. Теперь давайте зайдем ещё происходит например тут будет пример name imoda написано. Вроде я туда чтобы было понятно, что можно фильтровать. Соответственно по модели и по имени теперь далее горизонтальная черта у нас. Давайте после неё мы создадим список л GDI соответственно. Класс Элит групп — это специально класс для листов. И здесь. Давайте зададим парочку ли с классом лист поэтому и какой-нибудь Pack Content неважно допустим 12345 забьём и копируем соответственно и ставим просто несколько раз посмотрим как — это будет выглядеть обновляем и принципами видимо действительно, что мы получили довольно-таки красивый список и принципе можно продолжать так только давайте я заметил, что если мы сейчас будем кликает. Соответственно по каждому из этих элементов то ничего не будет происходить мы можем — это немного исправить добавить ещё один специальный класс который называется list-group-item и так соответственно будет понимать по какому элементом и кликаем на соответственно более страницу и тут хотя бы вот видишь теперь отображается отлично теперь переходим к правой секциям секции у нас насчёт вот есть строка и вот нас идёт div с классом команда восемь здесь. Давайте сразу же завезем допустим ещё одну сроком, а также будем разделять здесь. Давайте допустим также ведем колонку допустим md5 для картинки и соответственно нам потребуется колонка md7 для тех кто работает в шторме для того чтобы также дублировать строку можно нажимать Control D и E соответственно вы получаете такой же срок дубликат так соответственно у нас теперь есть ещё одна разметка то есть мы поделили на пять частей и на всю нашу правую часть значит здесь он будет картинка давайте заведем с.

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

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