1.下载架包，下载编译好的文件，文件目录结构如下所示：

 bootstrap/

  ├── css/

  │   ├── bootstrap.css

  │   ├── bootstrap.min.css

  ├── js/

  │   ├── bootstrap.js

  │   ├── bootstrap.min.js

  └── img/

      ├── glyphicons-halflings.png

      └── glyphicons-halflings-white.png

添加min代表：对没有添加min的文件压缩而得到的压缩版。

使用bootstrap开发页面大体布局如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <!-- Bootstrap -->
  7. <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  8. </head>
  9. <body>
  10. <h1>Hello, world!</h1>
  11. <script src="http://code.jquery.com/jquery.js"></script>
  12. <script src="js/bootstrap.min.js"></script>
  13. </body>
  14. </html>

2.开发中必须使用HTML5文档类型：每个页面都应如下格式

对于中文来讲lang=”ch-CN”

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. ...
  4. </html>

3.默认栅格系统，默认为12列，形成一个940px宽的容器；

.row 代表一行, .span*代表站的列数，例如2列.span2

当你的屏幕是940px是，分成12列代表铺面全屏

<div class=”row”>

<div class=”span1”   style=”background-color:red”></div>

<div calss=”span1”    style=”background-color:red”></div>

</div>

.offset*代表偏移量向右偏

<div class=”row”>

<div class=”span1 offset1”  style=”background-color:red”></div>

<div class=”span1”  style=”background-color:red”></div>

</div>

显示效果只会出现一个红快，原因，第一个<div>向右偏移一个单位时把第二个<div>覆盖。

4.嵌套列：嵌套列就是在已有的.span下再次使用.row .span*。要注意子类中的列的和不能超过父类的列数。

<div  class=”row”>

<div class=”span3”>

<div class=”row” >

<div class=”span1”> </div>

<div class=”span2”></div>

</div>

</div>

</div>

5.流式栅格系统：

它采用百分比而不是像素。它和固定栅格系统一样拥有响应式布局的能力，这就保证了对于

不同的分辨率和设备作出适当的调整。

用法：将.row改为.row-fluid，其他的不变.span*，.offset*

在使用.row-fluid时里面的所有列都可以看为可分为12列，出于页面显示整齐，如果使用流式，

就一直使用不要掺固定。

6.布局:

固定布局.container，使用该布局的宽度是940px。

<div class=”container”>

</div>

流式布局：.container-fluid，它的宽度根据使用屏幕来定。

<div class=”container-fluid”>

</div>

7.响应式设计

使用响应式设计时，在页面中添加一个<meta>和引入对应额响应式的样式

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

该特性一般在使用出才添加。

8.基本的样式：

<h1>到<h6>都可以使用

bootstrap定义了全局font-size是14px，line-height是20px，这些样式都应用到了<body>和所有的段落上。

另外，对<p>还定义了1/2行高（默认为10px）的底部外边局（margin）属性。

.lead使段落突出

<p class=”lead”> 突出</p>

对不需要强调的使用small标签。

<small>….</small>

加粗<strong>…</strong>

斜体<em>….</em>

文本对齐方式：.text-left，.text-center，.text-right

Bootstrap 2.3.2学习的更多相关文章

  1. 桂电在线-转变成bootstrap版3(记录学习bootstrap)

    继续上文 正文菜单 html: <!-- 菜单块 --> <div class="on-light" id="menus"> <s ...

  2. 桂电在线-转变成bootstrap版2(记录学习bootstrap)

    下载bootstrap框架https://github.com/twbs/bootstrap 或者 http://getbootstrap.com/ 拷贝模板 修改基本模板 语言zh-cn,标题,描述 ...

  3. 基于jQuery，bootstrap的bootstrapValidator的学习（一)

    bootstrap:能够增加兼容性的强大框架. 因为移动端项目需要数据验证,就开始学习了bootstrapValidator . 1.需要引用的文件: css: bootstrap.min.css b ...

  4. Bootstrap基本类和组件学习二

    一.联系方式:(自带鼠标的移动动画) 1.头文件CSS <link rel="shortcut icon" href="favicon.ico"> ...

  5. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  6. Bootstrap下拉单学习

    <!DOCTYPE HTML><html><head><link rel="stylesheet" href="/stylesh ...

  7. Bootstrap相关优质项目学习清单

    1:编码规范 by @mdo编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范 http://codeguide.bootcss.com/ 2:快速.可靠.安全的依赖管理工具.Yarn 缓存了 ...

  8. bootstrap学习总结-css样式设计(二)

    首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...

  9. 快速学习bootstrap前台框架

    W3c里的解释 使用bootstrap需要注意事项 1.  在html文件第一行要加上<!doctype html>[s1] 2.  导入bootstrap.min.css文件 3.  导 ...

随机推荐

  1. nyoj 88 汉诺塔(一)

    点击打开链接 汉诺塔(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝 ...

  2. activity退出

    这里介绍两种方法:一种把每个activity记住,然后逐一干掉:另一种思路是使用广播.本文来源于网络,如有雷同,那是必须的.写此贴只是为了总结一下常用东东,还望原作者莫怪,本人真不是想侵权. 方法一. ...

  3. Spring配置事务 http://www.cnblogs.com/leiOOlei/p/3725911.html

    http://www.cnblogs.com/leiOOlei/p/3725911.html JNDI方式配置数据源: <?xml version="1.0" encodin ...

  4. Redis数据持久化之AOF持久化

    一.RDB持久化的缺点创建RDB文件需要将服务器所有的数据库的数据都保存起来,这是一个非常耗费资源和时间的操作,所以服务器需要隔一段时间才能创建一个新的RDB文件,就也是说创建RDB文件的操作不能执行 ...

  5. HRBUST1530

    链接 http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=1530 这个是典型的二分题,题 ...

  6. 移动开发 android 入门开发 阶段视频

    一直想把 android 的开发学习录制成视频,这里录制了一部分供大家学习. http://www.chuanke.com/s5402069.html 到这里,文档,源码,视频基本就全了,祝愿大家能够 ...

  7. C#程序用Inno Setup打包，以管理员身份运行的处理方法

    一.C#项目端的处理 目标:快捷方式有带盾的标识 在源码的Properties目录中找到 app.manifest,将其中level="asInvoker" 改成 level=&q ...

  8. flash上传在spring mvc中出现的问题2

    转载请注明: TheViper http://www.cnblogs.com/TheViper  这两天本屌在做flash拼图上传遇到点坑 上传原理很简单,就是把上图右边画布区域BitmapData. ...

  9. JS判断手机浏览器

    <script type="text/javascript"> /* * 智能机浏览器版本信息: * */ varbrowser={ versions:function ...

  10. while((c = getchar()) != EOF)（键盘输入问题）

    问题描述: 样例输入:O S 样例输出:I A 代码实现: #include <stdio.h> char *s = "`1234567890-=qwertyuiop[]\\as ...