Bootstrap / подсказка к 2 задачке

Это задание на закрепление навыка, но я тут покажу еще несколько стилей которые помогут сделать задание проще.

Делаем флекс колонку

Сначала покажу как сделать флекс колонку. Я в принципе в предыдущем задании показал, но просто повторюсь. Начнем с базы:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>
</body>

</html>

запихаю в тело основу

<div class="container">
    <div class="row">
    </div>
</div>

то есть контейнер и строку. Теперь добавлю в строку колонку

<div class="container">
    <div class="row">
        <div class="col">

        </div>
    </div>
</div>

пропишу в колонку

<div class="container">
    <div class="row">
        <div class="col">
            <div>Я<br>картинка</div>
            <div>А я подпись</div>
        </div>
    </div>
</div>

получится весьма скромно:

добавим теперь границу к колонке чтобы лучше ориентироваться что у нас происходит. Тут опять все здорово уже есть класс border просто его добавляем:

<div class="col border">
    <div>Я<br>картинка</div>
    <div>А я подпись</div>
</div>

как помнишь колонка по умолчанию растягивается на всю ширину. Есть несколько способов ее ограничить:

<div class="col-3 border">
    <div>Я<br>картинка</div>
    <div>А я подпись</div>
</div>


<div class="col-auto border">
    <div>Я<br>картинка</div>
    <div>А я подпись</div>
</div>

для задания такое подойдет лучше.

Теперь посмотрим, как выровнять содержимое внутри. Самый простой способ — это просто добавить text-center:

<div class="col-auto text-center border">
    <div>Я<br>картинка</div>
    <div>А я подпись</div>
</div>

этот способ в принципе надежный и можно его использовать. Но он работает только для простых ситуаций.

Альтернативный способ превратить колонку во флекс-колонку:

<div class="col-auto d-flex flex-column border">
    <div>Я<br>картинка</div>
    <div>А я подпись</div>
</div>

и сделать выравнивание через класс align-items-center

<div class="col-auto d-flex align-items-center flex-column border">
    <div>Я<br>картинка</div>
    <div>А я подпись</div>
</div>

и сразу обрати внимание что тут выравнивание сработало совсем по-другому, тут выровнялся блок с текстом “Я картинка”, а текст в нем остался выравненным влево. Вот так его можно выделить, например:

<div class="row">
    <div class="col-auto d-flex align-items-center flex-column border">
        <div class="border border-danger">Я<br>картинка</div>
        <div>А я подпись</div>
    </div>
</div>

