一浇冰、任務(wù)目標(biāo)
預(yù)期效果圖
二浆西、任務(wù)分解
- 先是
input組件的樣式 - 再是
panel組件的樣式 - 最后是圖標(biāo)字體
glyphicon
三、實(shí)現(xiàn)
- 代碼：
<!DOCTYPE html>
<html lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>統(tǒng)一建模語言測(cè)試題</title>
<script src="exam.js"></script>
<link rel="stylesheet" >
</head>
<body>
<form>
</div>
<header>
<center><h1>統(tǒng)一建模語言理論測(cè)試</h1></center>
</header>
<table class="table table-striped">
<tr>
<td class="form-group"><label>考試科目:</label></td>
<td>統(tǒng)一建模語言</td>
<td class="form-group"><label>時(shí)間：</label></td>
<td>100分鐘</td>
<td class="input-group"><label>得分:</label></td>
<td><input type="text" class="form-control"></td>
</tr>
<tr>
<td class="form-group"><label for="className">班級(jí)(必填)：</label></td>
<td><input type="text" class="form-control" id="className"></td>
<td class="form-group"><label for="studentNumber">學(xué)號(hào)(必填)：</label></td>
<td><input type="text" class="form-control" id="studentNumber"></td>
<td class="form-group"><label for="studentName">姓名(必填)：</label></td>
<td><input type="text" class="form-control" id="studentName"></td>
</tr>
</table>
<section class="panel panel-default">
<div class="panel-heading"><h1>一惫谤、填空題（每空5分壁顶，共20分）</h1></div>
<div class="panel-body">
<ol>
<li>
<label>UML的中文全稱是：</label>
<div class="input-group">
<input class="form-control" type="text">
</div>
</li>
<li>
<label>對(duì)象最突出的特征是：</label>
<div class="form-inline">
<input class="form-control" type="text">
<input class="form-control" type="text">
<input class="form-control" type="text">
</div>
</li>
</ol>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading"><h1>二、選擇題（每題10分溜歪，共20分）</h1></div>
<div class="panel-body">
<ol>
<li>
<p>UML與軟件工程的關(guān)系是</p>
<div>
<input type="radio" name="choice-1" value="A">
(A)UML就是軟件工程
</div>
<div>
<input type="radio" name="choice-1" value="B">
(B)UML參與到軟件工程中軟件開發(fā)過程的幾個(gè)階段
</div>
<div>
<input type="radio" name="choice-1" value="C">
(C)UML與軟件工程無關(guān)
</div>
<div>
<input type="radio" name="choice-1" value="D">
(D)UML是軟件工程的一部分
</div>
</li>
<li>
<p>JAVA語言支持</p>
<div>
<input type="radio" name="choice-2" value="A">
(A)單繼承
</div>
<div>
<input type="radio" name="choice-2" value="B">
(B)多繼承
</div>
<div>
<input type="radio" name="choice-2" value="C">
(C)單繼承和多繼承都支持
</div>
<div>
<input type="radio" name="choice-2" value="D">
(D)單繼承和多繼承都不支持
</div>
</li>
</ol>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading"><h1>三若专、多選題（每題10分，共20分）</h1></div>
<div class="panel-body">
<ol>
<li>
<p>用例的粒度分為以下那三種蝴猪。</p>
<div>
<input type="checkbox" name="multiple-choice-1" value="A">
(A)概述級(jí)
</div>
<div>
<input type="checkbox" name="multiple-choice-1" value="B">
(B)需求級(jí)
</div>
<div>
<input type="checkbox" name="multiple-choice-1" value="C">
(C)用戶目標(biāo)級(jí)
</div>
<div>
<input type="checkbox" name="multiple-choice-1" value="D">
(D)子功能級(jí)
</div>
</li>
<li>
<p>類圖由以下哪三部分組调衰。</p>
<div>
<input type="checkbox" name="multiple-choice-2" value="A">
(A)名稱(Name)
</div>
<div>
<input type="checkbox" name="multiple-choice-2" value="B">
(B)屬性(Attribute)
</div>
<div>
<input type="checkbox" name="multiple-choice-2" value="C">
(C)操作(Operation)
</div>
<div>
<input type="checkbox" name="multiple-choice-2" value="D">
(D)方法(Function)
</div>
</li>
</ol>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading"><h1>四、判斷題（每題10分自阱，共20分）</h1></div>
<div class="panel-body">
<Ol>
<li>
<div>
<div class="form-group has-success has-feedback" style="display: inline">
用例圖只是用于和客戶交流和溝通的嚎莉，用于確定需求。
<input type="radio" name="judgment-1" value="T">
<span class="glyphicon glyphicon-ok form-control-feedback"
style="position:relative;display: inline-block"></span>
</div>
<div class="form-group has-error has-feedback" style="display: inline">
<input type="radio" name="judgment-1" value="F">
<span class="glyphicon glyphicon-remove form-control-feedback"
style="position:relative;display: inline-block"></span>
</div>
</div>
</li>
<li>
<div>
<div class="form-group has-success has-feedback" style="display: inline">
在狀態(tài)圖中沛豌，終止?fàn)顟B(tài)在一個(gè)狀態(tài)圖中允許有任意多個(gè)趋箩。
<input type="radio" name="judgment-2" value="T">
<span class="glyphicon glyphicon-ok form-control-feedback"
style="position:relative;display: inline-block"></span>
</div>
<div class="form-group has-error has-feedback" style="display: inline">
<input type="radio" name="judgment-2" value="F">
<span class="glyphicon glyphicon-remove form-control-feedback"
style="position:relative;display: inline-block"></span>
</div>
</li>
</Ol>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading"><h1>五、簡(jiǎn)答題(每題20分琼懊，共20分)</h1></div>
<div class="panel-body">
<Ol>
<li>
<div class="form-group">
<label> 簡(jiǎn)述什么是模型以及模型的表現(xiàn)形式阁簸？</label>
<textarea rows="8" name="answer-1" class="form-control"></textarea>
</div>
</li>
</Ol>
</div>
</section>
<section>
<center>
<button type="submit" class="btn btn-info" onclick="exam()">計(jì)算分?jǐn)?shù)</button>
</center>
</section>
</form>
</body>
</html>
-
效果圖：
四、總結(jié)
- 再顯示對(duì)勾的時(shí)候哼丈，默認(rèn)樣式是塊級(jí)的启妹，卻忘記了要改變它的樣式，直到同學(xué)提醒醉旦，才想起來改變樣式為行內(nèi)饶米，最后成功顯示
- 這些樣式用起來很方便，太多也記不住车胡，最好的掌握它的方法就是多用檬输，用的多自然就會(huì)了
