2.3.2 Writing an adder based on the bootstrap framework

2.3.2 Writing an adder based on the bootstrap framework

    What is bootstrap? A set of framework templates written in js and CSS, you can compile a more beautiful web page by assembling it yourself. The official introduction is the component library:

Build responsive, mobile-first projects on the web with the world's most popular front-end component library

    Open the homepage, we plan to write the simplest calculator, the realization function is to calculate the sum of two numbers. The homepage is as follows:

     Click the button Get started to open the following page:

    Find the part of "Satarter template" and see the web page template, click the "copy button" in the upper right corner to copy the code to the clipboard, and then save it to the hard disk, as shown in the following figure:

    Find the form components (components) section, click:

   Open the form part of the found form, click to open:

   Click Open to find the form you want, for example:

    Click Copy in the upper right corner, copy the code, and paste it to line 15 of the html document just now, as shown below:

    Click on this web page file and open it with the browser EDGE, the results are as follows:

   Although it is not beautiful, it does not affect the use. Make some simple changes to the source code:

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/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuonymXoPkFOJanwJ8ERdknLPMO"cross

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">Addition</label>

24. <inputtype="input" class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="add 1">

25. </div>

26. <divclass="form-group">

27. <labelfor="exampleInputPassword1">The accrued number</label>

28. <inputtype="input" class="form-control"id="exampleInputPassword1"placeholder="add2">

29. </div>

30. <divclass="form-group">

31. <labelfor="exampleInputPassword2">and</label>

32. <inputtype="input" class="form-control"id="exampleInputPassword2"placeholder="sum">

33. </div>

34. <buttontype="button" class="btnbtn-primary" onclick="sum()">Summation</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"></scriptsrc=" >

39. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjWPIPmori" ="anonymous"></script>

40. <scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"">crossorigin="anZQ5stwEULTy""> >

41. </body>

42. </html>

    Save and click Run, the results are as follows:

    It is indeed possible to calculate the addition. what? The UI is ugly. Just take care of it, set 4 layouts outside the original form, modify the code:

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/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuonymXoPkFOJanwJ8ERdknLPMO"cross

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">Addition</label>

28. <inputtype="input" class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="add 1">

29. </div>

30. <divclass="form-group">

31. <labelfor="exampleInputPassword1">The accrued number</label>

32. <inputtype="input" class="form-control"id="exampleInputPassword1"placeholder="add2">

33. </div>

34. <divclass="form-group">

35. <labelfor="exampleInputPassword2">and</label>

36. <inputtype="input" class="form-control"id="exampleInputPassword2"placeholder="sum">

37. </div>

38. <buttontype="button" class="btnbtn-primary" onclick="sum()">Summation</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"></scriptsrc=" >

47. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjWPIPmori" ="anonymous"></script>

48. <scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"">crossorigin="anZQ5stwEULTy""> >

49. </body>

50. </html>

    Then click to run, basically in line with the aesthetic standards:

    Since addition can be calculated, more complex engineering problems can also be calculated. It's just that the interface is a little more complicated and the amount of calculation is a little bit more.

Reference: https://cloud.tencent.com/developer/article/1178780 2.3.2 Writing an adder based on the bootstrap framework-Cloud + Community-Tencent Cloud