Step 7 (S-44734)

From Stepik Wiki
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14821/step/7

Step 7 (S-44734) 1.png

[00:00 - 00:17] поскольку у нас все таки курс backend разработки веб технологиями content а хотелось бы обратить внимание на готовые решения а как правило при разработке веб приложений а пользовательский интерфейс доверяет разрабатывать


[00:17 - 00:36] профессионалы с профессиональным фонд от разработчика разработчику в часто остается необходимость сделать административный интерфейс то есть интерфейс для внутреннего пользователя то внутреннего использования но тем не менее его нужно сделать качественно и удобно а


[00:36 - 00:51] разработка стилей как от интерфейсов с 0 это часто очень трудоемко для таких случаях случаев удобно использовать готовые так называемые фреймворки 1 из них


[00:51 - 01:06] можно например можно выбрать фреймворк bootstrap обустраивал готовая библиотека стилей а я пока еще называют острой орг от компании twitter bootstrap довольна


Step 7 (S-44734) 2.png

[01:06 - 01:21] прост в освоении позволяет а даже не знаю не знаю всех тонкостей а собрать более менее приемлемый интерфейс за короткое время что включает в себя быстрее


Step 7 (S-44734) 3.png

[01:21 - 01:40] ну во 1 при скачивании вы получаете полный набор то есть это стиле некоторой java скрипты необходимо этом шрифты картинки а быстро в себя включает готовый шаблон страницы то есть вы можете начать с 0 с некоторых шаблонах


[01:40 - 01:55] очень важная вещь а вот строки есть сетка приемы а поговорим на следующем слайде а кроме этого в бутстрапе есть а


[01:55 - 02:12] готовое готовые стили по умолчанию для большинства элемент мы говорили что в браузере зашиты некоторые стили помолчать но они очень старые эту страницу с их использованием документ выглядит очень стар трек


[02:12 - 02:30] создается новая дефолтной стиле с которыми мы документ выглядит вполне современно и красиво то есть это просто большого улучшения дальше есть а


[02:30 - 02:46] хорошая верстка для хорошее оформление для таких элементов как таблицы списки и кнопки а это продолжение предыдущего этапа то есть вся стандартная верстка а она сделана более красивая качественно


[02:46 - 03:05] кроме этого это самое важное есть а компоненты то есть от звезд более сложных конструкций например группа кнопок а выпадающее меню меню навигации а форма с отображением ошибок а


[03:05 - 03:20] несколько вкладок на странице которая позволяет переключать а между разными переключаться между разными вкладками и также в bootstrap а включены а плагины для


[03:20 - 03:37] а более удобная навигация например по сайту а и тому подобное а сейчас хотелось бы обратить внимание на то что такое сетка сетка на самом деле помогает больше всего в разработке сетка bootstrap


Step 7 (S-44734) 4.png

[03:37 - 03:52] это способ деления ширины всей ширины сайта на часть то есть 1 с чего начинается разработка то вам необходимо что то разместить в правой части страницы что то разместить в левой части страницы


[03:52 - 04:08] а потом когда даже работа есть какой то конкретной формы некоторые вещи нужно располагать 2 некоторые провесть для этого можно использовать стили слов так я объяснял раньше это неудобно и трудоемко а


[04:08 - 04:27] в бутстрапе введены стандартные стиле а для того чтоб делить страницу на несколько частей используется так называемая сетка сетка состоит из некоторого контейнера вот допустим у вас есть div с классом провод контейнер


[04:27 - 04:42] а внутри контейнера располагаться колонки а для того чтобы элемент стал колонка ему нужно задать вот такой класс


[04:42 - 04:59] мы видим что в этом классе присутствует число 4 здесь 8 а бутстрапе ширина сайта делится на 12 частей то есть это сетка на 12 частей соответственно вот эти цифры 4 8 рука указывает сколько частей занимает данная колонка


[04:59 - 05:16] то есть 1 колонка у нас на 4 части 2x8 частей а соответственно сношения 1 л а таким образом с помощью готовых классов вас есть возможность разделить страницу а


[05:16 - 05:33] на несколько частей необходимый вам ширины и разместить некоторые элементы левее либо праве а далее верстка использовать называемая адаптивная верстка а


[05:33 - 05:53] и а этот фреймворк изначально затачивался на использование на устройствах разных размеров а зачем то нужно дело в том что объем информации которой показаны а может и не помещается на устройствах с маленьким экраном на планшетах либо


[05:53 - 06:09] на телефонах и когда на большом экране удобно размещать информацию в 2 колонки слева и справа а на планшетах допустим так делать не получится нужно размещать 1 под другим


[06:09 - 06:28] а либо возможно нужно сдавать разную ширину разная разделение а при разных размеров экрана для этого в бутстрапе сделал на разные классы то есть мы видим здесь вот есть слово мд здесь есть слово lg мд медиум а


[06:28 - 06:47] соответственно правый стили применяются на больших экранах левы маленький а за более подробная документация по этому поводу можно обратиться но полезно помнить сразу что такая фича есть


[06:47 - 07:04] а если вы планируется реализовать какую то админку я как раз таки рекомендуют начинать не с 0 а использовать а например устроив либо другую


[07:04 - 07:11] библиотеку стили она сильно сэкономит вам время и а упростит разработку