在使用Bootstrap之前我的網(wǎng)頁(yè)都是使用CSS美化，需要逐行的碼CSS的代碼對(duì)網(wǎng)頁(yè)進(jìn)行美化，而且有時(shí)美化的效果不是很完美；在學(xué)習(xí)了Bootstrap之后可以直接使用Bootstrap中已經(jīng)寫(xiě)好的樣式對(duì)網(wǎng)頁(yè)進(jìn)行美化，這樣需要自己碼的CSS的代碼就比較少，而且美化的網(wǎng)頁(yè)也更加的漂亮。
今天我們就來(lái)使用這種簡(jiǎn)單好用的工具來(lái)實(shí)現(xiàn)試卷的美化吧。

bootstrap的引入

1. 在線引入--引入bootstrap的網(wǎng)址

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" >
<!-- 可選的Bootstrap主題文件（一般不用引入） -->
<link rel="stylesheet" >
<!-- jQuery文件。務(wù)必在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的官方文檔，在使用的時(shí)候?qū)⑺枰奈募?/p>

標(biāo)題居中

在CSS中使用<h1 align="center"></h1>將標(biāo)題居中，但在bootstrap中使用柵格系統(tǒng)將標(biāo)題居中。
示例：

<div class="col-md-offset-4 col-md-8">
    <h1>統(tǒng)一建模語(yǔ)言理論測(cè)試</h1>
</div>

效果：

標(biāo)題居中

面板的使用

在css中是使用表格和使用css的設(shè)置表格的邊框、上下對(duì)齊和每列所占的比例實(shí)現(xiàn)的兩個(gè)的表格。
但在Bootstrap中使用默認(rèn)的面板和柵格系統(tǒng)就能實(shí)現(xiàn)上述的效果。
示例：

<div class="col-md-offset-2 col-md-8">
        <div class="panel panel-default">
                <div class="panel-body">
                    <div class="col-md-4">
                        考試科目：統(tǒng)一建模語(yǔ)言
                    </div>
                    <div class="col-md-4">
                        時(shí)間：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">
                        班級(jí)：<input type="text">
                    </div>
                    <div class="col-md-4">
                        學(xué)號(hào)：<input type="text" >
                    </div>
                    <div class="col-md-4">
                        姓名：<input type="text" >
                    </div>
                </div>
    </div>
</div>

效果：

默認(rèn)面板和柵格系統(tǒng)

實(shí)現(xiàn)每個(gè)題的模塊，使用了代標(biāo)題的面板，因?yàn)槊總€(gè)題的模塊分為題目要求和題。

示例：

<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.對(duì)象最突出的特征是:<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">計(jì)算分?jǐn)?shù)</button>
</div>

效果：

按鈕

至此，我的試卷的美化已經(jīng)完成了，來(lái)看看最后美化的效果吧。

Bootstarp美化的試卷