Bootstrap|美化試卷過程記錄

一.明確目標
對上一個任務中的試卷用Bootstrap進行美化。
二.分解任務
1.用柵格布局的列偏移來實現居中；

<div class="row">
    <div class="col-md-4 col-md-offset-4"><h1>統一建模語言理論測試</h1></div>
</div>

2.不帶標題的panel面板和帶標題的panel 面板；

  <!--不帶標題面板>
  <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 class="panel panel-default">
    <div class="panel-heading">
        <h6 class="panel-title">這是標題</h6>
    </div>
    <div class="panel-body">
                這是面板內容
    </div>
</div>

3.input設置為.form-control；
4.按鈕設置為.btn .btn-info;
5.用圖標.glyphicon .glyphicon-ok和.glyphicon .glyphicon-remove代替對錯
三.寫實現

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./style.css">
    <script src="./dist/jquery-3.1.1/jquery-3.1.1.min.js"></script>
    <script src="./dist/js/bootstrap.min.js"></script>
    <title>bootstrap</title> 
</head>
<body>
<form class="form-inline" role="form">
 <div class="row">
    <div class="col-md-4 col-md-offset-4"><h1>統一建模語言理論測試</h1></div>
</div>
<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 class="panel panel-default">
    <div class="panel-body">
        <div class="col-md-4">
            <div class="form-group">
                班級：
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                學號：
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                姓名：
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h6 class="panel-title">
            一.填空題（每空5分，共20分）
        </h6>
    </div>
    <div class="panel-body">
        <div>1.UML的中文全稱是：</div>
        <input type="text" class="form-control">
        <div>2.對象最突出的特點是：</div>
        <input type="text" class="form-control">
        <input type="text" class="form-control">
        <input type="text" class="form-control">
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h6 class="panel-title">
            二.單選題（每題10分，共20分）
        </h6>
    </div>
    <div class="panel-body">
        <h5>1.UML與軟件工程的關系是：</h5>
        <div><input type="radio" name="select-1">（A）UML就是軟件工程</div>
        <div><input type="radio" name="select-1">（B）UML參與到軟件工程中軟件開發過程的幾個階段</div>
        <div><input type="radio" name="select-1">（C）UML與軟件工程無關</div>
        <div><input type="radio" name="select-1">（D）UML是軟件工程的一部分</div>
        <h5>2.JAVA語言支持：</h5>
        <div><input type="radio" name="select-2">（A）單繼承</div>
        <div><input type="radio" name="select-2">（B）多繼承</div>
        <div><input type="radio" name="select-2">（B）單繼承和多繼承都支持</div>
        <div><input type="radio" name="select-2">（B）單繼承和多繼承都不支持</div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h6 class="panel-title">
            三.多選題（每題10分，共20分）
        </h6>
    </div>
    <div class="panel-body">
        <h5>1.用例的力度分為以下哪三種：</h5>
        <div><input type="checkbox" name="select-3">（A）概述級</div>
        <div><input type="checkbox" name="select-3">（B）需求級</div>
        <div><input type="checkbox" name="select-3">（C）用戶目標級</div>
        <div><input type="checkbox" name="select-3">（D）子功能級</div>
        <h5>2.類圖由以下哪三部分組成：</h5>
        <div><input type="checkbox" name="select-4">（A）單繼承</div>
        <div><input type="checkbox" name="select-4">（B）多繼承</div>
        <div><input type="checkbox" name="select-4">（B）單繼承和多繼承都支持</div>
        <div><input type="checkbox" name="select-4">（B）單繼承和多繼承都不支持</div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h6 class="panel-title">
            四.判斷題（每題10分，共20分）
        </h6>
    </div>
    <div class="panel-body">
        <div>
            <h5>1.用例圖只是用于和客戶交流和溝通的，用于確定需求。</h5><span>    <input type="radio" name="select-5">   <span
                class="glyphicon glyphicon-ok">  </span>   <input type="radio" name="select-5">   <span
                class="glyphicon glyphicon-remove"></span></span>
        </div>
        <div>
            <h5>2.在狀態圖中，終止狀態在一個狀態圖中允許有任意多個。</h5></h5><span>    <input type="radio" name="select-5">   <span
                class="glyphicon glyphicon-ok">  </span>   <input type="radio" name="select-5">   <span
                class="glyphicon glyphicon-remove"></span></span></span>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h6 class="panel-title">
            五.簡答題（每題10分，共20分）
        </h6>
    </div>
    <div class="panel-body">
        <div>
        <h5>1.簡述什么是模型以及模型的表現形式？</h5>
        </div>
        <textarea type="text" class="form-control" rows="5" cols="200"></textarea>
    </div>
</div>
<div class="button">
    <input type="submit" value="計算分數" class="btn btn-info">
</div>
</form>
</body>

</html>
四.效果圖


Bootstrap美化試卷.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容