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>

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

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

原文链接:https://mp.weixin.qq.com/s?__biz=MzU0MjkyMzYxMA==&tempkey=OTY4X25LVkxGeEozV2JXQmRscTJkRkxzRGRrdDFpeXl3SHNWaXJUYU9NdVpibHc0MkRYZGhfWVJJUTlMb0dURTBmdHlreDN2RGZFaUdSVnE4NU1tZnBFb1FBS2hNQkU5OVlFR0hQenBOT01mUVRWOVZsbENZaEZSQXp4YmJlM1E5Y05TbzFSOFBfTHM4bm1KMXZteDFKd1VUQk9sa3dOYkhUaVZOV0R3SXd%2Bfg%3D%3D&chk

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏圣杰的专栏

ABP入门系列(14)——应用BootstrapTable表格插件

源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)——分页实现讲解了如何进行分页展示,但其分页展示仅适用于前台we...

88850
来自专栏林德熙的博客

C# 从零开始写 SharpDx 应用 初始化dx修改颜色

本文来告诉大家如何在上一篇博客创建的窗口里面使用 Sharpdx 初始化,然后设置窗口颜色。

26710
来自专栏布尔

Ext的组件模型印象

组件模型在Ext1.x中已经引入了,但在框架中并没有得到全面的整合。2.0以后组件得到了很大的提高和改进,成为了框架的里最基础的一个类。组件对象模型为组件的创建...

194100
来自专栏小詹同学

人脸检测(二 )——MFC实现

一、关于MFC 微软基础类库(英语:Microsoft Foundation Classes,简称MFC)是一个微软公司提供的类库(class...

54160
来自专栏码字搬砖

sqoop原理

sqoop,各位看官基本上都了解或者听说过,小二就不进行废话了。另外基于国内大部分用的为CDH,小二就想说一点:CDH中的sqoop2其实是apace版的sqo...

66610
来自专栏Golang语言社区

Golang笔记——并发

o语言中的main函数也是运行在一个单独的goroutine中的,一般称为 main goroutine,main函数结束时,会打断其它 goroutine 的...

36350
来自专栏搞前端的李蚊子

ReactJs移动端兼容问题汇总

A:初步怀疑是css属性没有加前缀引发的兼容问题,但添加后发现也不行,通过webview调试后控制台输出Set is undefined,搜索后发现React依...

30650
来自专栏Google Dart

开始使用-编写你的第一个Flutter应用程序 顶

这是创建您的第一个Flutter应用程序的指南。 如果您熟悉面向对象的代码和基本编程概念(如变量,循环和条件),则可以完成本教程。 您不需要以前使用Dart或移...

12220
来自专栏用户2442861的专栏

webStorm 3.0配置使用主题背景色等

http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html

34010
来自专栏对角另一面

读Zepto源码之Gesture模块

Gesture 模块基于 IOS 上的 Gesture 事件的封装,利用 scale 属性,封装出 pinch 系列事件。 读 Zepto 源码系列文章已经放到...

25500

扫码关注云+社区

领取腾讯云代金券