bootstrap中有沒有柵格布局

發(fā)布時(shí)間：2022-06-16 13:55:00 來(lái)源：億速云閱讀：138 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“bootstrap中有沒有柵格布局”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“bootstrap中有沒有柵格布局”吧!

bootstrap中有柵格布局；柵格布局指的是將一行分為12個(gè)柵格，將12個(gè)柵格分配給不同的div元素來(lái)進(jìn)行布局，可以通過設(shè)置列所占有的柵格的個(gè)數(shù)來(lái)設(shè)置列的寬度，是通過列數(shù)來(lái)定義模塊化的頁(yè)面布局方式。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap5版、DELL G3電腦

bootstrap中有柵格布局嗎

bootstrap中有柵格布局

1.什么是柵格布局？

以前的網(wǎng)頁(yè)制作布局用的是tabel布局，通過把表格將網(wǎng)頁(yè)分為大大小小的表格，再?gòu)谋砀裰刑畛湓亍：髞?lái)發(fā)展為div+css布局。通過div+css浮動(dòng)。flaot:right和float:left.布局。

現(xiàn)在bootstrap運(yùn)用的是柵格布局。簡(jiǎn)單來(lái)說(shuō)就是把一行分為12個(gè)柵格。將12個(gè)柵格分配給不同的DIV元素來(lái)進(jìn)行布局。

在Bootstrap中引入了柵格布局，將頁(yè)面分成類似于表格一樣的布局
每一行由12列組成，可以通過設(shè)置列所占有的列的個(gè)數(shù)來(lái)設(shè)置列的寬度
支持響應(yīng)式布局，分別有5種響應(yīng)尺寸，分別對(duì)應(yīng)不同的設(shè)備寬度
使用flexbox流式布局來(lái)實(shí)現(xiàn)頁(yè)面布局
使用div來(lái)實(shí)現(xiàn)容器、行、列的布局

2.如何實(shí)現(xiàn)柵格布局?

首先，使用bootstrap由很多方式，webpack加載或者使用CND引用等。我是直接從CDN上下載3.37版本到本地。再通過link標(biāo)簽引用。這點(diǎn)和引用Jquery類似。

其次，根據(jù)布局分配柵格。舉個(gè)例子，比如說(shuō)要實(shí)現(xiàn)水平的三列等大布局。那么就給每個(gè)DIV分配12/3=4個(gè)柵格，

如果是三列不等大的，左邊大約為3個(gè)柵格，中間為5個(gè)，右邊為4個(gè)

具體操作：

首先布置一個(gè)容器div用來(lái)存放柵格，為div添加container類實(shí)現(xiàn)容器
為子元素添加row類實(shí)現(xiàn)行的布局，而列的布局使用col-*來(lái)實(shí)現(xiàn)
當(dāng)類名為container-fluid的話，默認(rèn)占據(jù)的寬度為100%，占據(jù)整個(gè)頁(yè)面
使用col-時(shí)，不設(shè)置的大小，會(huì)默認(rèn)智能平分寬度，設(shè)置*的大小會(huì)按照比例分割頁(yè)面空間
但是同一行中*的大小不能超過12，可以小于12，會(huì)存在空白；當(dāng)超過12時(shí)，會(huì)將超過的部分放在下一行中

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>柵格布局</title>
  <!--  移動(dòng)端優(yōu)先-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--  引入bootstrap.css文件-->
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>
    .row {
      border: 1px dashed #000;
      margin-top: 20px;
    }
    .col {
      border: 1px solid #0069d9;
      background: #f1b0b7;
    }
  </style>
</head>
<body>
<!--  不設(shè)置*的大小，默認(rèn)平分列的寬度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--設(shè)置container-fluid默認(rèn)占滿寬度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--當(dāng)設(shè)置*的大小時(shí)，默認(rèn)按照比例分割寬度-->
<div>
  <div>
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-5">第三列</div>
  </div>
</div>
<!--小于12時(shí)，會(huì)出現(xiàn)空白區(qū)域-->
<div>
  <div>
    <div class="col col-sm-3">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-3">第三列</div>
  </div>
</div>
<!--當(dāng)超出12時(shí)，會(huì)自動(dòng)換行-->
<div>
  <div>
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-5">第二列</div>
    <div class="col col-sm-7">第三列</div>
  </div>
</div>
<!--首先引入jQuery文件，再引入poper文件，最后引入bootstrap文件-->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

3.柵格布局class參數(shù)是什么意思?

柵格的class有四個(gè)col-lg-1，col-md-1，col-sm-1,col-xs-1,分別對(duì)應(yīng)大屏幕（large)，中等屏幕（middl），小屏幕（smll），極?。▁s）。其中col表示列的意思column，中間為尺寸的縮寫，最后是div分配的柵格大?。ɡ邮钦加玫氖?/12）

到此，相信大家對(duì)“bootstrap中有沒有柵格布局”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

bootstrap中有沒有柵格布局

bootstrap中有柵格布局嗎

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