今天我们来使用 Bootstrap 来美化试卷美化后的效果跟使用 CSS 美化后的效果一样。
美化后的试卷样式
标题居中
在 CSS 美化试卷中，我自己定义 center 来居中标题，在 Bootstrap 中，我们可以使用栅格来将标题居中。
我们用到了 col-md 和 col-md-offset
代码：
<div class="col-md-offset-4 col-md-8">
<h1 class="col-md-offset-1">统一建模语言测试</h1>
</div>
效果：
标题居中
添加面板
我们需要添加两种面板，一种是默认面板，一种是带标题面板。
首先，我们将科目、姓名之类的设置成默认面板。
代码如下：
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-4">考试科目： 统一建模语言</div>
<div class="col-md-4" id="time">时间： 100分</div>
<div class="col-md-4" id="grade">得分：</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-4">
<span>班级（必填）：</span>
<input type="text" id="class">
</div>
<div class="col-md-4">
<span>学号（必填）：</span>
<input type="text" id="schoolNumber">
</div>
<div class="col-md-4">
<span>姓名（必填）：</span>
<input type="text" id="name">
</div>
</div>
</div>
</div>
效果：
默认面板
我们再来添加带标题面板。
代码如下：
<div class="panel panel-default">
<div class="panel-heading">
<h3>一、填空题（每空5分，共20分）</h3>
</div>
<div class="panel-body">
<ol>
<li>
<span>UML的中文全称是：</span>
<div><input type="text" id="1-1"></div>
</li>
<li>
<span>对象最突出的特性是：</span>
<div>
<input type="text" id="1-1-1">
<input type="text" id="1-1-2">
<input type="text" id="1-1-3">
</div>
</li>
</ol>
</div>
</div>
效果：
带标题面板
默认面板只是有 panel-body ，而带标题的面板不仅有 panel-body 还有 panel-heading。
美化所有输入框
给所有输入框加入 .form-control 这样会让输入框变得很好看。
效果：
美化后的输入框
美化提交按钮
提交按钮
最后就用 Bootstrap 将整个试卷都美化完了，看看效果：
最终效果
