Ловушка для загрузки 4.1 сетка для записи в блоге с тремя колонками, двумя точками останова и изменением порядка расположения блоков
Используя методы упорядочивания и нажима, можно создавать передовые схемы размещения сеток Bootstrap.
Для этого блога я хотел, чтобы на странице с постами в блоге было три "столбца". Почему я процитировал слово "колонки"? Потому что колонка на большом экране может быть строкой на мобильном устройстве. В ловушке для сапога используются контейнеры, строки и колонны. И, конечно же, колонка 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>
Эти шаги показаны ниже. Чтобы увидеть их, вы должны быть за "большим" монитором и изменить размер вашего браузера:
Ссылки / кредиты
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
Недавний
- Скрытие первичных ключей базы данных UUID вашего веб-приложения
- Don't Repeat Yourself (DRY) с Jinja2
- SQLAlchemy, PostgreSQL, максимальное количество строк для user
- Показать значения в динамических фильтрах SQLAlchemy
- Безопасная передача данных с помощью шифрования Public Key и pyNaCl
- rqlite: альтернатива dist с высокой степенью готовности и SQLite
Большинство просмотренных
- Используя Python pyOpenSSL для проверки SSL-сертификатов, загруженных с хоста
- Использование UUID вместо Integer Autoincrement Primary Keys с SQLAlchemy и MariaDb
- Использование PyInstaller и Cython для создания исполняемого файла Python
- Подключение к службе на хосте Docker из контейнера Docker
- SQLAlchemy: Использование Cascade Deletes для удаления связанных объектов
- Flask Удовлетворительный запрос API проверка параметров запроса с помощью схем Маршмэллоу