使用BootStrap怎么實(shí)現(xiàn)柵格布局

這篇文章將為大家詳細(xì)講解有關(guān)使用BootStrap怎么實(shí)現(xiàn)柵格布局，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

1. 基本點(diǎn)

box-sizing: border-box

這是最基本的一點(diǎn)，將盒子模型設(shè)置成邊框盒子.這樣 width 屬性指定的盒子寬度就包括 border + padding + content。只要 width 固定，指定 padding 和 border 將不會(huì)改變盒子的大小。

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

知識(shí)前置

• sass 基礎(chǔ)

• bootstrap 柵格布局基本會(huì)使用

• flex 布局基礎(chǔ)

本文柵格實(shí)現(xiàn)參考 bootstrap 源碼實(shí)現(xiàn)

2. Container

一般來(lái)說(shuō)作為應(yīng)用最頂層的容器分為兩種:

• 響應(yīng)式容器

• .container

• .container-sm

• .container-md

• .container-lg

• .container-xl

• 固定寬度容器( bootstrap 中叫做流體容器)

• .container-fluid

響應(yīng)式容器會(huì)根據(jù)屏幕寬度的不同，根據(jù)媒體查詢(xún)使用 max-width 約束容器的寬度。因?yàn)?bootstrap 移動(dòng)優(yōu)先的原則，所以是先滿(mǎn)足小屏幕的容器樣式，然后再根據(jù)媒體查詢(xún)擴(kuò)展大屏幕的樣式。

container 基本數(shù)據(jù)

斷點(diǎn):

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

不同斷點(diǎn)對(duì)應(yīng)的容器寬度:

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

實(shí)際上斷點(diǎn)到底取在哪里，可以隨意自定義。這里只是引用的 bootstrap 的規(guī)范而已。

2.1 固定容器實(shí)現(xiàn)

固定容器實(shí)現(xiàn)很簡(jiǎn)單。無(wú)非就是將容器的寬度設(shè)置為 100%， 水平居中而已。

/**
 * 基本容器的樣式
 * 寬度 100%
 * 有半個(gè)槽寬的內(nèi)邊距
 * 水平居中
 * @param $gutter 槽寬, 如果只是想要一個(gè)普通的容器?？梢詫?shù)槽寬設(shè)置為 0
 *                默認(rèn)值是 $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;
}

槽寬這個(gè)概念如果用過(guò) bootstrap 應(yīng)該能夠理解。如果不理解可以跳到本文底部，有詳細(xì)介紹。

當(dāng)屏幕寬度小于 576px 的時(shí)候，所有的容器寬度都是 100%。即 xs 的情況下:

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

2.2 響應(yīng)式容器實(shí)現(xiàn)

要實(shí)現(xiàn)響應(yīng)式容器，就是要根據(jù)不同的斷點(diǎn)分別給不同的容器設(shè)置媒體查詢(xún)，以 max-width 約束容器的寬度。

根據(jù)規(guī)范所示:

• 當(dāng)斷點(diǎn)為 sm 時(shí)， .container, .container-sm 的 max-width 為 540px，其余容器為初始的 100%

• 當(dāng)斷點(diǎn)為 md 時(shí)， .container, .container-sm, .container-md 的 max-width 為 720px，其余容器為初始的 100%

• 當(dāng)斷點(diǎn)為 lg 時(shí)， .container, .container-sm, .container-md, .container-lg 的 max-width 為 960px，其余容器為初始的 100%

• 當(dāng)斷點(diǎn)為 xl 時(shí)， .container, .container-sm, .container-md, .container-lg, .container-xl 的 max-width 為 1140px，其余容器為初始的 100%

分析一下，就可以發(fā)現(xiàn)。每個(gè)斷點(diǎn)處需要設(shè)置媒體查詢(xún)的容器數(shù)剛好在 .container-#{$breakpoint} 處停止。

使用 sass 描述如下:

@each $breakpoint, $container-max-width in $container-max-widths {
    /**
    * .container
    * .container-sm
    * .container-md
    * .container-lg
    * .container-xl
    * 按照斷點(diǎn)設(shè)置媒體查詢(xún)
    * 其實(shí)就是通過(guò) max-width 控制容器到底有多寬
    */
    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
        // 每個(gè)斷點(diǎn)的屏幕最大 width
        %responsitive-#{$breakpoint} {
            max-width: $container-max-width;
        }

        // 用于確定哪些容器需要設(shè)置媒體查詢(xún)的 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;
        	}
    	}


	}

}

