Верстка страницы на bootstrap 5

Установка Bootstrap 5

Создаем страницу index.html и в ней вводим ! + Tab (создание базовой разметки на Emmet).

Переходим к разделу BootstrapCDN. И подключаем bootstrap на страницу. Получится такое:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
</head>
<body>

<!-- JavaScript Bundle with Popper.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
</body>
</html>

Верстка страницы

Переходим на страницу https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/ .

Добавим на нашу страницу navbar с https://v5.getbootstrap.com/docs/5.0/components/navbar/

Вместо класса container-fluid поставим container-xxl, дабы не растягивать сайт на всю ширину для экранов от 1320px.

Удалим кнопку home из меню и перейдем во вкладку Grid. Здесь находится информация по колонкам.

Добавим в основное содержимое двуколоночный макет:

<section>
    <div class="container-xxl">
        <div class="row align-items-center">
            <div class="col-8"><h1>Привет всем!</h1></div>
            <div class="col-4"><img class="w-100" src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"></div>
        </div>
    </div>
</section>

Вся сетка в бутстрап должна состоять из 12 частей. То есть здесь значения возле col (8 и 4) в сумме дают 12.

Зайдем в Layout/Columns и увидим там класс align-items-center который выравнивает содержимое ячеек по вертикали — по центру.

В Utilites/Sizing нашли класс w-100, который задает 100% ширину нашей картинке.

Добавление карусели

Зайдем на Components -> Сarousel и добавим карусель.

В карусель вставим трехколоночный макет с Layouts -> Grid.

Зайдем в Components -> Cards и вставим оттуда карточку в каждую ячейку нашего три колоночного макета. Уберем из каждой ячейки жесткий style=»width: 18rem;»

Получится девять карточек.

Изменим стрелочки

Найдем класс, который отвечает за стрелочки и изменим их в style.css:

.carousel-control-next-icon {
    background-image: url('/img/arrow-right.svg');
}

.carousel-control-prev-icon {
    background-image: url('/img/arrow-left.svg');
}

Получилась такая карусель:

<section>
    <div class="container-xxl">
        <div class="row">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <img src="https://basik.ru/images/animals_wallpapers_6/36_animals_wallpaper.jpg"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </a>
            </div>
        </div>
    </div>
</section>
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Related Post

Как перенести сайт WordPress на другой хостинг.Как перенести сайт WordPress на другой хостинг.

Бэкап сайта WordPress На сайте WordPress устанавливаем плагин Duplicator. Заходим в «Пакеты»: Кликаем «Создать новый» и создаем: Дальше скачиваем в одно нажатие или по отдельности: Создаём базу данных Нужно создать

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x