在开发牛标联盟(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:轻松批量编辑与优化图像》 在日常工作中,我们经常需要处理大量的图片,比如调整尺寸、添加水印、转换格式等。手动操作不仅耗时,而且容易出错。这时,一款强大的图片批量处理...
setting.xml文件,修改Maven仓库指向至阿里仓
基于java的玉安农副产品销售系统的开题报告
dev-c++ 6.3版本
基于java的项目监管系统开题报告
基于springboot多彩吉安红色旅游网站源码数据库文档.zip
毕业设计&课设_基于 AFLFast 改进能量分配策略的毕业设计项目,含 Mix Schedule策略设计及测试结果分析.zip
基于springboot办公用品管理系统源码数据库文档.zip
C++调用qml对象Demo
非常漂亮的类Web界面的Delphi设计54ed7-main.zip
VB SQL车辆管理系统是一款基于Visual Basic(VB)编程语言和SQL数据库开发的综合车辆管理工具。该系统集成了车辆信息管理、驾驶员信息管理、车辆调度、维修记录、数据存储与检索、报告生成以及安全权限管理等多个核心功能模块。 源代码部分提供了详细的开发流程和实现方法,涵盖了从数据库设计、界面设计到事件驱动编程、数据访问技术和错误处理等关键技术点。通过该系统,用户可以方便地录入、查询、修改和删除车辆及驾驶员信息,实现车辆信息的实时更新和跟踪。同时,系统还支持生成各类车辆管理相关的报告,帮助用户更好地掌握车辆运营情况。 系统部分则采用了直观易用的用户界面设计,使得用户能够轻松上手并快速完成车辆管理工作。系统还具备强大的数据处理能力和安全性,通过数据备份和系统升级优化等功能,确保数据的完整性和系统的稳定运行。 总体而言,VB SQL车辆管理系统是一款功能全面、易于操作且安全可靠的车辆管理工具,适用于企业和个人进行日常车辆运营和管理。无论是车辆信息的录入、查询还是报告生成,该系统都能够提供高效、便捷的服务,是车辆管理工作的理想选择。
AutoSAR基础学习资源
基于springboot英语学习平台源码数据库文档.zip
数据集,深度学习,密封数据集,马体态数据集
基于java的数字家庭网站开题报告
podman使用国内源镜像加速器
基于springboot+web的留守儿童网站源码数据库文档.zip
基于springboot的智能宾馆预定系统源码数据库文档.zip
GetQzonehistory-main.zip
环境说明:开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat 开发软件:eclipse/myeclipse/idea Maven包:Maven 浏览器:谷歌浏览器。 项目经过测试均可完美运行