bootstrap 响应式布局

先上点媒体查询css（某个著名的”段子“），跟bootstrap无关：

<html>
<head>
<style>
body {  background-color: white;
}
@media screen and (max-width: 960px){  body {  background-color: red;  }
}
@media screen and (max-width: 768px){  body {  background-color: yellow;  }
}
@media screen and (max-width: 550px){  body {  background-color: green;  }
}
@media screen and (max-width: 320px){  body {  background-color: blue;  }
}
</style>
</head>
<body>
</body>
</html>

保存以上文件为test.html, 然后用浏览器打开。缩放浏览器看效果。（ps：如果看不到任何效果，说明你的浏览器太老了，不支持css3）

再来说bs的布局：默认情况下，bs认为你是在为移动设备编写样式！

注意这句，但前提是，网页的head里要加这么一段：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

然后，就可以愉快的忽略上面css样式的问题。不用为了某个尺寸的设备写一大堆重复的代码。

当然，必要时需要写少量代码，做某个尺寸设备的适配。配合 :

visible-lg/sm/md

hidden-xs/sm/md/lg

来动态显示，宽度比例的调整根据col-lg/md/sm/xs-1～12 来做。

转载于:https://www.cnblogs.com/Tommy-Yu/p/5695171.html

bootstrap 响应式布局相关推荐

Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
[JavaWeb-Bootstrap]Bootstrap响应式布局
响应式布局 * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤:1. 定义容器.相当于之前的table.* 容器分类:1. ...
Bootstrap 响应式布局辅助类
为了针对移动设备进行快速开发,在 responsive.less 文件中,Bootstrap 为响应式开发提供了一些辅助 class,它们用于针对不同设备显示和隐藏内容.可用的 class 列表及它们 ...
bootstrap响应式布局之阿里百秀
响应式布局移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
BootStrap #响应式布局 #组件
响应式布局 1.啥叫响应式:根据浏览器页面的设备不同自动的改变布局图片文本不会影响体验 2.编写响应式的网页: (1)视口<meta name="viewport" ...
bootstrap响应式布局
目录编辑布局container 容器: 简单的响应式导航栏: bootstrap快速开发: bootstrap 栅格系统: 响应式开发里面首先需要一个布局容器:class = "con ...
Bootstrap 响应式布局模板
每次制作响应式页面都要写一大坨东西,很是麻烦,于是我私人订制了一个bootrap模板,放在的这备个份,喜欢的就拿走吧. <!DOCTYPE html> <html lang=&quo ...
bootstrap table border粗细_Web前端开发(18)——Bootstrap响应式布局
使用步骤 ①下载Bootstrap 进入Bootstrap中文网(https://www.bootcss.com/)可以直接下载Bootstrap代码以及使用文档. ②将代码复制项目中下载下来之后会 ...
Bootstrap响应式布局案例- -阿里百秀
文章目录 1.搭建结构 2.show.html 3.index.css 4.所需图片 1.搭建结构 2.show.html <!DOCTYPE html> <html lang=&q ...
前端响应式布局原理与方案（详细版）
引言响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重.下面是博客网站对不同设备适配后的结 ...

bootstrap 响应式布局

bootstrap 响应式布局相关推荐

最新文章

热门文章