标注下，正好最近关注前段框架

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框架之第二章整体架构的更多相关文章

  1. 《深入理解bootstrap》读书笔记：第二章 整体架构

    一.  整体架构   1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQu ...

  2. 徒手用Java来写个Web服务器和框架吧<第二章:Request和Response>

    徒手用Java来写个Web服务器和框架吧<第一章:NIO篇> 接上一篇,说到接受了请求,接下来就是解析请求构建Request对象,以及创建Response对象返回. 多有纰漏还请指出.省略 ...

  3. 《深入理解java虚拟机》第二章 Java内存区域与内存溢出异常

    第二章 Java内存区域与内存溢出异常 2.2 运行时数据区域  

  4. Struts2框架学习第二章——Struts2下的HelloWorld

    本章要点 —  Struts 2的下载和安装 — 纯手工创建一个Web应用 — 纯手工创建一个Struts 2应用 — 实现Struts 2的Action — 配置Struts 2的Action — ...

  5. Artech的MVC4框架学习——第二章URL路由

    总结:HttpModule 和HttpHandler是Asp.net管道的两个重要组件.请求最终处理通过HttpHandler完成.MVC就是通过名为MvcHandler自定义HttpHandler现 ...

  6. 深入理解java虚拟机_第二章_读书笔记

    1.本章内容目录: 概述 运行时数据区域 程序计数器 java虚拟机栈 本地方法栈 java堆 方法区 运行时常量池 直接内存 HotSpot虚拟机对象探秘 对象的创建 对象的内存布局 对象的访问定位 ...

  7. 架构探险——从零开始写Java Web框架》第二章照作

    沉下来慢慢看实现了. 越来越觉得可以和DJANGO作对比. package org.smart4j.chapter2.model; /** * Created by sahara on 2016/3/ ...

  8. 《深入理解linux内核》第二章 内存寻址

    三种不同的内存地址 逻辑地址(logical address)包含在linux实际指令中的地址,即分段式地址,是对应的硬件平台段式管理转换前地址由16位的段选择符(segment selector)和 ...

  9. 《深入理解JAVA虚拟机》----------第二章 JAVA内存区域与内存溢出异常，笔记（下）

    2. HotSpot虚拟机对象探秘 2.1 对象的创建 虚拟机遇到一条New指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初 ...

随机推荐

  1. 关于shell

    操作系统本质上是一个应用程序,他负责硬件资源调度,文件系统管理等最底层的工作. 而shell是系统中一种特别的应用程序.之所以特别,是因为用户一切的操作都是经由shell来实现的. 和我们直接进行交互 ...

  2. 【转】java图形界面设计（AWT）

    [转自]http://blog.sina.com.cn/s/blog_616e189f0100ne1t.html 1.       基本的java Frame操作. Java的图形界面的类主要包括AW ...

  3. 关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题

    解决方法,不能直接写点击效果就要在超链接中加一个参数,根据参数的值去给变焦点的效果,实现方法如下: <div class="vip_search">           ...

  4. 知乎：在卡内基梅隆大学 (Carnegie Mellon University) 就读是怎样一番体验？

    转自:http://www.zhihu.com/question/24295398   知乎 Yu Zhang 知乎搜索 首页 话题 发现 消息 调查类问题名校就读体验修改 在卡内基梅隆大学 (Car ...

  5. iptables进行DNAT（目标地址转换）

    前言:对于Linux服务器而言,一般服务器不会直接提供公网地址给用户访问,服务器在企业防火墙后面,通常只是暴露一个公网给用户,下面已80端口进行实现. 演示环境:VM (1)host: 172.16. ...

  6. Session 活化与钝化 与tomcat钝化驱动器

    1,绑定到Session中的 对象有多种状态,分别是   绑定   解除绑定     钝化    活化. 绑定 是保存,通过session.setattribute把对象保存到session的对象当中 ...

  7. BNUOJ-1065或运算的简单解法

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=1065 下面有一个程序:--------------------------------------- ...

  8. iphone 6plus 下app里的状态栏和界面会被放大的问题//以及设置APP闪屏页/APP图标流程

    //设置APP闪屏页/APP图标流程如下 2.6Plus界面显示变大以及APP图标变大是由于上面图片的AppIcon以及LaunchImage造成的,主要是由于找不到对应的3x图片,或者改3x图片尺寸 ...

  9. JS地毯式学习一

    1.<noscript> 现代浏览器都对JavaScript进行了支持,一般是在用户的浏览器禁用了脚本的情况下才会显示<noscript>的内容. 包含在<noscrip ...

  10. Nhibernate 一对一，一对多，多对多 成功映射

    前语: 在Nhibernate xml 的文件配置上,一对一和多对多的配置比较简单,容易出错的反而是一对多(多对一)上. 1.一对一关联关系的映射: <one-to-one name=" ...