Создание интернет магазина — часть 4

Автор Ivan Samoilov
Создание интернет магазина — часть 4

мы подошли к очень интересной части нашего создания сайта — это графика на этой лекции мы изучим bootstrap.

Как работает его таблица мы начинаем с того, что у нас уже есть рабочий сайт на angular который мы построили вместе с вами на предыдущих лекциях работает кнопка Check Out и сайт функционирует осталось нам добавить к нему готовые внешний вид красивый внешний вид и мы будем использовать готовые классы bootstrap — это библиотеки с готовым дизайном самый популярный на сегодняшний день и очень удобны в использовании. И вам надо их изучить вместе на этой лекции для любого проекта которые вы будете использовать чтобы вы использовали готовый дизайн и не надо с одним колесом мы зайдём на сайт bootstrap и поймём как он работает мы на этой лекции изучим его горит его схему мы будем использовать его класс есть также w3schools на сайте w3schools лекции. Начнем с того чтобы использовать готовое классы bootstrap можно вставить лицо онлайн прямо в наш индекс HTML скопировать вот эти вот клеёнки на сайт и, тогда мы зависим от сайта bootstrap и от интернета.

Это с одной стороны много быстрее потому, что может быть человек уже был на каком-то сайте до нас и там уже скачал эти библиотеке локально и поэтому лучше использовать готовые библиотеки с сайта, но я не хочу быть зависимым от интернета.

Я хочу чтобы мой сайт работал также и поэтому я скачиваю локальных сетей библиотеке bootstrap и встраиваемых внутри моего сайта есть два подхода если ваш сайт будет только в интернете и никогда не будет в закрытой среде. Когда вы можете использовать. Конечно прямо на сайт bootstrap дальше начинаем с того, что мы не зависеть от интернета и мы скачали bootstrap сделали ему грозит и папку fonts обязательно надо скопировать в корень если мы их nescafe.ru корень не будут работать иконки видите мы скопировали папку fonts в корень из не есть гриф и вот эти вот и. Фантик чтобы они работали надо чтобы папка fonts было в корне нашего проекта. Кроме этого кроме этой папке файлы Java Script и у нас есть файлы, но можем видеть ссы джаваскрипт мы можем посмотреть, что есть и два файла bootstrap Min и полный и bootstrap Min — это минимальная версия мы её будем Production обустроить его используем чтобы у нас были разные подсказки и, тогда мы сейчас берём и копируем эти файлы внутри нашей папке скриптов и делаем на них ссылки изнутри индекса многие сайты используют просто эти копии на эти деньги и используют их напрямую. Кроме этого мы можем ещё использовать и nuget пакет то есть Visual Studio строим nuget пакет который намного намного удобнее и не надо ничего вручную скачивать для этого и придумали пакеты давайте мы здесь немножко сделаем порядок и напишем. Какие линки у нас сейчас будут в быстро деньги будут bootstrap angular встраиваем ли нам нужен был bootstrap CSS bootstrap CSS, что здесь было гсц ещё разница между минимальной версией и полной версией — это сообщение об ошибках интересов подсказки лучше конечно для разработки и минимальную версию смотрите. Давайте я. Вам сейчас покажу вместо того чтобы делать вручную всё, что я делал можно сделать — это очень просто с помощью nuget пакет nuget пакет скачивает внутрь папку скрипт. А всё, что надо для использования быстро прикрас мы делаем стол и он нам инсталлируется быстро и он увидел, что уже есть быстро и он спросил перезаписать то, что есть теперь у нас будет внутри скрипта фильм где там и вручную мы умеем и так и так теперь то, что нам остаётся — это добавить джиквери для быстро нужен джиквери он использует библиотеки jquery — это очень популярная оболочка вокруг джаваскрипт — это как он гулял улучшил джаваскрипт также. Дон много лет использовали джейквери — это как бы библиотеки которые облегчают работу с джаваскрипт в курсе джаваскрипт. У нас есть лекции по мы начинаем делать дизайн первое, что у нас есть эти гриф эти готовые иконки которые идут. Как шрифт очень-очень красивые и мы сейчас найдём иконку которая будет нам показывать покупку корзиной вместо слова Buy. Мы хотим поставить значок корзины. Вот — это иконка для корзины и. Сейчас мы посмотрим как её мы видим чтобы здесь есть пример синтаксиса как её правильно использовать и как — это выглядит то есть мы хотим использовать. Вот этот значок вместо слова Buy я делаю комментарии и мы видим, что внутри Battle вместо того чтобы писать текст не отображает иконку во-первых батон. Мы хотим сделать красивый ивоклар дизайн красивую кнопку записи добавляет готовой классы дизайна то есть до сих пор у нас есть 1 directive NG Click добавляем ещё у нас есть одно свойство мы. Добавляем еще кнопки свойства класс и Class btn btn-default. А, что такое Class btn btn-default — это сделали внутри bootstrap CSS bootstrap CSS как раз определяет и делает их красивыми кнопочками на лекции CSS выучите делать этот дизайн, но мы не хотим. Сейчас выдумывать колесо, а использовать готовые которые мы хотели и, что у нас получилось у нас получилось, что есть кнопка и внутри кнопки вместо текста есть сын у которого. Дезо icon этого иконки. Давайте посмотрим как — это выглядит и мы видим, что выглядит очень красиво. Теперь мы можем нажимать или у него меняется цвет когда мы находим на него он выделяется то есть всё очень приятно смотреть. И у нас работает функция на — это не мешает нашему функция. Это всего лишь класс дизайн прекрасная. Теперь мы хотим чтобы таблички располагались друг с другом и хотим сделать дизайн табличка давайте мы сейчас поищем. Как сделать дизайн для таблички, а потом мы поговорим. Как расположить их ряда и как — это сделать для мобильных телефонов чтобы была разная ширина утра и для мобильного телефона поиграемся с табличками шириной колонок в зависимости от.

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

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