读bootstrap2.3.2有感1
起步：
下载编译好的bootstrap2文件，百度新版jquery.js,并复制html模版（hello world）放置在同一目录,然后看了下官网上的范例网站，心里还是很激动啊~
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
脚手架：
特意百度了下脚手架是什么意思：指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。说白了就是全局基础。
1.必须使用html5的文档类型。并且默认定义body的背景色未白色，移除margin，14号字，20高（详情见重置文件Normalize.css）。
2.栅格系统/流式栅格系统
a.栅格系统是bootstrap把940像素的宽度分成12等分其中1等分为1列+1个外边距。如果加入响应式布局CSS文件（bootstrap-responsive.min.css），栅格系统会自动 根据可视窗口的宽度从724px到1170px进行动态调整12等分的总长度。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。
用类来表示1等分的话就是“span1”，在容器“row”中最多显示12等分即“span12”。把列向右移动可使用 .offset* 类。在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
<div class="row">
<div class="span4">...</div>
<div class="span8">
<div class="row">
<div class="span4">...</div>
<div class="span4">...</div>
</div>
</div>
</div>
b.流式栅格系统是bootstrap把可视窗口100%的宽度12等分其中1等分为1列+1个外边不。
用类来表示1等分的话就是“span1”，在容器“row-fluid”中最多显示12等分即“span12”。把列向右移动可使用 .offset* 类。在已有的.span*内添加一个新的 .row-fluid 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于“span12”。
布局：
a.固定布局:提供了一个通用的固定宽度（栅格系统）的布局方式，用 <div class="container"> 即可。
<body>
<div class="container">
...
</div>
</body>
b.流式布局：提供了一个可变的宽度（流式栅格系统）的布局方式，利用 <div class="container-fluid"> 。
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
响应式设计：
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
读bootstrap2.3.2有感1的更多相关文章
- 读bootstrap2.3.2有感2
排版: Bootstrap定义的全局 font-size 是 14px,line-height 是 20px.这些样式应用到了 <body> 和所有的段落上.另外,对 <p> ...
- 10.读google测试之道有感
(一)读google测试之道有感.
- IT同行请教我如何培养读书习惯，结果就是“读了1本书，并写下'读《成交》有感'一文”
前段时间,我把CSDN博客的签名加上了"读过100+本经典书籍". 一个经常关注我CSDN博客的老乡,问我是如何做到的. 该老乡,准确来说是前辈,该前辈买了很多技术读物却没有耐心读 ...
- 学习JAVAWEB第三十七天（读构建之法有感）
读<构建之法>有感 我今年暑假回去就要升入大二了,在今年的专业分流时,我选择了软件工程专业,起初的想法很简单,做一款优秀的,能拥有大量用户的软件,甚至还想通过自己的软件改变人们的生活.读了 ...
- 【读fastclick源码有感】彻底解决tap“点透”，提升移动端点击响应速度
申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样的话 ...
- 读IT小小鸟有感
第一次阅读<我是一只IT小小鸟>是在老师的推荐下的,我是一名软工大一新生,那天在课堂上听到了这本书,由于是10年前的老书,要找到它非常不易,终于在网上看到一些部分电子档. ...
- 如果简单的记录,就可以为这个世界创造更多的财富,那么还有什么理由不去写博客呢? — 读<<黑客与画家>> 有感
上一次博文发文时间是2016.1.15,7个月已经过去了.最近读了一本<>的书,对我触动挺大的!里面有关于技术趋势的探讨,也有关于人生和财富的思考! 开始更新iOS122的文章的初衷是,聚 ...
- 读jQuery源码有感
读之前的预备工作: 1.基础的js知识,以及html和css知识,和正则表达式知识.可以参考妙味课堂的基础js,html和css大纲. 2.JavaScript核心指南的知识http://www.cn ...
- 【Java-Method】读《重构》有感_Java方法到底是传值调用还是传引用调用（传钥匙调用）
今天读<重构>P279, Separate Query from Modifier,将查询函数和修改函数分离. 问题的产生 突然想到 Java 的传对象作为参数的方法到底是 传引用调用,还 ...
随机推荐
- jqGrid的选中行事件
http://blog.csdn.net/u014381863/article/details/50375121
- 防止多次领取红包进行ID锁
//controller里面使用锁 ActivityRedPacket ap = customerService.getActivityRedPacket(params); if (synchr ...
- Thinking in Java 学习笔记（一）
chapter_01 对象导论 1.1 Java语言基础Smalltalk的特性: 万物皆对象 可以将对象视为一种奇特的变量,它可以存储数据(成员变量),也可以在自身上执行操作(方法). 程序对象 ...
- 分享自制的13套 JQuery Mobile 界面主题（追加4套新款）
15套整合在一起的,其中2套官方+13套自制,款款精致,方便移动开发. 字体默认为微软雅黑. 适配于 JQuery Mobile 1.4.3 下载地址:http://files.cnblogs.com ...
- JavaScript 常用函数总结
javascript函数: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 .cookie函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert ...
- 抽象工厂模式 shiyanlou
二.什么是 抽象工厂模式 抽象工厂模式(Abstract Factory Pattern)是一种软件开发设计模式.抽象工厂模式提供了一种方式,可以将一组具有同一主题的单独的工厂封装起来.如果比较抽象工 ...
- 《VB语言程序设计（第3版）》总结
我之前因学习昆仑通态的组态软件MCGS,用并学习过VB,还买了一本书<VB语言程序设计(第3版)>.现在在某公司实习,最近接触老的项目,又要用到VB.我就又把那本书大体看了一遍,并对其进行 ...
- AngularJs自定义指令详解（4） - transclude
transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...
- Oracle数据库导入导出命令总结 （详询请加qq：2085920154）
分类: Linux Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到远处的 ...
- ASP.NET 页生命周期
ASP.NET 页运行时,此页将经历一个生命周期,在生命周期中将执行一系列处理步骤.这些步骤包括初始化.实例化控件.还原和维护状态.运行事件处理程序代码以及进行 呈现.了解页生命周期非常重要,因为这样 ...