1 of 51

Введение в HTML-2:

bootstrap, дизайн

Биоинформатика на ФББ, 1 курс, весенний семестр

Валентина Дмитриевна Маслова,

@val_ma_telegram

2 of 51

Bootstrap

Bootstrap – это набор готовых css стилей и js скриптов, созданный �в первую очередь для того, чтобы облегчить верстку сайтов с упором на “резиновый” дизайн, т.е. сайт, сделанный на bootstrap, будет одинаково хорошо смотреться на любом экране.

О чем bootstrap:

На 80% о макетировании (колонки, контейнеры, div-ы)
Об унификации (скрупулезное переопределение defaults, �так как у каждого браузера они свои)
Немного об исправлениях в шизофрении CSS

При этом собственные стили все еще нужно писать – но уже �в основном только для оформления.

2

3 of 51

Как добавить Bootstrap на страницу

Вариант 1.

Скачать скомпилированные библиотеки CSS
Указать путь к ним:

<head>

<title>Эволюция в действии</title>

</head>

Ссылка на официальный сайт Bootstrap

3

4 of 51

Как добавить Bootstrap на страницу

Вариант 2.

Указать путь на репозиторий Bootstrap:

<head>

<title>Эволюция в действии</title>

</head>

Ссылка на официальный сайт Bootstrap

4

Внимание! В презентации код более старой версии Bootstrap!

5 of 51

Сайт 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

6 of 51

Основы разметки с помощью Bootstrap

При вёрстке с Bootstrap содержимое страницы следует упаковывать в блоки <div></div> с использованием различных классов.

.container - основной родительский класс для центрирования содержимого на странице и выравнивания элементов. По умолчанию имеет максимальную ширину 1140px и минимальную 540px. Адаптируется к ширине экрана.

</div>

.container-fluid - то же, что .container, но по умолчанию занимает всю ширину экрана (width=100%)

</div>

6

7 of 51

Основы разметки с помощью Bootstrap

Посмотрим, как ведут себя .container и .container-fluid при масштабировании:

http://kodomo.fbb.msu.ru/~val_ma/v2.1/try-bootstrap.html/

7

8 of 51

Основы разметки с помощью 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

9 of 51

Bootstrap Grid System

В логике Bootstrap любой родительский блок разбивается на 12 колонок. Для форматирования элемента по ширине применяются классы, указывающие на число занимаемых колонок от ширины блока-родителя.

9

<div>

</div>

10 of 51

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>

</div>

</div>

11 of 51

Bootstrap Grid System

.col-xx можно использовать для автоматического разбиения на равные колонки:

Подробно можно почитать тут.

11

</div>

</div>

</div>

</div>

</div>

</div>

12 of 51

Bootstrap Grid System

Для расстановки блоков по горизонтали применим дополнительный класс помимо .row :

Подробно можно почитать тут.

12

</div>

</div>

</div>

</div>

</div>

</div>

13 of 51

Bootstrap Grid System

Для расстановки блоков по вертикали - дополнительные классы помимо .col :

Подробно можно почитать тут.

13

</div>

</div>

</div>

</div>

14 of 51

Bootstrap: добавляем воздуха

Классы для bootstrap-совместимых отступов:

mt-3

Подробно можно почитать тут.

14

m = margin

p = padding

t = top

b = bottom

r = right

l = left

x = left+right

y = top+bottom

0-5 или auto

15 of 51

Bootstrap Grid System

Применим это к разбиению контента в нашем практикуме. Объединим иллюстрации 1-3 в одну, в которой изображения следуют друг за другом вертикально, а сама иллюстрация расположена справа от текста. Иллюстрации 5 и 6 расположим рядом на одном уровне. (v1.6)

http://kodomo.fbb.msu.ru/~val_ma/v2.2/

Масштабирование – что тут происходит?

15

16 of 51

Адаптивная вёрстка

xx в классе col-xx-* обозначает, начиная с какого размера экрана содержимое колонки перестаёт занимать обозначенную часть блока родителя и занимает его целиком.

16

Префикс	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Max ширина	Auto	540px	720px	960px	1140px
Хорошо подходит для:

17 of 51

Адаптивная вёрстка

Сделаем страницу адаптивной.

