bootstrap3,4对比(速度过)之网格系统

网格系统

v3:

v4:

https://v4.bootcss.com/docs/4.0/layout/grid/

container和container-fluid（v3,v4相同）

• container两边有一定的margin
• container-fluid占满横向全屏，无两侧margin
• 行用row，列col
• 一行共12份

 <div class="container">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;">div>
        <div class="col-lg-4" style="background-color: red;">div>
        <div class="col-lg-4" style="background-color: #09afff;">div>
    div>
  div>

 <div class="container-fluid">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;">div>
        <div class="col-lg-4" style="background-color: red;">div>
        <div class="col-lg-4" style="background-color: #09afff;">div>
    div>
  div>

container的不同之处

v3container由分成四段：

v4container由分成五段：

V4中可直接使用class="col-n"和class=“col”

• 在v3中只能使用col-md(lg,sm,xs)-n，实测显示在v3中使用class="col-n"和class=“col”，每个col分别占一行
• 在v4中假设使用col-4,则3个col-4占一行
• 在v4中假设使用col,则不管多少个，就算超出12份，所有的col都占一行，且均分

请看代码：（v4）

<container>
  <div class="row">
    <div class="col-4" style="background-color: red;">div>
    <div class="col-4" style="background-color: blue;">div>
    <div class="col-4" style="background-color: yellow;">div>
    <div class="col-4" style="background-color: yellow;">div>
    <div class="col-4" style="background-color: green;">div>
    <div class="col-4" style="background-color: red;">div>
  div>
container>

效果:

<container>
  <div class="row">
    <div class="col" style="background-color: red;">div>
    <div class="col" style="background-color: blue;">div>
    <div class="col" style="background-color: yellow;">div>
    <div class="col" style="background-color: yellow;">div>
    <div class="col" style="background-color: green;">div>
    <div class="col" style="background-color: red;">div>
  div>
container>

效果：

• 如果想要换行，可以加一个类 .w-100,意思是width:100%;

<container>
  <div class="row">
    <div class="col" style="background-color: red;">div>
    <div class="col" style="background-color: blue;">div>
    <div class="col" style="background-color: yellow;">div>
    <div class="col" style="background-color: yellow;">div>
    <div class="w-100" style="background-color: green;">div>
    <div class="col" style="background-color: red;">div>
  div>
container>

• 根据内容多少改变列的宽度col-auto

  <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3" style="background-color: #09afff;">div>
      <div class="col-lg-auto mr-auto" style="background-color: red;">1111111111111div>
      <div class="col-lg-3" style="background-color: #09afff;">div>
    div>

v4中的对齐方式（类似flex布局）

垂直对齐

• 想让里面的列改变垂直对齐的方式,给父元素添加一个叫align-item-***的类
• align-item-start(上对齐)align-item-center(中间对齐)align-item-end(下对齐)
• 某列想要改变自己的对齐方式，align-self-***

  <div class="row align-items-end" style="height:100px;border:1px solid red;">
      <div class="col align-self-center" style="background-color: #09afff;">div>
      <div class="col" style="background-color: red;">div>
      <div class="col" style="background-color: #09afff;">div>
    div>

水平对齐

• 想让里面的列改变垂直对齐的方式,给父元素添加一个叫justify-content-***的类
• justify-content-start(左对齐)justify-content-center(中间对齐)justify-content-end(右对齐)justify-content-around(每个元素两端均匀分布)justify-content-between(两端对齐，中间均匀分布)

 <div class="row justify-content-end" style="height:100px;border:1px solid red;">
      <div class="col-md-3" style="background-color: #09afff;">div>
      <div class="col-md-3 " style="background-color: red;">div>
      <div class="col-md-3" style="background-color: #09afff;">div>
    div>

没有排水沟？？

• 给.row添加no-gutters,去除col两端默认的15px的padding

 <div class="row justify-content-end no-gutters" style="height:100px;border:1px solid red;">
      <div class="col-md-3" style="background-color: #09afff;">div>
      <div class="col-md-3 " style="background-color: red;">div>
      <div class="col-md-3" style="background-color: #09afff;">div>
    div>

排序

• order-n(默认为0，数值越大，越靠右)
• order-first放在最左
• order-last放最右

<div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3" style="background-color: #1c7430;">div>
      <div class="col-lg-auto order-1" style="background-color: red;">1111111111111div>
      <div class="col-lg-3 order-first" style="background-color: #09afff;">div>
    div>

列偏移

v3:

• col-md-push-n向右偏移
• col-lg-pull-n向左偏移
• 可以覆盖冲突的部分

  <div class="container">
    <div class="row">
      <div class="row align-items-end" style="height:100px;border:1px solid red;">
        
        <div class="col-lg-3 col-lg-push-1 align-self-center" style="background-color: #09afff;">div>
        <div class="col-lg-3 col-lg-pull-1" style="background-color: red;">div>
        <div class="col-lg-3" style="background-color: #09afff;">div>
      div>
    div>
  div>

v4:

• offset-n向右偏移
• mr-auto 加此类的元素右侧全部右靠齐
• ml-auto 加此类的元素右侧全部左靠齐

    <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3 mr-auto  offset-1" style="background-color: #1c7430;">div>
      <div class="col-lg-auto" style="background-color: red;">1111111111111div>
      <div class="col-lg-3" style="background-color: #09afff;">div>
    div>

嵌套（v4v3相同）

    <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-4" style="background-color: #1c7430;">div>
      <div class="col-lg-4">
        <div class="row">
        <div class="col-lg-6" style="background-color: #09afff;">div>
        <div class="col-lg-6" style="background-color: yellow;">div>
      div>
      div>
      <div class="col-lg-4" style="background-color: #09afff;">div>
    div>