Eine kurze Diskussion darüber, wie BootStrap das Rasterlayout implementiert

In diesem Artikel erfahren Sie, BootStrapWie Sie das Rasterlayout implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

【Verwandte Empfehlung: „Bootstrap-Tutorial“】

1. Grundlegende Punkte

box-sizing: border-boxbox-sizing: border-box

这是最基本的一点，将盒子模型设置成边框盒子.这样 width 属性指定的盒子宽度就包括 border + padding + content。只要 width 固定，指定 padding 和 border 将不会改变盒子的大小。

*,
*::before,
*::after {
    box-size: border-box;
}

知识前置

• sass 基础
• bootstrap 栅格布局基本会使用
• flex 布局基础

本文栅格实现参考 bootstrap 源码实现

2. Container

一般来说作为应用最顶层的容器分为两种:

• 响应式容器
  • .container
  • .container-sm
  • .container-md
  • .container-lg
  • .container-xl
• 固定宽度容器( bootstrap 中叫做流体容器)
  • .container-fluid

响应式容器会根据屏幕宽度的不同，根据媒体查询使用 max-width

Dies ist der grundlegendste Punkt Das Box-Modell wird auf eine Rahmenbox festgelegt. Auf diese Weise umfasst die durch das Attribut width angegebene Breite der Box border + padding + content. Solange width fest ist, ändert die Angabe von padding und border die Größe der Box nicht.

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
);

Vorausgesetzte Kenntnisse

• Sass-Grundlagen
• Grundlagen des Bootstrap-Grid-Layouts
• Flex-Layout-Grundlagen

Dieser Artikel Grid Grid Die Implementierung bezieht sich auf die Bootstrap-Quellcode-Implementierung >Responsiver Container

• .container
• .container-sm
• .container-md </code ></li><li><code>.container-lg
• .container-xl

< li>Container mit fester Breite (im Bootstrap Fluidcontainer genannt)

• .container-fluid

Responsive Abhängig von der Bildschirmbreite können Sie mit max-width die Breite des Containers basierend auf Medienabfragen einschränken. Aufgrund des Mobile-First-Prinzips von Bootstrap wird zunächst der Containerstil für kleine Bildschirme erfüllt und dann der Stil für große Bildschirme basierend auf Medienabfragen erweitert. . 100%100%100 %1140px

断点:

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
);

不同断点对应的容器宽度:

$container-max-widths: (
    sm: 540px, // min-width: 576px
    md: 720px, // min-width: 768px
    lg: 960px, // min-width: 992px
    xl: 1140px // min-width: 1200px
);

实际上断点到底取在哪里，可以随意自定义。这里只是引用的 bootstrap 的规范而已。

2.1 固定容器实现

固定容器实现很简单。无非就是将容器的宽度设置为 100%， 水平居中而已。

/**
 * 基本容器的样式
 * 宽度 100%
 * 有半个槽宽的内边距
 * 水平居中
 * @param $gutter 槽宽, 如果只是想要一个普通的容器。可以将参数槽宽设置为 0
 *                默认值是 $gird-gutter-width
 */
@mixin make-container($gutter: $grid-gutter-width) {
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
    margin-right: auto;
    margin-left: auto;
}

槽宽这个概念如果用过 bootstrap 应该能够理解。如果不理解可以跳到本文底部，有详细介绍。

当屏幕宽度小于 576px 的时候，所有的容器宽度都是 100%。即 xs 的情况下:

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-fluid {
    @include make-container();
}

2.2 响应式容器实现

要实现响应式容器，就是要根据不同的断点分别给不同的容器设置媒体查询，以 max-width 约束容器的宽度。

根据规范所示:

• 当断点为 sm 时， .container, .container-sm 的 max-width 为 540px，其余容器为初始的 100%
• 当断点为 md 时， .container, .container-sm, .container-md 的 max-width 为 720px，其余容器为初始的 100%
• 当断点为 lg 时， .container, .container-sm, .container-md, .container-lg 的 max-width 为 960px，其余容器为初始的 100%
• 当断点为 xl 时， .container, .container-sm, .container-md, .container-lg, .container-xl 的 max-width 为 1140px，其余容器为初始的 100%

