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 来做。
bootstrap 响应式布局的更多相关文章
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- Bootstrap响应式布局介绍
一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...
- bootstrap响应式布局原理
百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...
- Bootstrap响应式布局(1)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- bootstrap响应式布局简单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- bootstrap响应式布局列子
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- Bootstrap页面布局7 - Bootstrap响应式布局的实用类
在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visib ...
随机推荐
- HTML 通知公告练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 编译安装chkrootkit出现的问题
tar xf chkrootkit.tar.gz cd chkrootkit-* make sense的时候出现make: *** [strings-static] Error 1,解决办法:yum ...
- Shared Library Search Paths
在使用CodeLite编译动态库的时候,可以通过在Linker > Linker Options中添加: -install_name @executable_path/libXXX.so 的方式 ...
- robots.txt的介绍和写作
目前很多网站管理者似乎对robots.txt并没有引起多大重视,甚至不知道这么一个文件的作用.本来应该保密的信息被爬虫抓取了,公布在公网上,本应该发布到公网的信息却迟迟不被搜索引擎收录.所以下面这篇文 ...
- Memcached【Magent+Memcached】集群
Memcached介绍 事件处理libevent是个程序库,它将Linux的epoll.BSD类操作系统的kqueue等事件处理功能封装成统一的接口.即使对服务器的连接数增加,也能发挥O(1)的性能 ...
- Yii2 advanced版API接口开发 基于RESTful架构的 配置、实现、测试
参考地址: http://www.xiaoxiangzi.com/Programme/PHP/3348.html http://www.cnblogs.com/ganiks/p/yii2-restfu ...
- Orchard源码分析（4.4）：Orchard.Caching.CacheModule类
概述 CacheModule也是一个Autofac模块. 一.CacheModule类 CacheModule将DefaultCacheManager注册为ICacheManager: ...
- 如何配置pl/sql （本地客户端）连接远程oracle服务器
配置方法: 1.找到oracle的安装目录.如:C:\oracle\product\10.2.0\db_1\network\ADMIN 2.找到tnsnames.ora文件. 3.用文本方式打开,添加 ...
- java中跳出if判断
今天学到的一点儿新东西一个if判断里面有好多东西,紧接着还有其他代码,不能使用return来结束这个if判断这时候,就需要这样: out:if (!"null".equals(re ...
- NancyFx中使用自带的IOC容器
/// <summary> /// Cors扩展 /// </summary> public static class IPipelinesExtensions { /// & ...