1. Файл исходного кода
_grid.scss: файл класса системы сетки
Mixins/_grid.scss: поддержка коллекций микшинов, реализованных сетчатыми системами
Mixins/_grid-framework.scss: Core Mixin, реализованный сеткой System
2. Поддерживаемые функции
1. Осознайте макет по проценту
2. осознайте позиционирование сетки
3. Внедрение гнездования сетей
4. Если вы используете только систему сетки, вы можете кодировать только файл bootstrap-grid.scss
Принцип реализации
1. Макет по проценту , основная проблема заключается в том, как равномерно распределить ширину на разных устройствах. Bootstrap просто использует простой процент, и тот же процент используется под устройством любого размера.
2. Позиционирование сетей: решает способность сетки двигаться влево, справа и сдвинуть несколько ячеек вправо с помощью сетей
3. Гнездование сетей: реализуйте систему макета сетки после гнездования содержимого сетки.
4. Анализ исходного кода
1. _grid.scss: основной класс, сгенерированный системой сетки, ссылается на переменные и связанные с ними методы в Mixins/_grid.scss, Mixins/_grid-framework.scss, varials.scss.
Сначала: определить два класса контейнера
а) Контейнер: контейнер сетки, который определяет различную ширину в соответствии с различными устройствами и не заполняет полный экран;
б) Контейнер-контейнер: решетчатый контейнер, полный экран с любой поддержкой
Как контейнер, так и контейнер используют маркировку, Make-Container (Mixins/_grid.scss). Make-Container только реализует такие элементы управления, как центрирование, левая и правая края, очистка поплавок и т. Д.; Контейнер определяет ширину контейнера в соответствии с различными устройствами.
Тогда: определить ряд (ряд):
Make-Row (Mixins/_grids.scss) вызывается для достижения определения очистки плавучих и левого и правого края. В 4.0, если включена поддержка гибкого макета, дисплей контейнера устанавливается на Flex и Flex-Wrap в качестве обертывания и прозрачного плавания.
Далее: непосредственно вызовите Cay-Grid-Columns (Mixins/_grid-Framework.scss) для достижения учреждения клеток
а) Колонны сетки: метод входа для генерации ячеек, передача общего количества сетей, ширины маржи и нескольких поддерживаемых размеров
б) Справочник по сетку ссылается на многие методы в Mixins/_grid.scss:
а) Используйте функцию MAP-ключа, чтобы пройти сбор клавиш карты;
Функция @Extend используется, используемая для наследования, реализации левого плавания всех Cols и относительного позиционирования всех Cols.
@FOR $ I от 1 до $ COLMONS {.col-#{$ breakpoint}-#{$ i} {@Extend %Grid-Column; // Extend-это наследование, объедините это в коллекцию стилей //. Col-XS-1, COL-XS-2 {PositionA: относительно; ....}}}а) Сделайте функцию Col-Span для реализации расчета ширины COL
б) Вызовите метод Make-Col-модификатор в Mixins/_grid.scss, чтобы реализовать генерацию стилей толкания, тяги и смещения:
я. Нажмите: нажмите на несколько сетей вправо, используя влево
II Потяните: нажмите на несколько сетей влево, используя справа
iii. Смещение: он использует реализацию левой маржи, подталкивая ее вправо на процент.
@Mixin Make-Col-Offset ($ Size, $ Columns: $ GRID-Columns) {Margin-Lefft: процент ($ size / $ columns);}@mixin make-col-push ($ size, $ columns: $ grid-columns) {слева: if ($ size> 0, процент ($ size / $ columns), auto); right: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-pull($size, $columns: $grid-columns) { right: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-modifier($type, $size, $columns) { // Work around the lack of dynamic mixin @include support @if $type == push {@include Make-col-push ($ size, $ columns); } @else if $ type == pull {@include make-col-pull ($ size, $ columns); } @else if $ type == offset {@include make-col-offset ($ size, $ columns); }}Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.