Bootstrap学习笔记（二）：框架简单使用

还是需要先声明一下，这些文章都是自己初学时写的，内容非常的浅显而且说不定还有错误，请大家在学习的时候要擦亮双眼。

先介绍怎么使用bootstrap吧，在需要使用的项目中，要进入bootstrap的链接。

<!-- 需要的head标签中引入css文件 -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

<!-- 在使用js时，需要在body中引入js文件 -->
<!-- 在引入jquery-1.10.2.min.js文件时，官方下载的bootstrap中不包含这个文件，大家可以在我的网盘中下载，链接在页末 -->
<script type="text/javascript" src="bootstrap/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

今天说一下bootstrap的框架的使用。在我看来，框架主要是方便用来定义组件长度和布局的。在定义长度的的时候，非常简单，bootstrap将屏幕x轴方向划为了12等分，需要多大的等分就用span x表示，但是这是按照像素来划分的，还有一种方式是按照百分比来划分的，下面一一举例说明：

<!-- 在按像素移动中，外标签直接为row 内标签为span3 offset2表示向右偏移span2大小的像素 btn为以按钮方式显示 -->
<div class="row">
<div class="btn span3 offset2">span3</div>
</div>

<!-- 在按照百分比移动中  外标签为row-fluid 内标签不变 -->
<div class="row-fluid">
<div class="btn span3 offset2">span3</div>
</div>

如果觉得这样划分不能满足需求，大家也可以在bootstrap.css中自定义大小。

框架的另外一个功能是布局，不过在按列划分上更加方便，一般用来做博客、文档类的布局。使用方式如下：

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

当然，在框架中还有很多响应式的设计，方便在移动设备上更好的支持HTML5，现在我还没有涉及，所以不再这里班门弄斧了，还请自行了解。

在此提供下载链接，因为使用有些文件在官方文档上没有：http://vdisk.weibo.com/s/aOjgvFZ3rGkT7