最近在学习Dojo,但样式问题真是头疼呀,虽然清新的淡蓝色很是减缓眼睛的疲劳,但这个扁平化简约风盛行的年代,光是清新的拟物已经满足不了群众的需求了,所以就在这样的需求下,我知道了bootstrap for dojo UI 的存在,并且好消息是这个是基于 BSD和Apache的开源协议,也就是说和dojo一样可以改源码,可以免费商用,你的项目也不用必须开源,跟Dojo一样,很爽吧。

在github上的地址是https://github.com/atoha/dbootstrap,演示地址是http://martinpengellyphillips.github.com/dbootstrap/,谁说dojo没有extjs好看,只是因为自己懒吧,既然懒,还不找找大牛制造的轮子么,好了,等我兴致勃勃的下载下来后发现不知怎么运行,这时候就是此篇博客所要发挥的重要性了。

首先下载,不要点github上的下载zip按钮,因为项目中有的文件是别的项目的文件,直接下载不会包含引用的文件,要复制下面说明中的

git clone --recursive git://github.com/martinpengellyphillips/dbootstrap.git

这个我就不详细说了,用过git的都知道怎么弄了,没用过的学下吧,有好处。

git 下载后的目录结构是这样的

你的下载文件可能比我多几个,这是因为我把没用的删掉了。并且你们也没有build目录,这个目录就是我们最后要生成的目录,继续往下看吧!

之后就是重头戏了

这里需要安装四个文件,至于安装方法我只能简单概括,毕竟安装软件对于工程师来说应该不算什么难事,网上的帖子说的比我要详细的很多。

第一步:安装python,这里要注意python的版本有所限制,要大于等于 2.6,小于3,现在官网最新的python2.x的版本是2.7,所以我使用的是2.7版本,就好似你需要兼容IE8一样,不能使用jquery2.1.4一样,只能用1.11.3。

第二步,安装node,这个步骤我就不说了,自行查吧,很简单。但要版本大于等于0.10.5,还好现在官网的下载连接都是0.12.x的了

第三部,安装stylus,这个stylus其实是一个css预编译语言,只不过这里说的是一个基于node构建的编译styl文件的模块,所以你安装完node后,想必你也知道npm了,就是一个node模块的管理工具,在控制台中输入:

npm install -g stylus

即可,之后等待安装完毕,-g一定不要丢了,这个很重要,意思是这个模块在任何文件目录下都可用。stylus的版本要求是最低0.31,但你在看这篇帖子的时候npm下来的版本已经大于这个版本了,无需关心。

第三部,java jdk安装,这个更不用说的。配置jdk环境的帖子比配置node的都要多,自己搜下吧,但要7以上才行,我用的最新的8.

当这些步都搞定的时候接下来就是生成可运行的demo时候了:

也很简单cd进入到dbootstrap目录,也就是有build.py文件的根目录下

运行以下命令行

python build.py demo

此时就会在dbootstrap目录下生成build目录,这个目录就是编译后的文件,但入口的html文件在dbootstrap\source\index.html下,此时在服务器环境中运行index.html即可,如下:

怎么样,完全的bootstrap风格吧,但全是这种风格看多了,我怎么感觉bojo的默认风格反而更好看呢,哈哈!!!

第二次添加:

另一个DojoUI框架:Dojo-Bootstrap

这个一个网友推荐的,我也就看了下,毕竟因为自己懒吗,不想自己写,嘿嘿。

github地址:https://github.com/xsokev/Dojo-Bootstrap

演示地址:http://xsokev.github.io/Dojo-Bootstrap/

这个的构建要比第一个要简单

直接下载文件,之后进入到项目根目录,用bower下载依赖项

第一步:安装bower

npm install -g bower

第二步:安装依赖

bower install

此时就可以运行Dojo-bootstrap/tests/index.html了