С большого экрана (lg): первые 3 иллюстрации справа от первых 3 абзацев.
С экрана планшета (md): Первый абзац по центру, первые 3 иллюстрации справа от 2-3 абзацев.
С экрана телефона в горизонтальной ориентации (sm): первые 3 иллюстрации в один ряд после 3 абзаца.
С экрана телефона в вертикальной ориентации (xs): всё выровнено по ширине экрана.

http://kodomo.fbb.msu.ru/~val_ma/v2.3/

Время на вёрстку, когда ты знаешь, что делаешь: 15 минут.

Время на вёрстку, когда ты не совсем знаешь, что делаешь: 3.5 часа.

17

18 of 51

Меню с помощью Bootstrap

Используем тэг <nav> и класс .navbar.

.navbar по умолчанию имеет ширину fluid (т.е. распространяется на всю ширину страницы браузера). Можно обернуть <nav> в <div class=”container”>, если не хочется делать меню fluid.

Классы navbar-expand-xx можно применять для скрывания/разворачивания меню при адаптивной вёрстке.

.navbar-brand позволяет выделить заглавный элемент (логотип).

Остальные элементы принято оформлять в виде элементов ненумерованного списка <ul>

18

19 of 51

Меню с помощью Bootstrap

Простейшая менюшка:

http://kodomo.fbb.msu.ru/~val_ma/v2.4/

Чтобы работало, необходимо прописать ссылки на библиотеки JS:

<!DOCTYPE html>

<head>

<title>Эволюция в действии</title>

</head>

<body>

</body>

Ссылки взять с официального сайта Bootstrap

19

20 of 51

Меню с помощью Bootstrap

navbar-fixed-top – меню фиксировано наверху

navbar-dark bg-dark – быстрый способ сделать темное меню и не писать свой стиль

navbar-light bg-light – то же, но светлое

https://getbootstrap.com/docs/5.3/components/navbar/

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

20

21 of 51

Дизайн и адекватность

21

22 of 51

Гарнитуры

По умолчанию используются шрифты вашей системы. Команда CSS font-family: “Arial”, “Verdana”, sans-serif; говорит следующее:

Проверить, установлен ли в системе Arial, �если да, то использовать его
Если нет, то проверить то же самое для Verdana
Если и Verdana нет, то использовать шрифт без засечек �по умолчанию

Но что, если хочется, чтобы на любой системе текст сайта был набран одним и тем же шрифтом и при этом выбранным вами?

Прикрепить шрифт к сайту
Использовать Google fonts

22

23 of 51

Гарнитуры

Шрифты с засечками более стандартны в печатной типографике
Шрифты без засечек более ассоциированы с чтением с экрана
Это не является обязательным правилом, больше традиция

23

24 of 51

Добавление своего шрифта

Нам нужен файл шрифта в формате .ttf, .otf или одном из веб-форматов. Не занимайтесь пиратством и не используйте шрифты, лицензии на которые у вас нет! Есть шрифты с открытой лицензией, например PT Sans, PT Serif.
Внутри CSS:�@font-face {� font-family: ‘Some name’;� src: url(‘path to myfont.ttf’) format(‘truetype’);� font-weight: normal;� font-style: normal;�}
p { font-face: ‘Some name’; }

24

25 of 51

Google Fonts

Google хостит библиотеку шрифтов с открытой лицензией. Среди них много кириллических. Это самый простой способ добавить шрифт.

25

26 of 51

Шрифтовые пары

Часто для контраста и стиля заголовки набирают одной гарнитурой, а основной текст – другой. Вдохновение:

https://www.mixfont.com/

https://fontjoy.com/

https://www.fontpair.co/all

26

27 of 51

Гарнитура, ее оформление и адекватность

Не забывайте о том, что главное назначение текста на вашей странице – быть прочитанным
Никогда не набирайте основной массив текста курсивом или полужирным. Это способы выделения!
Ни в коем случае не используйте Comic Sans
Моноширинные шрифты – только для кода!
Гомогенность – единообразие стилевого решения для блока одного типа

27

28 of 51

28

29 of 51

29

30 of 51

30

31 of 51

Основы верстки текста

