学习笔记

最新推荐文章于 2024-02-28 15:44:37 发布

xiaoying1223

最新推荐文章于 2024-02-28 15:44:37 发布

阅读量188

点赞数

分类专栏：学习笔记文章标签： bootstrap

本文链接：https://blog.csdn.net/xiaoying1223/article/details/113700391

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS
依赖jQuery，Popper.js,bootstrap自身插件

顺序要一致

注意：bootstrap.bundle.js包含了Popper，不包含jQuery

模板
<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<title>Hello, world!</title>

Hello, world!

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

响应式meta标签 Box-sizing 将属性值改为：

{
box-sizing: content-box —> border-box
}
Layout
Containers
源码

.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
在页面中.container不是占满全屏的

@media (min-width: 576px) {
.container {
max-width: 540px;
}
}

@media (min-width: 768px) {
.container {
max-width: 720px;
}
}

@media (min-width: 992px) {
.container {
max-width: 960px;
}
}

@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
媒体查询设置max-width的断点导致左右居中

应该有计算公式，后面再说

使用containe-fulid占满整个视窗

Z-index
以下组件都使用z-index

$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
栅格系统
原理：基于flex布局和媒体查询

官方代码片段

One of three columns

先说.row

.row {
//
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ /
display: -ms-flexbox; / IE 10 */
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
可以看出css实现的兼容；还有margin左右各取-15px,这里我理解为拉长.row元素自身的宽度，跟.container达成一致

再看下.col-sm

// 所有的columns类名的共有属性
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

@media (min-width: 576px) {

.col-sm {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}

}
先说第一个知识点，ming-height: 1px,这个东东有什么用的，简单的说，就是当.col-sm的元素不包含文本时，不会发生水平折叠的尴尬现象，这里我参考大佬的文章
放心，我不写flex属性：）

这里先说下5大layout，分别是extra small（<576px）,small（≥576px）,medium（≥768px）,large（≥992px）,extra large（≥1200px）。.col-sm适合除extra small之外的。

.no-gutter消除columns的padding以及.row的margin

.no-gutters {
margin-right: 0;
margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*=“col-”] {
padding-right: 0;
padding-left: 0;
}
等宽
.col适用于所有的layout

.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
这里注意max-width与flex-grow的结合占满viewport！

.w-100
.w-100 {
width: 100% !important;
}
小技巧，可以强制换行

Column

适应内容的宽度 .col-{breakpoint}-auto

.col-md-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
这一column的宽度是由内容撑开！