文章目录
响应式布局
简言之，就是一个网站能够兼容多个终端，在新建网站上普遍采用响应式开发
响应式原理
媒体查询
/*
* 响应式容器：
* 1、在超小屏设备的时候 768px以下 当前容器的宽度100% 背景lightskyblue
* 2、在小屏设备的时候 768px~992px 当前容器的宽度750px 背景blueviolet
* 3、在中屏设备的时候 992px~1200px 当前容器的宽度为970px 背景yellowgreen
* 4、在大屏设备的时候 1200px以上 当前容器的宽度为1170px 背景#4e6ef2
*
* */
/*使用媒体查询能针对不同屏幕区间设置不同的布局和样式*/
/*怎么使用媒体查询：关于媒体查询@media */
/*语法： @media screen and (min-width: 768px) and (max-width: 992px) {属性样式}*/
div{
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
/*1、在超小屏设备的时候 768px以下 当前容器的宽度100% 背景lightskyblue*/
div{
width: 100%;
background-color: lightskyblue;
}
}
Bootstrap
Bootstrap中文文档
基本模板
<!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明 en 英文 zh-CN 中文简体 zh-tw 中文繁体-->
<html lang="zh-CN">
<head>
<!--文档编码申明-->
<meta charset="utf-8">
<!--要求当前网页使用浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备宽度一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--上述三个meta标签必须放在最前面，其他任何内容必须紧随其后 按解析顺序-->
<!--优先加载浏览器解释-->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap核心样式-->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- html5shiv和respond分别用来解决IE8版本浏览器不支持H5标签和媒体查询的 不兼容问题-->
<!--警告：不能以file形式打开，本地打开。最好http://打开，因为respond.js的底层是ajax，用file会出现问题，ajax在部分浏览器下不能跨域-->
<!--[在IE 9以下引入]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
此间少年，此生尽兴便可！
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
响应式布局容器：.container
流式布局容器： .container-fluid
normalize和reset
都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素（如ul: reset.css list-style:none;）
栅格系统
栅格系统：行(row)和列(col)的布局，网格状布局
<!--响应式布局容器-->
<div class="container">
<!--栅格系统：其实就是行和列的布局，网格状布局-->
<!--行：row-->
<!--.container容器默认有15px的左右内边距 .row填充父容器15px的左右内边距 margin-left,margin-right:-15px-->
<div class="row"></div>
<div class="myRow"></div>
</div>
<!--响应式布局容器-->
<div class="container">
<!--栅格系统：其实就是行和列的布局，网格状布局-->
<!--行：row-->
<!--.container容器默认有15px的左右内边距 .row填充父容器15px的左右内边距 margin-left,margin-right:-15px-->
<div class="row">
<!--列：col-*-* *不确定（参数）-->
<!--col：列样式
第一个*：屏幕的大小
大屏设备 lg 大屏及以上生效
中屏设备 md 中屏及以上生效
小屏设备 sm 小屏及以上生效
超小屏设备 xs 超小屏及以上生效
第二个*：占多少份，每一行默认分成12等份
-->
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<!--<div class="myRow"></div>-->
</div>
响应式栅格系统
<!--需求：
大屏设备 让div平均分成6份
中屏设备 让div平均分成4份
小屏设备 让div平均分成3份
超小屏设备 让div平均分成2份
-->
<!--响应式布局容器-->
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
</div>
</div>
扫描二维码关注公众号，回复：
13398675 查看本文章
栅格系统的扩展（嵌套、偏移offset、排序pull,push）
<div class="container">
<div class="row">
<!--栅格嵌套-->
<div class="col-lg-4 col-md-4">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<!--列的偏移-->
<div class="col-lg-4 col-md-4">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6 col-xs-offset-3"></div>
</div>
</div>
<!--列的排序-->
<!--push:往后推-->
<!--pull:往前拉-->
<div class="col-lg-4 col-md-4">
<div class="row">
<div class="col-xs-3 col-xs-push-9">col-xs-3</div>
<div class="col-xs-9 col-xs-pull-3">col-xs-9</div>
</div>
</div>
</div>
</div>
内容的显示和隐藏(visible、hidden)
<!--
大屏设备 显示
中屏设备 隐藏
小屏设备 显示
超小屏设备 隐藏
visible-lg 大屏显示其他隐藏，md,sm,xs同理
3.2版本之后建议使用hidden
hidden-lg
-->
<div class="hidden-md hidden-xs">内容</div>
<div class="visible-lg visible-sm">内容</div>
writing-mode复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*writing-mode的语法：*/
/*writing-mode：horizontal-tb | vertical-rl | vertical-lr*/
/*默认值：horizontal-tb*/
html,body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #000;
}
.lyrics{
margin-top: 20px;
text-shadow: 0px 1px 1px #333;
writing-mode: vertical-rl;
font-family: 华文行楷;
font-weight: 700;
}
.lyrics h1{
padding:100px 30px;
color: #4e6ef2;
}
.lyrics p:not(.author){
line-height: 0px;
letter-spacing: 5px;
color: #4e6ef2;
font-size: 20px;
}
.author{
text-align: right;
color: lightskyblue;
font-size: 20px;
}
strong{
font-size: 30px;
}
</style>
</head>
<body>
<div class="lyrics">
<h1>鱼遇</h1>
<p>“你说她从故事里脱身了吗?”</p><br>
<p>她也许本就不曾等什么,只是听闻的人多了情,平白为此失魂落魄</p><br>
<p>别再去猜测爱恨的去处, 这是缅怀与遗憾的罪证,</p><br>
<p>偏偏戴罪之人最爱说谎, 两两相忘不过易事一桩!</p><br>
<p class="author">——依旧在雨中 <strong>等</strong>你</p>
</div>
</body>
<html>
