day18 bootstrap,bootstrap栅格系统,bootstrap表格, bootstrap按钮-字体图标 bootstrap按钮-字体图标 bootstrap布局实例

UI框架

bootstrap是一堆css和js

什么是响应式布局？

不同大小的浏览器，所呈现的效果是不同的

[class*='col-'] 属性选择器

重点学习全局css样式

手机浏览器为了让没有做响应式处理的网页正常显示

做响应式布局或者手机布局一定要设置这个

疑问1:meta vp如何调试出来(问老师)

扫描二维码关注公众号，回复： 2885005 查看本文章

疑问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; /*外边距居中*/
			width: 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秒右边的练习项目可以作为学习内容

day18 bootstrap,bootstrap栅格系统,bootstrap表格, bootstrap按钮-字体图标 bootstrap按钮-字体图标 bootstrap布局实例

猜你喜欢