使用Bootstrap美化往期作品

最近在一脚一脚地踏入前端深坑,学到了Bootstrap,便想用这个来试试能不能把大一的时候做的三位一体计算器美化一下。

之前的网页是这样的。

以前的网页1

以前的网页2

当时也的确是查了各种文档,手撸CSS才写成这样的,但有点不符合现在的审美吧。

index页面变化不大,就把按钮加了一下bootstrap提供的样式,然后做一下简单的排版就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="container">
<h3 class="text-center">欢迎使用三位一体计算器</h3>
</div>
<div class="container">
<h4 class="text-center">距离2018年高考还有</h4>
</div>
<div class="container">
<h2 class="text-center font-weight-bold">
<div class="timer"></div>
</h2>
</div>
<div class="container">
<div class="text-center">
<a href="zhcj.html"><button id="zhcj" class="btn btn-dark">计算综合成绩</button></a>
<a href="gkcj.html"><button id="gkcj" class="btn btn-dark">计算高考成绩</button></a>
</div>
</div>

现在的网页1

然后是计算页面,给所有的表单都加了form-control属性,但由于form-control的width是100%,只能给父级的div添加宽度控制的属性

但后面又发现无法使表单居中,查了很多的资料,增增删删了很多样式,但都无法达到心里想的效果,挫败感xN

现在的网页2

先放下代码吧,如果想到了解决办法,再回过头来改x

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="container">
<form class="form-inline" id="form1" role="form">
<div class="form-group">
<label class="col-4 control-label">
报考学校
</label>
<div class="col-8">
<select class="form-control" id="university">
</select>
</div>
</div>
</form>
<form class="form-inline" id="form2" role="form">
<div class="form-group">
<label class="col-4 control-label">
学考成绩
</label>
<div class="col-8">
<input id="text1" type="text" class="form-control col-2">A
<input id="text2" type="text" class="form-control col-2">B
<input id="text3" type="text" class="form-control col-2">C
<input id="text4" type="text" class="form-control col-2">D
</div>
</div>
</form>
<form class="form-inline" id="form3" role="form">
<div class="form-group">
<label class="col-2 control-label">面试成绩</label>
<input id="text5" type="text" class="form-control col-3">
<label class="col-4 control-label">目标综合成绩</label>
<input id="text6" type="text" class="form-control col-3">
</p>
</div>
</form>
<form class="form-inline" id="form4" role="form">
<div class="form-group">

<input id="button1" type="button" class="btn btn-primary" value="计算高考成绩" onclick="calculate()">
<input id="button2" type="button" class="btn btn-danger" value="清除" onclick="delet()">
<a href="index.html">
<input id="button3" type="button" class="btn btn-light" value="返回">
</a>

</div>
</form>
</div>