访问自己写的bootcss案例 打开
bootstarp这使用的是html5，所以我们的页面全部都要是html5的，
html5代码：
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>我是html页面</title>
先说一下栅格化：
.container 容器。 padding：15px 上下左右各15个px。 .container-fluid 这个类名是100%全异显示的。 以上这两个都是容器，不能相互嵌套使用。 .row 和 .column 这两个类的使用，必须在.container 这个容器中才可以正常使用。 .row 行 ; 使用: <div class=”row”> ****这里就是column**** </div> .column 列 .col-xs-number ; number 取值范围是 1-12 ，例如 col-xs-1, con-xs-4
container的宽度是根据屏幕大小来决定的。
container的宽度是多少呢？我们来看一张表：
屏幕宽度<768 | 屏幕宽度>768 | 屏幕宽度>992 | 屏幕宽度>1200 |
Container的宽度：自动 | Container的宽度：750 | Container的宽度：970 | Container的宽度：1170 |
1-12 | 1-12 | 1-12 | 1-12 |
.col-xs-1 | .col-sm-1 | .col-md-1 | .col-lg-1 |
备注说明：每一个列宽左右均有15个px，所有的column必须放在.row 中。 | |||
这样就可以了。
如果是平板或手机就使用 col-xs col-xm 这两个即可
如果说 col-xs-9 和 col-xs-4 并排放在一起，那么 col-xs-4就是另起一行。 因为他们加起来大于12了。
看看偏移量是如何来使用的：
.col-xs-offset-4 | <====> | 4个 col-xs-1 的宽度 |
.col-sm-offset-4 | <====> | 4个 col-sm-1 的宽度 |
.col-md-offset-4 | <====> | 4个 col-md-1 的宽度 |
.col-lg-offset-4 | <====> | 4个 col-lg-1 的宽度 |
这就是这个表格，其实上offset 就是在它的基础上，加上了一个 margin-left: width 这样的一个属性
col-xs-offset-8 就等于 8个col-xs-1 的宽度，这个宽度就是偏移量。 col-xs-5 这是它的宽度，如果指定过大，效果如下：
/**偏移量 这是不做其他的了，要知道1-12 **/
.col-xs-offset-1{
}
.col-sm-offset-1{
}
.col-md-offset-1{
}
.col-lg-offset-1{
}布置标题：
h1-h6 均可使用。 还提供了 h1 到 h6 的class类使用。
h1: 36px字体大小
h2: 30px字体大小
h3: 24px字体大小
h4: 18px字体大小
h5: 14px字体大小
h6: 12px字体大小 还提供了 标签 small 和 .small 类 副标题使用。
small这个标签的字体要比 h1 这里的字要小，且颜色有一定的变化。 淡一些。
bootstarp将全局的字体设置为14px，将行高设为1.428，这些属性直接赋于body元素上。另外<p>段落还设置了1/2行高。
.lend 可以使段落突出，字体加大到21px，加粗到300 ； margin-bottom:20px 就是这些变化。
<code>代码显示</code> <mark>高亮显示</mark> <del></del> <s></s> 这两个标签效果一样 <ins>我是外来文本</ins> 效果如图： <u></u> <small></small> <strong></strong> <i></i> 强调用词，技术词。 <kbd>ctrl+;</kbd> 显示出一个按钮的样子 <pre></pre> 会显示出一个圆角的框框。 如果想要限制高度可以加上一个类名：pre-scrollable,这样它的高度就不会超过350px
对齐方式： .text-left; 左对齐 .text-right; 右对齐 .text-center; 中间对齐 .text-justify; 两边对齐 英文大小： .text-lowercase 全部小写 .text-uppercase 全部大写 .text-capitalize 每个单词首字母大写
<blockquote> 我是引用元素符号 <footer>我是底部</footer> </blockquote> <blockquote> 我是引用元素符号 <footer>我是底部</footer> </blockquote>
显示效果：
表格：
table 它的类有： .table 每一行有一个下划线 .table-bordered 给表格添加上边框 .table-striped 奇数、偶数不同颜色。便于区分 .table-hover 鼠标经过的时候做出响应。 . table-responsive 响应式表格布局。 表格中每一行显示的颜色也可以定义： 在tr上去定义： tr class=”danger” .active .success .info .warning .danger 这几个类分别可以定义在 tr 这个class类上。 表单： .form-control 用于修饰 input textarea select 元素。 使用form-group 包裹。 form-group 这个以后做js验证的时候，有三个类名： .has-warning .has-error .has-success . 这还有一个has-feedback 这个类，添加额外图标，如果不加这个，则不起作用. has-feedback的使用： form-group 这里还有一个 input-group 这样的一个包裹， input-group 可以组合成不同的输入框和按钮： form标签上有两个类： form-inline 一行显示 form-horizontal 水平布局
按钮：
button 按钮<这是一个标签>
.btn .btn-default .btn-primary .btn-info .btn-success .btn-danger
.btn-warning .btn-action
按钮的大小也可以指定: .btn-xs 最小 .btn-sm 较小 .btn-lg 最大
.btn-block 整个块级元素 100%显示。
disabled=”disabled”
如何让图片更好的布局？
在图片上加上class=”img-responsive” 即可自适应大小。 如何上图片居中？ .center-block
.img-circle .img-rounded .img-thumbnail
辅助类：
.text-primary
.text-success
.text-info
.text-warning
.text-danger
背景颜色：
.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
<p class=”bg-danger”>背景颜色的变化</p>
图标组件：
.glyphicon .glyphicon-ok
这个图标组件我们一般情况定义在 span 这个标签上。
<span class="glyphicon glyphicon-ok"></span> 这样就是 
的图标
按钮这个组件不是非得定义在container这个容器中，它定义在任何位置都是可以的。
按钮组：
.btn-toolbar 包围整个按钮组
.btn-group
.btn
写实例来说明一下：
警告框
.alert
.alert-info
.alert-success
.alert-warning
.alert-danger
面版 panel
盒子
.panel
.panel-default
.panel-primary
.panel-success
.panel-info
.panel-warning
.panel-danger
.panel-heading
这里也还可以放h1-h6标签 .panel-title
.panel-body
这是body
.panel-footer 脚注不会从情境效果中继承样式，因为它不是重要的内容
如果以上不能满足您的需求，请直接访问url地址：
拼图CSS
http://www.pintuer.com/style/index/id/2/