Дефис и тире – разные символы (и тире отбивается пробелами)
До запятой пробела нет, после – есть
Род/вид (Bacillus subtilis) выделяются курсивом
In vitro, in vivo, in silico
Тире в начале строки – моветон
Перенос по связке “предлог + существительное”, “союз + глагол” – тоже (для этого есть неразрывные пробелы  )
В разных языках разные правила для кавычек

Можно использовать как тул для очистки своего текста: https://www.artlebedev.ru/typograf/

31

32 of 51

Цвет

Способы задать цвет:

Название (https://www.w3schools.com/colors/colors_names.asp)
Hex-код #F5FFFA (https://htmlcolorcodes.com/)
rgb(255, 122, 111)

Цветовые сочетания:

https://color.adobe.com/trends

https://coolors.co/

32

33 of 51

33

34 of 51

Фон

Просто цвет:

background-color: … ;

Градиент:

background-image: linear-gradient(white, blue);

background-image: radial-gradient(white, blue, gray);

Градиенты с CSS:

https://mycolor.space/gradient

34

35 of 51

Фоновое изображение

Background-image: url(“path_to_image”);

По умолчанию изображение ведет себя как обои:

не отмасштабируется
замостит собой весь экран
а также будет скроллиться

35

36 of 51

36

37 of 51

37

38 of 51

38

39 of 51

39

40 of 51

Убрать замощение:

background-repeat: no-repeat;

Включить масштабирование:

background-size: cover;

background-position: center;

Выключить скроллинг:

background-attachment: fixed;

Паттерны:

http://thepatternlibrary.com/

https://www.heropatterns.com/

https://www.transparenttextures.com/

40

41 of 51

Совершенно недопустимо

41

Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.

42 of 51

Отчисление

42

ПаРаЛоГи - гомологичные БЕЛКИ из одного организма. Ортологи �- гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.

43 of 51

Почти недопустимо

43

Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.

44 of 51

Ну… ладно

44

Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.

45 of 51

Допустимо

45

Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.

46 of 51

Отчисление (как тонка грань)

46

Паралоги - гомологичные белки из одного организма. Ортологи - гомологичные белки из разных организмов или гомологичные белки, для которых разделение их общего предка на линии, ведущей к ним, произошло в результате видообразования. В данном задании надо было найти в своих бактериях достоверные гомологи белка CLPX_BACSU и построить дерево этих гомологов. Затем, считая, что дерево построено верно, определить ортологов и паралогов, а также указать некоторые эволюционные события.

47 of 51

Про фон

Еще не придумано ничего лучше, чем белый фон и черный/темно-серый текст

Темная тема – это не просто белый текст на черном фоне �(на самом деле там нет черного почти никогда): https://material.io/design/color/dark-theme.html#anatomy

Старайтесь наводить красоту иллюстрациями к практикумам, �а не котятами на фоне

47

48 of 51

Hover

К каждому объекту в CSS можно применить селектор :hover и прописать изменение поведения при наведении курсора мышки

img { opacity: 0.5; }

img:hover { opacity: 1.0; }

Это изменение может быть плавным:

img { opacity: 0.5; }

img:hover { opacity: 1.0; transition: 2s }

48

49 of 51

Transition

img { opacity: 0.5; width: 50%}

img:hover { opacity: 1.0; width: 100%;

transition: opacity 2s, width 4s }

Transition: all 0s ease 0s

Что - как быстро - как - задержка

Для вдохновения: 1, 1

49

50 of 51

Поищем вдохновения

Более стандартные варианты для учебного сайта:

https://ccsb.scripps.edu/goodsell/

https://www.visual-science.com/projects/

https://bioinf.me/research

https://academy.yandex.ru

Менее стандартные варианты:

https://nplus1.ru/ (можно так сделать страничку семестра, например)

https://sunandstuff.com/mandelbrot/about/ (весь дизайн вокруг контента)

50

51 of 51

ДЗ

Продумать и реализовать дизайн своего сайта. При оформлении применять CSS.
Реализовать навигацию с помощью <nav>.
Стандартизировать вид страниц сайта.
Создать страницу, содержащую материалы Мини-обзора бактерии (обязательное задание из 1 семестра, http://kodomo.fbb.msu.ru/wiki/2019/1/block3_credit1). На странице Первого семестра добавить ссылку на получившийся отчёт.

51