在开发牛标联盟(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/ 对非专业的前端或程序员来说简直没抗拒力,也许下一项目我就会使用她了,但是要想支持低端浏览器的童鞋你还是不要看了,她不是你的菜。
相关推荐
图片批量处理小助手 提供简单的图片批量处理
起点小说解锁.js
299-煤炭大数据智能分析解决方案.pptx
299-教育行业信息化与数据平台建设分享.pptx
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
时间复杂度是计算机科学中用来评估算法效率的一个重要指标。它表示了算法执行时间随输入数据规模增长而变化的趋势。当我们比较不同算法的时间复杂度时,实际上是在比较它们在不同输入规模下的执行效率。 时间复杂度通常用大O符号来表示,它描述了算法执行时间上限的增长率。例如,O(n)表示算法执行时间与输入数据规模n呈线性关系,而O(n^2)则表示算法执行时间与n的平方成正比。当n增大时,O(n^2)算法的执行时间会比O(n)算法增长得更快。 在比较时间复杂度时,我们主要关注复杂度的增长趋势,而不是具体的执行时间。这是因为不同计算机硬件、操作系统和编译器等因素都会影响算法的实际执行时间,而时间复杂度则提供了一个与具体实现无关的评估标准。 一般来说,时间复杂度越低,算法的执行效率就越高。因此,在设计和选择算法时,我们通常希望找到时间复杂度尽可能低的方案。例如,在排序算法中,冒泡排序的时间复杂度为O(n^2),而快速排序的时间复杂度在平均情况下为O(nlogn),因此在处理大规模数据时,快速排序通常比冒泡排序更高效。 总之,时间复杂度是评估算法效率的重要工具,它帮助我们了解算法在不同输入规模下的性
5G通信行业、网络优化、通信工程建设资料
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
5G通信行业、网络优化、通信工程建设资料
《基于小程序的交友系统的设计与实现》是一个融合了小程序技术和社交功能的毕业设计项目。该项目旨在通过开发一款小程序,为用户提供一个便捷、有趣的交友平台,满足用户寻找新朋友、拓展社交圈的需求。 一、项目背景与目标 随着移动互联网的普及,小程序以其轻便、易用的特性受到了广大用户的喜爱。本项目旨在利用小程序技术开发一款交友系统,通过简洁明了的界面设计和丰富多样的社交功能,吸引用户参与并提升用户体验。通过实现这一系统,旨在帮助用户拓展社交圈,增进人际关系,并推动社交领域的创新与发展。 二、系统设计与功能实现 用户注册与登录:系统提供用户注册与登录功能,确保用户信息的真实性和安全性。用户可以通过手机号或第三方社交账号进行注册和登录。 个人资料展示:用户可以在个人资料页面展示自己的基本信息、兴趣爱好、照片等,以便其他用户了解并产生互动。 附近的人:系统通过定位功能展示附近的其他用户,用户可以浏览附近的人的信息,并主动发起聊天或交友请求。 聊天功能:系统提供一对一的聊天功能,用户可以与感兴趣的人进行实时交流,增进彼此的了解。 活动组织:用户可以发起或参与各类线下活动,如聚会、运动、旅行
5G通信行业、网络优化、通信工程建设资料
shampoo-sales.csv
59-《煤矿测量规程(1989版)》150.pdf
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
5G通信行业、网络优化、通信工程建设资料。
AXIS T864 系列多通道 AXIS T8646 PoE+ 同轴电缆刀片套件 AXIS T8648 PoE+ 同轴电缆刀片紧凑型套件安装指南
MATLAB学习个人笔记总结.7z
【资源说明】【毕业设计】 1、该资源内项目代码都是经过测试运行成功,功能正常的情况下才上传的,请放心下载使用。 2、适用人群:主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用,具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习,也可作为大作业、课程设计、毕设项目、初期项目立项演示等,欢迎下载,互相学习,共同进步!