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. easyui datagrid cell title换行

    " " title="' +row.TaskName + "

  2. LINQ系列：LINQ to SQL Take/Skip

    1. Take var expr = context.Products .Take(); var expr = (from p in context.Products select p) .Take( ...

  3. LINQ系列：LINQ to XML类

    LINQ to XML由System.Xml.Linq namespace实现,该namespace包含处理XML时用到的所有类.在使用LINQ to XML时需要添加System.Xml.Linq. ...

  4. JS只能输入数字，数字和字母等的正则表达式

    1.只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> ...

  5. 第一篇blog

    之前不用blog,但是在杭电oj,poj上刷题,总会自己总结题型和使用什么算法,算法模板,自己在笔记本上写,耗时费力,感觉用键盘敲得总结,分享,大家相互学习提高.有时遇到不会做的,或者总是在oj上跑的 ...

  6. FineUI Grid控件高度自适应

    引言 页面里使用f:Grid控件,添加分页功能,然后高度填充整个页面. 如何使用 使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设 ...

  7. .net程序部署（mono方式）

    某一次 我同事用了这个词 ,说这样才显得够专业 擦.把某某项目 部署到服务器上 .擦 不就是拷个文件过去运行么.月亮 还是绵羊  我搞不清楚了 咱英文不好,绵羊叫的声音?.你就叫我山寨程序猿 随意 一 ...

  8. STM32L时钟

    Four different clock sources can be used to drive the system clock (SYSCLK): 1.HSI ((high-speed inte ...

  9. [Asp.net 5] Logging-日志系统的基本架构（上）

    本节主要介绍解决方案中的Microsoft.Framework.Logging.Abstractions.Microsoft.Framework.Logging俩个工程. 这俩个工程中所有类的关系如下 ...

  10. PHP5各个版本的新功能和新特性总结

    因为 PHP 那“集百家之长”的蛋疼语法,加上社区氛围不好,很多人对新版本,新特征并无兴趣.本文将会介绍自 PHP5.2 起,直至 PHP5.6 中增加的新特征 本文目录:PHP5.2 以前:auto ...