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. vs运行时候冒了这个错：无法启动IIS Express Web 服务器~Win10

    后期会在博客首发更新:http://dnt.dkill.net 异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 网上的方法多种, ...

  2. jQuery2.0.3源码分析系列(28) 元素大小

    最近的分析都是有点不温不火,基本都是基础的回顾了 今年博客的目标目前总的来说有2大块 JS版的设计模式,会用jQuery来诠释 JS版的数据结构,最近也一直在狠狠的学习中. HTML息息相关的的样式 ...

  3. 深入理解滚动scroll

    前面的话 前面两篇博文分别介绍过偏移大小.客户区大小.本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度,包括由于溢出 ...

  4. java发送内嵌图片邮件

    前言: 博客系统中需要邮件服务的功能,以前写过类似的功能,不过功能太简单了,仅仅是发送文本内容,现在尝试一下发送内嵌图片邮件! 准备工作: 请参考:http://www.cnblogs.com/huj ...

  5. codeforces Round #320 (Div. 2) C. A Problem about Polyline(数学) D. "Or" Game(暴力，数学)

    解题思路:就是求数 n 对应的二进制数中有多少个 1 #include <iostream> #include<cstdio> using namespace std; int ...

  6. 创建 VXLAN - 每天5分钟玩转 OpenStack（111）

    前面我们讨论了 VXLAN 的理论知识,并且在 ML2 中完成了相关配置.今天将通过 Web UI 创建 vxlan100_net 并观察节点网络结构的变化. 打开菜单 Admin -> Net ...

  7. Jenkins+SVN+tomcat持续集成发布

    有代码更新后重新打包到tomcat再发布,是不是很烦? 看了下面的东西你就不会烦了. SVN或者git等代码版本控制工具不说了,如果是本地开发,也可以安装一个svn server端 jenkins下载 ...

  8. Java面向对象练习

    1.定义长方形类,含: 属性:宽.高(整型): 方法:求周长.面积: 构造方法3个:(1)无参——宽.高默认值为1:(2)1个参数——宽.高均为参数值:(3)2个参数——宽.高各为参数值. 要求:进行 ...

  9. 【记录】ASP.NET MVC MapRoute .htm 不起作用

    RegisterRoutes 注册路由示例配置: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRo ...

  10. ZooKeeper集群搭建中的Connection refused而导致的启动失败

    1. 前言 每一次搭建集群环境都像一次战斗,作战中任何一个细节的出错都会导致严重的后果,所以搭建中所需要做的配置如系统配置.网络配置(防火墙记得关).用户权限.文件权限还有配置文件等等内容,都必须非常 ...