其中兩個(gè)輔助函數(shù) breakpoint-min, breakpoint-infix:

/**
 * 根據(jù)斷點(diǎn)名稱(chēng)取得對(duì)應(yīng)的斷點(diǎn) width.
 * 注意：如果是 xs 斷點(diǎn)，返回的是 null
 * @param $name:  傳入的 map key
 * @param $breakpoints-map: 斷點(diǎn) map
 * @return: 斷點(diǎn)對(duì)應(yīng)的 mind-width
 */
@function breakpoint-min($name, $breakpoints-map: $grid-breakpoints) {
    $min: map-get($map: $breakpoints-map, $key: $name);
    @return if($min != 0, $min, null);
}

/**
 * 根據(jù)斷點(diǎn)名稱(chēng)作為 key 查詢(xún)map
 * 若是 map 中 key對(duì)應(yīng)的 value 不為 0 則生成后綴名
 * 否則返回空串
 *
 * @param $name:  傳入的 map key
 * @param $breakpoints-map: 斷點(diǎn) map
 * @return: 斷點(diǎn)對(duì)應(yīng)的后綴名 格式 '-sm'
 */
@function breakpoint-infix($name, $breakpoints-map: $grid-breakpoints) {
    @return if(breakpoint-min($name) != null, '-#{$name}', '');
}

輔助 mixin media-breakpoint-up：

/**
 * 根據(jù) $name 作為 key 查詢(xún) $breakpoints-map 中對(duì)應(yīng)的斷點(diǎn)值 
 * 如果斷點(diǎn)值存在，則對(duì)相應(yīng)內(nèi)容設(shè)置媒體查詢(xún)
 * 如果斷點(diǎn)值不存在，則將混合的內(nèi)容原樣輸出
 * 
 * @param $name 斷點(diǎn)名稱(chēng)
 * @param $breakpoints-map 保存斷點(diǎn)的 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 展開(kāi)。行中放置列，列中放置應(yīng)用內(nèi)容，列中又可以嵌套行(子子孫孫無(wú)窮盡也(x))。

行其實(shí)就是一個(gè)固定的容器，所以樣式也很簡(jiǎn)單。

/**
 * 行基礎(chǔ)樣式
 * 開(kāi)啟 flex 布局
 * 允許多行容器
 * 左右有半個(gè)槽寬的負(fù)外邊距
 * 
 * @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 是柵格布局中最重要的部分，同時(shí)也是最復(fù)雜的一部分。

有多種列可供使用:

• 等寬列 .col

• 特點(diǎn)是 .row 中放置 n 個(gè) .col， 那么一個(gè) .col 的寬度就是 .row 的 n 分之一

• 比例列 .col-${i}

• $i 取值為 1- 12. bootstrap 默認(rèn)情況下一行可以分作12列。 .col-{$i} 所占的寬度就是 row 總寬度的 $i / 12。

• 這里默認(rèn)分成的列數(shù)對(duì)應(yīng)變量是 $grid-columns: 12 !default;

• 可變寬度的彈性列 .col-auto

• 其所占據(jù)的寬度由其內(nèi)容寬度決定

如果是在小屏幕下，我們通常不會(huì)讓一行有很多列，通常一行都只有一列。所以根據(jù)不同的屏幕斷點(diǎn)，bootstrap 還提供了響應(yīng)式列。

• 等寬列 .col-#{$breakpoint}

• 比例列 .col-#{$breakpoint}-${i}

• 可變寬度的彈性列 .col-#{$breakpoint}-auto

語(yǔ)義是，當(dāng)屏幕大于等于斷點(diǎn)對(duì)應(yīng)寬度時(shí)，呈現(xiàn)列的語(yǔ)義形式。當(dāng)小于斷點(diǎn)寬度時(shí)，所有的列都退化成 width: 100%; 的形式。同樣的，這也通過(guò)媒體查詢(xún)實(shí)現(xiàn).

4.1 列基礎(chǔ)樣式

所有列的最基礎(chǔ)的樣式:

/**
* 列基礎(chǔ)樣式
* 開(kāi)啟相對(duì)定位，作為列中內(nèi)容絕對(duì)定位的參考點(diǎn)
* width 為 100%
* 左右有半個(gè)槽寬的外邊距
*/
%grid-column {
    position: relative;
    width: 100%;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
}