Dojo的UI框架bootstrap for dojo和Dojo-Bootstrap简介的更多相关文章

  1. HBuilder支持jquery、zepto、angular、ext、dojo 等js框架的提示吗

    HBuilder有通行的js扫描分析提示,大部分js库都可以方便的提示.但js是一门超级灵活的语言,通行分析有时分析的不够完美,如果对框架做单独优化配置,可以有更好的提示.DCloud官方对jquer ...

  2. Bootstrap 前端UI框架

    Bootstrap 有哪些优越性? 1.简单灵活的用于搭建WEB页面的HTML,CSS, JavaScript的工具集 2.基于html5, css3, 具有良好特性,友好的学习曲线,卓越的兼容性,1 ...

  3. 前端MVC框架、类库、UI框架选择

    CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...

  4. 5个界面效果很炫的JavaScript UI 框架

    Web 开发很简单,Web 应用的 UI 开发却很复杂,如果能够利用一些成熟的 UI 框架可以大大的减少开发的复杂度.本文向你介绍 5 款界面效果很不错的 JS 框架. 1. ExtJS ExtJS ...

  5. 《开源框架那些事儿22》:UI框架设计实战

    UI是User Interface的缩写.通常被觉得是MVC中View的部分,作用是提供跟人机交互的可视化操作界面. MVC中Model提供内容给UI进行渲染,用户通过UI框架产生响应,一般而言会由控 ...

  6. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  7. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  8. 推荐几个精致的web UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  9. 不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

    本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下. metronic一个基于bootstrap的响应式的后台管理平台的UI框架 ...

随机推荐

  1. C#对html的操作

    1,获取相对路径的html然后保存到本地路径 /// <summary> /// Html方法 /// </summary> /// <returns></r ...

  2. 启动mysql错误解决方案,学会查看错误日志:mysql.sock丢失,mysqld_safe启动报错

    本人还是个菜鸟,下面是我的经验之谈,能解决一些问题,有不对的地方,敬请斧正. 我的是CentOS6.3+MySQL5.1.57. 重启了一次服务器后,使用> mysql -u root -p登陆 ...

  3. 如何在Ubuntu 11.10上连接L2TP VPN

    要在家继续项目的开发,但架设的GitLab只能校内访问,更悲催的是学校架设的SSL VPN不支持Linux,好在想起学校以前架设的L2TP VPN,应该可以支持Linux,于是便一通谷歌百度,然而发现 ...

  4. How to make workflow chart using several tools in Linux?

    Just as what I said, I usually use yED to make workflow chart and markdown as the language to write ...

  5. [C++]neuroscan的延时预估

    一直用自己写的程序在线处理脑电信号,知道其中有一个时间延时,但具体延时是多少没有是个准确的估计,今天抽时间做了一下,发现大概延时在100ms左右. 以后尝试使用并口操作.应该可以完全避免这个问题. 实 ...

  6. Android打开系统设置

    今天在做项目过程中,遇到一个问题:用户体验某个功能时需要查看用户是否已经打开了GPS定位服务,若没有则要求进入定位服务设置界面. 下面就直接贴出代码 以下代码是放在了Button的监听事件里,只贴出重 ...

  7. bzoj2301: [HAOI2011]Problem b懵逼乌斯反演

    属于结果的和好求但是结果不好求的题 (轻易能得到以k的倍数为最大公约数的对数,但是不好直接求k) 所以一波反演结束 其实反演的时候完全没有反演的感觉,就是不停地恒等变形 算是懵逼乌斯反演最简单的例题 ...

  8. window7环境下VMWare自定义安装Linux虚拟机完全教程

    1.首先准备好以下工具和安装包,最好到官网下载: VMWare 8.x,注意版本不易过高,因为很多时候会出现和Linux镜像不兼容的情况,下载地址:http://www.vmware.com/cn.h ...

  9. 将List 中的ConvertAll的使用:List 中的元素转换,List模型转换, list模型转数组

    一,直接入代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using S ...

  10. 如何对Javascript代码进行二次压缩(混淆)

    如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间.但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法) ...