bootstrap初探
- bootstrap资源
- http://getbootstrap.com
- http://github.com/twbs
- http://www.bootcss.com
- bootstrap栅格系统
- 容器：流体（container-fluid）、固定（container）
- 分12列，阈值 分辨率>=1200,container固定尺寸为1170px，若阈值在992到1200之间container固定尺寸为970px，若分辨率在992以下778以上为750px，778px以下为自适应，没有固定的宽度值
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid;}
</style>
</head>
<body>
<!--<div class="container-fluid">
aaaaaaaaa
</div>
-->
<div class="container">
aaaaaaaaa
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
- 分为12列，可根据列数确定，demo如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid; background: #CCC;}
div[class*=col-] { color: white; border: 1px solid red;}
</style>
</head>
<body> <div class="container">
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-11">col-lg-1</div>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
- 不同分辨率下，设置col-lg表示超大分辨率，col-md是中等分辨率，col-sm是pad类似大小，col-xs是移动设备，如果设置了col-*那么会按照相应的分辨率显示，如果小于相应的分辨率则会变为几行，demo如下，可自行运行，以及对应demo图片
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid; background: #CCC;}
div[class*=col-] { color: white; border: 1px solid red;}
</style>
</head>
<body> <!--div class="container">
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-11">col-lg-1</div>
</div--> <div class="container">
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-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-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
</div>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
- 组合布局，可设置多个class，在分辨率为一个值得时候按照某个class显示，如果分辨率换成另外一个按照另外一个class显示，如下面demo所示，当分辨率大于1200时，按照col-lg显示四列，如果分辨率小于1200大于992，按照col-md显示三列
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid; background: #CCC;}
div[class*=col-] { color: white; border: 1px solid red;}
</style>
</head>
<body> <div class="container">
<div class="row">
<div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div>
<div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div>
<div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div>
<div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div>
</div>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
- 列偏移col-lg-offset-4，向右偏移4个网格距离，demo如下，代码运行效果如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid; background: #CCC;}
div[class^=col-] { color: white; border: 1px solid red;}
</style>
</head>
<body> <div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-3">col-lg-4</div>
</div>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
- 最多偏移为12，若大于12则不起任何作用，demo以及代码运行效果如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid; background: #CCC;}
div[class^=col-] { color: white; border: 1px solid red;}
</style>
</head>
<body> <div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-13">col-lg-4 col-lg-offset-13</div>
</div>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
- 列排序col-lg-push往后（往右）移动若干个，col-lg-pull往前（往左）移动若干个
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid; background: #CCC;}
div[class^=col-] { color: white; border: 1px solid red;}
</style>
</head>
<body> <div class="container">
<div class="row">
<div class="col-lg-2">col-lg-2</div>
<div class="col-lg-10">col-lg-10</div>
</div>
<div class="row">
<div class="col-lg-2 col-lg-push-10">col-lg-2</div>
<div class="col-lg-10 col-lg-pull-2">col-lg-10</div>
</div>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
bootstrap初探的更多相关文章
- bootstrap初探2
控制是否显示:visible-(lg | md | sm |sx)-(block | inline | inline-block), hidden-(lg | md | sm |sx) <!DO ...
- 初探Bootstrap之十二栅格
模型1: <!-- 4/12 --> <div class="container"> <div class="row"> & ...
- Ext JS 5初探（二） ——Bootstrap.js
在Bootstrap.js文件中,总共有1500行(包含注释和空行),使用编辑器的代码折叠功能就如下图可以一窥全貌了. 从代码可以看到,这里主要定义了Ext.Boot.Ext.globalEval.E ...
- C#进阶系列——DDD领域驱动设计初探（七）：Web层的搭建
前言:好久没更新博客了,每天被该死的业务缠身,今天正好一个模块完成了,继续来完善我们的代码.之前的六篇完成了领域层.应用层.以及基础结构层的部分代码,这篇打算搭建下UI层的代码. DDD领域驱动设计初 ...
- tomcat线程初探
博主:handsomecui,希望路过的各位大佬留下你们宝贵的意见,在这里祝大家冬至快乐. 缘由: 初探缘由,在业务层想要通过(当前线程的栈)来获取到控制层的类名,然后打日志,可是发现并不能通过当前线 ...
- django初探-创建简单的博客系统(二)
上篇django初探-创建简单的博客系统(一)已经记录了Django实现博客的发布的整个过程,接下来继续说明博客标题和内容的显示. 显示博客详细 将博客内容保存到数据库还不是发布博客的终极目的,博客一 ...
- ASP.NET Core 微服务初探[1]：服务发现之Consul
ASP.NET Core 微服务初探[1]:服务发现之Consul 在传统单体架构中,由于应用动态性不强,不会频繁的更新和发布,也不会进行自动伸缩,我们通常将所有的服务地址都直接写在项目的配置文件 ...
- freeswitch编译安装，初探， 以及联合sipgateway, webrtc server的使用场景。
本文主要记录freeswitch学习过程. 一 安装freeswitch NOTE 以下两种安装方式,再安装的过程中遇到了不少问题,印象比较深刻的就是lua库找到不到这个问题.这个问题发生在make ...
- 《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第三节：View层简单改造
第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造 MVC默认模板的视觉设计从MVC1到MVC3都没有改变,比较陈旧了:在MVC4中做了升级,好看些,在不同的分辨率下,也能工作得 ...
随机推荐
- [转]Python中的with…as…
先说明一个常见问题,文件打开: 1 2 3 4 5 6 7 try: f = open('xxx') do something except: do something fin ...
- System.InvalidOperationException: 无法加载协定为“ServiceReference1.XXXXXXXXXXXXXXXX”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。
<system.serviceModel> <bindings> <basicHttpBinding> <binding name="testWeb ...
- Math.round()、Math.ceil()、Math.floor()与Math.random()的区别？
Math.round(x) 四舍五入 加上0.5向下取整 Math.round(1.5) 2 Math.round(-11.5) -11 Math.round(-11.2) -10 Math.ceil ...
- wamp虚拟机配置
1.找到httpd.conf 里面:找到 # Virtual hosts 开启虚拟机Include conf/extra/httpd-vhosts.conf 2 编辑httpd-vhosts.con ...
- indexof()方法
w3c手册定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置 stringObject.indexOf(searchvalue,fromindex) searchva ...
- HTTP协议学习-01
在学习一门新知识前还是先了解一下这个知识的一点点背景吧! http是属于协议层当中的最顶层的应用层,的面向对象的协议:它于 1990 年提出, 经过几年的使用与发展, 得到不断地完善和扩展. 目前在 ...
- Swift互用性：采用Cocoa设计模式（Swift 2.0版）-b
本页包含内容: 委托(Delegation) 错误处理(Error Handling) 键值观察(Key-Value Observing) Target-Action模式(Target-Action) ...
- 关于如何将C语言源文件转化为汇编文件
--转载自:http://blog.21ic.com/user1/6088/archives/2010/68469.html 方法:(假设当前工程中只有一个C代码文件) 第1步:新建一个工程,添加C文 ...
- c/c++关于内存分配的知识（非常详细的比较，且VirtualAlloc分配内直接在进程的地址空间中保留一快内存）
一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. 2.堆区(heap) — 一 ...
- Android 首次进入应用时加载引导界面
功能需求:首次进入应用时加载引导界面 思路: 1.首次进入,怎么判断?查看SharedPreferences中某个字段 2.基本上每个应用都有个进入实际功能是的动画加载页面,我们可以在该Activit ...