Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟colspan类似。
使用方法:
1、包含在.container或.container-fluid中
<div class="container-fluid">
<div class="row">
...
</div>
</div>
2、创建栅格系统
.col-lg-* 桌面栅格类,适合大屏幕 大桌面显示器 (≥1200px)
.col-md-* 桌面栅格类,适合中等屏幕 桌面显示器 (≥992px)
.col-xs-* 移动栅格类,适合超小屏幕 手机 (<768px)
.col-sm-* 平板栅格类,适合小屏幕 平板 (≥768px)
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<style>
body{padding-top: 50px;}
[class^="col"]{
border:1px solid #000;
height: 30px;
background: #ccc;
line-height: 30px;;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!--12个 col-md-1 -->
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
</html>
.col-xs-* 移动端适配
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!--移动适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{padding-top: 50px;}
[class^="col"]{
border:1px solid #000;
height: 30px;
background: #ccc;
line-height: 30px;;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
</body>
</html>
叠加使用:在移动端5:7 ,在PC端8:4
<div class="container">
<div class="row">
<div class="col-xs-5 col-md-8">.col-xs-5 .col-md-8</div>
<div class="col-xs-7 col-md-4">.col-xs-7 .col-md-4</div>
</div>
</div>
叠加使用2:在移动端5:7,在平板端4:8,PC端8:4
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-8">.col-xs-5 .col-sm-4 .col-md-8</div>
<div class="col-xs-7 col-sm-8 col-md-4">.col-xs-7 .col-sm-8 .col-md-4</div>
</div>
3、偏移,原理有多少*,就有多少*倍的margin-left
.col-md-* 对应.col-md-offset-*
.col-xs-* 对应.col-xs-offset-*
.col-sm-* 对应.col-sm-offset-*
.col-lg-* 对应.col-lg-offset-*
<div class="container">
<div class="row" style="background: #ff0000">
<div class="col-md-8 col-md-offset-2">col-md-8</div>
<div class="col-md-2">col-md-2</div>
</div>
</div>
详情:http://v3.bootcss.com/css/#grid
Bootstrap响应式布局的更多相关文章
- 前端框架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 响应式布局
先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...
- 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 ...
随机推荐
- jzoj2701 【GDKOI2012模拟02.01】矩阵
传送门:https://jzoj.net/senior/#main/show/2701 [题目大意] 给出矩阵A,求矩阵B,使得
- 转:Android 调试桥(adb)是多种用途的工具
转自:http://my.oschina.net/xuwa/blog/1574 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态. 可以通过下列几种方法加入 ...
- python基础===pip安装模块失败
此情况只用于网络不畅的安装模块背景: 总出现红色的 Could not find a version that satisfies the requirement pymongo(from versi ...
- import module与from module import * 两种模块导入有何区别
#原创,转载请留言联系 区别1 import module 引用共享变量时,要使用module.变量名. 而from module import * 直接使用变量名即可 区别2(有点绕) import ...
- java.lang.NumberFormatException: multiple points 异常
平时使用SimpleDateFormat的时候都是在单线程的情况下使用的,今天在改写别人的代码,发现每个类中都会写大量的SimpleDateFormat实例.作为一个程序特有的洁癖开始对代码进行优化. ...
- win32 读取文本文件,并进行字符串分割和存储
//分割字符 char *p;//p存放临时行指针 q存放临时每一行的列指针 char *hang[100]={0};//存储第一行 char *lie[300]={0} ...
- 网关协议:CGI、FastCGI、WSGI
CGI就像是一座桥,把网页和WEB服务器中的执行程序连接起来,它把HTML接收的指令传递给服务器的执行程序,再把服务器执行程序的结果返还给HTML页. CGI CGI即通用网关接口(Common Ga ...
- 自动监控tomcat脚本并且执行重启操作
#!/bin/sh # func:自动监控tomcat脚本并且执行重启操作 # author:reed # date:// # 定义环境变量 MYPATH=/usr/local/jdk/bin exp ...
- 使用Mybatis做批量插入
最近有个需求,将excel的数据导入的数据库的这个一个操作. 工作主要分为:解析excel,将excel中的数据单条循环插入数据库. 使用框架:mybatis+spring 使用过Mybatis的人都 ...
- Ajaxterm + nginx 实现一个简单的堡垒机
https://blog.csdn.net/zhang19771105/article/details/50497581 http://wuliangxx.iteye.com/blog/600113