分析一下，就可以发现。每个断点处需要设置媒体查询的容器数刚好在 .container-#{$breakpoint} 处停止。

使用 sass 描述如下:

@each $breakpoint, $container-max-width in $container-max-widths {
    /**
    * .container
    * .container-sm
    * .container-md
    * .container-lg
    * .container-xl
    * 按照断点设置媒体查询
    * 其实就是通过 max-width 控制容器到底有多宽
    */
    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
        // 每个断点的屏幕最大 width
        %responsitive-#{$breakpoint} {
            max-width: $container-max-width;
        }

        // 用于确定哪些容器需要设置媒体查询的 flag
        $extend-breakpoint: true;

        @each $name, $width in $grid-breakpoints {
            @if $extend-breakpoint {
                .container#{breakpoint-infix($name)} {
                    @extend %responsitive-#{$breakpoint};
            	}
        	}

        	@if $name == $breakpoint {
            $extend-breakpoint: false;
        	}
    	}


	}

}

其中两个辅助函数 breakpoint-min, breakpoint-infix:

/**
 * 根据断点名称取得对应的断点 width.
 * 注意：如果是 xs 断点，返回的是 null
 * @param $name:  传入的 map key
 * @param $breakpoints-map: 断点 map
 * @return: 断点对应的 mind-width
 */
@function breakpoint-min($name, $breakpoints-map: $grid-breakpoints) {
    $min: map-get($map: $breakpoints-map, $key: $name);
    @return if($min != 0, $min, null);
}

/**
 * 根据断点名称作为 key 查询map
 * 若是 map 中 key对应的 value 不为 0 则生成后缀名
 * 否则返回空串
 *
 * @param $name:  传入的 map key
 * @param $breakpoints-map: 断点 map
 * @return: 断点对应的后缀名 格式 '-sm'
 */
@function breakpoint-infix($name, $breakpoints-map: $grid-breakpoints) {
    @return if(breakpoint-min($name) != null, '-#{$name}', '');
}

辅助 mixin media-breakpoint-up：

/**
 * 根据 $name 作为 key 查询 $breakpoints-map 中对应的断点值 
 * 如果断点值存在，则对相应内容设置媒体查询
 * 如果断点值不存在，则将混合的内容原样输出
 * 
 * @param $name 断点名称
 * @param $breakpoints-map 保存断点的 map
 */
@mixin media-breakpoint-up($name, $breakpoints-map: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints-map);

    @if $min {
        @media (min-width: $min) {
            @content;
        }
    }@else {
        @content;
    }
}

3. Row

栅格布局主要就是围绕 row 和 column 展开。行中放置列，列中放置应用内容，列中又可以嵌套行(子子孙孙无穷尽也(x))。

行其实就是一个固定的容器，所以样式也很简单。

/**
 * 行基础样式
 * 开启 flex 布局
 * 允许多行容器
 * 左右有半个槽宽的负外边距
 * 
 * @param $gutter 槽宽
 */
@mixin make-row($gutter: $grid-gutter-width) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$gutter / 2;
  margin-left: -$gutter / 2;
}

// 行
.row {
    @include make-row();
}

4. Column

column 是栅格布局中最重要的部分，同时也是最复杂的一部分。

有多种列可供使用:

• 等宽列 .col
  • 特点是 .row 中放置 n 个 .col， 那么一个 .col 的宽度就是 .row 的 n 分之一
• 比例列 .col-${i}
  • $i 取值为 1- 12. bootstrap 默认情况下一行可以分作12列。 .col-{$i} 所占的宽度就是 row 总宽度的 $i / 12。
  • 这里默认分成的列数对应变量是 $grid-columns: 12 !default;
• 可变宽度的弹性列 .col-auto
  • 其所占据的宽度由其内容宽度决定

如果是在小屏幕下，我们通常不会让一行有很多列，通常一行都只有一列。所以根据不同的屏幕断点，bootstrap 还提供了响应式列。

• 等宽列 .col-#{$breakpoint}
• 比例列 .col-#{$breakpoint}-${i}
• 可变宽度的弹性列 .col-#{$breakpoint}-auto

