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>

然后点击运行,基本符合审美标准:

既然能算加法,也就可以计算更加复杂的工程问题了。无非就是界面复杂一点,计算量大一点而已。

本文分享自微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券