快速上手Bootstrap 第二部分 Bootstrap布局（重要）

文章目录

快速上手Bootstrap 第二部分 Bootstrap布局（重要）
2. Bootstrap布局
总结

2. Bootstrap布局

食用文档

2.1 布局容器

2.1.1 container类

2.1.2 container-fluid类

2.2 栅格系统

它指的就是将页面划分成等宽的列,通过列数来实现模块化页面布局,最多分为12列

行(row)必须要放到container布局容器里面,行是列的包装器。
要想实现列的平均划分,需要给列添加类前缀
列最多12,如果大于12,多余的列会被当做一个新的整体另起一行,如果小于12那么一行就占不满
可以同时给一个列指定多个类前缀,用于划分不同份数

      <div class="row">
          <div class="col-md-4" style="background-color: pink; height: 50px;"></div>
          <div class="col-md-4" style="background-color: red; height: 50px;"></div>
          <div class="col-md-4" style="background-color: yellowgreen; height: 50px;"></div>
      </div>
      <hr>
      <div class="row">
          <div class="col-md-3" style="background-color: pink; height: 50px;"></div>
          <div class="col-md-3" style="background-color: red; height: 50px;"></div>
          <div class="col-md-3" style="background-color: yellowgreen; height: 50px;"></div>
      </div>
      <hr>
      <div class="row">
          <div class="col-md-6" style="background-color: pink; height: 50px;"></div>
          <div class="col-md-4" style="background-color: red; height: 50px;"></div>
          <div class="col-md-4" style="background-color: yellowgreen; height: 50px;"></div>
      </div>
  </div>```

2.2.1 列嵌套

列嵌套: 在栅格系统中可以将内容再次嵌套,就是在一个列中再次分成若干份小列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本使用</title>
    <link rel="stylesheet" href="./bootstrap//css//bootstrap.min.css">
    <style>
        [class^=col]{
            border: 1px solid rgb(0, 0, 0);
        }
        .box{
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 容器 -->
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 box" >
              <!-- 类嵌套 -->
                <div class="row">
                    <div class="col-lg-6">1.1</div>
                    <div class="col-lg-6">1.2</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 box" >2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 box" >3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 box" >4</div>
        </div>
    </div>
</body>
</html>

2.2.2 列偏移

列偏移: 不想要相邻的列紧靠在一起,可以使用类将列向右移动.offset-md-*(*号表示移动的列数),这些类逐列增加一列的左边距

<div class="container">
        <div class="row">
            <div class="col-lg-4">左</div>
            <div class="col-lg-4 offset-md-4">右</div>
        </div>
   </div>

2.2.3 列排序

列排序: 其实就是改变列左右浮动,并且设置浮动的距离,往前使用pull,往后push,

通过添加类名col-md-push-*和col-md-pull-*(*表示移动的列数)

    <div class="container">
        <div class="row">
            <div class="col-lg-4">左</div>
            <div class="col-lg-8">右</div>
        </div>
        <div class="row" style="margin-top: 20px;">
            <div class="col-lg-4 col-md-push-8">左</div>
            <div class="col-lg-8 col-md-pull-4">右</div>
        </div>
    </div>

2.3 响应式工具

    <div class="container">
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3">2</div>
            <div class="col-md-3 hidden-sm hidden-xs">在小屏的时候会隐藏</div>
            <div class="col-md-3">4</div>
        </div>
    </div>