响应式布局（响应式网页的构成bootstrap框架）

一、响应式布局
1、概念
响应式又叫自适应网页，可以根据网页窗口的调整而自动布局，不会导致页面效果的错乱，主要是针对移动端浏览器；通过响应式布局，可以使一套代码同时兼容多个尺寸的屏幕

2、响应式网页的构成
1）允许网页自动调整
使用viewport属性，让窗口可以自动伸缩
语法：<meta name="viewport" content = "width=device-width,initial-scale=1,user-scalable=no">
-viewport是由苹果提出的，称之为视口，指浏览器一般适应屏幕的大小
-width：视口宽度，一般取值为device-width，也可以为尺寸值
-height：高度，取值为尺寸值
-initial-scal：初始状态下缩放倍率
-user-scalable：是否允许用户自己缩放，默认为yes2）不使用绝对宽度
所有元素的尺寸均使用百分比3）字体大小使用em
4）流式布局
布局用的各个区块的位置军事浮动的，不是固定不变的
5）媒体查询
根据不同尺寸加载不同的样式
格式：
@media screen and (max-width:1080px){样式规则
}6）图片使用自适应
图片不固定大小而设置百分比

bootstrap
是一个框架，响应式框架
优点：移动设备优先，所包含的样式，以移动设备优先考虑；响应式设计；开源；容易上手；包含强大的内置组件，易于实现各种效果

1、使用bootstrap1）添加viewport2）引入bootstrap的css文件3）引入jq的js文件4）移入bootstrap的js文件
2、全局css样式1）html5文档类型在bootstrap中使用了许多html5的新元素和css的新属性2）移动设备优先需要设置viewport3）全局样式使用html{font-family}来统一所有网页的默认字体使用body{margin:0}移除所有网页的外边距基本上为所有的元素都重新设置了基础样式4）布局容器通过.container类定义一个固定宽的并且支持响应时的布局容器.container-fluid:用于充满氟元素的布局容器
3、按钮在bootstrap中=定义了许多预定好的按钮样式，这些样式可以在a/button/input元素上使用4、图片1）图片形状-img-rounded 带圆角的图片-img-circle 圆形图片-img-thumbnail 带灰色边框和内边距的图片2）响应式图片通过.img-responsive将图片设置响应式，使图片能够很好的充满父元素5、表格1）表格样式.table 上边边框.table-striped 在tbody内天井斑马线形式条纹.table-bordered 为所有单元格添加边框.table-hover  为表格添加悬停效果2）tr、th、td.active  将悬停的颜色应用到行或单元格上.success 成功.warning 警告.danger  危险3）响应式表格通过把table放在任意.table-responsive元素内，可以实现表格的响应式

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale = 1">       <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="jquery-3.1.1.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script><style>.img-rounded,.img-circle,.img-thumbnail{width: 200px;height: 200px;}.d1{width: 200px;}</style>
</head>
<body><a href="">qwedwqs</a><div class="container"><h1>123123</h1></div><div class="container-fluid">1</div><!-- 按钮 --><input type="button" class="btn" value="基本按钮"><input type="button" class="btn-default" value="默认样式"><input type="button" class="btn-success btn" value="成功"><input type="button" class="btn-info btn" value="弹出信息提示"><input type="button" class="btn-warning btn" value="警告按钮"><input type="button" class="btn-danger btn" value="危险操作"><input type="button" class="btn btn-lg" value="大按钮"><input type="button" class="btn-sm btn" value="小按钮"><input type="button" class="btn btn-xs" value="超级小按钮"><input type="button" class="btn btn-block" value="块级按钮"><!-- 图片 --><img src="10.jpeg" alt="" class="img-rounded"><img src="11.jpeg" alt="" class="img-circle"><img src="12.jpeg" alt="" class="img-thumbnail"><div class="d1"><img src="13.jpeg" alt="" class="img-responsive"></div><!-- 表格 --><table class="table table-striped table-bordered table-hover"><tr class="active"><td class="success">1</td><td>1</td></tr><tr><td class="warning">1</td><td>1</td></tr><tr><td>3</td><td class="danger">3</td></tr></table><!-- 响应式表格 --><div class="table-responsive"><table class="table"><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr></table></div>
</body>
</html>

响应式布局（响应式网页的构成bootstrap框架）相关推荐

css-适配布局类型-流式布局-响应式布局
制作手机界面时,一般按照2倍的大小去做. 如果设备的宽度大于显示的宽度,可以做一个适配流体布局来个例子,体验代码 PC端可适配移动端电脑,与移动端都可正常显示假设,给每一个a标签加上了边框 ...
各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。
各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 下载链接各种风格404错误页面html模板源码3 ...
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码 ...
各种风格简洁单页响应式html5模板_简洁响应式单页跳转设计案例源码340多套订餐企业模板高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
各种风格简洁单页响应式html5模板_简洁响应式单页跳转设计案例源码340多套订餐企业模板高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
2.4移动Web网页开发——响应式布局（含媒体查询和bootstrap）
响应式布局适合用于企业网站和非常非常小的布局,不适合电商网站(PC.移动分开做) 媒体查询视口宽度变化@media(max-width: 768px){} @media(max-width: 76 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
到底什么是响应式布局,响应式布局如何去写
即第一个问题--如何解决浏览器的兼容性被我们处理了之后,我们开始学习,如何解决响应式布局,到底什么是响应式布局其实响应式布局.说的通俗点,就是浏览你写的网站或者说页面的容器不同,大小不同,有人用手机 ...
[响应式布局]响应式布局技巧
##一理解几种布局的概念 ###1.静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分: 意思就是不管浏 ...
php响应式布局,响应式布局之弹性布局的介绍
响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力.就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局. 弹 ...

响应式布局（响应式网页的构成bootstrap框架）

响应式布局（响应式网页的构成bootstrap框架）相关推荐

最新文章

热门文章