起步：

下载编译好的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的更多相关文章

  1. 读bootstrap2.3.2有感2

    排版: Bootstrap定义的全局 font-size 是 14px,line-height 是 20px.这些样式应用到了 <body> 和所有的段落上.另外,对 <p> ...

  2. 10.读google测试之道有感

    (一)读google测试之道有感.  

  3. IT同行请教我如何培养读书习惯，结果就是“读了1本书，并写下'读《成交》有感'一文”

    前段时间,我把CSDN博客的签名加上了"读过100+本经典书籍". 一个经常关注我CSDN博客的老乡,问我是如何做到的. 该老乡,准确来说是前辈,该前辈买了很多技术读物却没有耐心读 ...

  4. 学习JAVAWEB第三十七天（读构建之法有感）

    读<构建之法>有感 我今年暑假回去就要升入大二了,在今年的专业分流时,我选择了软件工程专业,起初的想法很简单,做一款优秀的,能拥有大量用户的软件,甚至还想通过自己的软件改变人们的生活.读了 ...

  5. 【读fastclick源码有感】彻底解决tap“点透”，提升移动端点击响应速度

    申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样的话 ...

  6. 读IT小小鸟有感

           第一次阅读<我是一只IT小小鸟>是在老师的推荐下的,我是一名软工大一新生,那天在课堂上听到了这本书,由于是10年前的老书,要找到它非常不易,终于在网上看到一些部分电子档.   ...

  7. 如果简单的记录,就可以为这个世界创造更多的财富,那么还有什么理由不去写博客呢? — 读<<黑客与画家>> 有感

    上一次博文发文时间是2016.1.15,7个月已经过去了.最近读了一本<>的书,对我触动挺大的!里面有关于技术趋势的探讨,也有关于人生和财富的思考! 开始更新iOS122的文章的初衷是,聚 ...

  8. 读jQuery源码有感

    读之前的预备工作: 1.基础的js知识,以及html和css知识,和正则表达式知识.可以参考妙味课堂的基础js,html和css大纲. 2.JavaScript核心指南的知识http://www.cn ...

  9. 【Java-Method】读《重构》有感_Java方法到底是传值调用还是传引用调用（传钥匙调用）

    今天读<重构>P279, Separate Query from Modifier,将查询函数和修改函数分离. 问题的产生 突然想到 Java 的传对象作为参数的方法到底是 传引用调用,还 ...

随机推荐

  1. 使用PHP发送email进行账号激活或者密码修改操作

    使用PHPMailer编写发送邮件 PHPMailer需PHP的socket扩展支持,而PHPMailer链接qq域名邮箱时需要ssl加密方式(qq邮箱最近做了限制,新开域名邮箱不再允许通过smtp协 ...

  2. x-requested-with 请求头 区分ajax请求还是普通请求(转)

    在服务器端判断request来自Ajax请求(异步)还是传统请求(同步): 两种请求在请求的Header不同,Ajax 异步请求比传统的同步请求多了一个头参数 1.传统同步请求参数 accept  t ...

  3. UIWebView、WKWebView使用详解及性能分析

    http://www.cnblogs.com/junhuawang/p/5759224.html

  4. android基于GPS实现定位操作

    一.定位的三种方式 1.wifi定位,ip地址定位,通过ip地址进行查询实际地址: 2.基站定位,信号塔,基站:手机通讯服务的设备 ,信号的格数决定了手机距离基站远近,精确度:几十米到几公里,精确度来 ...

  5. boot from volume

    nova boot --flavor 1 --block-device source=image,id=<image_id>,dest=volume,size=5,shutdown=pre ...

  6. Django + Apache + 树莓派 搭建内网微信公众号服务器

    其实早在微信开放公众号开发平台时就想弄一个自己的公众号服务器,奈何对web服务器搭建和开发一窍不通,只是注册了一下开发者帐号,并没有采取行动,万恶的拖延症. 前一年,开始接触python,打开了神奇世 ...

  7. 格式化HRESULT获取对应文本

    CString CXXUtil::FormatMessageFor(HRESULT hr) { CString strMsg; LPVOID pvMsgBuf = NULL; LPCTSTR pszM ...

  8. 安装完ODAC，出现ORA-12560:TNS:协议适配器错误 12541 无监听程序的解决

    进入系统环境变量设置,查看Path路径,发现D:\oracle\product\11.2.0\client_1等路径放到了oracle11g数据库路径前面,将新加入的路径置后即可解决ORA-12560 ...

  9. SVN使用总结

    ## 常用命令 建立分支 --- svn copy/cp svn cp http://example.com/repos/myproject/trunk http://example.com/repo ...

  10. Linux Oracle删除归档日志

    今天遇到Oracle报这样的错:ORA-00257 查看了下,原来是Oracle的归档日志满了,解决方案两个 一:增加归档日志大小 二:删除无用的归档日志(我们选择这个方案) 什么也不说了Linux下 ...