day18 bootstrap,bootstrap栅格系统,bootstrap表格, bootstrap按钮-字体图标 bootstrap按钮-字体图标 bootstrap布局实例
UI框架
bootstrap是一堆css和js
什么是响应式布局？
不同大小的浏览器，所呈现的效果是不同的
[class*='col-'] 属性选择器
重点学习全局css样式
手机浏览器为了让没有做响应式处理的网页正常显示
做响应式布局或者手机布局一定要设置这个
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-sacle=1.0,minimum-scale=1.0">
疑问1:meta vp如何调试出来(问老师)
疑问2:自己进行手机屏幕调整的练习
了解媒体查询的相关用法
在屏幕分辨率不同的情况下 屏幕会自动调整大小
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-sacle=1.0,minimum-scale=1.0"> <!-- 不加这句手机会缩放980 -->
<title>媒体查询</title>
<style>
body{
margin: 0;
}
.container{
margin: 0 auto; /*外边距居中*/
100%;
height: 400px;
text-align: center;
background: pink
}
@media
</style>
</head>
<body>
<div class="container">
<h1>媒体查询</h1>
</div>
</body>
</html>
视口存在的目的是让手机浏览器不缩放
4.布局
4.1栅格系统
多种不同的屏幕状态
xs和md
5.组件
6.插件
把父元素分成12份 col-md-4 col-md-offset-4
可以练习第二个视频30:18秒右边的练习项目可以作为学习内容