Bootstrap 美化试卷

今天我们来使用 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>

效果：