Введение в HTML-2:
bootstrap, дизайн
Биоинформатика на ФББ, 1 курс, весенний семестр
Валентина Дмитриевна Маслова,
@val_ma_telegram
Bootstrap
Bootstrap – это набор готовых css стилей и js скриптов, созданный �в первую очередь для того, чтобы облегчить верстку сайтов с упором на “резиновый” дизайн, т.е. сайт, сделанный на bootstrap, будет одинаково хорошо смотреться на любом экране.
О чем bootstrap:
При этом собственные стили все еще нужно писать – но уже �в основном только для оформления.
2
Как добавить Bootstrap на страницу
Вариант 1.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Эволюция в действии</title>
<link href="./bootstrap.min.css" rel="stylesheet">
</head>
Ссылка на официальный сайт Bootstrap
3
Как добавить Bootstrap на страницу
Вариант 2.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Эволюция в действии</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
Ссылка на официальный сайт Bootstrap
4
Сайт v1.0 VS Сайт v2.0
http://kodomo.fbb.msu.ru/~alexander.zlobin/teach/html/v1.0/
http://kodomo.fbb.msu.ru/~alexander.zlobin/teach/html/v2.0/
Поменялось:
5
Основы разметки с помощью Bootstrap
При вёрстке с Bootstrap содержимое страницы следует упаковывать в блоки <div></div> с использованием различных классов.
<div class=”container”>
.container - основной родительский класс для центрирования содержимого на странице и выравнивания элементов. По умолчанию имеет максимальную ширину 1140px и минимальную 540px. Адаптируется к ширине экрана.
</div>
<div class=”container-fluid”>
.container-fluid - то же, что .container, но по умолчанию занимает всю ширину экрана (width=100%)
</div>
6
Основы разметки с помощью Bootstrap
Посмотрим, как ведут себя .container и .container-fluid при масштабировании:
http://kodomo.fbb.msu.ru/~val_ma/v2.1/try-bootstrap.html/
7
Основы разметки с помощью Bootstrap
Теперь применим это к нашей странице. Всё содержимое упакуем в <div class=”container”></div>. Текст разобьём на абзацы, добавим ссылку в конце, добавим картинки (аналогично версии v1.4).
Чтобы картинки не были гигантскими, а наследовали ширину родительского блока, применим к ним класс .img-fluid
Посмотрим на результат, сравним с v1.4:
http://kodomo.fbb.msu.ru/~val_ma/v2.1/
http://kodomo.fbb.msu.ru/~alexander.zlobin/teach/html/v1.4/
8
Bootstrap Grid System
В логике Bootstrap любой родительский блок разбивается на 12 колонок. Для форматирования элемента по ширине применяются классы, указывающие на число занимаемых колонок от ширины блока-родителя.
9
<div>
</div>
Bootstrap Grid System
Для форматирования используют систему классов .row и .col-xx-*:
В данном примере блок <div class=”col-md-8”> занимает 8 колонок (8/12 = 2/3) от родительского <div class=”row”>, а <div class=”col-md-4”> занимает 4 колонки (4/12 = 1/3).
10
<div class=”container-fluid”>
</div>
<div class=”row”>
</div>
<div class=”col-md-8”></div>
<div class=”col-md-4”>
</div>
Bootstrap Grid System
.col-xx можно использовать для автоматического разбиения на равные колонки:
Подробно можно почитать тут.
11
<div class=”container-fluid”>
</div>
<div class=”row”>
</div>
<div class=”col-md”>
</div>
<div class=”col-md”>
</div>
<div class=”col-md”>
</div>
<div class=”col-md”>
</div>
Bootstrap Grid System
Для расстановки блоков по горизонтали применим дополнительный класс помимо .row :
Подробно можно почитать тут.
12
<div class=”row justify-content-start”>
</div>
<div class=”col-md-4”>
</div>
<div class=”row justify-content-around”>
</div>
<div class=”col-md-4”>
</div>
<div class=”col-md-4”>
</div>
<div class=”col-md-4”>
</div>
Bootstrap Grid System
Для расстановки блоков по вертикали - дополнительные классы помимо .col :
Подробно можно почитать тут.
13
<div class=”row>
</div>
<div class=”col-md-4 align-self-start”>
</div>
<div class=”col-md-4 align-self-center”>
</div>
<div class=”col-md-4 align-self-end”>
</div>
Bootstrap: добавляем воздуха
Классы для bootstrap-совместимых отступов:
<div class=”row mt-3”>
mt-3
Подробно можно почитать тут.
14
m = margin
p = padding
t = top
b = bottom
r = right
l = left
x = left+right
y = top+bottom
0-5 или auto
Bootstrap Grid System
Применим это к разбиению контента в нашем практикуме. Объединим иллюстрации 1-3 в одну, в которой изображения следуют друг за другом вертикально, а сама иллюстрация расположена справа от текста. Иллюстрации 5 и 6 расположим рядом на одном уровне. (v1.6)
http://kodomo.fbb.msu.ru/~val_ma/v2.2/
Масштабирование – что тут происходит?
15
Адаптивная вёрстка
xx в классе col-xx-* обозначает, начиная с какого размера экрана содержимое колонки перестаёт занимать обозначенную часть блока родителя и занимает его целиком.
16
Префикс | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
Max ширина | Auto | 540px | 720px | 960px | 1140px |
Хорошо подходит для: | | | | | |
Адаптивная вёрстка
Сделаем страницу адаптивной.
http://kodomo.fbb.msu.ru/~val_ma/v2.3/
Время на вёрстку, когда ты знаешь, что делаешь: 15 минут.
Время на вёрстку, когда ты не совсем знаешь, что делаешь: 3.5 часа.
17
Меню с помощью Bootstrap
Используем тэг <nav> и класс .navbar.
.navbar по умолчанию имеет ширину fluid (т.е. распространяется на всю ширину страницы браузера). Можно обернуть <nav> в <div class=”container”>, если не хочется делать меню fluid.
Классы navbar-expand-xx можно применять для скрывания/разворачивания меню при адаптивной вёрстке.
.navbar-brand позволяет выделить заглавный элемент (логотип).
Остальные элементы принято оформлять в виде элементов ненумерованного списка <ul>
18
Меню с помощью Bootstrap
Простейшая менюшка:
http://kodomo.fbb.msu.ru/~val_ma/v2.4/
Чтобы работало, необходимо прописать ссылки на библиотеки JS:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Эволюция в действии</title>
<link href="./style.css" rel="stylesheet" type="text/css" >
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
Ссылки взять с официального сайта Bootstrap
19
Меню с помощью Bootstrap
navbar-fixed-top – меню фиксировано наверху
navbar-dark bg-dark – быстрый способ сделать темное меню и не писать свой стиль
navbar-light bg-light – то же, но светлое
https://getbootstrap.com/docs/5.2/components/navbar/
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
20
Дизайн и адекватность
21
Гарнитуры
По умолчанию используются шрифты вашей системы. Команда CSS font-family: “Arial”, “Verdana”, sans-serif; говорит следующее:
Но что, если хочется, чтобы на любой системе текст сайта был набран одним и тем же шрифтом и при этом выбранным вами?
22
Гарнитуры
23
Добавление своего шрифта
24
Google Fonts
Google хостит библиотеку шрифтов с открытой лицензией. Среди них много кириллических. Это самый простой способ добавить шрифт.
25
Шрифтовые пары
Часто для контраста и стиля заголовки набирают одной гарнитурой, а основной текст – другой. Вдохновение:
26
Гарнитура, ее оформление и адекватность
27
28
29
30
31
Основы верстки текста
Благо есть простой тул для очистки своего текста
https://www.artlebedev.ru/typograf/
32
Цвет
Способы задать цвет:
Цветовые сочетания:
https://color.adobe.com/trends
33
34
Фон
Просто цвет:
background-color: … ;
Градиент:
background-image: linear-gradient(white, blue);
background-image: radial-gradient(white, blue, gray);
Градиенты с CSS:
35
Фоновое изображение
Background-image: url(“path_to_image”);
По умолчанию изображение ведет себя как обои:
36
37
38
39
40
Убрать замощение:
background-repeat: no-repeat;
Включить масштабирование:
background-size: cover;
background-position: center;
Выключить скроллинг:
background-attachment: fixed;
41
Совершенно недопустимо
42
Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.
Отчисление
43
ПаРаЛоГи - гомологичные БЕЛКИ из одного организма. Ортологи �- гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.
Почти недопустимо
44
Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.
Ну… ладно
45
Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.
Допустимо
46
Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.
Отчисление (как тонка грань)
47
Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.
Про фон
Еще не придумано ничего лучше, чем белый фон и черный/темно-серый текст
Темная тема – это не просто белый текст на черном фоне �(на самом деле там нет черного почти никогда): https://material.io/design/color/dark-theme.html#anatomy
Старайтесь наводить красоту иллюстрациями к практикумам, �а не котятами на фоне
48
Hover
К каждому объекту в CSS можно применить селектор :hover и прописать изменение поведения при наведении курсора мышки
img { opacity: 0.5; }
img:hover { opacity: 1.0; }
Это изменение может быть плавным:
img { opacity: 0.5; }
img:hover { opacity: 1.0; transition: 2s }
49
Transition
img { opacity: 0.5; width: 50%}
img:hover { opacity: 1.0; width: 100%;
transition: opacity 2s, width 4s }
Transition: all 0s ease 0s
Что - как быстро - как - задержка
50
Поищем вдохновения
Более стандартные варианты для учебного сайта:
https://ccsb.scripps.edu/goodsell/
https://www.visual-science.com/projects/
Менее стандартные варианты:
https://nplus1.ru/ (можно так сделать страничку семестра, например)
https://sunandstuff.com/mandelbrot/about/ (весь дизайн вокруг контента)
51
ДЗ
52