深入理解bootstrap框架之第二章整体架构
标注下,正好最近关注前段框架

1. CSS-12栅格系统
把网页宽度均分为12等分(保留15位精度)——这是bootstrap的核心功能。
2.基础布局组件
包括排版、按钮、表格、布局、表单等等。
3.jQuery
bootstrap插件的基础
4.响应式设计
兼容多个终端。这是bootstrap的终极理念。
5.css插件
提供丰富的样式。
6.js插件
二. 栅格系统
1.基本实现过程
定义容器的大小——跳转边距——媒询
有以下要求:
(1)一行(row)数据必须包含在.container中。
.container默认居中。宽度分为4种,超小屏(100%),小屏(750px),中屏(970px),大屏(1170px)。row的边距(左右margin,下同)是-15px。
(2)有了row,才能搭建列(col)。所有组件必须放在col内,只有col才能作为row的直接子元素。
.col的左右内边距(padding-left,right)为15px。也就是说,最小的col有30px。
(3)在以上基础上快速搭建布局
(4)col之间是木有边距的,应当使用padding来产生col的视觉距离。这样做会导致一个row容不下12个col,这时应当用负的margin来抵消padding的影响。
(5)栅格系统是通过指定1-12的值来设定范围的。对于col的规格,开发者指定了4个不同的屏幕

如图,在<body class="container">内包含若干个<div class="col-md-“1-12数字”">col-md-“1-12数字”></div>效果是

具体的可以参考原文
http://www.jb51.net/article/94304.htm
深入理解bootstrap框架之第二章整体架构的更多相关文章
- 《深入理解bootstrap》读书笔记:第二章 整体架构
一. 整体架构 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQu ...
- 徒手用Java来写个Web服务器和框架吧<第二章:Request和Response>
徒手用Java来写个Web服务器和框架吧<第一章:NIO篇> 接上一篇,说到接受了请求,接下来就是解析请求构建Request对象,以及创建Response对象返回. 多有纰漏还请指出.省略 ...
- 《深入理解java虚拟机》第二章 Java内存区域与内存溢出异常
第二章 Java内存区域与内存溢出异常 2.2 运行时数据区域
- Struts2框架学习第二章——Struts2下的HelloWorld
本章要点 — Struts 2的下载和安装 — 纯手工创建一个Web应用 — 纯手工创建一个Struts 2应用 — 实现Struts 2的Action — 配置Struts 2的Action — ...
- Artech的MVC4框架学习——第二章URL路由
总结:HttpModule 和HttpHandler是Asp.net管道的两个重要组件.请求最终处理通过HttpHandler完成.MVC就是通过名为MvcHandler自定义HttpHandler现 ...
- 深入理解java虚拟机_第二章_读书笔记
1.本章内容目录: 概述 运行时数据区域 程序计数器 java虚拟机栈 本地方法栈 java堆 方法区 运行时常量池 直接内存 HotSpot虚拟机对象探秘 对象的创建 对象的内存布局 对象的访问定位 ...
- 架构探险——从零开始写Java Web框架》第二章照作
沉下来慢慢看实现了. 越来越觉得可以和DJANGO作对比. package org.smart4j.chapter2.model; /** * Created by sahara on 2016/3/ ...
- 《深入理解linux内核》第二章 内存寻址
三种不同的内存地址 逻辑地址(logical address)包含在linux实际指令中的地址,即分段式地址,是对应的硬件平台段式管理转换前地址由16位的段选择符(segment selector)和 ...
- 《深入理解JAVA虚拟机》----------第二章 JAVA内存区域与内存溢出异常,笔记(下)
2. HotSpot虚拟机对象探秘 2.1 对象的创建 虚拟机遇到一条New指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初 ...
随机推荐
- VS2015预览版体验
.NET开源了,JAVA颤抖吧... 据说VS2015可以开发android,ios,wp应用程序了,还可以开发能运行在mac,linux上的ASP.NET网站,如果真是这样就太爽啦,上微软官网下载了 ...
- struts2漏洞-第一次入侵经历
这两天上数据库,老师给了我们一个网站,该网站是一个售花网站.是有一个师兄写的毕业设计.然后挂在内网,然后使用这个系统,然后分析网站,写个数据库设计的报告.简单的写了数据库作业后就闲来无事做,就想对这个 ...
- 可靠的功能測试--Espresso和Dagger2
欢迎Follow我的GitHub, 关注我的CSDN. 可靠的功能測试, 意味着在不论什么时候, 获取的測试结果均同样, 这就须要模拟(Mock)数据. 測试框架能够使用Android推荐的Espre ...
- C# winform 多线程异步操作线程启动暂停与恢复
/// <summary> /// 线程控制模块 /// </summary> private ManualResetEvent manualResetEvent = new ...
- 428. Pow(x, n)【medium】
Implement pow(x, n). Notice You don't need to care about the precision of your answer, it's acceptab ...
- Zookeeper运维的一些经验[转]
Zookeeper是一个分布式协调框架,有不错的性能,也经过许多公司的验证,所以在很多场景都有使用.大家一般用Zookeeper来实现服务发现(类似DNS),配置管理,分布式锁,leader选举等.在 ...
- PLSQL连接本机oracle 11g 64 数据库的步骤
1.登录PL/SQL Developer 这里省略Oracle数据库和PL/SQL Developer的安装步骤,注意在安装PL/SQL Developer软件时,不要安装在Program Files ...
- System.Data.SqlClient.SqlError:无法打开备份设备'D:\..\abc.bak'
在SQL Server中备份数据库时遇到备份对于服务器“服务器名”失败. (Microsoft.SqlServer.Smo)其他信息:System.Data.SqlClient.SqlError:无法 ...
- tomcat事件处理机制
最近在阅读“how tomcat works”这本书,结合tomcat7的源码进行学习.对于学习的收获,将通过“tomcat学习系列”记录下来,和大家一起分享和交流,也算对自己学习的一种促进.闲话不多 ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...