2.3.2 基于bootstrap框架写加法器
2.3.2 基于bootstrap框架写加法器
什么是bootstrap？一套用js和CSS编写的框架模板，自己组装一下就可以编写比较美观的网页。官当介绍是组件库：
Build responsive, mobile-first projects on the web with the world's most popular front-end component library
打开主页，我们计划编写最简单的计算器，实现功能为计算两个数的和。主页如下：
点击按钮Get started，打开如下页面:
找到部分“Satarter template”，看到网页模板了，点击右上角“copy按钮”，将代码拷贝到剪贴板，然后保存到硬盘，如下图所示：
找到表单组件（components）部分，点击：
打开找到表单form部分，点击打开：
点击打开找到想要的表单，例如：
点击右上角Copy，拷贝代码，并粘贴到刚才html文档第15行处，如下图：
点击这个网页文件，用浏览器EDGE打开，结果如下：
虽然并不美观，但不影响使用。对源代码做一些简单的修改：
1. <!doctypehtml>
2. <htmllang="en">
3. <head>
4. <!--Required meta tags -->
5. <metacharset="utf-8">
6. <metaname="viewport"content="width=device-width, initial-scale=1,shrink-to-fit=no">
7.
8. <!--Bootstrap CSS -->
9. <linkrel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous">
10.
11. <scripttype="text/javascript">
12. function sum(){
13. add1=parseFloat(exampleInputEmail1.value);
14. add2=parseFloat(exampleInputPassword1.value);
15. exampleInputPassword2.value=add1+add2;
16. }
17.
18. </script>
19. </head>
20. <body>
21. <form>
22. <divclass="form-group">
23. <labelfor="exampleInputEmail1">加数</label>
24. <inputtype="input" class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="add 1">
25. </div>
26. <divclass="form-group">
27. <labelfor="exampleInputPassword1">被加数</label>
28. <inputtype="input" class="form-control"id="exampleInputPassword1"placeholder="add2">
29. </div>
30. <divclass="form-group">
31. <labelfor="exampleInputPassword2">和</label>
32. <inputtype="input" class="form-control"id="exampleInputPassword2"placeholder="sum">
33. </div>
34. <buttontype="button" class="btnbtn-primary" onclick="sum()">求和</button>
35. </form>
36. <!--Optional JavaScript -->
37. <!--jQuery first, then Popper.js, then Bootstrap JS -->
38. <scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script>
39. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"crossorigin="anonymous"></script>
40. <scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"crossorigin="anonymous"></script>
41. </body>
42. </html>
保存并点击运行，结果如下：
的确可以计算加法。什么？UI太丑了。随便打理一下，在原来form外面套了4个layout，修改代码：
1. <!doctypehtml>
2. <htmllang="en">
3. <head>
4. <!--Required meta tags -->
5. <metacharset="utf-8">
6. <metaname="viewport"content="width=device-width, initial-scale=1,shrink-to-fit=no">
7.
8. <!--Bootstrap CSS -->
9. <linkrel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous">
10.
11. <scripttype="text/javascript">
12. function sum(){
13. add1=parseFloat(exampleInputEmail1.value);
14. add2=parseFloat(exampleInputPassword1.value);
15. exampleInputPassword2.value=add1+add2;
16. }
17.
18. </script>
19. </head>
20. <body>
21. <divclass="rowjustify-content-center">
22. <divclass="col-lg-4col-md-6 col-sm-8">
23. <divclass="card-body">
24. <divclass="card">
25. <form>
26. <divclass="form-group">
27. <labelfor="exampleInputEmail1">加数</label>
28. <inputtype="input" class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="add 1">
29. </div>
30. <divclass="form-group">
31. <labelfor="exampleInputPassword1">被加数</label>
32. <inputtype="input" class="form-control"id="exampleInputPassword1"placeholder="add2">
33. </div>
34. <divclass="form-group">
35. <labelfor="exampleInputPassword2">和</label>
36. <inputtype="input" class="form-control"id="exampleInputPassword2"placeholder="sum">
37. </div>
38. <buttontype="button" class="btnbtn-primary" onclick="sum()">求和</button>
39. </form>
40. </div>
41. </div>
42. </div>
43. </div>
44. <!--Optional JavaScript -->
45. <!--jQuery first, then Popper.js, then Bootstrap JS -->
46. <scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script>
47. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"crossorigin="anonymous"></script>
48. <scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"crossorigin="anonymous"></script>
49. </body>
50. </html>
然后点击运行，基本符合审美标准：
既然能算加法，也就可以计算更加复杂的工程问题了。无非就是界面复杂一点，计算量大一点而已。