• 技术文章 >web前端 >Bootstrap教程

    bootstrap中有栅格布局吗

    长期闲置长期闲置2022-06-16 11:10:13原创379

    bootstrap中有栅格布局;栅格布局指的是将一行分为12个栅格,将12个栅格分配给不同的div元素来进行布局,可以通过设置列所占有的栅格的个数来设置列的宽度,是通过列数来定义模块化的页面布局方式。

    本教程操作环境:Windows10系统、bootstrap5版、DELL G3电脑

    bootstrap中有栅格布局吗

    bootstrap中有栅格布局

    1.什么是栅格布局?

    以前的网页制作布局用的是tabel布局,通过把表格将网页分为大大小小的表格,再从表格中填充元素。后来发展为div+css布局。通过div+css浮动。flaot:right和float:left.布局。

    现在bootstrap运用的是栅格布局。简单来说就是把一行分为12个栅格。将12个栅格分配给不同的DIV元素来进行布局。

    2.如何实现栅格布局?

    首先,使用bootstrap由很多方式,webpack加载或者使用CND引用等。我是直接从CDN上下载3.37版本到本地。再通过link标签引用。这点和引用Jquery类似。

    其次,根据布局分配栅格。举个例子,比如说要实现水平的三列等大布局。那么就给每个DIV分配12/3=4个栅格,

    如果是三列不等大的,左边大约为3个栅格,中间为5个,右边为4个

    具体操作:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>栅格布局</title>
      <!--  移动端优先-->
      <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>
    <!--  不设置*的大小,默认平分列的宽度-->
    <div>
      <div>
        <div class="col col-sm">第一列</div>
        <div class="col col-sm">第二列</div>
        <div class="col col-sm">第三列</div>
      </div>
    </div>
    <!--设置container-fluid默认占满宽度-->
    <div>
      <div>
        <div class="col col-sm">第一列</div>
        <div class="col col-sm">第二列</div>
        <div class="col col-sm">第三列</div>
      </div>
    </div>
    <!--当设置*的大小时,默认按照比例分割宽度-->
    <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时,会出现空白区域-->
    <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>
    <!--当超出12时,会自动换行-->
    <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参数是什么意思?

    栅格的class有四个col-lg-1,col-md-1,col-sm-1,col-xs-1,分别对应大屏幕(large),中等屏幕(middl),小屏幕(smll),极小(xs)。其中col表示列的意思column,中间为尺寸的缩写,最后是div分配的栅格大小(例子是占用的是1/12)

    相关推荐:bootstrap教程

    以上就是bootstrap中有栅格布局吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap
    上一篇:浅析Bootstrap中列表组、分页和进度条组件的用法 下一篇:bootstrap能用于jsp页面吗
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• bootstrap栅格化的原理是啥• 手把手带你使用Bootstrap实现瀑布流布局• bootstrap的表格样式有哪些• bootstrap panel是什么• bootstrap-datepicker的用法是什么
    1/1

    PHP中文网