-
<meta name = "viewport" content = "width = device - width,initial-scale =1.0">缩放=1.0
查看全部 -
ie8y引入respond.js
查看全部 -
css,js,fonts
查看全部 -
<link type = "text/css" rel = "stylesheet" href = "link.css" media="only screen and (max-width:480px)"/>
@media screen and (min-with:480px){
body{background:blue;}
}
查看全部 -
media query
查看全部 -
外部样式引用格式
<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:500px)"/>
内部引用格式
@media screen and (max-width:500px) {body{background:red}}
查看全部 -
实现响应式布局的三种方法
查看全部 -
响应式布局设计是为了解决不同设备的显示兼容问题，遵循移动端优先，渐进的原则。有三种响应式布局设计的方法：css，js，第三方框架bootstrap实现。查看全部
-
css3-Media Query
常见的属性：
device-width,device-height---屏幕宽高
width,height---渲染窗口宽高
orientation---设备方向
resolution----设备分辨率
查看全部 -
Response.js必须放在web service 中查看全部
-
外链式： media="only screen and (max-width:480px)"//宽度<480px
内嵌式：
@media screen and (mix-width:480px){ }//宽度>480px查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 页面按原比例显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--引入样式-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--兼容浏览器-->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-inverse" role="navigation">
<!--给导航添加居中效果-->
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">响应式导航</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!--添加居中-->
<div class="container">
<!--添加栅格布局的外围容器 row-->
<div class="row">
<!--左侧布局-->
<div class="col-sm-9">
<!--页面极小的时候显示按钮-->
<p class="pull-right visible-xs">
<button class="btn-xs btn btn-primary">Toggle</button>
</p>
<div class="jumbotron">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
</div>
<!--左侧下方布局也设置为栅格布局-->
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一个响应式的、移动设备优先的、 不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一个响应式的、移动设备优先的、 不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一个响应式的、移动设备优先的、 不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一个响应式的、移动设备优先的、 不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一个响应式的、移动设备优先的、 不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一个响应式的、移动设备优先的、 不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
</p>
<a class="btn btn-default">View Detail</a>
</div>
</div>
</div>
<!--右侧布局-->
<div class="col-sm-3">
<ul class="list-group">
<li class="list-group-item">AAAAAAAAAAA</li>
<li class="list-group-item">BBBBBBBB</li>
<li class="list-group-item">CCCCCCCCCCCC</li>
<li class="list-group-item">DDDDDDDDDDD</li>
<li class="list-group-item">FFFFFFFFF</li>
</ul>
</div>
</div>
</div>
</body>
</html>
查看全部 -
<div class="container"/> </div>某个元素居中
查看全部 -
css3-Media Query
device-width,device-height 屏幕宽高
width,height 渲染窗口宽高
orientation 设备方面
resolution 设备分辨率
查看全部 -
刚觉bootstrp讲的有点应付查看全部
举报