一.明确目标
对上一个任务中的试卷用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
网友评论