语义是，当屏幕大于等于断点对应宽度时，呈现列的语义形式。当小于断点宽度时，所有的列都退化成 width: 100%; 的形式。同样的，这也通过媒体查询实现.

4.1 列基础样式

所有列的最基础的样式:

/**
* 列基础样式
* 开启相对定位，作为列中内容绝对定位的参考点
* width 为 100%
* 左右有半个槽宽的外边距
*/
%grid-column {
    position: relative;
    width: 100%;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
}

这个样式用于当屏幕小于对应断点的时候，列的样式进行退化

4.2 设置 .col, .col-${i}, .col-auto 的基础样式

$infix: breakpoint-infix($breakpoint, $breakpoints);

// .col-*-i 系列设置基础样式
@if $columns > 0 {
    @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
            @extend %grid-column;
    	}
	}
}

// .col-*, -col-*-auto 系列设置列基础样式
.col#{$infix},
.col#{$infix}-auto {
    @extend %grid-column;
}

我们这里以 $breakpoint: sm 为例，则 $infix: '-sm'。变量 $colums: 12 是默认的一行可以分为多少列.

执行完之后, .col-sm, .col-sm-#{$i}(i 取值 1-12), .col-sm-auto 它们的默认样式都设置成了 %grid-column。退化的基本样式就设置好了。

之后就开始设置媒体查询，以确定不同的列的样式。

因为此时的例子 $breakpoint: sm， 所以接下来的内容都会被编译进 @media(min-width: 576px) 中:

4.3 列样式设置

等宽列样式设置

即 flex:1 1 0; max-width: 100%。列可以等比例放大等比例缩小。初始行可用空间计算值是整个 main size。（如果不理解，可以去搜索 flex-basis: 0 代表什么含义）。这样的话，无论 .row 下放置多少个 .col-sm，每个 .col-sm 的宽度都是相等的。（前提是列能容纳得了内容）

.col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.row-cols#{$infix}-#{$i}

这个是 bootstrap 的特色类，这个类应用在 row 上。约束其下最多可以拥有多少个等宽列.这个类对于其他的列是不影响的，仅仅影响等宽列。(是通过选择器优先级实现的)

// 设置 .row-cols-*-i 系列 的样式
@if $grid-row-columns > 0 {
    @for $i from 1 through $grid-row-columns {
        .row-cols-sm-#{$i} {
            @include row-cols($i);
    	}
	}

}

辅助 mixin row-cols

/**
 * 设置 .row-col-*-i 系列下的列样式
 * flex: 0 0 100% / $count，即是一个不会放大不会缩小，永远按 i 的值等比例平分行的列
 * 
 * @param $count 要平分的列数
 */
@mixin row-cols($count) {
    & > * {
        flex: 0 0 100% / $count;
        max-width: 100% / $count;
    }
    
}

即 .row-cols-sm-1 > * 的选择器特殊性和 .col-sm 相同。但是前者声明在后者后面，所以造成了样式覆盖。即 .row-cols#{$infix}-#{$i} 只对等宽列起效。

严格的说，当使用对应断点的 .row-cols-#{$breakpoint}-#{$i} 之后，会对其下列中 .col-#{$breakpoint} 及断点之前的等宽列生效。即 .row-cols-md-4 会对 .col, .col-sm, .col-md 都生效。原因是因为整个循环顺序是从 xs -> xl。如果不明白，看一下编译输出的 CSS 就知道为什么了。

可变宽度弹性列样式设置 .col-sm-auto

// 设置 .col-*-auto 的样式
.col-sm-auto {
    @include make-col-auto();
}

辅助 mixin make-col-auto

/**
 * 设置 .col-*-auto 的样式
 * 默认情况下是一个不会放大不会缩小，宽度由 flex item 宽度决定的盒子
 */
@mixin make-col-auto() {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

设置比例列样式 .col-sm-#{$i}

// 设置 .col-*-i 系列的样式
@if $columns > 0 {
    @for $i from 1 through $columns {
        .col-sm-#{$i} {
            @include make-col($i, $columns);
    	}
	}
}

辅助 mixin make-col

/**
 * .col-*-i 的样式
 * 
 * @param $size 占据的列数
 * @param $columns: 总可用列数
 */
