当前位置:首页 > 技术文章 > 正文内容

还在从头开发Web项目?这些模板请收下!

arlanguage2个月前 (03-18)技术文章22

在过去的日子里,从头开始创建一个网站变得越来越容易。了解HTML、可能还有CSS的程序员,可以用很少的精力创建一个不错的网页,然后把它放在网络服务器上,就搞定了。比如:

当然,你可以选择这种创建方式,但有一些不错的改变,你可以试试。随着互联网的速度要求越来越快,浏览器变得越来越标准化和强大,网站的规模和复杂性也越来越多,即便是有经验的设计师都会使用具有高级功能的设计工具和代码编辑器来使开发过程更顺利。

如今,很少有程序员从头开始设计web网页了。大多数程序员都使用预制模板设计,自定义适合其内容管理系统的选择。即使是构建复杂Web应用程序的程序员也依赖于模板库。

但是,如果要为内容管理系统或静态站点生成器构建新模板,该怎么办?如果想使用单个目标网页或少量不太可能经常更改的静态网页构建简单网站,该怎么办?如果要编写JavaScript应用程序但不想使用复杂的框架或库来构建最终输出怎么办?

对我来说,最重要的是控制。随着时间的推移,网页越来越肥胖。程序员进行web开发时,应该以内容为重。问问自己,真的需要加载这个页面时显示这样的网络字体吗?必须用jQuery,还是可以用几行Vanilla JS完成同样的事情?

使用HTML模板和框架可以帮助程序员实现标准化,易于使用的布局网格,以及现代化的功能。与此同时,它们还很简单。这里有三个开源的HTML5模板以供参考。

1、Bootstrap

Twitter的Bootstrap也许是创建新网页最著名的模板框架之一。它的无所不在已经导致了网页设计界的反弹,Bootstrap很简单,几乎完全没有定制的实现。

Bootstrap可以轻松创建响应式设计,并具有许多开箱即用的功能:从图标到样式输入,并将标准化带到许多常见的页面元素,从breadcrumbs到警报到分页,同时还有大量现成的主题。

2、HTML5 Boilerplate

HTML5 Boilerplate包括大部分程序员会用到的元素,对很多项目开箱即用:分析片段以及一些默认的CSS和JavaScript模板。

HTML5 Boilerplate相当轻便,如果你不需要某个特定组件,很容易就可以剪掉。如果你在追求极简主义和功能全面之间的平衡,HTML5 Boilerplate可能是最佳选择。

3、Skeleton

Skeleton是一堆框架中最轻的。如果曾经使用过Web框架,并且发现它们太笨重,或者只是为了满足需要,可以考虑使用Skeleton来处理:一个简单的网格,格式很好的表单,列表,排版等基本要素,跨浏览器支持。

使用一些不错的模板和编辑器,程序员不需要复杂的JavaScript框架来构建一个简单的前端,无论是传统的页面还是轻量级Web应用程序。如果这三个都不满意,还可以考虑Initializr,一个可以预配置HTML5 Boilerplate的开源Web应用程序。

你最喜欢的web设计模板或框架是什么呢?你有哪些很棒的web设计方法呢?欢迎评论区交流

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/3398.html

分享给朋友:

“还在从头开发Web项目?这些模板请收下!” 的相关文章

nginx的应用场景

Nginx是一款高性能的HTTP服务器和反向代理服务器,它以其稳定性、丰富的功能集、简单的配置以及低资源消耗而闻名。Nginx的应用场景非常广泛,以下是一些主要的应用场景1、Web服务器Nginx可以作为静态内容(如HTML文件、图片、CSS和JavaScript等)的Web服务器。它也可以通过Fa...

Nginx路由匹配规则location的小总结

使用过nginx的同学都知道,在nginx配置文件中通过location配置路由转发规则,配置语法为:location [=|~|~*|^~] /uri/ { ... }中括号中为路由匹配符号,常见的有:1 =:精确匹配 2 ^~:精确前缀匹配 3 ~:区分...

Linux下如何用nginx+ffmpeg搭建流媒体服务器

安装ffmpeg安装过程略安装完成后,检查是否安装成功。比如我这里采用向pili推流的方式,将本地的一个mp4视频推流到七牛pili。ffmpeg -re -i /tmp/ffmpeg_test.mp4 -vcodec copy -acodec copy -f flv "rtmp://pil...

Nginx缓存设置教程

这篇文章主要介绍了Nginx缓存设置案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置。在...

压测nginx出现的问题分析

压测nginx出现no live upstreams while connecting to upstream的问题分析基础环境版本信息Centos 7.1nginx version: openresty/1.13.6.2nginx配置信息stream {   ...

如何让Nginx更安全? nginx怎么保证高可用

网络安全的重要性不言而喻。那么小伙伴们有没有在日常使用 Nginx 的时候,特意去关注下它的安全配置呢?今天松哥和小伙伴们讨论一下如何安全的使用 Nginx,给大伙几个建议。一 使用最新版建议使用最新版的 Nginx,对于已经部署的 Nginx,要及时更新到最新版本,以确保所有已知的安全漏洞都已修补...