【笔记】Bootstrap4学习笔记

发表于 更新于 阅读次数：

前言

Bootstrap4学习笔记

引入依赖

1
2
3
4
5
6
7
8
9
10
11
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css">
</head>
<body>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js"></script>

</body>

屏幕尺寸的分割点

分割点（Breakpoint） 类名后缀 屏幕尺寸
最小 无类名后缀 <576px
小 sm >=576px
中等 md >=768px
大 lg >=992px
巨大 xl >=1200px

响应式容器

类名 最小 小 中等 大 最大
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

网格系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
  <div class="row">
    <div class="col col-sm col-md col-lg col-xl"></div>
    <div class="col col-sm col-md col-lg col-xl"></div>
    <div class="col col-sm col-md col-lg col-xl"></div>
    <div class="col col-sm col-sm col-lg col-xl"></div>
  </div>
  <div class="row">
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"></div>
    <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"></div>
    <div class="col-6 col-sm-6 col-sm-6 col-lg-6 col-xl-6"></div>
  </div>
</div>

不同屏幕尺寸的网格列

  • 等宽的列所有列会在同一行中平均分配
  • 指定宽的列，每行最多占用12个网格，超出会自动换行
列宽 最小 小 中等 大 最大
等宽 .col .col-sm .col-md .col-lg .col-xl
1 .col-1 .col-sm-1 .col-md-1 .col-lg-1 .col-xl-1
2 .col-2 .col-sm-2 .col-md-2 .col-lg-2 .col-xl-2
3 .col-3 .col-sm-3 .col-md-3 .col-lg-3 .col-xl-3
4 .col-4 .col-sm-4 .col-md-4 .col-lg-4 .col-xl-4
5 .col-5 .col-sm-5 .col-md-5 .col-lg-5 .col-xl-5
6 .col-6 .col-sm-6 .col-md-6 .col-lg-6 .col-xl-6
7 .col-7 .col-sm-7 .col-md-7 .col-lg-7 .col-xl-7
8 .col-8 .col-sm-8 .col-md-8 .col-lg-8 .col-xl-8
9 .col-9 .col-sm-9 .col-md-9 .col-lg-9 .col-xl-9
10 .col-10 .col-sm-10 .col-md-10 .col-lg-10 .col-xl-10
11 .col-11 .col-sm-11 .col-md-11 .col-lg-11 .col-xl-11
12 .col-12 .col-sm-12 .col-md-12 .col-lg-12 .col-xl-12

响应式工具类

可见性

.d-none：隐藏
.d-block：显示

1
2
3
4
5
6
<div class="container">
  <div class="row">
    <div class=".d-none .d-sm-none .d-md-none .d-lg-none .d-xl.none"></div>
    <div class=".d-block .d-sm-block .d-md-block .d-lg-block .d-xl-block"></div>
  </div>
</div>

不同屏幕尺寸的可见性

可见性 最小 小 中等 大 最大
隐藏 .d-none .d-sm-none .d-md-none .d-lg-none .d-xl-none
显示 .d-block .d-sm-block .d-md-block .d-lg-block .d-xl-block

组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css">
</head>
<body>

  <button type="button" class="btn btn-primary"></button>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js"></script>

</body>

完成