Col md col sm: Блочная система · Bootstrap на русском
Содержание
В чем разница между col-lg-*, col-md-* и col-sm-* в Bootstrap?
Давайте не будем усложнять Бутстрэп!
Обратите внимание, как col-sm занимает ширину 100% (другими словами, разбивается на новую строку) ниже 576px , но col этого не делает. Вы можете видеть текущие ширина вверху по центру в GIF.
А вот и код:
<div>
<div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
<div>
<div>col-sm</div>
<div>col-sm</div>
<div>col-sm</div>
</div>
</div>
Bootstrap по умолчанию выравнивает все столбцы (col) в одной строке с одинаковой шириной. В этом случае три col будут занимать 100%/3 ширины каждый, независимо от размера экрана. Вы можете заметить это в gif.
А что, если мы хотим визуализировать только один столбец в строке, то есть дать ширину 100% каждому столбцу, но только для меньших экранов ? Теперь идет col-xx класса!
Я использовал col-sm , потому что хотел разбить столбцы на отдельные строки ниже 576 пикселей. Эти 4 col-xx класса предоставляются Bootstrap для различных устройств отображения, таких как мобильные телефоны, планшеты, ноутбуки, большие мониторы и т. д.
Таким образом, col-sm сломается ниже 576px, col-md сломается ниже 768px, col-lg сломается ниже 992px и col-xl сломается ниже 1200px
Обратите внимание, что в bootstrap 4 нет класса
col-xs.
Это в значительной степени подводит итог. Ты можешь вернуться к работе.
Но есть немного больше к нему. Теперь идут col-* и col-xx-* для настройки ширины.
Помните, в приведенном выше примере я упоминал, что col или col-xx занимает равную ширину в строке. Поэтому, если мы хотим дать больше ширины конкретному col , мы можем сделать это.
Строка Bootstrap разделена на 12 частей, поэтому в приведенном выше примере было 3 col , поэтому каждая из них занимает 12/3 = 4 части. Вы можете рассматривать эти части как способ измерения ширины.
Мы также могли бы написать это в формате col-* , то есть col-4 , как это :
<div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
И это не имело бы никакого значения, потому что по умолчанию bootstrap дает равную ширину col (4 + 4 + 4 = 12).
Но что, если мы хотим дать 7 частей 1-му col , 3 части 2-му col и rest 2 части (12-7-3 = 2) 3-му col (7+3+2 таким образом, всего 12), мы можем просто сделать это:
<div>
<div>col-7</div>
<div>col-3</div>
<div>col-2</div>
</div>
и вы также можете настроить ширину классов col-xx-* .
<div>
<div>col-sm-7</div>
<div>col-sm-3</div>
<div>col-sm-2</div>
</div>
Как это выглядит в действии?
Что делать, если сумма col больше 12? Затем col сдвинется/отрегулируется на нижнюю линию. Да, в строке может быть любое количество столбцов!
<div>
<div>col-12</div>
<div>col-9</div>
<div>col-6</div>
<div>col-6</div>
</div>
Что делать, если мы хотим 3 столбца в ряд для больших экранов, но разделим эти столбцы на 2 ряда для маленьких экранов?
<div>
<div>col-12 col-sm TOP</div>
<div>col col-sm</div>
<div>col col-sm</div>
</div>
Вы можете поиграть здесь: https://jsfiddle.
net/JerryGoyal/6vqno0Lm/
net/JerryGoyal/6vqno0Lm/Bootstrap Бутстрап примеры сетки
Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap.
Три равные колонки
.col-sm-4
.col-sm-4
.col-sm-4
В следующем примере показано, как получить три столбца одинаковой ширины, начиная с планшетов и масштабирования до больших рабочих столов.
На мобильных телефонах столбцы будут автоматически складываться:
Пример
<div>
<div>.col-sm-4</div>
<div>.col-sm-4</div>
<div>.col-sm-4</div>
</div>
Три неравные колонки
.col-sm-3
.col-sm-6
.col-sm-3
В следующем примере показано, как получить три столбца разной ширины, начиная с планшетов и масштабирование до больших рабочих столов:
Пример
<div>
<div>.col-sm-3</div>
<div>.col-sm-6</div>
<div>.
col-sm-3</div>
</div>
Две неравные колонки
В следующем примере показано, как получить два столбца разной ширины, начиная с планшетов и масштабирование для больших рабочих столов:
Пример
<div>
<div>.col-sm-4</div>
<div>.col-sm-8</div>
</div>
Два столбца с двумя вложенными столбцами
В следующем примере показано, как получить два столбца, начиная с планшетов и масштабирование на большие рабочие столы, с еще двумя столбцами (равной ширины) в большой колонке (на мобильных телефонах,
Эти столбцы и их вложенные столбцы будут стека):
Пример
<div>
<div>
.col-sm-8
<div>
<div>.col-sm-6</div>
<div>.col-sm-6</div>
</div>
</div>
<div>.col-sm-4</div>
</div>
Смешанные: мобильные и настольные
Система Bootstrap Grid имеет четыре класса: XS (телефоны), SM (планшеты), MD (настольные компьютеры) и LG (большие рабочие столы).
Классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину для XS и SM, вам нужно только указать XS.
Пример
.col-xs-9 .col-md-7
.col-xs-3 .col-md-5
<div>
<div>.col-xs-6 .col-md-10</div>
<div>.col-xs-6 .col-md-2</div>
</div>
<div>
<div>.col-xs-6</div>
<div>.col-xs-6</div>
</div>
Совет: Помните, что столбцы сетки должны добавлять до двенадцати строк. Более того, столбцы будут складываться независимо от видового экрана.
Смешанный: мобильный, планшетный и Настольный
Пример
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
<div>
<div>.col-xs-6 .col-sm-8 .col-lg-10</div>
<div>.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Очистить поплавки
Очистите поплавки (с . классом) в определенных точках останова, чтобы предотвратить странное обертывание с неравномерным содержимым:
clearfix
Пример
<div>
<div>
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div>Column 2</div>
<!— Add clearfix for only the required viewport —>
<div></div>
<div>Column 3</div>
<div>Column 4</div>
</div>
Смещение колонн
Переместите столбцы вправо с помощью .col-md-offset-* классов. Эти классы увеличивают левое поле столбца на * столбцы:
Пример
<div>
<div>.col-sm-5 .col-md-6</div>
<div>
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
Упорядочение и изменение порядка столбцов
Изменение порядка столбцов сетки .col-md-push-* и . классов:
col-md-pull-*
Пример
<div>
<div>.col-sm-4 .col-sm-push-8</div>
<div>.col-sm-8 .col-sm-pull-4</div>
</div>
В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?
Давайте не будем усложнять Bootstrap!
Обратите внимание, что col-sm занимает 100% ширину (другими словами, разбивает на новую строку) ниже, 576pxа col — нет. Вы можете заметить текущую ширину в верхнем центре в GIF.
Вот код:
<div>
<div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
<div>
<div>col-sm</div>
<div>col-sm</div>
<div>col-sm</div>
</div>
</div>Bootstrap по умолчанию выравнивает все столбцы ( ) в одной строке с одинаковой шириной.
В этом случае три colбудут занимать 100% / 3 ширины каждый, независимо от размера экрана. Вы можете заметить это в GIF.
Теперь, что если мы хотим визуализировать только один столбец на строку, т.е. дать 100% ширину каждому столбцу, но для небольших экранов ? Теперь идет col-xxклассы!
я использовал col-sm потому что я хотел разбить столбцы на отдельные строки ниже 576 пикселей. Эти 4 col-xxкласса предоставляются Bootstrap для различных устройств отображения, таких как мобильные телефоны, планшеты, ноутбуки, большие мониторы и т. Д.
Таким образом, col-smбудет ниже 576px, col-mdниже 768px,col-lg ниже 992px и col-xlниже 1200px.
Обратите внимание, что
col-xsв начальной загрузке 4 нет классов.
Это в значительной степени подводит итог. Вы можете вернуться к работе.
Но это еще не все.
Теперь приходитcol-* и col-xx-*для настройки ширины.
Помните, что в приведенном выше примере я упоминал, что colилиcol-xx занимает одинаковую ширину в ряду. Поэтому, если мы хотим дать больше ширины конкретному, colмы можем сделать это.
Строка начальной загрузки разделена на 12 частей, поэтому в приведенном выше примере было 3 col поэтому каждая из них занимает 12/3 = 4 части. Вы можете рассмотреть эти части как способ измерения ширины.
Мы также можем написать это в формате, col-*например, col-4так:
<div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>И это не имело бы никакого значения, потому что по умолчанию начальная загрузка дает равную ширину col (4 + 4 + 4 = 12).
Но что если мы хотим дать 7 частей 1-й col, 3 части 2-й, colа остальные 2 части (12-7-3 = 2) — 3-й col(7 + 3 + 2, итого 12), мы можем просто сделать это:
<div>
<div>col-7</div>
<div>col-3</div>
<div>col-2</div>
</div>и вы можете настроить ширину col-xx-*классов также.
<div>
<div>col-sm-7</div>
<div>col-sm-3</div>
<div>col-sm-2</div>
</div>Как это выглядит в действии?
Что если сумма colбольше 12? Затем colбудет смещен / скорректирован ниже линии. Да, в строке может быть любое количество столбцов!
<div>
<div>col-12</div>
<div>col-9</div>
<div>col-6</div>
<div>col-6</div>
</div>Что если нам нужно 3 столбца подряд для больших экранов, но разделить эти столбцы на 2 строки для маленьких экранов?
<div>
<div>col-12 col-sm TOP</div>
<div>col col-sm</div>
<div>col col-sm</div>
</div>Вы можете поиграть здесь: https://jsfiddle.net/JerryGoyal/6vqno0Lm/
Bootstrap 3 — Изменение порядка следования адаптивных блоков в макете
В этой статье познакомимся с классами сетки Bootstrap 3, предназначенными для адаптивного изменения порядка следования блоков в пределах строки, в которой они расположены.
Фреймворк Bootstrap содержит большое количество классов и компонентов. Но перед тем как переходить к наполнению сайта этими элементами, необходимо сначала создать каркас (макет) страницы. Данное действие в Bootstrap выполняется с помощью «строительных» элементов сетки. К этим элементам относятся обёрточные контейнеры, ряды, адаптивные блоки и др. Более подробно ознакомиться с этими элементами можно в статье «Bootstrap 3 – Сетка».
Но при проектировании макета зачастую бывает так, что необходимо на одних устройствах блоки расположить в одном порядке, а на других – в другом. Для реализации этого поведения блоков в Bootstrap 3 предназначены классы push и pull.
Классы push и pull
Классы push и pull предназначены для изменения порядка следования адаптивных блоков для конкретных типов устройств в пределах некоторой строки. Это означает, что адаптивные блоки на одном устройстве могут иметь один порядок следования, а на другом другой.
Классы push и pull должны использоваться вместе с классами сетки Bootstrap.
Класс push выполняет смещение адаптивного блока на определённое количество колонок вправо, а класс pull — на определённое количество колонок влево.
Синтаксис классов push и pull:
col-{breakpoint}-push-{nc}
col-{breakpoint}-pull-{nc}
{breakpoint} - тип устройства (xs, sm, m или lg)
{nc} - количество колонок (по умолчанию 0...12)
В следующей таблице показан синтаксис классов push и pull для различных размеров экрана.
| Ширина viewport | Классы push | Классы pull |
|---|---|---|
>0px (xs) | .col-xs-push-{nc} | .col-xs-pull-{nc} |
>=768px (sm) | .col-sm-push-{nc} | .col-sm-pull-{nc} |
>=992px (md) | . | .col-md-pull-{nc} |
>=1200px (lg) | .col-lg-push-{nc} | .col-lg-pull-{nc} |
col-md-push-{nc}Пример использования классов push и pull
Рассмотрим небольшой пример. Допустим, есть макет, состоящий из трёх блоков. Необходимо, чтобы на больших экранах блоки располагались горизонтально. Причём второй (2) блок, который содержит основной контент, находился посередине между первым (1) и третьим (3) блоками.
В то же время, на устройствах с маленьким экраном, нужно чтобы блоки располагались вертикально один под другим. Причём второй (2) блок должен располагаться над первым (1).
Разработку макета начнём с устройств, имеющих маленький размер экрана (xs и sm):
<div>
<div>
2 блок
</div>
<div>
1 блок
</div>
<div>
3 блок
</div>
</div>
Доработаем адаптивные блоки, а именно установим им ширину, которые они должны иметь на средних и больших экранах:
<div>
<div>
2 блок
</div>
<div>
1 блок
</div>
<div>
3 блок
</div>
</div>
Теперь изменим порядок следования адаптивных блоков.
Для этого второй (2) адаптивный блок сдвинем вправо на 3 колонки, а первый (1) сдвинем влево на 6 колонок Bootstrap.
<!-- Boostrap 3 -->
<div>
<div>
2 блок
</div>
<div>
1 блок
</div>
<div>
3 блок
</div>
</div>
Рекомендации по разработке макета с помощью сетки Bootstrap
При создании макета с использованием сетки фреймворка Bootstrap 3 предпочтительнее начинать разработку с устройств, которые имеют крохотный размер экрана (смартфоны).
Почему так? Потому что изменить порядок следования адаптивных блоков для устройств с большим размером экрана намного проще, чем для устройств с крохотным экраном.
css — В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?
Я думаю, что запутанным аспектом этого является тот факт, что BootStrap 3 является мобильной первой адаптивной системой и не объясняет, как это влияет на иерархию col-xx-n в этой части документации Bootstrap.
Это заставляет задуматься о том, что происходит на меньших устройствах, если вы выбираете значение для больших устройств, и заставляет задуматься, нужно ли указывать несколько значений. (Вы не)
Я бы попытался уточнить это, заявив, что …
Более мелкие типы зерен (xs, sm) пытаются сохранить внешний вид макета на меньших экранах, а большие типы (md, lg) будут корректно отображаться только на больших экранах, но будут переносить столбцы на меньших устройствах.
Значения, указанные в предыдущих примерах, относятся к порогу, при котором начальная загрузка ухудшает внешний вид, чтобы соответствовать доступному состоянию экрана.
На практике это означает, что если вы сделаете столбцы col-xs-n, они сохранят правильный внешний вид даже на очень маленьких экранах, пока размер окна не станет настолько ограничительным, что страница не будет отображаться правильно ,
Это должно означать, что устройства, имеющие ширину 768 пикселей или менее, должны отображать вашу таблицу в том виде, как вы ее разработали, а не в ухудшенном виде (в виде столбца в одиночной или обернутой форме).
Очевидно, что это все еще зависит от содержимого столбцов, и в этом весь смысл. Если страница пытается отобразить несколько столбцов с большими данными рядом на небольшом экране, то столбцы естественным образом будут ужасно обернуты, если вы их не учли. Поэтому, в зависимости от данных в столбцах, вы можете выбрать точку, в которой макет будет выделен для адекватного отображения содержимого.
например. Если ваша страница содержит три столбца col-sm-n, программа начальной загрузки обернет столбцы в строки, когда ширина страницы упадет ниже 992px.
Это означает, что данные все еще видны, но для их просмотра потребуется вертикальная прокрутка. Если вы не хотите, чтобы ваш макет ухудшался, выберите xs (при условии, что ваши данные могут быть адекватно отображены на устройстве с более низким разрешением в трех столбцах)
Если горизонтальное положение данных важно, вам следует попытаться выбрать более низкие значения гранулярности, чтобы сохранить визуальный характер. Если позиция менее важна, но страница должна быть видна на всех устройствах, следует использовать более высокое значение.
Если вы выберете col-lg-n, столбцы будут отображаться правильно, пока ширина экрана не упадет ниже порога xs, равного 1200 пикселей.
Делаем страницу «О себе» на Бутстрапе
Недавно мы делали статью о котиках и мобильной вёрстке. Но в жизни довольно мало случаев, когда нужно создать мобильный сайт с котиками, поэтому попробуем что-то серьёзное. Сделаем страницу «О себе». Её можно будет выложить на собственный сайт и громко заявить о себе миру.
Работать над страницей будем в таком порядке: сначала определим, что мы хотим сказать людям, а потом обернём всё в код. Любой другой сайт делается по этой же схеме — прежде чем расчехлять HTML, надо подумать над содержимым.
Можно ли без страницы?
Собственную страницу можно сделать и на конструкторе сайтов, не заморачиваясь с вёрсткой и стилями. Но так каждый может. Это всё равно что жить на съёмной квартире — что тебе хозяева разрешили, то и можно.
А вот сделать собственный сайт — это как построить собственный дом. Настоящие программисты делают собственные сайты. О чём будем писать
Допустим, наш герой — преподаватель информатики, который хочет устроиться на работу по специальности в крутой московский вуз. Для этого ему нужно рассказать о себе так, чтобы вуз захотел пригласить его к себе. Какой именно текст будет — неважно, мы написали пробный текст в кате. Ещё где-нибудь добавим фотографию, чтобы было красиво.
Михаил Максимов
Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.
В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им.
Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.
Мои научные работы
А вот тут поставим ссылки на вымышленные работы этого преподавателя
Как связаться
Телефон: +7 (123) 456-78-90
Почта: [email protected]
Скайп: mihailmaximov
Телеграм: @mihailmaximov
Вёрстка текста
За основу возьмём стандартный шаблон с Бутстрапом. В этой статье мы спрячем его под стрелочку, чтобы не занимать много места, но если интересно пройти весь путь с нами — скопируйте этот код и повторяйте за нами.
<!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
<!-- заголовок страницы -->
<title>Михаил Максимов — преподаватель информатики</title>
<!-- настраиваем служебную информацию для браузеров -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- загружаем Бутстрап -->
<link rel="stylesheet" href="https://stackpath. bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
</style>
<!-- закрываем служебную часть страницы -->
</head>
<body>
<!-- тут будет наша страница -->
</body>
<!-- конец всей страницы -->
</html>
bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
</style>
<!-- закрываем служебную часть страницы -->
</head>
<body>
<!-- тут будет наша страница -->
</body>
<!-- конец всей страницы -->
</html>Каждый элемент нашей страницы будем помещать в свой контейнер, чтобы потом легко можно было настроить адаптивность как нам нужно. Посмотрите внимательно на этот код: это основной «кирпичик», из которого строится архитектура страниц Бутстрапа.
<div>
<div>
<div>
<!-- содержимое контейнера -->
</div>
</div>
</div>Сначала сверстаем заголовок всей страницы — для этого используем тег <h2>…</h2>. Если между двумя этими тегами поместить текст, браузер поймёт, что это заголовок, и сделает его побольше. Скажем контейнеру, что содержимое при любом размере пусть занимает всю ширину макета, и вставим в него наш текст:
<div > <div>
<h2>Михаил Максимов</h2>
</div> </div>
Добавим новый контейнер и поместим в него описание на два абзаца, за которые отвечает тег <p>…</p>. Посмотрим, что получилось:
<div>
<div>
<div>
<p>Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в
программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по
олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории
вероятности даже тем, кто не хочет ничему учиться.</p>
<p>В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным
преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю
подкаст «Прогрокаст» с аудиторией 25 000 человек.</p>
</div>
</div>
</div>Фотография человека
Добавим фото героя, чтобы было интереснее. За это отвечает тег <img src=»адрес_картинки»>. В нашем случае тег будет выглядеть так:
<img src=»https://thecode.media/wp-content/uploads/2019/07/sq_me.jpg» >
Фотографию поставим справа от текста так, чтобы экран как бы делился на 2 части: слева текст, справа фото. Заодно настроим так, чтобы на маленьких устройствах каждый из них растягивался на всю ширину экрана. Чтобы так сделать, нужно добавить блок с фото в тот же контейнер с абзацами и настроить колонки в каждом блоке:
<div > <div>
<!— тут 2 абзаца текста из прошлого примера —>
</div>
<div>
<img src=»https://thecode.media/wp-content/uploads/2019/07/sq_me.jpg» > </div>
По умолчанию браузер показывает картинки в полном размере, и это выглядит некрасиво. Добавим в стили ограничение по размеру для картинки, чтобы она не вылезала за границы блока, и заодно настроим параметры заголовка и текста:
img {
max-width: 100%;
max-height: 100%;
}
h2 {
font-size: 50px;
margin-top: 30px;
margin-bottom: 20px;
}
p {
font-size: 18px;
}
Раздел страницы: научные работы
Подзаголовок сделаем тегом <h3>…</h3> в отдельном контейнере:
<div > <div>
<h3>Мои научные работы</h3>
</div> </div>
Чтобы подзаголовок не слипался с остальным содержимым, добавим в раздел со стилями отступы для заголовка h3 сверху и снизу:
h3{
margin-top: 40px;
margin-bottom: 20px;
Теперь сделаем список научных работ так, чтобы на больших экранах он занимал 4 колонки, на средних — 2, а на телефонах занимал весь макет по ширине. Заодно сделаем список в виде ссылок, чтобы можно было по названию перейти к каждой работе. Ссылки оформляются тегом
<a href=»адрес_ссылки»>текст_ссылки</a>
<a href=»https://thecode.media/baboolya/»>Задача о бабушке и помидорах</a>
Оформим таким образом наш список научных работ в отдельном контейнере:
<div>
<div>
<div>
<p><a href="http://thecode.local/baboolya/">Задача про бабушку и помидоры</a></p>
<p><a href="http://thecode.local/electrician/">Хитрый электрик</a></p>
</div>
<div>
<p><a href="http://thecode.local/le-timer/">Как сделать свой таймер-напоминалку</a></p>
<p><a href="http://thecode.local/sublime-one-love/">Почему Sublime Text — это круто</a></p>
</div>
<div>
<p><a href="http://thecode.local/est-tri-shkatulki/">Поговорим о Якубовиче</a></p>
<p><a href="http://thecode.local/content-manager/">Как стать контент-менеджером</a></p>
</div>
<div>
<p><a href="http://thecode.local/batareyki-besyat/">Задача про сторожа и фонарик</a></p>
<p><a href="http://thecode.local/variables/">О названиях функций</a></p>
</div>
</div>
</div>Контакты
Осталось добавить контактную информацию — тоже в своём контейнере. Смотрите: мы положили тег со ссылкой внутри тега абзаца — так можно.
<div>
<div>
<div>
<h3>Контакты для связи</h3>
</div>
</div>
</div>
<div>
<div>
<div>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Почта: <a href="mailto: [email protected]">[email protected]</a></p>
<p>Скайп: mihailmaximov</p>
<p>Телеграм: @mihailmaximov</p>
</div>
</div>
</div>Смотрим на результат и заодно проверяем адаптивность:
<!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
<!-- заголовок страницы -->
<title>Михаил Максимов — преподаватель информатики</title>
<!-- настраиваем служебную информацию для браузеров -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- загружаем Бутстрап -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
img {
max-width: 100%;
max-height: 100%;
}
h2 {
font-size: 50px;
margin-top: 30px;
margin-bottom: 20px;
}
h3 {
margin-top: 40px;
margin-bottom: 20px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<h2>Михаил Максимов</h2>
</div>
</div>
</div>
<div>
<div>
<div>
<p>Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться
в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по
олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы
теории вероятности даже тем, кто не хочет ничему учиться.</p>
<p>В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал
внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и
записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.</p>
</div>
<div>
<img src="http://thecode.local/wp-content/uploads/2019/07/sq_me.jpg">
</div>
</div>
</div>
<div>
<div>
<div>
<h3>Мои научные работы</h3>
</div>
</div>
</div>
<div>
<div>
<div>
<p><a href="http://thecode.local/baboolya/">Задача про бабушку и помидоры</a></p>
<p><a href="http://thecode.local/electrician/">Хитрый электрик</a></p>
</div>
<div>
<p><a href="http://thecode.local/le-timer/">Как сделать свой таймер-напоминалку</a></p>
<p><a href="http://thecode.local/sublime-one-love/">Почему Sublime Text — это круто</a></p>
</div>
<div>
<p><a href="http://thecode.local/est-tri-shkatulki/">Поговорим о Якубовиче</a></p>
<p><a href="http://thecode.local/content-manager/">Как стать контент-менеджером</a></p>
</div>
<div>
<p><a href="http://thecode.local/batareyki-besyat/">Задача про сторожа и фонарик</a></p>
<p><a href="http://thecode.local/variables/">О названиях функций</a></p>
</div>
</div>
</div>
<div>
<div>
<div>
<h3>Контакты для связи</h3>
</div>
</div>
</div>
<div>
<div>
<div>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Почта: <a href="mailto: [email protected]">[email protected]</a></p>
<p>Скайп: mihailmaximov</p>
<p>Телеграм: @mihailmaximov</p>
</div>
</div>
</div>
</body>
<!-- конец всей страницы -->
</html>Это самый простой способ создать страницу о себе на чистом HTML, которая сразу будет адаптивной. Но есть ещё один способ сделать похожее: использовать конструкторы сайтов. Про них — в следующей статье.
Как работает в Bootstrap сетка и что это вообще такое?
От автора: я приветствую вас. В прошлых статьях мы рассмотрел подключение фреймворка Bootstrap и первые шаги работы с ним. Настал час затронуть самую важную тему. А именно, как работает в Bootstrap сетка. Именно понимание этого вопроса сильно упростит вам верстку сайтов.
Любой css-фреймворк имеет свою сетку. Практически, если мы рассматриваем, для чего вообще создается css-фреймворк, то во многом только для сетки, которая позволяет быстро и легко верстать адаптивные шаблоны. Остальные компоненты вроде кнопок, таблиц, форм и прочего можно сделать и самому, зачастую именно так и нужно.
Конечно, приятно, что Bootstrap есть все компоненты и можно использовать все готовое, но в первую очередь нас интересует именно сетка. Итак, давайте подробно рассмотрим сетку бутстрапа.
12-ти колоночная сетка Bootstrap
Итак, в сетке этого фреймворка по умолчанию 12 колонок. На самом деле при кастомизации фреймворка вы сможете выставить любое другое значение, но практически всегда вас будет устраивать 12 колонок. Число 12 делится на много других чисел, поэтому им очень удобно оперировать.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнее
Если вы ранее создавали с помощью html тегов таблицы, то следующее сравнение будет для вас как нельзя кстати. Ведь сетку фреймворка можно сравнить с обычной таблицей.
Вся сетка должна располагаться в общем контейнере. Это должен быть блок с классом container или container-fluid. Отличие у классов в том, что первый имеет максимальные фиксированные размеры, а именно 1170 пикселей. То есть ширина сайта не будет больше этого значения.
Container-fluid – это полностью резиновый контейнер, который растягивается всегда на 100% ширины окна, поэтому если у вас полностью резиновый сайт, вам нужен именно такой контейнер. Если мы говорим о таблицах, то там тоже есть свой глобальный контейнер – table.
Внутри этого контейнера должен быть еще один блок с классом row, то есть одна строка сетки. И опять же, если сравниваем с таблицами, то там за вывод одного табличного ряда отвечает тег tr. Ряды сетки и таблицы очень похожи, потому что в обоих случаях они просто выступают контейнерами для основного содержимого – в них самих никакой контент не размещается, да и стили к ним не применяются.
Например, если мы говорим о простом сайте, то можно разделить его на три ряда – шапка сайта, блок для основного контента и боковая колонка и подвал. Заметьте, что контент и сайдбар мы поместили в один ряд, потому что это действительно так.
В самом ряду располагаются уже непосредственно ячейки ил колонки, как принято говорить при верстке на Bootstrap. Колонка имеет класс col-x-x, где первый x – обозначение устройства, а второй – кол-во колонок от 1 до 12. Как это работает, мы с вами сейчас посмотрим. Если вам удастся это понять, то вы также быстро поймете, почему так легко делать адаптивные сайты на Bootstrap.
Итак, разработчики фремворка при создании сетки выделили 4 основных типа устройств по ширине экрана. Хорошую таблицу с перечнем классов для сетки вы можете найти в русской документации, которая находится здесь — //www.oneskyapp.com/ru/docs/bootstrap/css#grid.
Вот скриншот этой таблицы. Итак, мы видим, что для самых маленьких устройств, у которых ширина экрана менее 768 пикселей, префикс класса – col-xs- или если отбросить col, просто xs. Далее идет sm (small-devices, ширина от 768 до 991 пикселей), md (medium-devices, ширина от 992 до 1199 пикселей) и large-devices, с шириной более 1200 пикселей.
Как же все это работает? Разбор на примерах
Пока, возможно, вы ничего не поняли, но это нормально. Сейчас я предлагаю вам попрактиковаться: открыть редактор кода, браузер и начать писать код. Естественно, перед этим подключите к html-файлу фреймворк Bootstrap, в прошлых статьях этот вопрос подробно рассматривался.
Итак, давайте рассмотрим этот кусок кода:
<div class = «container»>
<div class = «row»>
<div class = «col-md-3 col-sm-6»>Первый</div>
<div class = «col-md-1 col-sm-6»>Первый</div>
</div>
</div>
<div class = «container»> <div class = «row»> <div class = «col-md-3 col-sm-6»>Первый</div> <div class = «col-md-1 col-sm-6»>Первый</div> </div> </div> |
Если вы внимательно читали предыдущий текст, то уже понимаете, что мы сейчас создаем свои первые блоки в сетке.=col]{
background: #8CC7D9;
border: 1px solid #6B6ACD;
}
Отлично, вот что мы видим в браузере:
Отмечу, что я просматриваю результат на своем компьютере, у которого ширина экрана более 1200 пикселей, а значит Bootstrap классифицирует его как large-устройство.
Итак, первый блок занимает 25% ширины контейнера (если 12 колонок считается за 100% ширины, то 3, соответственно, за 25%). Ну а второй примерно 8-8,5%, точные расчеты нам ни к чему. Остальные 66% ширины контейнера будут пусты. Конечно, на скриншоте вы этого не видите, так как я просто не могу запихнуть в статью скриншот всего моего экрана, так как он слишком велик, поэтому я и советовал вам повторять все за мной.
А теперь давайте проверим, как поведут себя блоки на ширине менее 992 пикселя. Начните сужать окно. В Google Chrome после нажатия F12 при сужении вы будете видеть в правом верхнем углу точную ширину окна.
Ну а я, пожалуй, воспользуюсь браузером Internet Explorer. Вот так блоки выглядят на ширине чуть-чуть больше 768 пикселей, то есть на small-экранах.
Как видите, вместо 25% и 8% каждый блок занимает теперь ровно по 50% ширины ряда. А все благодаря этим инструкциям:
col-md-3 col-sm-6
col-md-1 col-sm-6
col-md-3 col-sm-6 col-md-1 col-sm-6 |
То есть с помощью этих классов мы как бы говорим бутстрапу: на средних и больших устройствах дай первому блоку ширину в 3 колонки из 12, а второму – 1 из 12. А вот на маленьких, будь добр, оба блока показать на 50% ширины ряда.
А что же произойдет на самых маленьких экранах? Вот я совсем сузил окно, как будто мы смотрим сайт с телефона:
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнее
Как видите, инструкция, которая действовала для small-устройств, отменилась для extra-small и каждый блок стал занимать по 100% ширины в ряде. Запомните, что это поведение блоков по умолчанию – занимать 100% ширины в своем контейнере.
Из этого всего следует несколько выводов, можете перечитать их несколько раз, потому что понять эти вещи крайне важно:
Если мы задаем, например, col-sm-6, то такая ширина сохраниться у блока и на md и lg, если для этих устройств ничего не прописано.
Возьмем этот же пример (col-sm-6). А вот на xs, то есть на экстра-маленьких устройствах, ширина блока будет 100%, а не 50%. То есть наследование прописанной ширины происходит только для больших устройств, но ни в коем случаев не для меньших. Например, если вы напишите такой класс: col-lg-6, то такая ширина у блока будет только на экранах более 1200 пикселей. На md, sm, xs устройствах будет другая ширина.
Вы можете указывать блоку не один, а несколько классов. Например, col-xs-6 col-md-4. Попробуйте сами в уме ответить, какой будет ширина блока на разных устройствах? Не читайте дальше)
А ответ таков:
На xs-экранах будет 50%, то есть половина ширины контейнера
На sm то же самое – 50%. Почему? Как я уже сказал выше, значение наследуется для устройств с большей шириной.
На md блок займет треть ширины.
На самых больших экранах тоже треть. Опять же, значение наследуется из md.
Но Bootstrap ничем вас не ограничивает и вы можете прописать даже так:
<div class = «col-xs-10 col-sm-8 col-md-6 col-lg-4»></div>
<div class = «col-xs-10 col-sm-8 col-md-6 col-lg-4»></div> |
То есть вообще для каждого типа устройств задать свое отображение. Тут вы уже сами можете понять, насколько широким будет блок на разной ширине экранов.
ВНИМАНИЕ! Никогда не допускайте ситуации, чтобы у вас в одном ряду было более 12-ти колонок, иначе ваш сайт может развалиться.
Дальше – интереснее! Вложенные сетки
Но мощь сетки Bootstrap не только в том, что вы можете задать разное отображение блоков на разной ширине. А еще в том, что можно вкладывать сетку в какой-угодно блок. Давайте рассмотрим такой пример кода:
<div class = «container»>
<div class = «row»>
<div class = «col-sm-8 col-md-6»>
<div class = «row»>
<div class = «col-sm-4 col-md-3»>1</div>
<div class = «col-sm-4 col-md-3»>2</div>
<div class = «col-sm-4 col-md-3»>3</div>
</div>
</div>
</div>
</div>
<div class = «container»> <div class = «row»> <div class = «col-sm-8 col-md-6»> <div class = «row»> <div class = «col-sm-4 col-md-3»>1</div> <div class = «col-sm-4 col-md-3»>2</div> <div class = «col-sm-4 col-md-3»>3</div> </div> </div> </div> </div> |
Итак, у нас есть общий контейнер, а в нем один ряд. В ряд вложен блок, который занимает половину ширины контейнера на средних и больших экранах, две трети на маленьких и 100% на самых маленьких.
Но ведь мы можем спокойно представить себе, что этот блок является тоже контейнером, почему нет? По сути, так и есть при разработке сайта. Есть общий контейнер для всего сайта, контейнер для контента, сайдбара, шапки и т.д.
Можно представить, что этот блок – контейнер для основного блока с текстом на сайте, в него мы помещаем, в свою очередь, ряд (обязательно придерживайтесь в коде структуры – контейнер – ряд — ячейки).
В этом ряду, как видите, 3 блока и для каждого задано поведение на разных устройствах. По сути, мы получили сетку внутри основной сетки! И эта вложенная сетка тоже будет иметь 12 колонок.
Я вам скажу даже больше. Вложенных сеток может быть неограниченное количество. Например, эти три блока – это три карточки товара в интернет-магазине. Структура самой карточки может быть тоже достаточно сложной. Кто знает, может и там вы используете вложенную сетку.
Таким образом, фреймворк Bootstrap попросту стирает перед вами любые препятствия при верстке веб-страниц: вы можете создать как простые типовые шаблоны, так и сложнейшие страницы с тысячей элементов на них. Ведь сетка – это не просто общий контейнер сайта, систему сетки можно применить даже при разметке очень незначительных блоков.
Адаптивные утилиты
Еще одна потрясающая возможность фреймворка – адаптивные утилиты. Сейчас объясню. Наверняка вы не планируете на мобильных устройствах отображать 100% элементов сайта, которые видны на больших десктопах – вам попросту некуда будеть все это впихнуть. Очень часто на мобильных устройствах полностью убирают боковую колонку, сворачивают меню, удаляют какие-то большие декоративные элементы и т.д.
В Bootstrap все это очень легко делать с помощью классов, которые называют адаптивными утилитами. В документации ознакомиться с ними можно тут: //www.oneskyapp.com/ru/docs/bootstrap/css#responsive-utilities
Вот список этих классов. Чтобы скрыть элемент на нужном устройстве, достаточно всего лишь использовать один из четырех классов: hidden-xs|sm|md|lg. Хочу отметить, что элемент будет скрыт только на указанной ширине экрана, на всех остальных он останется видимым.
Если вам нужно сделать элемент видимым только на одном из четырех типов устройств, удобнее использовать классы visible-xs|sm|md|lg- block|inline|inline-block.
Кроме самого ключевого слова и типа устройств тут еще нужно указать, как именно отображать элемент: как блочный, строчный или блочно-строчный. Примеры:
visible-xs-inline – элемент будет виден только на самых маленьких экранах и будет отображаться как строка;
visible-lg-block – будет виден только на самых больших экранах и будет блочным;
Адаптивные утилиты позволяют как угодно трансформировать сайт на всех типах устройств. Используйте их по мере необходимости в своей верстке.
Другие возможности сетки и итог
Друзья, очень много еще можно написать о сетке бутстрапа, потому что мы рассмотрели примерно только половину теории. С остальными классами и примерами вы можете ознакомиться в документации.
Почему я настоятельно вам его рекомендую? Потому что теория, это теория. Вы можете прочитать эту статью вместе с документацией хоть по 10 раз, но если не закрепите все примеры на практике, это будет практически бесполезно. Мы обожаем практику и считаем, что именно она – залог успеха. Даже если из теории что-то вы не поймете, то потом, во время верстки реального макета вы увидите своими глазами, как работает сетка, и уже никто из вас это понимание не выбьет.
Мало того, в курсе не просто объясняется теория и верстается простой макет. Наша с вами цель – стать профессиональными разработчиками, а для этого нужно верстать уже макеты повышенного уровня сложности, чем мы с вами и займемся во второй части курса, сверстав интернет-магазин и лендинг.
В общем, осваивать Bootstrap на профессиональном уровне или нет – это решать вам. Моя цель была в том, чтобы объяснить вам основы функциониования сетки в Бутстрапе. Надеюсь, у меня это получилось и вы прочитали эту публикацию с пользой для себя. В ближайшее время ждем вас в кругу профессиональных веб-разработчиков, использующих Bootstrap для верстки макетов любого, абсолютно любого уровня сложности!
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнее
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!
Смотреть
Примеры сеток начальной загрузки
Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap.
Три равных столбца
.col-sm-4
.col-sm-4
.col-sm-4
В следующем примере показано, как получить три столбца одинаковой ширины, начиная с
планшеты и масштабирование до больших рабочих столов.
На мобильных телефонах столбцы автоматически складываются в стопку:
Пример
Попробуй сам »
Три неравных колонны
.col-sm-3
.col-sm-6
.col-sm-3
В следующем примере показано, как получить три столбца различной ширины, начиная с
планшеты и масштабирование до больших компьютеров:
Пример
Попробуй сам »
Две неравные колонны
В следующем примере показано, как получить два столбца разной ширины, начиная с
планшеты и масштабирование до больших компьютеров:
Пример
Попробуй сам »
Без желобов
Используйте .row-no-gutters класс для удаления желобов из строки и ее столбцов:
Пример
Попробуй сам »
Две колонки с двумя вложенными колонками
В следующем примере показано, как получить два столбца, начиная с планшетов и масштабируясь до больших рабочих столов.
с двумя другими столбцами (равной ширины) внутри большего столбца (на мобильных
телефоны,
эти столбцы и их вложенные столбцы будут складываться):
Пример
Попробуй сам »
Смешанный: мобильный и настольный
Сетка Bootstrap имеет четыре класса: xs (телефоны), sm (планшеты), md (рабочие столы) и lg (большие рабочие столы).
Классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.
Пример
.col-xs-9 .col-md-7
.col-xs-3 .col-md-5
Попробуй сам »
Совет: Помните, что сумма столбцов сетки должна составлять двенадцать для
строка. Более того, столбцы будут складываться независимо от области просмотра.
Смешанное: мобильный, планшетный и настольный
Пример
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
Попробуй сам »
Очистить поплавки
Очистить числа с плавающей запятой (с классом .clearfix ) в определенных точках останова, чтобы предотвратить странное обертывание с неравномерным
содержание:
Пример
Измените размер окна браузера, чтобы увидеть эффект.
< div> Столбец 4
