bootstrap 4总结

navbar-dark bg-light

实际改变只是text-color，脑回路是这样子的：既然navbar主题是dark，那么相应的text一定是light的。所以如果navbar-light bg-light的话，就全看不见了。

flex

• justify-content是对main axis，align是对cross axis
• 如果默认的flex方向，main axis就是x轴，从左到右，cross axis是y轴，从上到下
• 如果设置flex-column，main axis就是y轴，从上到下，cross axis是x轴，从左到右

class的属性不要堆着写

写完row，再分col，再往col里面填东西，如果col-4 card写在一个class里，那么所有东西都会被stretch到整个col-4

   <section id="gallery" class="container">
        <div class="row">
            <div class="col-4">
                <div class="card">
                    <img class="card-img-top" src="imgs/pattern1.jpeg"></img>
                    <div class="card-body">
                        <h5 class="card-title">Picture1</h5>
                        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type a</p>
                        <a class="btn btn-outline-success btn-sm" href="#">click me</a>
                        <a class="btn btn-outline-danger btn-sm" href="#"><i class="fas fa-heart"></i></a>
                    </div>
                </div>
            </div>

        </div>
    </section>

区分justify align-center和text-center

• justify align是把容器，比如整个column或者div center
• 不管你正常的几个div怎么排列，加了d-flex，就会强制排成一行（即使正常下h1 p是自动在两行的，flex也会给你强制变成在一行的，横着排列的h1 p）；加了d-flex和flex-column，就会强制排成一列。
• text-center是对容器里的文字center

inline block inline-block的区别

https://blog.csdn.net/xuanwugang/article/details/80254401

设置为inline或inline-block，就是相当于变成行内元素。

如果要行内元素居中，主要是设置父元素text-center。
https://jingyan.baidu.com/article/e2284b2b67b5f1e2e6118d22.html

两个选择器紧挨在一起表示同时具有

三个的区别是：
规则 .ul.item 匹配 class 属性同时含有 ul 和 item 的元素；
规则 .ul .item 匹配 class 属性包含 ul 的元素中 任意的 class 属性包含 item 的元素（二者是祖先元素与后代元素的关系）；
规则 .ul > .item 匹配 class 属性包含 ul 的元素的子元素中 class 属性包含 item 的元素（二者是父元素与子元素的关系，在相邻的层