标签搜索

Bootstrap学习笔记--网格基础

冰封一夏
2021-06-18 13:22:15 / 1 阅读 / 正在检测是否收录...

bootstrap3是移动优先的 所以是从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格

Bootstrap的网格系统允许在页面上多达12列。

如果您不想单独使用全部12列,则可以将列组合在一起以创建更宽的列

bootstrap的网格系统具有响应性,并且列根据屏幕大小自动重新排列

网格:
这里写图片描述

基本结构:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

要求:

  1. 行必须放在容器class内 以便获得适当的对齐(alignment)和内边距(padding)

  2. 使用行创建列的水平组

  3. 内容放在列中

  4. 使用预定义的网格类 比如.row代表行 如 创建一个行(<div class="row">

    然后,添加所需数量的列(具有适当.col-*-*类的标签)。请注意,.col-*-*每行中的数字总是应该总计为12

    例如,要创建三个相等的列,则使用三个.col-xs-4。 其中的xs参考下面的四个类 xs是手机格式

    Bootstrap网格系统有四个类

    - xs(手机)

    - sm(用于平板电脑)

    - md(用于桌面)

    - LG(适用于较大的桌面)

举个栗子:

以下示例显示如何从平板电脑开始获取三个等宽列,并扩展到大型桌面。
开始堆叠在手机/平板电脑(小型设备)上,然后在桌面(中型/大型设备)上变为水平

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>
</body>
</html>

效果图如下:

桌面(中型/大型设备)范围大小大于等于sm:
这里写图片描述

小型设备如手机 范围大小低于sm:
这里写图片描述

如果列不相等怎么办?

直接看代码和效果图实在 实践出真知嘛

将上述栗子代码替换:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

效果图如下:

桌面(中型/大型设备)范围大小大于等于sm:
这里写图片描述

小型设备如手机 范围大小低于sm:
这里写图片描述

col指定了屏幕范围大小(xs,sm,md,lg )和

比例类型 (6,6或者4,8) 那么向上 扩展和本身比例相等 向下扩展就是层叠

具体的下面会用实例解释

还有一种 比较常用:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

实现效果:
在小规模的情况下,使用-sm-来查看类并使用它们。在中等大小的情况下,使用-md-来查看类并使用它们。
以下示例将导致小型设备上的25%/ 75%分裂以及中型(和大型)设备上的50%/ 50%分裂。在特小设备上(xs),它会自动堆叠
等于说 根据屏幕的大小 可以分为三种状态
1. 特小设备(xs):堆叠
2. 小型设备(sm):1:3
3. 中型或者大型(md或者lg):1:1

栗子:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

</body>
</html>

电脑测试:
特小设备(xs):
这里写图片描述
小型设备(sm):
这里写图片描述
中型或者大型(md或者lg):
这里写图片描述

以此类推 也可以这么使用:
实现效果:
小型设备上的25%/ 75%分割,中型设备上的50%/ 50%分割以及大型设备上的33%/ 66%分割 而特小设备(xs)就是层叠

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

再来看一下这种情况:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-lg-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

结果就是:我们只指定了.col-lg-6类(没有.col-md-和/或.col-sm-)。这意味着大型设备将分成50%/ 50%。但是,对于中型和小型设备,它将垂直叠加(宽度为100%)

对应上文提到的:

col指定了屏幕范围大小(xs,sm,md,lg )和

比例类型 (6,6或者4,8) 那么向上 扩展和本身比例相等 向下扩展就是层叠

举个栗子:
在中型以及大型设备以上 (md以上)为1:1状态 小型(md以下)直接就是层叠 虽然它没指定 但是默认了

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-md-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-md-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

**总结:**
在小尺寸下,看看带有-sm的类并使用它们。在中等尺寸的情况下,看看带有-md-的类并使用它们。在大尺寸下,看看类中带有“lg-”的词并使用它们
重点:如果在指定尺寸里没有找到对应的类的话 就向前应用 比如
lg窗体大小 结果没有lg类 那么就应用最近前面的类 有md和sm和xs 应用md
没有才考虑sm
嵌套列:

<div class="container-fluid">
<div class="row">
  <div class="col-lg-8">
    <div class="row">
      <div class="col-lg-6">.col-sm-61</div>
      <div class="col-lg-6">.col-sm-62</div>
    </div>
  </div>
  <div class="col-lg-4">.col-sm-4</div>
</div>

大型设备:
这里写图片描述
大型设备以下:
这里写图片描述

还是遵循这个原则:
在小尺寸下,看看带有-sm的类并使用它们。在中等尺寸的情况下,看看带有-md-的类并使用它们。在大尺寸下,看看类中带有“lg-”的词并使用它们
尺寸是根据窗体大小来 而排列的比例位置 是根据父类来的 即嵌套列的父类是外层的列 层叠的话 也是在那个列里面层叠

注意:
请记住,网格列应该为一行添加多达十二个。除此之外,无论视口如何,列都会堆叠起来。

<div class="row">
  <div class="col-xs-6 col-md-4">第一列</div>
  <div class="col-xs-6 col-md-4">第二列</div>
  <div class="col-xs-6 col-md-4">第三列</div>
</div>

当屏幕是lg时 则为1:1:1状态 在一行:
这里写图片描述
当屏幕是md时 则为1:1:1状态 在一行:
这里写图片描述
*当屏幕是sm或者xs时 则第一列 第二列在一行 1:1 第三列层叠在第一行下面
这里写图片描述
运用到了关键的2点:
1. 网格列应该为一行添加多达十二个。除此之外,无论视口如何,列都会堆叠起来。 参考上面第三张图
2. 在小尺寸下,看看带有-sm的类并使用它们。在中等尺寸的情况下,看看带有-md-的类并使用它们。在大尺寸下,看看类中带有“lg-”的词并使用它们 参考上面第一张图
如果在指定尺寸里没有找到对应的类的话 就向前应用 比如
lg窗体大小 结果没有lg类 那么就应用最近前面的类 有md和sm和xs 应用md
参考上面第二张图

.clearfix这个类

.clearfix在特定的断点处清除浮动(与类),以防止包装不均匀的奇怪包装:

  <div class="clearfix visible-xs"></div>

我也不懂什么意思呢 直接撸了一个demo 直接看代码和效果图 实践出真知嘛

<div class="container-fluid">
<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:yellow">Column 2</div>

  <div class="col-xs-6 col-sm-3" style="background-color:blue">Column 3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:red">Column 4</div>
</div>
</div>

原始的效果:
这里写图片描述

为什么?
参考上面的 当列大于12时的排列效果

修改后:

<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:yellow">Column 2</div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue">Column 3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:red">Column 4</div>
</div>

使用了clearfix visible-xs的类:
这里写图片描述

相当于隔绝的作用吧 看效果图的话

偏移列

col-sm-offset-2之类的

听名字就知道干嘛用了 就是偏移列嘛
老规矩 上代码和效果图 用处一目了然

 <div class="row">
  <div class="col-sm-5 col-md-6" style="background-color:yellow">第一列</div>
  <div class="col-sm-5 col-md-6 " style="background-color:red">第二列</div>
</div>

原始图:
这里写图片描述
看代码 当窗体大小为sm时 因为是5-5 所以不够填满窗体

修改一下:

<div class="row">
  <div class="col-sm-5 col-md-6" style="background-color:yellow">第一列</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 " style="background-color:red">第二列</div>
</div>

lg窗体时:
这里写图片描述

sm窗体时:
这里写图片描述

第二列向右偏移
虽然不是col-md-offset-0 而是col-sm-offset-2 但lg的时候还是能偏移2单位 由于超出窗体位置 自动下一行
这是因为前面讲过了 向前应用 不只适用于col还适用于偏移列

还有最后一个知识点啦
Push And Pull 更改列顺序

<div class="row">
  <div class="col-sm-4 col-sm-push-8">第一列</div>
  <div class="col-sm-8 col-sm-pull-4">第二列</div>
</div>

效果图:
这里写图片描述
知道作用了吧 就是交换两个列的顺序

最后总结:要是看不懂网上文档或者博客 最好的办法 就是自己敲一个Demo 或者粘贴复制Demo也行 然后直接看效果 这样反而吸收快

0

评论

博主关闭了所有页面的评论