border-danger – это цвет границы (полный список можно тут глянуть https://getbootstrap.com/docs/4.6/utilities/borders/#border-color)

выглядит так

если я хочу добавить отступ от картинки вниз я добавлю стиль mb-* (то есть margin-bottom), вот так:

<div class="col-auto d-flex align-items-center flex-column border">
    <div class="border border-danger mb-3">Я<br>картинка</div>
    <div>А я подпись</div>
</div>

Ну и собственно все могу теперь копипастить блоки:

<div class="container">
    <div class="row">
        <div class="col-auto d-flex align-items-center flex-column border">
            <div class="border border-danger mb-3">Я<br>картинка</div>
            <div>А я подпись</div>
        </div>
        <div class="col-auto d-flex align-items-center flex-column border">
            <div class="border border-danger mb-3">Я<br>картинка</div>
            <div>А я подпись</div>
        </div>
        <div class="col-auto d-flex align-items-center flex-column border">
            <div class="border border-danger mb-3">Я<br>картинка</div>
            <div>А я подпись</div>
        </div>
        <div class="col-auto d-flex align-items-center flex-column border">
            <div class="border border-danger mb-3">Я<br>картинка</div>
            <div>А я подпись</div>
        </div>
        <div class="col-auto d-flex align-items-center flex-column border">
            <div class="border border-danger mb-3">Я<br>картинка</div>
            <div>А я подпись</div>
        </div>
    </div>
</div>

и получать что-то такое:

Делаем круглую картинку

Мы уже как-то делали круглую картинку, тут покажу как ее сделать с помощью бутстрапа, причем исходить буду из того что исходное изображение у нас квадратное, чтобы было проще. Собственно, в жизни так оно и бывает обычно (в смысле не то что в жизни просто, а то что картинка квадратная).

И так дана картинка

<div class="container">
    <img src="https://library.kissclipart.com/20191111/qyw/kissclipart-cartoon-brown-potato-animation-af4cad5972e27020.png" alt="">
</div>

она большая, в экран не влазит, тут нам бустрап особенно не поможет, придется размер ограничить руками:

<div class="container">
    <img style="height: 100px;" src="..." alt="">
</div>

следующий вопрос как сделать ее круглой, мы в прошлый раз всякие border-radius прописывали. В бутстрап встроен целый набор всяких закруглений (https://getbootstrap.com/docs/4.6/utilities/borders/#border-radius):

нас интересует rounded-circle, добавляем:

<div class="container">
    <img class="rounded-circle" style="height: 100px;" src="..." alt="">
</div>

ура! =)

Можно еще рамочку добавить:

<div class="container">
    <img class="img-thumbnail rounded-circle" style="height: 100px;" src="..." alt="">
</div>

о какая красота:

ну и тень для полного кайфа:

<div class="container">
    <img class="img-thumbnail shadow rounded-circle" style="height: 100px;" src="..." alt="">
</div>

Делаем строку с колонками по центру

Иногда хочется, чтобы колонки в строке были выравнены не по левому краю, а сразу по центру.

Допустим у меня есть такое (тут border – чтобы видеть границы ячеек, p-2 это внутренние отступы в 8px):

<div class="container">
    <div class="row">
        <div class="col-2 border p-2 text-center">2 из 12</div>
        <div class="col-3 border p-2 text-center">3 из 12</div>
    </div>
</div>

кстати я могу добавить цвет фона блокам через стили, в бутстрап встроен некоторый набор цветов (https://getbootstrap.com/docs/4.6/utilities/colors/#background-color)

добавляются они путем добавления соответствующего класса, вот так:

<div class="container">
    <div class="row">
        <div class="col-2 border p-2 text-center bg-warning">2 из 12</div>
        <div class="col-3 border p-2 text-center bg-info">3 из 12</div>
    </div>
</div>

появляется противная серая граница которую можно спрятать через border-white

<div class="container">
    <div class="row">
        <div class="col-2 border p-2 text-center bg-warning border-white">2 из 12</div>
        <div class="col-3 border p-2 text-center bg-info border-white">3 из 12</div>
    </div>
</div>

так, чет я отвлекся, собственно теперь к выравниванию. Так как строка row – это флекс строка, то мы можем использовать любой флекс стиль для выравнивания (все они описаны тут https://getbootstrap.com/docs/4.6/utilities/flex/#justify-content)

то есть если я хочу выровнять колонки по центру я должен добавить justfy-content-center, добавляем:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-2 border p-2 text-center bg-warning border-white">2 из 12</div>
        <div class="col-3 border p-2 text-center bg-info border-white">3 из 12</div>
    </div>
</div>

и проверяем:

красота!)

Как добавить границу сверху

если хочется добавить блоку границу сверху, то есть стиль border-top:

<div class="container">
    <!-- добавил классы  border-top и border-dark чтобы цвет границы был черным-->
    <div class="row justify-content-center border-top border-dark">
        <div class="col-2 border p-2 text-center bg-warning border-white">2 из 12</div>
        <div class="col-3 border p-2 text-center bg-info border-white">3 из 12</div>
    </div>
</div>

чтобы границу было видно лучше можно добавить отступ сверху:

<div class="container">
    <!-- добавил классы  mt-2, то есть отступ сверху 8px-->
    <div class="row justify-content-center border-top border-dark mt-2">
        <div class="col-2 border p-2 text-center bg-warning border-white">2 из 12</div>
        <div class="col-3 border p-2 text-center bg-info border-white">3 из 12</div>
    </div>
</div>

границу можно добавить и колонке

<div class="container">
    <div class="row justify-content-center border-top border-dark mt-2">
        <!--  убрал класс border и border-white, добавил border-top и border-danger чтобы былка красная граница сверху-->
        <div class="col-2 border-top p-2 text-center bg-warning border-danger">2 из 12</div>
        <!-- а тут просто убрал border стили чтобы не смущали -->
        <div class="col-3 p-2 text-center bg-info">3 из 12</div>
    </div>
</div>

получится так

правда тут мини косяк граница колонки находится под границей строки, а в инсте все ровненько

и тут мы применяем мега-хак, который используется и в инсте, мы делаем для колонки отрицательный отступ сверху на 1px, вот так:

<div class="container">
    <div class="row justify-content-center border-top border-dark mt-2">
        <!-- добавил style="margin-top: -1px;" -->
        <div style="margin-top: -1px;" class="col-2 border-top p-2 text-center bg-warning border-danger" >2 из 12</div>
        <div class="col-3 p-2 text-center bg-info">3 из 12</div>
    </div>
</div>

проверяем:

теперь все четко! =)

Ура с таким багажом теперь можно и верстать задание!)

2

Используя возможности бутстрап сверстать как на картинке:

отступы с линейкой вымерять!!!111