bootstrap

移动优先　　中文官网  http://www.bootcss.com/

1.基本模板

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<!-- 兼容IE -->

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- 兼容移动端 -->

    　　<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Document</title>

	<link rel="stylesheet" href="./css/bootstrap.css" style type="text/css">
　　　　 <script src="./js/jquery-1.11.3.js"></script>

	<script src="./js/bootstrap.js"></script>	

</head>

<body>

</body>

</html>

2.容器（默认样式中左右各15px的padding）

　　流体容器 铺满整个屏幕  例:<div class="container-fluid"</div>　　

　　固定容器 自适应居中  分辨率大于1200时容器大小为1170px 根据不同分辨率 值会发生改变 例:<div class="container"></div>

　　　　注： 一般头尾部采用流体 主体采用固定

3.栅格系统

　　row表示行 ( 会自动处理默认padding )　　col表示列

　　组合模式　　col-lg-　　col-md-　　col-sm-　　col-xs-

　　列偏移　　col-offset-　　( 只能向右偏移 值的范围:最小为1最大为12 偏移量+自身列数>12时会向右顶出现横向滚动条)

　　列排序 col-lg-push(pull)-　　( push为向后排序 pull为向前排序 )

　　左浮动　pull-left　　右浮动　pull-right

　　清除浮动 <div class="clearfix"></div>

　　固定定位 affix

　　打印类:　　

　　　　　　在打印中可见 非打印中不可见 visible-print-block
　　　　　　在打印中不可见 非打印中可见 hidden-print

Bootstrap之栅格系统的更多相关文章

  1. MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

    文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

  2. Bootstrap的栅格系统

    Bootstrap的栅格系统 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这 ...

  3. Bootstrap 12 栅格系统

    栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mix ...

  4. bootstrap中栅格系统的原理

    1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...

  5. bootstrap课程2 bootstrap的栅格系统的主要作用是什么

    bootstrap课程2  bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...

  6. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  7. Bootstrap(5)栅格系统

    一．移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放 ...

  8. Bootstrap学习--栅格系统

    响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...

  9. BootStrap的栅格系统的基本写法（布局）

    代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...

随机推荐

  1. DataBase异常状态：Recovery Pending，Suspect，估计Recovery的剩余时间

    一,RECOVERY PENDING状态 今天修改了SQL Server的Service Account的密码,然后重启SQL Server的Service,发现有db处于Recovery Pendi ...

  2. 无法启动WP Emulator

    记得以前Vware不能运行设置的东西了吗?http://www.cnblogs.com/dunitian/p/4480750.html 如果不清楚可以参考上面的链接 重启的时候选择第二项 重新打开就o ...

  3. 配置 L2 Population - 每天5分钟玩转 OpenStack（114）

    前面我们学习了L2 Population 的原理,今天讨论如何在 Neutron 中配置和启用此特性. 目前 L2 Population 支持 VXLAN with Linux bridge 和 VX ...

  4. EntityFramework之孩子删除（四）（你以为你真的懂了？）

    前言 从表面去看待事物视线总有点被层层薄雾笼罩的感觉,当你静下心来思考并让指尖飞梭于键盘之上,终将会拨开浓雾见青天.这是我切身体验. 在EF关系配置中,我暂且将主体对象称作为父亲,而依赖对象称作为孩子 ...

  5. Android随笔之——闹钟制作铺垫之AlarmManager详解

    说实话,之前写的两篇博客Android广播机制Broadcast详解.Android时间.日期相关类和方法以及现在要写的,都算是为之后要写的闹钟应用做铺垫,有兴趣的话,大家可以去看看前两篇博客. 一. ...

  6. GROUP BY的扩展

    GROUP BY的扩展主要包括ROLLUP,CUBE,GROUPING SETS三种形式. ROLLUP rollup相对于简单的分组合计增加了小计和合计,解释起来会比较抽象,下面我们来看看具体事例. ...

  7. 小菜学习Winform（五）窗体间传递数据

    前言 做项目的时候,winfrom因为没有B/S的缓存机制,窗体间传递数据没有B/S页面传递数据那么方便,今天我们就说下winfrom中窗体传值的几种方式. 共有字段传递 共有字段传递实现起来很方便, ...

  8. geotrellis使用初探

    最近,单位领导要求我研究一下geotrellis(GITHUB地址:https://github.com/geotrellis/geotrellis,官网http://geotrellis.io/), ...

  9. php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子

    相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...

  10. android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下，另行实现圆形scale动画

    ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...