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. java 成长之路

    分享总结 title: java 成长之路 tags: grammar_cjkRuby: true 经验差异 1-3年 要求 建议 3-5年 建议 5年+ 经验差异 最近一年比较忙,经历了创业公司的倒 ...

  2. WPF自定义控件与样式(2)-自定义按钮FButton

    一．前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...

  3. python统计某一个进程名所占用的内存

    设计思路: 通过python,执行cmd中tasklist命令,获取要统计的进程的相关信息:通过正则表达式,查找出进程名称.进程pid.内存使用,然后打印出来. 作为pythoner,有时候需要统计p ...

  4. ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

    上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东 ...

  5. Android性能优化之UncaughtExceptionHandler定制自己的错误日志系统

    前言: 每当我们app测试的时候,测试人员总是对我们说这里崩溃了,那里挂掉了!我们只能默默接受,然后尝试着重现bug,更可悲的是有时候bug很难复现,为了解决这种现状所以我们要尝试这建立一个自己的bu ...

  6. 统计Go, Go, Go

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢!   结束了概率论,我们数据之旅的下一站是统计.这一篇,是统计的一个小介绍.   统 ...

  7. 45 个非常有用的 Oracle 查询语句

    ​ 这里我们介绍的是 40+ 个非常有用的 Oracle 查询语句,主要涵盖了日期操作,获取服务器信息,获取执行状态,计算数据库大小等等方面的查询.这些是所有 Oracle 开发者都必备的技能,所以快 ...

  8. ASP.NET Web API 创建帮助页

    1. 安装 Microsoft.AspNet.WebApi.HelpPage 程序包 Install-Package Microsoft.AspNet.WebApi.HelpPage 2. 注册 Ar ...

  9. 学习总结之 WebApi 用户登录和匿名登录，及权限验证

    近些天,看了一些博客园大牛关于webApi项目的的文章,也有请教师兄一些问题,自己做了个Demo试了试,收获甚多.感谢感谢,下面是我一些学习的总结,如若有错的地方请多多指教!! WebApi登陆与身份 ...

  10. 主机巡检脚本：OSWatcher.sh

    主机巡检脚本:OSWatcher.sh 2016-09-26更新,目前该脚本只支持Linux操作系统,后续有需求可以继续完善. 注意: 经测试,普通用户执行脚本可以顺利执行前9项检查: 第10项,普通 ...