-
Bootstrap的响应式布局----自适应手机、平板和电脑PC端
2019-01-18 00:09:41通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验,屏幕尺寸不一样展示给用户的网页内容也不一样,我们利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的...在移动终端设备起来越多的今天,如果要针对做所有屏幕去适配开发成本太大。通过响应式开发使得一个网站能够兼容多种终端。 通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验,屏幕尺寸不一样展示给用户的网页内容也不一样,我们利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。
响应式开发的原理:媒体查询
媒体查询,查询到当前屏幕(媒介媒体)的宽度,针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。简单说,你可以设置 不同屏幕下面的不同的样式,达到适配不同的屏幕的目的。
实现方式:通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕 (移动设备) w<768px
小屏设备 768px-992px 768 <= w <992
中等屏幕 992px-1200px 992 =< w <1200
宽屏设备 1200px以上 w>=1200
CSS 语法:@media mediatype and|not|only (media feature) { CSS-Code; }
值 描述 device-height 定义输出设备的屏幕可见高度 device-width 定义输出设备的屏幕可见宽度 max-device-height 定义输出设备的屏幕可见的最大高度 max-device-width 定义输出设备的屏幕最大可见宽度 min-device-width 定义输出设备的屏幕最小可见宽度 min-device-height 定义输出设备的屏幕的最小可见高度 max-height 定义输出设备中的页面最大可见区域高度 max-width 定义输出设备中的页面最大可见区域宽度 min-height 定义输出设备中的页面最小可见区域高度 min-width 定义输出设备中的页面最小可见区域宽度 简单举例:控制不同屏幕尺寸下的屏幕背景色
<style> .container{ width:1200px; margin: 0 auto; height:1200px; background-color: red; } /*媒体查询:注意and后面空格的添加*/ /*iphone: w < 768px*/ @media screen and (max-width: 768px){ .container{ width:100%; background-color: green; } } /*pad: w >= 768 && w< 992*/ @media screen and (max-width: 992px) and (min-width: 768px) { .container{ width:750px; background-color: blue; } } /*中等屏幕 w >= 992 && w<1200*/ @media screen and (max-width: 1200px) and (min-width: 992px) { .container{ width:970px; background-color: pink; } } </style>
-
Bootstrap响应式布局原理
2017-04-05 11:40:50Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:...Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。栅格系统的工作原理:
1.行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(aligment
)和内补(padding)。
2.通过行(row)在水平方向创建一组列(column)。
3.自己内容应当放置于列(column)内,并且,只有列可以作为行(row)的直接子元素。
4.类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。
5.通过为列设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding。
6.栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。
7.如果一行(row)中包含了的列(column)大于12,多余的列所在的元素将作为一个整体另起一行排列。
8.栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕覆盖栅格类。
如下图所示为栅格系统在多种屏幕上的应用说明。使用Bootstrap响应式布局
首先需要在head中引入meta标签,添加viewpirt属性,content中宽度等于设备宽度, initial-scale:页面首次被显示可见区域的缩放级别,取值1则页面按实际尺寸显示,无任何缩放;
maximum-scale:允许用户缩放到的最小比例;
user-scalable:用户是否可以手动缩放。代码如下:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
下面为使用bootstrap布局的页面(登录表单界面),针对的是手机超小屏幕(iphone5s)和PC屏幕(>=1200px)。col-xs-12:小屏幕占12列大小,col-lg-5:大屏幕占5列大小,col-lg-offset-3:大屏幕缩进3列大小。这是一个比较简单的实例,想要适应其他屏幕如平板可添加col-md-* 属性,大屏手机可添加col-sm-*属性。具体的屏幕使用哪个属性,可参考上面图上的针对不同屏幕Bootstrap栅格系统的不同使用。
<div class="container-fluid login"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3"> <form class="form-horizontal loginForm"> <h3 class="form-signin-heading">用户登录</h3> <div class="form-group"> <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label> <div class="col-sm-8 col-xs-8"> <input type="text" class="form-control" name="email" placeholder="请输入邮箱"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label> <div class="col-sm-8 col-xs-8"> <input type="password" class="form-control" name="password" placeholder="请输入密码"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-4 col-xs-4 "> <div class="checkbox"> <label> <input type="checkbox">记住我 </label> </div> </div> <div class="col-sm-4 col-xs-4 control-label" > <a href="resetPwd.html" id="forget">忘记密码?</a> </div> </div> <div class="form-group"> <div class="col-sm-12 col-lg-12"> <button type="button" class="btn btn-primary btn-block" id="submit">登录</button> </div> </div> </form> </div> </div>
代码效果图:
PC端:
手机端: -
Bootstrap房产销售企业网站响应式html静态模板_如何做响应式布局
2020-12-04 16:01:16Bootstrap房产销售企业网站响应式html静态模板 -
Bootstrap-03-响应式布局
2021-03-01 13:09:57所谓响应式布局:为了保证不同分辨率的终端的正常布局——一个网站能够兼容多个终端(不是为每个终端做一个特定的版本)旨在为不同终端的用户提供更加舒适的界面和更好的用户体验 bootstrap的响应式布局-例子 ...Bootstrap的响应式布局原理
什么是响应式布局
所谓响应式布局:为了保证不同分辨率的终端的正常布局——一个网站能够兼容多个终端(不是为每个终端做一个特定的版本)旨在为不同终端的用户提供更加舒适的界面和更好的用户体验
bootstrap的响应式布局-例子
bootstrap针对不同设备的分辨率设置不同的阈值,xs、sm、md、lg
同样的内容对于笔记本这样的设备,以及在小屏幕上会有不一样的效果
比如以下的html:<div class="container"> <div class="row"> <div class="col-md-3" style="background-color: seagreen;">3</div> <div class="col-md-3" style="background-color: sienna;">3</div> <div class="col-md-3" style="background-color: slateblue;">3</div> <div class="col-md-3" style="background-color: steelblue;">3</div> </div> </div>
笔记本界面:
iphonex
在bootstrap中,在html中为多种尺寸的屏幕设置样式,在配合bootstrap提供的媒体查询,能够轻松地实现响应式布局<div class="container"> <div class="row"> <div class="col-md-3 col-xs-6" style="background-color: seagreen;">3</div> <div class="col-md-3 col-xs-6" style="background-color: sienna;">3</div> <div class="col-md-3 col-xs-6" style="background-color: slateblue;">3</div> <div class="col-md-3 col-xs-6" style="background-color: steelblue;">3</div> </div> </div>
-
bootstrap响应式页面源码_HTML+CSS实现响应式布局页面,响应式布局入门教程
2021-01-18 12:59:481 什么是响应式布局?响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面,...微信公众号:AlbertYang
关注我更多精彩等你来发现!1 什么是响应式布局?
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面,手机端再开发一套页面。但是这样做非常麻烦,随着不同的终端越来越多,你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念,简而言之,就是一个网站能够兼容多个终端。
开发方式 移动web开发+PC开发 响应式开发 应用场景 一般在已经有PC端的网站,开发移动站的时候,只需单独开发移动端。 针对新建站的一些网站,现在要求适配移动端,所以就一套页面兼容各种终端,灵活。 开发 针对性强,开发效率高。 兼容各种终端,效率低, 适配 只适配 移动设备,pad上体验相对较差。 可以适配各种终端 效率 代码简洁,加载快。 代码相对复杂,加载慢。 响应式开发与移动端与PC端分别开发的区别:响应式开发只编写一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。移动端与PC端分别开发,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机, 从而请求服务器,返回不同的页面。
2 响应式开发的原理?
响应式开发的原理是使用CSS3中的Media Query(媒体查询)针对不同宽度的设备设置不同的布局和样式,从而适配不同的设备。
CSS3 @media 查询定义和使用:
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。
@media screen and (max-width: 300px) { body { background-color: red; }}
设备的划分情况为:
小于768的为超小屏幕(手机)
768~992之间的为小屏设备(平板)
992~1200的中等屏幕(桌面显示器)
大于1200的宽屏设备(大桌面显示器)
但是我们也可以根据实际情况自己定义划分情况。
3 响应式页面开发
3.1 视频
3.2 HTML
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式页面入门教程:Albert Yangtitle> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">head><body> <header> <a href="#" class="logo">AlbertYanga> <ul class="navigation"> <li><a href="#">首页a>li> <li><a href="#">博客a>li> <li><a href="#">联系我a>li> <li><a href="#">留言板a>li> <li><a href="#">关于我a>li> <li><a href="#">照片墙a>li> ul> <div class="search"> <input type="text" placeholder="Search"> <i class="fa fa-search" aria-hidden="true">i> div> header> <div class="banner"> <div class="content"> <h2>响应式布局h2> <p> 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。 响应式设计与自适应设计的区别:响应式开发一套界面, 通过检测视口分辨率,针对不同客户端在客户端做代码处理, 来展现不同的布局和内容;自适应需要开发多套界面, 通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机, 从而请求服务层,返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式, 当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 p> <a href="#">阅读全文a> div> <img src="1.jpg" class="image"> div>body>html>
3.3 CSS
/* 清除浏览器默认边距,使边框和内边距的值包含在元素的width和height内 */* { margin: 0; padding: 0; box-sizing: border-box;}header { position: absolute; left: 0; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 100px; z-index: 10; background: #5b639c;}header .logo { position: relative; font-size: 1.5em; color: #fff; text-decoration: none; font-weight: 600;}header .navigation { display: flex; justify-content: center; flex-wrap: wrap; margin: 10px 0;}header .navigation li { list-style: none; margin: 0 20px;}header .navigation li a { text-decoration: none; color: #fff; font-weight: 600; letter-spacing: 1px;}header .navigation li a:hover{ color: #ffed3b;}header .search { position: relative; width: 300px; height: 40px;}header .search input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background: transparent; outline: none; border: 1px solid #fff; border-radius: 5px; padding: 0 10px 0 45px;}header .search input::placeholder { color: #fff;}header .search .fa-search { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; color: #fff; border-right: 1px solid #fff; padding-right: 10px;}.banner { background: #eee; padding: 200px 100px 100px; min-height: 100vh; display: flex; justify-content: space-between; align-items: center;}.banner .content { max-width: 1000px;}.banner .content h2 { font-size: 2.5em; color: #333; margin-bottom: 20px;}.banner .content p { font-size: 1em; color: #333;}.banner .content a { display: inline-block; background: #434978; color: #fff; padding: 10px 20px; text-decoration: none; font-weight: 600; margin-top: 20px;}.banner .image { max-width: 500px; margin-left: 50px;}/*屏幕宽度小于991px,改变布局和样式*/@media screen and (max-width:991px) { header { padding: 10px 20px; flex-direction: column; } .banner { padding: 150px 20px 50px; flex-direction: column-reverse; } .banner .image { max-width: 80%; margin-left: 0; } .banner .content h2 { font-size: 2em; }}/*屏幕宽度小于600px,改变布局和样式*/@media screen and (max-width:600px) { header .search { width: 100%; } .banner .image { margin-top: 30px; }}
今天的学习就到这里了,如果想继续学习提高,欢迎关注我,每天进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,在看,点赞!!!
-
bootstrap侧边导航栏_bootstrap响应式布局
2021-01-18 15:07:54响应式布局是什么?其实就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。简单来说,我们希望网站在移动设备和PC上都能有一个好的呈现效果。当检测到设备不同时,我们可以给出不同的浏览、布局... -
Bootstrap响应式布局的笔记
2020-03-05 09:04:031.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配...1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体... -
bootstrap 页面分成三列_bootstrap响应式布局
2020-12-14 06:25:52响应式布局是什么?其实就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。简单来说,我们希望网站在移动设备和PC上都能有一个好的呈现效果。当检测到设备不同时,我们可以给出不同的浏览、布局... -
vue+bootstrap响应式布局_vue响应式原理学习
2020-12-12 04:17:26实现响应式,我们需要做些什么3.如何侦测数据的变化3.2 Proxy实现4.收集依赖5 观察者 Watcher前言:现在前端面试Vue中都会问到响应式原理以及如何实现的,如果你还只是简单回答通过Object.defineProperty()来劫持属性... -
Bootstrap响应式布局瀑布流
2019-10-08 03:45:56Bootstrap是当下比较热门的web前端开发框架之一,通过引入Bootstrap,你可以很快的给你的项目做一个自适应的页面。 为什么需要Masonry 在某些项目中,我们可能需要展示一些产品、主题或者项目等,通过网格的形式... -
vue+bootstrap响应式布局_bootstrap基础快速入门-8 响应式显示与隐藏
2020-11-19 20:17:06大学生就可以看懂的bootstrap基础实战系列,pre标签里是笔记总结,动手实际操作一下会加强理解。... 本节内容体验响应式,建议实际操作一下。 Title x<768px 768px1200px xs -- extra samll 最小屏 sm -- s... -
李炎辉 bootstrap 响应式布局demo
2018-07-24 22:47:08以前跟着视频做的demo,今天想起来,一顿找,最后还是觉得放在github上好找。 https://github.com/yongchaoo/respLayout -
Bootstrap-响应式
2019-04-28 12:59:281.什么是响应式布局? 简而言之,就是一个网站能够兼容多个终端(pc,平板,手机…)——而不是为每个终端做一个特定的版本 说白了: 开发一套代码,适配不同分辨率的设备(pc,平板,手机…) 2.什么是bootStrap? bs是... -
响应式布局-bootstrap
2019-11-01 10:08:32响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机、平板、pc电脑) ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网... -
【5-12】《响应式布局》——响应式布局介绍和版心、BootStrap、使用BootStrap步骤、BootStrap入门基础、...
2020-10-30 16:27:22文章目录响应式布局一、介绍和版心二、BootStrap使用bootstrap做轮播图案例完整代码效果图总结 响应式布局 一、介绍和版心 前面已经简单接触过。响应式布局就是代码随着屏幕大小的改变显示不同。 档位划分: 媒体... -
Bootstrap里container的响应式布局的解释
2018-09-27 16:44:22之前在用bootstrap的时候,发现其中container设置了响应式布局,然后根据逻辑自己敲了一遍. 现在移动端越来越火,基本所有的网页都会根据移动端做一些适配,其中响应式布局,就是适配中关键的一环.其实响应式布局十分... -
响应式布局之BootStrap
2015-03-05 14:08:00响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的... -
前端基础:响应式布局(Bootstrap)
2020-04-18 22:33:35响应式布局:Bootstrap 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的... -
基于Bootstrap3制作响应式布局网站(二)
2015-05-22 13:34:59在上一篇文章中中主要讲到Bootstrap的栅格布局系统,虽然之前说要更新如何写导航栏,但是想了下还是先介绍下如何做CSS的媒体查询和响应式表格,这样才能为以后的的编码打下基础。 原创文章,欢迎转载,请保留出处。 ... -
响应式布局与bootstrap框架
2019-02-21 15:38:00原文 网页布局方式 1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。 ...2、流式布局:为网页设置一个相对的...4、响应式布局:通过检测设备信息,决定网页布局方式,即用户... -
bootstrap_响应式_CSS
2019-05-29 19:38:19响应式布局 1.什么是响应式布局 Responsive web page 响应式/自适应网页 可以根据浏览设备不同(pc,pad,phone) 而自动改变布局,图片文字效果,不会影响用户浏览体验 2.响应式网页必须做下面几件... -
bootstrap之响应式原理
2021-01-12 11:22:11一、响应式所具有的特点、 1、网页的宽度自动调整,例如当我们打开一个网页时,拉动页面使之宽度发生变化,那么展示的内容也会随着宽度的增大缩小而改变一行所容纳的内容多少。 2、尽量少用绝对宽度 3、字体要使用... -
bootstrap 屏幕高度_Bootstrap的响应式原理
2020-12-28 11:37:25响应式是指使网页适应不同尺寸、不同分辨率的设备。响应式所具有的特点1、网页的宽度自动调整。2、尽量少用绝对宽度。3、字体要使用rem、em做为单位。4、布局要使用浮动、弹性布局。响应式界面的四个层次1、同一页面... -
响应式布局及bootstrap(实例)
2015-05-11 09:33:00这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例。 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/4493679.html 响应式布局介绍 参考:维基... -
响应式布局和BootStrap 全局CSS样式
2017-11-23 12:51:001、什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的。 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 响应... -
bootstrap之响应式开发-栅栏系统
2020-09-23 01:23:24响应式开发原理 就是使用媒体查询针对不同宽度的设备进行样式布局和样式的设置,从而适配不同设备的目的。 设备划分 ...响应式布局容器 响应式需要一个父级做为容器布局,来配合子级元素来实现变化效