Bootstrap сайт

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем увеееей ребята. В этой(этих) статьях я напишу о том как создать простой блог на python с использованием библиотеки flask. Ну что-ш меньше слов - больше дела, приступим!","type":"unstyled","key":"c6a62"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[Часть 1]HTML и Bootstrap","type":"header-two","key":"eojha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы будем сочетать HTML и CSS для создания базовой веб-страницы.","type":"unstyled","key":"1bpld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот начало кода с Bootstrap:","type":"unstyled","key":"8rfd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n Bootstrap сайт\n \n \n \n \n \n \n \n","type":"blockquote","key":"1qjt3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут мы создаём заголовки, применяем кодировку. И самое главное: загружаем Bootstrap.","type":"unstyled","key":"es0cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Декларация определяет этот документ как HTML5","type":"unordered-list-item","key":"5cqb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" элемент является корневым элементом HTML-страницы","type":"unordered-list-item","key":"93ofc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" элемент содержит мета-информацию о документе","type":"unordered-list-item","key":"2vhp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" элемент задает заголовок документа","type":"unordered-list-item","key":"2t9o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<meta> элемент должен определить кодировку UTF-8","type":"unordered-list-item","key":"bbqon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<meta> элемент с именем = \"видовой экран\" делает веб-сайт хорошо выглядеть на всех устройствах и разрешение экрана","type":"unordered-list-item","key":"3kuvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<style> элемент содержит стили для веб-сайта (макет/дизайн)","type":"unordered-list-item","key":"28q3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bal73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее создадим меню:","type":"unstyled","key":"jlt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":511,"style":"ITALIC"},{"length":8,"offset":601,"style":"ITALIC"}],"text":"<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark\">\n <a class=\"navbar-brand\" href=\"#\">Сайт</a>\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapsibleNavbar\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <div class=\"collapse navbar-collapse\" id=\"collapsibleNavbar\">\n <ul class=\"navbar-nav\">\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">Ссылка 1</a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">Ссылка 2</a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">Ссылка 3</a>\n </li> \n </ul>\n </div> \n</nav>","type":"blockquote","key":"495m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее создадим основной контент:","type":"unstyled","key":"f0uh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":231,"style":"ITALIC"},{"length":6,"offset":325,"style":"ITALIC"},{"length":6,"offset":419,"style":"ITALIC"}],"text":"<div class=\"container\" style=\"margin-top:30px\">\n <div class=\"row\">\n <div class=\"col-sm-4\">\n <ul class=\"nav nav-pills flex-column\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\" href=\"#\">Активированная ссылка</a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">ссылка</a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">ссылка</a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link disabled\" href=\"#\">Выключенная ссылка</a>\n </li>\n </ul>\n <hr class=\"d-sm-none\">\n </div>\n <div class=\"col-sm-8\">\n <h2>Заголовок 1</h2>\n <h5>Дек 7, 2023</h5>\n <p>Текст</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet rutrum vehicula. Fusce metus quam, consequat a quam eget, suscipit efficitur enim. Fusce blandit, lectus fermentum scelerisque condimentum, dolor purus rutrum diam, ut tincidunt augue libero ut leo. Morbi massa est, vestibulum ut efficitur a, placerat tempor diam. Vestibulum ullamcorper sollicitudin turpis, a accumsan massa commodo sed. In eget mauris in neque accumsan tristique et ut eros. Fusce non dignissim tellus. Phasellus feugiat consectetur nisi, at aliquet magna aliquam ut</p>\n <br>\n <h2>Заголовок 2</h2>\n <h5>Сен 2, 2023</h5>\n <p>Какой-нибудь текст</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet rutrum vehicula. Fusce metus quam, consequat a quam eget, suscipit efficitur enim. Fusce blandit, lectus fermentum scelerisque condimentum, dolor purus rutrum diam, ut tincidunt augue libero ut leo. Morbi massa est, vestibulum ut efficitur a, placerat tempor diam. Vestibulum ullamcorper sollicitudin turpis, a accumsan massa commodo sed. In eget mauris in neque accumsan tristique et ut eros. Fusce non dignissim tellus. Phasellus feugiat consectetur nisi, at aliquet magna aliquam ut</p>\n </div>\n </div>\n</div>","type":"blockquote","key":"f5ban"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут мы создаём боковое меню а также 2 статьи с текстом \"рыбой\".","type":"unstyled","key":"fv0gr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат:","type":"unstyled","key":"d6h1a"},{"data":{"image":{"id":"657db6005f698b5ac04eee02"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получившийся страница","type":"atomic:image","key":"11mgh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А весь код вместе:","type":"unstyled","key":"1qc0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<html>\n<head>\n <title>Bootstrap сайт\n \n \n \n \n \n \n \n\n\n\n

Заголовок 1

Дек 7, 2023

Текст

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet rutrum vehicula. Fusce metus quam, consequat a quam eget, suscipit efficitur enim. Fusce blandit, lectus fermentum scelerisque condimentum, dolor purus rutrum diam, ut tincidunt augue libero ut leo. Morbi massa est, vestibulum ut efficitur a, placerat tempor diam. Vestibulum ullamcorper sollicitudin turpis, a accumsan massa commodo sed. In eget mauris in neque accumsan tristique et ut eros. Fusce non dignissim tellus. Phasellus feugiat consectetur nisi, at aliquet magna aliquam ut

\n
\n

Заголовок 2

Сен 2, 2023

Какой-нибудь текст

\n\n","type":"blockquote","key":"bfu7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подписывайтесь ведь скоро вторая часть где мы поговорим об python mysqlite!","type":"unstyled","key":"3ajee"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":104,"offset":9}],"inlineStyleRanges":[],"text":"Часть 2: https://dzen.ru/media/id/657db13f723bf50ff344f52d/chast-2prostoi-blog-na-python-657e9adf64bfa87a0dbb8b7a","type":"unstyled","key":"endl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"mhf7HojmFnDA6sy2eEy8"}],"entityMap":{"0":{"data":{"badSeoLink":"true","url":"https://dzen.ru/a/ZX6a32S_qHoNu4t6"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}