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 ...
随机推荐
- centos7.2安装paramiko报error: command 'gcc' failed with exit status 1的解决办法
安装依赖 yum install kernel-devel libxslt-devel libffi-devel python-devel mysql-devel zlib-devel openssl ...
- ctypes 操作 python 与 c++ dll 互传结构体指针
CMakeLists.txt # project(工程名) project(blog-3123958139-1) # add_library(链接库名称 SHARED 链接库代码) add_libra ...
- Robot Framework--09 分支与循环的用法
转自:http://blog.csdn.net/tulituqi/article/details/8038923 一.分支 在Robotframework2.7.4之前的版本,我们要想写IF比较容易, ...
- C-函数与内存剖析
功能,封装,调用 形参:定义函数时函数名后面中的参数,形式参数 实参:调用函数时传入的具体数据 return作用:1退出函数 2返回一个具体数值给调用者 返回值: 如果不明确声明返回值类型,默认就是i ...
- 如何向git账号上提交代码
官方说明:https://help.github.com/articles/generating-ssh-keys/ 1,为Github账户设置SSH key 文章地址:http://zuyunfei ...
- vijos1740 聪明的质监员 (二分、区间求和)
http://www.rqnoj.cn/problem/657 https://www.vijos.org/p/1740 P1740聪明的质检员 请登录后递交 标签:NOIP提高组2011[显示标签] ...
- 数字格式化函数:Highcharts.numberFormat()
(转)数字格式化函数:Highcharts.numberFormat() 一.函数说明 该函数用于图表中数值的格式化,常见用途有数值精度控制.小数点符.千位符显示控制等. 二.函数使用 1.函 ...
- 思维导图-javascript(转)
学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又 ...
- 【AngularJS】—— 11 指令的交互
前面基本了解了指令的相关内容: 1 如何自定义指令 2 指令的复用 本篇看一下指令之间如何交互.学习内容来自<慕课网 指令3> 背景介绍 这例子是视频中的例子,有一个动感超人,有三种能力, ...
- firstchild.data与childNodes[0].nodeValue意思(转)
x.firstchild.data:获取元素第一个子节点的数据: x.childNodes[0]::获取元素第一个子节点; x.childNodes[0].nodeValue.:也是获取元素第一个子节 ...