一、任务目标
预期效果图
二、任务分解
- 先是
input组件的样式 - 再是
panel组件的样式 - 最后是图标字体
glyphicon
三、实现
- 代码：
<!DOCTYPE html>
<html lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>统一建模语言测试题</title>
<script src="exam.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
</head>
<body>
<form>
</div>
<header>
<center><h1>统一建模语言理论测试</h1></center>
</header>
<table class="table table-striped">
<tr>
<td class="form-group"><label>考试科目:</label></td>
<td>统一建模语言</td>
<td class="form-group"><label>时间：</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">班级(必填)：</label></td>
<td><input type="text" class="form-control" id="className"></td>
<td class="form-group"><label for="studentNumber">学号(必填)：</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>对象最突出的特征是：</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与软件工程的关系是</p>
<div>
<input type="radio" name="choice-1" value="A">
(A)UML就是软件工程
</div>
<div>
<input type="radio" name="choice-1" value="B">
(B)UML参与到软件工程中软件开发过程的几个阶段
</div>
<div>
<input type="radio" name="choice-1" value="C">
(C)UML与软件工程无关
</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)概述级
</div>
<div>
<input type="checkbox" name="multiple-choice-1" value="B">
(B)需求级
</div>
<div>
<input type="checkbox" name="multiple-choice-1" value="C">
(C)用户目标级
</div>
<div>
<input type="checkbox" name="multiple-choice-1" value="D">
(D)子功能级
</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">
在状态图中，终止状态在一个状态图中允许有任意多个。
<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>五、简答题(每题20分，共20分)</h1></div>
<div class="panel-body">
<Ol>
<li>
<div class="form-group">
<label> 简述什么是模型以及模型的表现形式？</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()">计算分数</button>
</center>
</section>
</form>
</body>
</html>
-
效果图：
四、总结
- 再显示对勾的时候，默认样式是块级的，却忘记了要改变它的样式，直到同学提醒，才想起来改变样式为行内，最后成功显示
- 这些样式用起来很方便，太多也记不住，最好的掌握它的方法就是多用，用的多自然就会了
