bootstrap0

媒体查询

@media (max-width: 1380px) {
    .title {
        padding: 0;
    }
}
//在页面宽度的最大值小于1380px时 去掉title的padding值

对于某个元素内i标签元素的hover 如果主元素与i元素同时hover切换颜色 在设置i的hover时不能直接.i:hover {} 而要设置 .主元素:hover i{} 这样在鼠标到主元素是i才会同主元素一起变化

container-fluid流动布局
col-lg-?列占比
d-inline-block行级块 给需要转换为行级块的每一个元素添加
text-center水平居中
font-weight加粗
transition过渡 transition:color .2s linear;
align-items-center
justify-content-center居中 块内居中
row行
image-fluid图片响应
img-b图片不能铺满去15px
left top 按百分比定位 先放到 left top 为0 再调整
边框的过渡动画borderanimate transition width
offset-lg-1 设置margin-left
ul中的 li 设置成一行 list-inline去点 在ul 上设置 linst-inline-item 给每一个li元素设置 使他们在一行显示
文字旁边的线条可以用 border 设置一条线 不一定要用icon或者特殊字符 容易和文字对不齐
px-?左右padding
py-?上下padding
line-height设置行高 可以控制文字旁线条的大小 与字号大小一致即可
当元素之间距离过大 margin：-？px;通过负值缩小距离
图片配文字 bootstrap 中的card元素
相对定位的元素可以margin
col-lg-4 col-xl-4 col-md-4
d-block
m-auto

媒体查询
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认为1.0）
minimum-scale：允许用户缩放到的最小比例（默认为1.0）
maximum-scale：允许用户缩放到的最大比例（默认为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
大型设备 ≥1200px class名 .col-lg 台式机
中型设备 ≥992px class名 .col-md 笔记本
小型设备 ≥768px class名 .col-sm 平板
超小设备 ＜768px class名 .col-xs 手机

如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

大于 300 像素时

@media screen and (min-width:300px){
	body{
		background:orange;
	}
}

混用
当页面宽度大于960px小于1200px的时候执行下面的CSS

@media screen and (min-width:960px) and (max-width:1200px){
	body{
		background:yellow;
	}
}

Bootstrap网格的基本结构

<div class="container-fluid">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

-fluid 流动布局 width:100%;

row 行
col 列 col-?-num num最大值12占比100%
col-?-1 8.3%
col-?-2 16.6%
col-?-3 25%
col-?-4 33.3%
col-?-5 41.6%
col-?-6 50%
col-?-7 58.3%
col-?-8 66.6%
col-?-9 75%
col-?-10 83.3%
col-?-11 91.6%
col-?-12 100%

py-num mum:0~5 padding-top & padding-bottom
padding数值
-0 0rem
-1 0.25rem
-2 0.5rem
-3 1rem
-4 1.5rem
-5 3rem
px padding-left & padding-right
pl padding-left
pr paddinf-right
pt padding-top
pb padding-bottom
p-num padding

m-num num(0~5)
-0 0rem
-1 0.25rem
-2 0.5rem
-3 1rem
-4 1.5rem
-5 3rem
m-num margin
my margin-top & margin-buttom
mx magin-left & margin-buttom
ml margin-left
mr margin-right
mt margin-top
mb margin-buttom