electron集成bootstrap制作界面

electron集成bootstrap制作界面

我们知道通过html来开发桌面应用的一个很大的好处就是可以通过简单的html代码就能实现美轮美奂的界面,而如果通过vs或者是xcode来开发却相对耗时耗力,我们今天就结合electron来讲解如何使用electron和bootstrap来实现一个桌面应用的界面。

首先我们看了官方关于界面的介绍是比较少的,只是通过alert dialog这些比较本地化的东西的api讲解告诉我们,通过electron可以实现本地api的调用实现本地的功能,但是实际上他是直接默认了我们理解通过html来实现界面的效果是相当容易的。

我们通过electron实现界面的设计可以说合一般的网页设计类似,通过引入css来实现界面的设计,我们有一个视频教程专门讲解了elecron和bootstrap结合实现桌面应用的界面设计,http://www.ejiakt.com/album/show/241

首先上图

我们通过结合bootstrap快速的构建了一个登录界面。其实只需要通过引入合适的css和js就可以实现这样的功能

我们看一下index.html中的引入部分

  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="bootstrap/js/jquery.min.js"/>
  <script src="bootstrap/js/bootstrap.min.js"/>

这里引入bootstrap需要的文件之后就可以在body中创建可以使用的控件,方便简单。

  • 发表于 2019-08-10 23:08
  • 阅读 ( 296 )
  • 分类:软件开发

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
不写代码的码农
admin

9 篇文章

作家榜 »

  1. admin 9 文章