這個(gè)樣式用于當(dāng)屏幕小于對(duì)應(yīng)斷點(diǎn)的時(shí)候，列的樣式進(jìn)行退化

4.2 設(shè)置 .col, .col-${i}, .col-auto 的基礎(chǔ)樣式

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

// .col-*-i 系列設(shè)置基礎(chǔ)樣式
@if $columns > 0 {
    @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
            @extend %grid-column;
    	}
	}
}

// .col-*, -col-*-auto 系列設(shè)置列基礎(chǔ)樣式
.col#{$infix},
.col#{$infix}-auto {
    @extend %grid-column;
}

我們這里以 $breakpoint: sm 為例，則 $infix: '-sm'。變量 $colums: 12 是默認(rèn)的一行可以分為多少列.

執(zhí)行完之后, .col-sm, .col-sm-#{$i}(i 取值 1-12), .col-sm-auto 它們的默認(rèn)樣式都設(shè)置成了 %grid-column。退化的基本樣式就設(shè)置好了。

之后就開(kāi)始設(shè)置媒體查詢(xún)，以確定不同的列的樣式。

因?yàn)榇藭r(shí)的例子 $breakpoint: sm， 所以接下來(lái)的內(nèi)容都會(huì)被編譯進(jìn) @media(min-width: 576px) 中:

4.3 列樣式設(shè)置

等寬列樣式設(shè)置

即 flex:1 1 0; max-width: 100%。列可以等比例放大等比例縮小。初始行可用空間計(jì)算值是整個(gè) main size。（如果不理解，可以去搜索 flex-basis: 0 代表什么含義）。這樣的話，無(wú)論 .row 下放置多少個(gè) .col-sm，每個(gè) .col-sm 的寬度都是相等的。（前提是列能容納得了內(nèi)容）

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

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

這個(gè)是 bootstrap 的特色類(lèi)，這個(gè)類(lèi)應(yīng)用在 row 上。約束其下最多可以擁有多少個(gè)等寬列.這個(gè)類(lèi)對(duì)于其他的列是不影響的，僅僅影響等寬列。(是通過(guò)選擇器優(yōu)先級(jí)實(shí)現(xiàn)的)

// 設(shè)置 .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

/**
 * 設(shè)置 .row-col-*-i 系列下的列樣式
 * flex: 0 0 100% / $count，即是一個(gè)不會(huì)放大不會(huì)縮小，永遠(yuǎn)按 i 的值等比例平分行的列
 * 
 * @param $count 要平分的列數(shù)
 */
@mixin row-cols($count) {
    & > * {
        flex: 0 0 100% / $count;
        max-width: 100% / $count;
    }
    
}

即 .row-cols-sm-1 > * 的選擇器特殊性和 .col-sm 相同。但是前者聲明在后者后面，所以造成了樣式覆蓋。即 .row-cols#{$infix}-#{$i} 只對(duì)等寬列起效。

