Чтобы котики уважали ширину ячеек, в которые их засовывают, пропишем в 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

Что дальше

30t_0_Vidi

Это лишь самые простые вещи, которые можно делать на Бутстрапе. Если вам понравилось, как страница реагирует на изменения экрана, — зайдите на getbootstrap.ru и почитайте остальные возможности

стые вещи, которые можно делать на Бутстрапе. Если вам понравилось, как страница реагирует на изменения экрана, — зайдите на getbootstrap.ru и почитайте остальные возможности

 

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

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

Соцветие гортензии пильчатой крупно

">