Это 4-й день моего участия в Gengwen Challenge, смотрите подробности мероприятия:Обновить вызов

"Bootstrap5 Zero Basic to Proficient" Я Лао Лю оригинал, и стремиться обновлять раздел каждый день.

Чтобы соответствовать количеству дней обновления, первый раздел, обновленный в первый день, считается первым разделом, а более поздний раздел отодвигается на один раздел по очереди. Не нужно удивляться, если третий квартал ушел.

1. Как работает система сетки Bootstrap

1.1 Система двенадцати сеток

Сетка есть сетка, английская сетка — это сетка в некоторых местах и сетка в некоторых местах, но манеры перевода разные. Система двенадцати сеток означает, что весь экран разделен на двенадцать равных частей по ширине, и одно равное деление представляет собой одну двенадцатую часть ширины экрана, почему он делится на двенадцать равных частей, а не на десять равных частей или другое и т. д. Дело в том, что 12 является наименьшим общим кратным 1, 2, 3, 4 и 6. Согласно опыту, это деление является самым красивым и практичным. Конечно, я также видел систему с 36 сетками и десятью сетками, с точки зрения использования, это не так удобно, как с 12 сетками.

В системе с двенадцатью сетками, если я хочу разделить экран на левую и правую стороны, с одной третью слева и двумя третями справа, я могу установить левую ширину на 4 сетки и правую на 8 сеток. Если мне нужна половина левой и правой станций, просто установите для каждой 6 сеток. Если мне нужно установить только одну страницу для заполнения экрана, я могу напрямую установить ее на 12 сеток. Видишь ли, это очень удобно?

1.2 Метки сетки Bootstrap

Система сетки Bootstrap создает три метки: container, row, col:

Контейнер — это контейнер, подробно описанный в предыдущем разделе.
row означает строку, представляющую горизонтальную строку
Col - это ячейка, которая представляет каждую конкретную ячейку.Есть три способа записи: col, col-число сеток (например, col-3), col-screen size-число сеток (например, col-md-3) ).

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

<div class="container">
    <div class="row">
        <div class="col">
            第一个单元
        </div>
        <div class="col">
            第二个单元
        </div>
        <div class="col">
            第三个单元
        </div>
    </div>
</div>

1.3 Правила сетки Bootstrap

Используйте строки для создания горизонтальных групп столбцов.
На странице может быть несколько строк.
Строки должны быть помещены внутри контейнера для правильного выравнивания и заполнения.
Содержимое должно быть помещено в столбец (столбец), и только столбец может быть прямым дочерним элементом строки.
Строки также могут быть вложены в колонне, а ряд внутри столбца не нужен контейнер, поскольку сам столбец - это контейнер.
Предопределенный класс сетки может быть использован напрямую, например, размер сетки COL-экрана, используемый для быстрого создания растрового макета.
В предопределенном классе размер экрана имеет 5 значений, в основном используется для адаптивного дизайна, см. 3.1. Количество сеток — это число от 1 до 12, представляющее ширину экрана.

2. Настройка ширины ячейки в сетке Bootstrap

2.1 Макет равной ширины по умолчанию

Если мы не установим ширину каждого столбца, количество столбцов по умолчанию будет равномерно распределять ширину каждого столбца, но если в строке будет более 12 столбцов, будут непредсказуемые явления (я сделал несколько для исследовательских целей ).Тест, это можно не тестировать, если хотите раскладывать больше 12, можно использовать таблицу). Ниже я привожу кусок кода, который будет использоваться в дальнейшем с небольшими изменениями и повторяться не будет.

При использовании номера col, col-grid для установки ширины установите максимальную ширину окна для эффекта предварительного просмотра, в противном случае эффект может быть отклонен. Кроме того, мы не рекомендуем использовать этот параметр в практических приложениях, используйте адаптивную сетку. макет, даже если вы не хотите отвечать.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
 
    <title>网格系统演示</title>
  </head>
  <body>
  
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Действие этого кода показано на рисунке выше, вы можете скопировать еще несколько ячеек ниже, чтобы увидеть эффект.

              <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>

2.2 Установите ширину каждого столбца

попробуй три<div class="col">В столбце замените столбец-3, столбец-6, столбец-3 или другие значения соответственно, короче, сумма трех чисел равна 12. Конечно, вы также можете удалить или добавить одну или несколько ячеек, если сумма одной строки равна 12. Через такую простую настройку очень удобно изменять ширину ячейки. На следующем рисунке показан эффект установки col на col-2, col-2, col-4 и col-4 соответственно.

2.3 Столбцы переменной ширины

Если вы устанавливаете значение ячейки, если есть три ячейки и установлена только одна, оставшиеся две ячейки будут поровну делить оставшееся пространство, так что вы можете легко установить столбцы переменной ширины. Напоминаем, ячейка, задающая фиксированное значение, не обязательно должна быть впереди, например, в коде 2.1 можно установить вторую ячейку так, чтобы она занимала экран вообще (столбец-6), а остальные ячейки равномерно распределенный.

2.4 Колонки, которые переносят

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

Пример 2.1 будет четыре<div class="col">Измените col на col-6, чтобы увидеть эффект.

2.4.1.png

Пример 2.1 будет четыре<div class="col">Измените col на col-12, чтобы увидеть эффект.

2.4.2.png

Пример 2.1 будет четыре<div class="col">Измените col на col-8, чтобы увидеть эффект.

2.4.3.png Видно, что хотя col-8 тоже можно установить в одну строку на ячейку, текст занимает только 12/8 экрана, то есть 2/3, так что если нет особых требований, попробуйте установить значение ячеек в каждой строке столько, сколько возможно. В сумме это ровно 12.

3. Адаптивный макет сетки Bootstrap

3.1 Что такое адаптивный макет

Что касается адаптивного макета, проще говоря, отображаемый макет страницы отличается, когда размер экрана отличается. Например, при просмотре на мобильном телефоне идет только одна ячейка подряд, при просмотре на планшете — две ячейки подряд, а при просмотре на компьютере — три ячейки. Bootstrap может легко реализовать эту функцию.

3.2 Разделение экрана сетки Bootstrap по размеру экрана

Взгляните на приведенную ниже таблицу, если вы с ней знакомы, она точно такая же, как и правила точки останова, но с дополнительным xs.На самом деле, по умолчанию это xs, так что вы можете его опустить. Как видите, Bootstrap делит экран на 6 типов размеров через 5 контрольных точек.

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Контейнер-контейнер	None (auto)	540px	720px	960px	1140px	1320px
префикс класса размера экрана	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`

3.3 Пример макета, адаптивного к сетке Bootstrap

Пример 2.1 будет четыре<div class="col">заменяется<div class="col-12 col-md-6 col-lg-4">, Измените размер окна браузера и проверьте эффект.Этот код означает, что при

Конечно, вы также можете изменить точки более точно, вместо<div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">.

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

3.4 Если вы не хотите отвечать

Если вы хотите, чтобы все браузеры отображали одинаковый эффект, они разбиты на две колонки, то есть вы не хотите делать адаптивное отображение, то это очень просто, вы можете установить одинаковое значение количества сеток под все экраны.<div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">, чтобы он оставался согласованным на любом экране.

Сегодняшний курс здесь, пожалуйста, следуйте за мной и изучите макет и сортировку макета веб-страницы Bootstrap в разделе 5 «Bootstrap5 Zero Basic to Mastery», первоначально написанном Лао Лю.