嚴(yán)格的說(shuō)，當(dāng)使用對(duì)應(yīng)斷點(diǎn)的 .row-cols-#{$breakpoint}-#{$i} 之后，會(huì)對(duì)其下列中 .col-#{$breakpoint} 及斷點(diǎn)之前的等寬列生效。即 .row-cols-md-4 會(huì)對(duì) .col, .col-sm, .col-md 都生效。原因是因?yàn)檎麄€(gè)循環(huán)順序是從 xs -> xl。如果不明白，看一下編譯輸出的 CSS 就知道為什么了。

可變寬度彈性列樣式設(shè)置 .col-sm-auto

// 設(shè)置 .col-*-auto 的樣式
.col-sm-auto {
    @include make-col-auto();
}

輔助 mixin make-col-auto

/**
 * 設(shè)置 .col-*-auto 的樣式
 * 默認(rèn)情況下是一個(gè)不會(huì)放大不會(huì)縮小，寬度由 flex item 寬度決定的盒子
 */
@mixin make-col-auto() {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

設(shè)置比例列樣式 .col-sm-#{$i}

// 設(shè)置 .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 占據(jù)的列數(shù)
 * @param $columns: 總可用列數(shù)
 */
@mixin make-col($size, $columns: $grid-columns) {
    flex: 0 0 percentage($size / $columns);
    max-width: percentage($size / $columns);
}

這里就是按比例分配，如果 $i: 5, 則 .col-sm-5 就占據(jù)整行寬度的 5/12。

flex 布局中使用 order 屬性來(lái)視覺(jué)排序 flex item.所以 bootstrap 也提供了列排序的類(lèi)

// 列排序相關(guān)
.order-sm-first {
    order: -1;
}

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

// 一行最多12列，也就是說(shuō)從 -1 開(kāi)始編號(hào)就可以安排完整行所有的列排列順序
@for $i from 0 through $columns {
    .order-sm-#{$i} {
        order: $i;
	}
}

只要明白瀏覽器視覺(jué)排序是按照 order 數(shù)值從小到大排序就能了解這個(gè)是干嘛的了。

列偏移

實(shí)際需求中，總是會(huì)有列偏移的需求，這里是通過(guò) margin-left 實(shí)現(xiàn)。

// 設(shè)置列偏移
@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));
}

整個(gè)創(chuàng)建響應(yīng)式列的流程就是這樣，這里只是舉了斷點(diǎn)為 sm 的情況，其他斷點(diǎn)也是這個(gè)流程。就不一一贅述了，實(shí)際上實(shí)現(xiàn)也是通過(guò)循環(huán)。如果不需要響應(yīng)式，只是需要等寬列，可變寬度彈性列，比例列的話就更簡(jiǎn)單了，我相信如果能理解上面的內(nèi)容的話以讀者的聰明才智可以很容易自己寫(xiě)出來(lái)。

5. 槽

槽(gutter) 是兩列之間的間距。槽的數(shù)量是列數(shù)量 - 1.

槽公式:
設(shè)柵格行寬度為 w, 列寬度為 c(這里的列寬指內(nèi)容區(qū)域), 槽寬度為 g, 列數(shù)為 n
則 w = n * c + (n - 1) * g

bootstarp 的設(shè)計(jì)是這樣的:

• container

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

• row

  row 上設(shè)置了 -1/2 gutter 的左右外邊距將容器的 padding 影響抹平

• column

  colum 上設(shè)置了 1/2 gutter 的左右外邊距使得內(nèi)容距離容器的邊界有了 1/2 gutter 的距離。使得內(nèi)容不貼邊。

  同時(shí)允許列嵌套行，因?yàn)樾械呢?fù)外邊距會(huì)將列的左右 padding 影響清除，可以達(dá)到無(wú)限套娃的目的。

  總之這個(gè) gutter 的 大小因不同的設(shè)計(jì)而異， bootstrap 的默認(rèn) gutter 寬度為 30px，讀者可以根據(jù)自己的設(shè)計(jì)目的調(diào)整。

關(guān)于使用BootStrap怎么實(shí)現(xiàn)柵格布局就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。