">
Чтобы котики уважали
ширину ячеек, в которые их засовывают, пропишем в CSS-стилях
специальную команду для тега <img>. Команда
должна сказать, чтобы ширина картинки была не больше, чем максимальный
размер блока, который под неё выделили:
img{
max-width:
100%;
}
Этот код нужно
вставить в начало страницы между тегами <style> и </style>.
Теперь всё нормально:
картинка занимает максимальную ширину, которую ей даёт занять сетка Бутстрапа. Давайте посмотрим, что произойдёт при изменении
размеров браузера:
Настраиваем размеры картинок
Чтобы на разных
экранах картинки выглядели хорошо, давайте сделаем так, чтобы на средних
экранах все коты были одного размера, а на маленьких —
выстраивались одни под другими. Для этого изменим наш прошлый блок таким
образом:
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-2
col-xl-2">
<img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-8
col-xl-8">
<img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-2
col-xl-2">
<img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
</div>
</div>
HTML
Copy
Мы для каждой
картинки добавили описание размеров блока для каждого размера экрана
и разберём его на примере первой картинки. Теперь, если экран очень
маленький (col) или просто маленький (col-sm), то первый блок с котиком
займёт все 12 ячеек, то есть всю ширину. Если экран среднего размера
(col-md) — то 4 ячейки, а если большой
(col-lg) или очень большой (col-xl) — то пусть кот занимает по 2
ячейки.
Для второй картинки
действуют те же самые правила, но размер кота на больших
и очень больших экранах другой — 8 ячеек. Третья картинка
настраивается точно так же, как и первая. Обратите внимание: чтобы
на средних экранах получить одинаковый размер картинок, мы в описание
каждой из них добавили одну и ту же команду col-md-4, которая
каждому коту даёт 4 колонки, чтобы все были одного размера.
Вот что получилось
в итоге — мы никак не программировали все вычисления
размера экрана, подгонку под них изображений, не запрашивали постоянно,
поменялся ли размер — за нас всё делал Бутстрап.
Мы просто сказали ему, какого размера хотим видеть каждый блок,
и всё — дальше работала магия фреймворка!
Полный код страницы
<!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">
<!--
задаём CSS-стили прямо здесь же, чтобы всё было в одном файле
-->
<style type="text/css">
img
{
max-width: 100%;
}
</style>
<!--
закрываем служебную часть страницы -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Адаптивная вёрстка</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-2
col-xl-2">
<img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-8
col-xl-8">
<img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-2
col-xl-2">
<img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
</div>
</div>
</div>
</body>
<!-- конец всей
страницы -->
</html>
HTML
Copy
Что дальше
Это лишь самые проЧтобы котики уважали
ширину ячеек, в которые их засовывают, пропишем в CSS-стилях
специальную команду для тега <img>. Команда
должна сказать, чтобы ширина картинки была не больше, чем максимальный
размер блока, который под неё выделили:
img{
max-width:
100%;
}
Этот код нужно
вставить в начало страницы между тегами <style> и </style>.
Теперь всё нормально:
картинка занимает максимальную ширину, которую ей даёт занять сетка Бутстрапа. Давайте посмотрим, что произойдёт при изменении
размеров браузера:
Настраиваем размеры картинок
Чтобы на разных
экранах картинки выглядели хорошо, давайте сделаем так, чтобы на средних
экранах все коты были одного размера, а на маленьких —
выстраивались одни под другими. Для этого изменим наш прошлый блок таким
образом:
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-2
col-xl-2">
<img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-8
col-xl-8">
<img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-2
col-xl-2">
<img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
</div>
</div>
HTML
Copy
Мы для каждой
картинки добавили описание размеров блока для каждого размера экрана
и разберём его на примере первой картинки. Теперь, если экран очень
маленький (col) или просто маленький (col-sm), то первый блок с котиком
займёт все 12 ячеек, то есть всю ширину. Если экран среднего размера
(col-md) — то 4 ячейки, а если большой
(col-lg) или очень большой (col-xl) — то пусть кот занимает по 2
ячейки.
Для второй картинки
действуют те же самые правила, но размер кота на больших
и очень больших экранах другой — 8 ячеек. Третья картинка
настраивается точно так же, как и первая. Обратите внимание: чтобы
на средних экранах получить одинаковый размер картинок,
мы в описание каждой из них добавили одну и ту же
команду col-md-4, которая каждому коту даёт 4 колонки, чтобы все были одного
размера.
Вот что получилось
в итоге — мы никак не программировали все вычисления
размера экрана, подгонку под них изображений, не запрашивали постоянно,
поменялся ли размер — за нас всё делал Бутстрап.
Мы просто сказали ему, какого размера хотим видеть каждый блок,
и всё — дальше работала магия фреймворка!
Полный код страницы
<!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">
<!--
задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
<style type="text/css">
img {
max-width: 100%;
}
</style>
<!--
закрываем служебную часть страницы -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Адаптивная вёрстка</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-2
col-xl-2">
<img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-8
col-xl-8">
<img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-2
col-xl-2">
<img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
</div>
</div>
</div>
</body>
<!-- конец всей
страницы -->
</html>
HTML
Copy
Что дальше
Это лишь самые простые
вещи, которые можно делать на Бутстрапе. Если
вам понравилось, как страница реагирует на изменения экрана, —
зайдите на getbootstrap.ru и почитайте
остальные возможности
стые
вещи, которые можно делать на Бутстрапе. Если
вам понравилось, как страница реагирует на изменения экрана, —
зайдите на getbootstrap.ru и почитайте
остальные возможности
">