Bootstrap之栅格系统
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之栅格系统的更多相关文章
- MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统
文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...
- Bootstrap的栅格系统
Bootstrap的栅格系统 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这 ...
- Bootstrap 12 栅格系统
栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mix ...
- bootstrap中栅格系统的原理
1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...
- bootstrap课程2 bootstrap的栅格系统的主要作用是什么
bootstrap课程2 bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...
- 深入理解BootStrap之栅格系统(布局)
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
- Bootstrap(5)栅格系统
一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放 ...
- Bootstrap学习--栅格系统
响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...
- BootStrap的栅格系统的基本写法(布局)
代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...
随机推荐
- vs运行时候冒了这个错:无法启动IIS Express Web 服务器~Win10
后期会在博客首发更新:http://dnt.dkill.net 异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 网上的方法多种, ...
- jQuery2.0.3源码分析系列(28) 元素大小
最近的分析都是有点不温不火,基本都是基础的回顾了 今年博客的目标目前总的来说有2大块 JS版的设计模式,会用jQuery来诠释 JS版的数据结构,最近也一直在狠狠的学习中. HTML息息相关的的样式 ...
- 深入理解滚动scroll
前面的话 前面两篇博文分别介绍过偏移大小.客户区大小.本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度,包括由于溢出 ...
- java发送内嵌图片邮件
前言: 博客系统中需要邮件服务的功能,以前写过类似的功能,不过功能太简单了,仅仅是发送文本内容,现在尝试一下发送内嵌图片邮件! 准备工作: 请参考:http://www.cnblogs.com/huj ...
- codeforces Round #320 (Div. 2) C. A Problem about Polyline(数学) D. "Or" Game(暴力,数学)
解题思路:就是求数 n 对应的二进制数中有多少个 1 #include <iostream> #include<cstdio> using namespace std; int ...
- 创建 VXLAN - 每天5分钟玩转 OpenStack(111)
前面我们讨论了 VXLAN 的理论知识,并且在 ML2 中完成了相关配置.今天将通过 Web UI 创建 vxlan100_net 并观察节点网络结构的变化. 打开菜单 Admin -> Net ...
- Jenkins+SVN+tomcat持续集成发布
有代码更新后重新打包到tomcat再发布,是不是很烦? 看了下面的东西你就不会烦了. SVN或者git等代码版本控制工具不说了,如果是本地开发,也可以安装一个svn server端 jenkins下载 ...
- Java面向对象练习
1.定义长方形类,含: 属性:宽.高(整型): 方法:求周长.面积: 构造方法3个:(1)无参——宽.高默认值为1:(2)1个参数——宽.高均为参数值:(3)2个参数——宽.高各为参数值. 要求:进行 ...
- 【记录】ASP.NET MVC MapRoute .htm 不起作用
RegisterRoutes 注册路由示例配置: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRo ...
- ZooKeeper集群搭建中的Connection refused而导致的启动失败
1. 前言 每一次搭建集群环境都像一次战斗,作战中任何一个细节的出错都会导致严重的后果,所以搭建中所需要做的配置如系统配置.网络配置(防火墙记得关).用户权限.文件权限还有配置文件等等内容,都必须非常 ...