深入理解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

时间: 2024-10-11 09:57:51

深入理解bootstrap框架之第二章整体架构的相关文章

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

一.  整体架构 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)——这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQuery bootstrap插件的基础 4.响应式设计 兼容多个终端.这是bootstrap的终极理念. 5.css插件 提供丰富的样式. 6.js插件 二. 栅格系统 1.基本实现过程 定义容器的大小——跳转边距——媒询 有以下要求: (1)一行(row)数据必须包含在.container中. .con

深入理解bootstrap笔记:第二天

MD ,星期六.星期天在家闲了,今天才抽出空来看第二章,真心该打~不过看了之后,觉得收益蛮多的! 看了栅格这篇时,发现一个问题了,以前做自己的网站时,有的时候排版真心有问题,page21这里列排序:.col-md-push-*(*这里填写数字) 完全可以实现的嘛,还用什么float,真心觉的自己傻的不是一星半点的! 现在让我去做,保证bootstrap的栅格系统用的顺滑了! 越看越觉着bootstrap的用处太大,不同屏幕上用不同的栅格尺寸标准,就完成能实现.超小屏幕设备手机(<768px):.

徒手用Java来写个Web服务器和框架吧&lt;第二章:Request和Response&gt;

徒手用Java来写个Web服务器和框架吧<第一章:NIO篇> 接上一篇,说到接受了请求,接下来就是解析请求构建Request对象,以及创建Response对象返回. 多有纰漏还请指出.省略了很多生产用的服务器需要处理的过程,仅供参考.可能在不断的完整中修改文章内容. 先上图 项目地址: https://github.com/csdbianhua/Telemarketer 首先看看如何解析请求 解析请求 构建Request对象 这部分对应代码在这里,可以对照查看 一个HTTP的GET请求大概如下

[深入理解Android卷一 全文-第二章]深入理解JNI

由于<深入理解Android 卷一>和<深入理解Android卷二>不再出版,而知识的传播不应该因为纸质媒介的问题而中断,所以我将在CSDN博客中全文转发这两本书的全部内容. (出版社排版好的PDF版正在向出版社申请,到时候会通过CSDN下载资源发布) 第2章  深入理解JNI 本章主要内容 ·  通过一个实例,介绍JNI技术和在使用中应注意的问题. 本章涉及的源代码文件名及位置 下面是本章分析的源码文件名及其位置. ·  MediaScanner.java framework/b

笔记《深入理解bootstrap》第3章(下) —— CSS布局

上一篇太长了,接下来,继续扯: 3.5.3横向表单, 横向表单不能在form元素上简单应用一个.form-horizontal样式,这是因为其本身没有做什么特殊的设置,只简单设置了一下相关的padding和margin值,源码: 运行效果: 所以,要实现横向表单,不仅要应用上述样式,还要使用bootstrap预设的栅格类,以便将label和控件水平布局,由于.form-horizontal样式改变了.form-group的行为,将其表现的像栅格系统中的行(row)一样,因此就无需再使用.row样

Hibernate ORM框架——续第二章:Hibernate映射关系:单向关联

一:课堂笔记 **********单表映射*************** 1.只有一个实体类映射一个表 2.有一个实体类+ 一个或者多个值类型,合在一起 映射为一个表 **********多表映射*************** 定义:类有多个映射为多个表 **********数据库层面,如ORM无关************** 2个表之间要建立关系?该如何做?有多少种方法 假定有2个表,分别为A,B 3种关系 a)主键关联:A表的主键对应B表的主键,(一对一的关系) 在数据库种如何建立这种关系?

第二章 设计程序架构 之 分布式应用

1. 概述 分布式应用是将程序的互相协作的各个模块放到不同的机器上,从而提高程序的性能和可靠性. 本章内容包括:集成web service.设计复合应用.分布式环境的session管理 以及 web farms. 2. 主要内容 2.1 集成web service 可以使用Asp.Net MVC4 创建 REST(Representation State Transfer) 服务. 使用 ApiController来返回序列化的数据.这个Controller根据Html头的Accepts属性来决

01Spring_基本jia包的导入andSpring的整体架构and怎么加入日志功能

1.什么是Spring : v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 /* Style De

第二章:创建框架和窗体

没有翻译第一章是由于第一章仅仅介绍了怎样设置IDE.这方面网上文章非常多,我就没有翻译,直接从第二章開始. 以下是原文链接.翻译有不正确的地方请朋友们指正. http://www.rastertek.com/gl40tut02.html Tutorial 2: Creating a Framework and Window This OpenGL 4.0 tutorial will cover setting up a basic frame work and window. 这一章涵盖了创建基