在使用Bootstrap之前我的网页都是使用CSS美化，需要逐行的码CSS的代码对网页进行美化，而且有时美化的效果不是很完美；在学习了Bootstrap之后可以直接使用Bootstrap中已经写好的样式对网页进行美化，这样需要自己码的CSS的代码就比较少，而且美化的网页也更加的漂亮。
今天我们就来使用这种简单好用的工具来实现试卷的美化吧。

bootstrap的引入

1. 在线引入--引入bootstrap的网址

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

2.下载Bootstrap的官方文档，在使用的时候将所需要的文件引入

标题居中

在CSS中使用<h1 align="center"></h1>将标题居中，但在bootstrap中使用栅格系统将标题居中。
示例：

<div class="col-md-offset-4 col-md-8">
    <h1>统一建模语言理论测试</h1>
</div>

效果：

标题居中

面板的使用

在css中是使用表格和使用css的设置表格的边框、上下对齐和每列所占的比例实现的两个的表格。
但在Bootstrap中使用默认的面板和栅格系统就能实现上述的效果。
示例：

<div class="col-md-offset-2 col-md-8">
        <div class="panel panel-default">
                <div class="panel-body">
                    <div class="col-md-4">
                        考试科目：统一建模语言
                    </div>
                    <div class="col-md-4">
                        时间：100分钟
                    </div>
                    <div class="col-md-4">
                        得分：
                    </div>
                </div>
        </div>
</div>
<div class="col-md-offset-2 col-md-8">
    <div class="panel panel-default">
                <div class="panel-body">
                    <div class="col-md-4">
                        班级：<input type="text">
                    </div>
                    <div class="col-md-4">
                        学号：<input type="text" >
                    </div>
                    <div class="col-md-4">
                        姓名：<input type="text" >
                    </div>
                </div>
    </div>
</div>

效果：

默认面板和栅格系统

实现每个题的模块，使用了代标题的面板，因为每个题的模块分为题目要求和题。

示例：

<div class="col-md-offset-2 col-md-8">
    <div class="panel panel-default space">
        <div class="panel-heading">
            <h3 class="panel-title">一·填空题(每空5分，共20分)</h3>
        </div>
        <div class="panel-body">
            <p>1.UML 的中文全称是:<input type="text" name="tk1"></p>
            <p>2.对象最突出的特征是:<input type="text" name="tk2"></p>
        </div>
    </div>
</div>

效果：

带表题的面板

按钮

在Bootstrap的按钮中选择要使用的按钮，我美化的按钮选择了按钮的大小和按钮的颜色。
示例：

<div class="col-md-offset-5 col-md-2">
    <button type=button class="btn btn-primary">计算分数</button>
</div>

效果：

按钮

至此，我的试卷的美化已经完成了，来看看最后美化的效果吧。

Bootstarp美化的试卷