`
pure
  • 浏览: 353913 次
社区版块
存档分类
最新评论

牛标联盟开发日记之前端

阅读更多

      在开发牛标联盟(www.niusb.com) 的时候,一直从事游戏服务后台开发,已经很长时间没有做过网站了,对从0开始写css也没有多大精力,只好选择现在流行的bootstrap来搭建前端的 基础框架。Bootstrap是一个优秀的框架,让我省去更多事,不过使得Bootstrap有得有失,你将不能直接支持低端的浏览器,比如IE6这类前 进的绊脚石,特别是Bootstrap3只支持IE8及以上,而且对IE8也只是勉强的支持,因为你IE8没很多css3特性是不支持的,牛标联盟使用了 Bootstrap3在IE8下面边框都是没有圆角的,效果差很多,还有很多Html5的特性也不支持,实在是IE6未死,IE8又至,前端的童鞋们真是 “祸不单行”啊!

 为省事,后面Bootstrap3我就直接简称为bs3了,在写bs3的时候有时需在定制一些css属性,这有很多种选择。

1、直接到官方定制后下载css。定制

2、熟悉css的可以直接自定义css覆盖(重写)bs3的css,前题是要熟悉

3、最爽的方式当然是直接下载bs3的Less源文件来定制。 (究竟 Less是什么大家可以直接Google或度娘)

我选择了第3种方式,接下来就说说我的前端工具,Nodejs+Grunt,因为使用Grunt需要安装Nodejs支持,所以得先安装Nodejs, 详细的安装可以查看官方的文档,这里不细述,接下来安装Grunt,

npm install -g grunt-cli

 

在Cmd 运行以上的命令,装grunt-ci全局安装,这样以后任何地方都可以直接使用grunt命令了。

在你要使用grunt的项目目录下新建一个package.json文件,这个文件的作用是配置项目信息及模块依赖,我的项目文件内容如下:

{
  "name": "niusb",
  "description":"niusb",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.2",
    "grunt-contrib-uglify": "~0.2.2",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-watch":"~0.5.1",
    "grunt-contrib-less": "~0.6.4",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-recess": "~0.3.3"
  }
}

 

要编译bt3的less文件,grunt-contrib-less模块是必不可少的。

接下来就是Grunt的配置文件Gruntfile.js了,在项目目录下新建这个js文件后,关于Gruntfile.js的配置网站这方面的教程相当之多,我在此仅列出我的配置内容供参考。

module.exports = function(grunt) {
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        setting : {
            srcLess : 'src/main/less',
            srcJs : 'src/main/javascript',
            distCss : 'src/main/webapp/css',
            distJs : 'src/main/webapp/js',
        },
        clean : {
            build : {
                src : [ "build" ]
            }
        },
        concat : {
            bootstrap : {
                src : [ '<%=setting.srcJs%>/bootstrap/*.js' ],
                dest : 'build/bootstrap.js'
            }
        },
        uglify : {
            main : {
                src : [ '<%=setting.srcJs%>/application.js' ],
                dest : '<%=setting.distJs%>/application.min.js'
            },
            other : {
                files : {
                    '<%=setting.distJs%>/jquery-1.10.2.min.js' : [ '<%=setting.srcJs%>/jquery-1.10.2.js' ],
                    '<%=setting.distJs%>/bootstrap.min.js' : [ '<%=setting.srcJs%>/bootstrap.js' ],
                    '<%=setting.distJs%>/html5shiv.min.js' : [ '<%=setting.srcJs%>/html5shiv.js' ],
                    '<%=setting.distJs%>/respond.min.js' : [ '<%=setting.srcJs%>/respond.min.js' ],
                    '<%=setting.distJs%>/jquery.ui.widget.min.js' : [ '<%=setting.srcJs%>/jquery.ui.widget.js' ],
                    '<%=setting.distJs%>/bootbox.min.js' : [ '<%=setting.srcJs%>/bootbox.js' ],
                    '<%=setting.distJs%>/bootstrap-modal.min.js' : [ '<%=setting.srcJs%>/bootstrap-modal.js' ],
                    '<%=setting.distJs%>/bootstrap-modalmanager.min.js' : [ '<%=setting.srcJs%>/bootstrap-modalmanager.js' ],
                    '<%=setting.distJs%>/jquery.fileupload.min.js' : [ '<%=setting.srcJs%>/jquery.fileupload.js' ],
                    '<%=setting.distJs%>/jquery.iframe-transport.min.js' : [ '<%=setting.srcJs%>/jquery.iframe-transport.js' ],
                    '<%=setting.distJs%>/jquery.jcrop.min.js' : [ '<%=setting.srcJs%>/jquery.jcrop.js' ],
                    '<%=setting.distJs%>/twitter-bootstrap-hover-dropdown.min.js' : [ '<%=setting.srcJs%>/twitter-bootstrap-hover-dropdown.js' ],
                    '<%=setting.distJs%>/jquery.lazyload.min.js' : [ '<%=setting.srcJs%>/jquery.lazyload.js' ],
                    '<%=setting.distJs%>/moment.min.js' : [ '<%=setting.srcJs%>/moment.js' ],
                    '<%=setting.distJs%>/bootstrap-datetimepicker.min.js' : [ '<%=setting.srcJs%>/bootstrap-datetimepicker/bootstrap-datetimepicker.js' ],
                    '<%=setting.distJs%>/bootstrap-datetimepicker.zh-CN.min.js' : [ '<%=setting.srcJs%>/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js' ]
                }
            }
        },
        recess : {
            options : {
                compile : true
            },
            mainCompile : {
                files : {
                    'build/bootstrap-datetimepicker.css' : [ '<%=setting.srcLess%>/bootstrap-datetimepicker.min.css' ],
                    'build/application.css' : [ '<%=setting.srcLess%>/application.less' ],
                    'build/admin.css' : [ '<%=setting.srcLess%>/admin.less' ],
                    'build/user.css' : [ '<%=setting.srcLess%>/user.less' ]
                }
            },
            thirdCompile : {
                files : {
                    'build/bootstrap.css' : [ '<%=setting.srcLess%>/bootstrap/bootstrap.less' ]
                }
            },
            mainMin : {
                options : {
                    compress : true
                },
                files : {
                    '<%=setting.distCss%>/bootstrap-datetimepicker.min.css' : [ '<%=setting.srcLess%>/bootstrap-datetimepicker.min.css' ],
                    '<%=setting.distCss%>/application.min.css' : [ '<%=setting.srcLess%>/application.less' ],
                    '<%=setting.distCss%>/admin.min.css' : [ '<%=setting.srcLess%>/admin.less' ],
                    '<%=setting.distCss%>/user.min.css' : [ '<%=setting.srcLess%>/user.less' ]
                }
            },
            thirdMin : {
                options : {
                    compress : true
                },
                files : {
                    '<%=setting.distCss%>/bootstrap.min.css' : [ '<%=setting.srcLess%>/bootstrap/bootstrap.less' ],
                    '<%=setting.distCss%>/font-awesome.min.css' : [ '<%=setting.srcLess%>/font-awesome.css' ],
                    '<%=setting.distCss%>/jquery.fileupload-ui.min.css' : [ '<%=setting.srcLess%>/jquery.fileupload-ui.css' ],
                    '<%=setting.distCss%>/jquery.jcrop.min.css' : [ '<%=setting.srcLess%>/jquery.jcrop.css' ]
                }
            }
        },
        watch : {
            mainRecess : {
                files : [ '<%=setting.srcLess%>/application.less', '<%=setting.srcLess%>/admin.less', '<%=setting.srcLess%>/user.less' ],
                tasks : [ 'dist-compile-main', 'dist-recess-main' ]
            },
            thirdRecess : {
                files : [ '<%=setting.srcLess%>/application.less', '<%=setting.srcLess%>/bootstrap/*.less' ],
                tasks : [ 'dist-recess-third' ]
            },
            mainJs : {
                files : [ '<%=setting.srcJs%>/application.js' ],
                tasks : [ 'dist-js-main' ]
            }
        },
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-recess');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-copy');

    grunt.registerTask('dist-compile-main', [ 'recess:mainCompile' ]);
    grunt.registerTask('dist-compile-third', [ 'recess:thirdCompile' ]);
    grunt.registerTask('dist-recess-main', [ 'recess:mainMin' ]);
    grunt.registerTask('dist-recess-third', [ 'recess:thirdMin' ]);
    grunt.registerTask('dist-js-main', [ 'uglify:main' ]);
    grunt.registerTask('dist-js', [ 'uglify' ]);
    grunt.registerTask('dist-css', [ 'recess' ]);
    grunt.registerTask('default', [ 'clean', 'dist-js', 'dist-css' ]);

};

 

其中的watch就是用来监控less或 js文件变化的,当你修改了less文件,Grunt 马上会编译成 css 文件这样马上就能看到效果。以下在cmd里运行,监控文件变化动态编译。

grunt watch:mainRecess

 

英文比较头痛的童鞋可以到http://www.bootcss.com/查看Bootstrap的中文文档。

不过最近又一发不可收拾的喜欢上 http://semantic-ui.com/ 对非专业的前端或程序员来说简直没抗拒力,也许下一项目我就会使用她了,但是要想支持低端浏览器的童鞋你还是不要看了,她不是你的菜。

分享到:

相关推荐

    图片批量处理小助手SignPics.exe

    《图片批量处理小助手SignPics.exe:轻松批量编辑与优化图像》 在日常工作中,我们经常需要处理大量的图片,比如调整尺寸、添加水印、转换格式等。手动操作不仅耗时,而且容易出错。这时,一款强大的图片批量处理...

    pandas-1.3.5-cp37-cp37m-macosx_10_9_x86_64.zip

    pandas whl安装包,对应各个python版本和系统(具体看资源名字),找准自己对应的下载即可! 下载后解压出来是已.whl为后缀的安装包,进入终端,直接pip install pandas-xxx.whl即可,非常方便。 再也不用担心pip联网下载网络超时,各种安装不成功的问题。

    基于java的大学生兼职信息系统答辩PPT.pptx

    基于java的大学生兼职信息系统答辩PPT.pptx

    基于java的乐校园二手书交易管理系统答辩PPT.pptx

    基于java的乐校园二手书交易管理系统答辩PPT.pptx

    tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl

    tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl

    Android Studio Ladybug(android-studio-2024.2.1.10-mac.zip.002)

    Android Studio Ladybug 2024.2.1(android-studio-2024.2.1.10-mac.dmg)适用于macOS Intel系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/89954174 part2: https://download.csdn.net/download/weixin_43800734/89954175

    基于ssm框架+mysql+jsp实现的监考安排与查询系统

    有学生和教师两种角色 登录和注册模块 考场信息模块 考试信息模块 点我收藏 功能 监考安排模块 考场类型模块 系统公告模块 个人中心模块: 1、修改个人信息,可以上传图片 2、我的收藏列表 账号管理模块 服务模块 eclipse或者idea 均可以运行 jdk1.8 apache-maven-3.6 mysql5.7及以上 tomcat 8.0及以上版本

    tornado-6.1b2-cp38-cp38-macosx_10_9_x86_64.whl

    tornado-6.1b2-cp38-cp38-macosx_10_9_x86_64.whl

    Android Studio Ladybug(android-studio-2024.2.1.10-mac.zip.001)

    Android Studio Ladybug 2024.2.1(android-studio-2024.2.1.10-mac.dmg)适用于macOS Intel系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/89954174 part2: https://download.csdn.net/download/weixin_43800734/89954175

    基于MATLAB车牌识别代码实现代码【含界面GUI】.zip

    matlab

    基于java的毕业生就业信息管理系统答辩PPT.pptx

    基于java的毕业生就业信息管理系统答辩PPT.pptx

    基于Web的毕业设计选题系统的设计与实现(springboot+vue+mysql+说明文档).zip

    随着高等教育的普及和毕业设计的日益重要,为了方便教师、学生和管理员进行毕业设计的选题和管理,我们开发了这款基于Web的毕业设计选题系统。 该系统主要包括教师管理、院系管理、学生管理等多个模块。在教师管理模块中,管理员可以新增、删除教师信息,并查看教师的详细资料,方便进行教师资源的分配和管理。院系管理模块则允许管理员对各个院系的信息进行管理和维护,确保信息的准确性和完整性。 学生管理模块是系统的核心之一,它提供了学生选题、任务书管理、开题报告管理、开题成绩管理等功能。学生可以在此模块中进行毕业设计的选题,并上传任务书和开题报告,管理员和教师则可以对学生的报告进行审阅和评分。 此外,系统还具备课题分类管理和课题信息管理功能,方便对毕业设计课题进行分类和归档,提高管理效率。在线留言功能则为学生、教师和管理员提供了一个交流互动的平台,可以就毕业设计相关问题进行讨论和解答。 整个系统设计简洁明了,操作便捷,大大提高了毕业设计的选题和管理效率,为高等教育的发展做出了积极贡献。

    机器学习(预测模型):2000年至2015年期间193个国家的预期寿命和相关健康因素的数据

    这个数据集来自世界卫生组织(WHO),包含了2000年至2015年期间193个国家的预期寿命和相关健康因素的数据。它提供了一个全面的视角,用于分析影响全球人口预期寿命的多种因素。数据集涵盖了从婴儿死亡率、GDP、BMI到免疫接种覆盖率等多个维度,为研究者提供了丰富的信息来探索和预测预期寿命。 该数据集的特点在于其跨国家的比较性,使得研究者能够识别出不同国家之间预期寿命的差异,并分析这些差异背后的原因。数据集包含22个特征列和2938行数据,涉及的变量被分为几个大类:免疫相关因素、死亡因素、经济因素和社会因素。这些数据不仅有助于了解全球健康趋势,还可以辅助制定公共卫生政策和社会福利计划。 数据集的处理包括对缺失值的处理、数据类型转换以及去重等步骤,以确保数据的准确性和可靠性。研究者可以使用这个数据集来探索如教育、健康习惯、生活方式等因素如何影响人们的寿命,以及不同国家的经济发展水平如何与预期寿命相关联。此外,数据集还可以用于预测模型的构建,通过回归分析等统计方法来预测预期寿命。 总的来说,这个数据集是研究全球健康和预期寿命变化的宝贵资源,它不仅提供了历史数据,还为未来的研究和政策制

    基于微信小程序的高校毕业论文管理系统小程序答辩PPT.pptx

    基于微信小程序的高校毕业论文管理系统小程序答辩PPT.pptx

    基于java的超市 Pos 收银管理系统答辩PPT.pptx

    基于java的超市 Pos 收银管理系统答辩PPT.pptx

    基于java的网上报名系统答辩PPT.pptx

    基于java的网上报名系统答辩PPT.pptx

    基于java的网上书城答辩PPT.pptx

    基于java的网上书城答辩PPT.pptx

    婚恋网站 SSM毕业设计 附带论文.zip

    婚恋网站 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

    基于java的戒烟网站答辩PPT.pptx

    基于java的戒烟网站答辩PPT.pptx

    基于微信小程序的“健康早知道”微信小程序答辩PPT.pptx

    基于微信小程序的“健康早知道”微信小程序答辩PPT.pptx

Global site tag (gtag.js) - Google Analytics