@mixin make-col($size, $columns: $grid-columns) {
    flex: 0 0 percentage($size / $columns);
    max-width: percentage($size / $columns);
}

这里就是按比例分配，如果 $i: 5, 则 .col-sm-5 就占据整行宽度的 5/12。

flex 布局中使用 order 属性来视觉排序 flex item.所以 bootstrap 也提供了列排序的类

// 列排序相关
.order-sm-first {
    order: -1;
}

.order-sm-last {
    order: $columns + 1;
}

// 一行最多12列，也就是说从 -1 开始编号就可以安排完整行所有的列排列顺序
@for $i from 0 through $columns {
    .order-sm-#{$i} {
        order: $i;
	}
}

只要明白浏览器视觉排序是按照 order 数值从小到大排序就能了解这个是干嘛的了。

列偏移

实际需求中，总是会有列偏移的需求，这里是通过 margin-left 实现。

// 设置列偏移
@if $columns > 0 {
    @for $i from 0 through ($columns - 1) {
        @if not ($infix == '' and $i == 0) {
            .offset#{$infix}-#{$i} {
                @include make-col-offset($i, $columns);
        	}
    	}
	}
}

辅助 mixin make-col-offset:

@mixin make-col-offset($size, $columns: $grid-columns) {
    $num: $size / $columns;
    margin-left: if($num == 0, 0, percentage($num));
}

整个创建响应式列的流程就是这样，这里只是举了断点为 sm 的情况，其他断点也是这个流程。就不一一赘述了，实际上实现也是通过循环。如果不需要响应式，只是需要等宽列，可变宽度弹性列，比例列的话就更简单了，我相信如果能理解上面的内容的话以读者的聪明才智可以很容易自己写出来。

5. 槽

槽(gutter) 是两列之间的间距。槽的数量是列数量 - 1.

槽公式:
设栅格行宽度为 w, 列宽度为 c(这里的列宽指内容区域), 槽宽度为 g, 列数为 n
则 w = n * c + (n - 1) * g

bootstarp 的设计是这样的:

• container

  container 上左右分别有 1/2 gutter 的 padding

• row

  row 上设置了 -1/2 gutter 的左右外边距将容器的 padding 影响抹平

• column

  colum 上设置了 1/2 gutter 的左右外边距使得内容距离容器的边界有了 1/2 gutter 的距离。使得内容不贴边。

  同时允许列嵌套行，因为行的负外边距会将列的左右 padding 影响清除，可以达到无限套娃的目的。

  总之这个 gutter 的 大小因不同的设计而异， bootstrap 的默认 gutter 宽度为 30px，读者可以根据自己的设计目的调整。

6. 完整源码

完整源码移步 git 仓库(不是 bootstrap 完整版本，是个人重写加了注释的仅具有 grid 功能的版本。内容不多)

bootstrap-grid地址：https://github.com/IliyaRin/bootstrap-grid

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie BootStrap das Rasterlayout implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

4 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

4 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

1 Monate vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7700

15

Java-Tutorial

1640

14

CakePHP-Tutorial

1393

52

Laravel-Tutorial

1287

25

PHP-Tutorial

1230

29

Mehr anzeigen

Related knowledge

So erhalten Sie die Bootstrap -Suchleiste Apr 07, 2025 pm 03:33 PM

So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Maßnahmen aus.

So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

Wie man vertikale Zentrierung von Bootstrap macht Apr 07, 2025 pm 03:21 PM

Verwenden Sie Bootstrap, um die vertikale Zentrierung zu implementieren: FlexBox-Methode: Verwenden Sie den D-Flex, den Justify-Content-Center und die Ausrichtungsklassen aus Align-Item-Center, um Elemente in den Flexbox-Behälter zu platzieren. Methode für Ausstellungs-Iitem-Center-Klassen: Bei Browsern, die Flexbox nicht unterstützen, verwenden Sie die Klasse aus Align-items-Center-Klasse, vorausgesetzt, das übergeordnete Element hat eine definierte Höhe.

So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

See all articles

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved

Container-Grunddaten				xs >=992px	xl >=1200px
.container	100 %	540px	720px	960px	1140px %
720px	960px	1140px		.container-lg	100%
100%	960px	1140px		.container-xl	100%
100 %	100 %