-----------2020-02-08--------------------------武汉加油中国加油!再过十四天一定会胜利的---------------------------------------------------------------------------------------------------------
1.Bootstrap简介
①cdn引入
直接去官网:https://getbootstrap.com 引入(顺序不要乱)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>
②响应式原理
(1)响应式所具有的特点:
1)网页的宽度自动调整。
2)尽量少用绝对宽度,用百分比。
3)字体用rem,em做为单位。
4)布局要使用浮动,弹性布局。
最重要的一点是:媒体查询。@media
媒体查询:根据一个或多个基于设备类型,具体特点和环境来应用响应式。
(2)媒体查询使用方法:
1)
@media all{
div{
fontr-size:3rem;
}
}
2)
<link rel = "stylesheet" href = "css/bootstrap.css" media = "all">
3)
@import url('css/bootstrap.css')(min-width:200px);
@media all and(min-width:400px){
div{
font-size:400px;
}
}
@规则
@chartest:定义编码
@import:css模块化
@font-face:自定义字体
@keyframe:animation里的关键帧
@media:媒体查询
(3)媒体类型
all //所有设备
print //打印机设备
screen //彩色的电脑屏幕
speech //听觉设备(针对有视力障碍的人,可以把内容阅读出来)
注意:tty,tv,projection,handle,braille,embossed,aural等几种类型在媒体查询4中已经废弃。
(4)媒体特性
width:min-width max-width
height:min-height max-height
orientation 方向:landscape 横屏(宽度大于高度),portrait 竖屏(高度大于宽度)
aspect-ratio宽度比
-webkit-device-pixel-ratio:像素比
举个栗子
//屏幕尺寸大于500时满足
@media(min-width:500px){
div{
background:green;
}
}
(5)逻辑运算符(用来做条件判断)
and 合并多个媒体查询(并且)
, 匹配某个媒体查询(或者)
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式(防范老旧浏览器)
举个栗子
@media all and(min-width:700) , (orientation:landscape){
div{
background:green;
}
}
//屏幕尺寸大于800满足
@media not all and(max-width:800px){}
//
@media only screen and (min-width:100px){}
(6)举个响应式栗子
<style>
body{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: green;
float: left;
border: 1px solid #000;
box-sizing: border-box;
}
/* 200px-400px 一行显示一个div */
@media all and (max-width:400px){
div{
width:100%;
}
}
/* 400-600px 一行显示两个div */
@media all and (min-width:400px){
div{
width: 50%;
}
}
/* 600px-- 一行显示3个div*/
@media all and (min-width:600px){
div{
width: 33.3%;
}
}
</style>
③栅格系统
(1)栅格系统基本格式
<!-- 栅格系统基本格式 -->
<!-- 100%的宽 -->
<div class="container-fluid">
<!--行 -->
<div class="row">
<!-- 列,一行分为12列 -->
<div class="col-xl-1">1</div>
<div class="col-xl-1">2</div>
<div class="col-xl-1">3</div>
<div class="col-xl-1">4</div>
<div class="col-xl-1">5</div>
<div class="col-xl-1">6</div>
<div class="col-xl-1">7</div>
<div class="col-xl-1">8</div>
<div class="col-xl-1">9</div>
<div class="col-xl-1">10</div>
<div class="col-xl-1">11</div>
<div class="col-xl-1">12</div>
</div>
</div>
<!-- 自己定义宽 -->
<div class="container">
</div>
(2)栅格系统的五个响应层
<div class="container">
<div class="row">
<div class="col-xl-1">xl为超大屏,屏幕宽度>=1200,容器的宽度固定为1140px,一行可以设置12个列。
屏幕尺寸小于1200的时候,一行只能设置一列
</div>
<div class="col-xl-1">6</div>
</div>
<div class="row mt-5">
<div class="col-lg-4">lg为大屏,屏幕宽度>=992px,容器的宽度固定为960px,一行可以设置12个列。屏幕尺寸小于
992的时候,一行只能设置1列。
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
<div class="row mt-5">
<div class="col-md-4">md为中等屏,屏幕宽度>=768px,容器的宽度固定为720px,一行可以设置12个列。屏幕尺寸小于
768的时候,一行只能设置1列。
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row mt-5">
<div class="col-sm-4">sm为小屏,屏幕宽度>576=px,容器的宽度固定为540px,一行可以设置12个列。屏幕尺寸小于
576的时候,一行只能设置1列。
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row mt-5">
<div class="col-4">col为超小屏,屏幕宽度小于576px,容器的宽度为auto,一行永远可以设置12个列。
</div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
</div>
当尺寸同时满足好几个的时候,应用最大的尺寸的规则。
<!-- 设置等宽列,平分宽度,通过.col的class去设置 -->
<div class="row mt-5">
<div class="col">等宽列</div>
<div class="col">等宽列</div>
</div>
<!-- 设置多行等宽列,在希望断开的地方添加一个.w-100的class,能够让后面的列换行 -->
<div class="row mt-5">
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="w-100" style="height: auto; border: none;"></div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
</div>
(3)
---------------------明天再更-------------------------------------------------