angle-uparrow-clockwisearrow-counterclockwisearrow-down-uparrow-leftatcalendarcard-listchatcheckenvelopefolderhouseinfo-circlepencilpeoplepersonperson-fillperson-plusphoneplusquestion-circlesearchtagtrashx

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

Используя методы упорядочивания и нажима, можно создавать передовые схемы размещения сеток Bootstrap.

1 июня 2019
post main image

Для этого блога я хотел, чтобы на странице с постами в блоге было три "столбца". Почему я процитировал слово "колонки"? Потому что колонка на большом экране может быть строкой на мобильном устройстве. В ловушке для сапога используются контейнеры, строки и колонны. И, конечно же, колонка Bootstrap может отображаться на экране в виде колонки или строки. Помогите!

При проектировании макета мы должны думать не о колоннах, а об элементах экрана и о том, как мы хотим, чтобы они отображались на экране на различных устройствах. Будучи разработчиком, я весь день сижу за монитором и хочу видеть три колонны, извините, элементы экрана:

A | B | C

А - это наименее важная и наименьшая часть, я пока не имею для этого особого смысла. Первоначально он может использоваться в качестве прокладки на больших устройствах.
B - это, конечно, самая важная часть страницы, контент, запись в блоге. Самая большая по ширине.
C - следующая наиболее важная часть, содержащая, поиск, теги, выбранную информацию. Это второй по ширине.

На мобильных устройствах я хотел, чтобы это выглядело так:

B
C
A

Для устройств между большими и маленькими, я хотел, чтобы они выглядели так:

B | C
A A

И как нам теперь это сделать? Будучи ручкой Bootstrap, я искал в интернете решения для копирования-вставки, но не нашел ничего близкого. Пора начинать читать. При поиске вы получаете новые ключевые слова, которые вы можете использовать в своих поисках, и, наконец, я нашел сообщение "Как упорядочить столбцы с Bootstrap 4 класса заказа" и все части попали на свое место. Во-первых, Bootstrap говорит об устройствах, поэтому мы придерживаемся этой терминологии. Во-вторых, Bootstrap является мобильным, поэтому мы должны начать с самого маленького устройства. Это очень важно для понимания того, как мы можем изменить порядок элементов!

Мы начинаем с сверхмалых (xs) и малых (sm) устройств, затем следуют средние (md) и, наконец, у нас есть большие (lg) и сверхкрупные (xl) устройства. Я добавил классы с содержанием элем-1, элем-2 и элем-3, что самое важное, чтобы добавить несколько цветов, чтобы было легче видеть, что происходит.

Для самого маленького устройства мы устанавливаем класс Col-12, что делает каждую колонку максимальной шириной и приводит к трем видимым строкам, содержанию, информации, наименее важной:

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

        <div class="col-12 elem-1-content">
            Content
        </div>

        <div class="col-12 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Для среднего устройства мы устанавливаем класс столбца содержимого на md-9, а класс информационного столбца на md-3, помещая их в одну строку. В наименее важном столбце по-прежнему используется максимум 12, установленный для самого маленького устройства, нет необходимости что-либо добавлять сюда:

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

        <div class="col-12 col-md-9 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Наконец, для большого устройства мы устанавливаем класс столбца содержимого на lg-8, класс информационного столбца на lg-3 и класс наименее важного столбца на lg-1. Теперь нам нужно, чтобы Бутстрап переупорядочить колонны, чтобы поставить их в нужное положение. Добавьте order-lg-1 в самую левую колонку, order-lg-12 в информационную колонку и order-lg-10 в колонку содержимого, чтобы разместить его где-то посередине:

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

        <div class="col-12 col-md-9 col-lg-8 order-lg-10 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 col-lg-3 order-lg-12 elem-2-information">
            Information
        </div>

        <div class="col-12 col-lg-1 order-lg-1 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Эти шаги показаны ниже. Чтобы увидеть их, вы должны быть за "большим" монитором и изменить размер вашего браузера:

Начните с самого маленького устройства:
Содержание
Информация
Наименее важное
После добавления md точки останова:
Содержание
Информация
Наименее важное
После добавления точки останова lg:
Содержание
Информация
Наименее важное

Ссылки / кредиты

Bootstrap Grid system Reordering
https://getbootstrap.com/docs/4.0/layout/grid/#reordering

How to Reorder Columns with Bootstrap 4 Order Classes
https://bootstrapcreative.com/bootstrap-push-pull-column-ordering-tutorial/

Подробнее

Bootstrap

Оставить комментарий

Комментируйте анонимно или войдите в систему, чтобы прокомментировать.

Комментарии

Оставьте ответ

Ответьте анонимно или войдите в систему, чтобы ответить.