基于Boostrap技术的扁平化个人网站的设计

　　【摘要】根据个人信息设计的一个个人的网站，类似于个人blog。方便了他人对自己的信息了解，以及个人作品的展示。网站基于Bootstrap3.4.6版本，新浪云服务器，应用了Bootstrap的十二栅格系统，所以网站能够自适应于各类型设备的使用。能够很方便的让他人了解自己。现在流行的个人形象设计已经成为一种庞大市场的需求，像凡客网站的网站设计就是很好的一种社会趋势。

　　【关键词】BootstrapCanvas微信小程序Rem布局

　　一、引言

　　互联网是社会发展的趋势，很多人已经意识到网络的强大生命力和他在未来将处于的重要地位。他们钻研并且努力进入到这一个新的空间，新的领域。互联网发展为人人都有话语权，人人都是中心。互联网是一个互动性极强的平台。本论文中，将前端技术Bootstrap的原理以及方法应用到整个网站，并对其进行移动端的适配，提出了解决问题的具体方法。个人网站对于前端开发人员能够更好的展示自己，能让人更快的了解自己所掌握的技术和学习能力。个人网站能够更突出的自己的优点，能够发挥自己的空间，设计出属于自己的网站。在网站里可以展现自己平时所做的demo，以及自己学习的内容。基于个人网站的实现，我们可以在此基础上更新出一套自己的网站系统。并且个人网站不限制访问权限，能够在他人学习的时候让别人提出自己的想法，更够丰富别人的同时，增强自己的能力。Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。Internet飞速发展使得网站不再是只有企业和公司才能拥有，互联网让人们是人们快速获取信息的重要渠道，在人们的各个领域都有着重要的作用。因此网站建设应用的地位显著提高，每个人都可以拥有自己的个人网站，创建一个体现自我风格和个人特色的网站已经成为互联网用户的新追求。

　　二、网站开发环境

　　在进行网站开发之前，由于个人对前端技术比较热爱，对于后端技术了解不是也特别多，所以在服务器方面采用的是新浪云的免费服务器以及它的二级域名。前端主要采用Bootstrap技术，在个人作品方面采用了angular微信小程序等技术支持。通过使用sublime开发工具开发界面，对页面的整体效果的实现，在浏览器的控制台进行修改。使用firework进行图片美工与设计。测试时用wamp模拟服务器测试，最终发布在新浪云服务器。微信小程序的开发在微信开发工具上编写。

　　三、个人网站整体要求

　　1.功能要求

　　第一，頁面简介明了，采用扁平化设计理念，给人较好的视觉印象。

　　第二，用户浏览、操作便捷，迅速。

　　2.系统系能要求

　　在程序设计时，尽量优化代码，降低服务器的访问时间，采用缓存机制，使得页面加载更迅速，降低处理时间是比较重要的问题。

　　四、网站的分析与设计

　　第一，基于Bootstrap技术的个人网站，主要展示自己的个人信息，主要分为两部分：一是个人信息的展示，具体的个人信息。二是个人的作品展示。

　　第二，页面的实现。一是为网站的首页，展现个人的信息页，以及个人作品的展示区，扁平化的设计能够让人更清晰的了解到自己，去除了繁琐的页面设计，采用扁平化设计突出个人特色。二是为个人简历页面，该网页采用rem布局，适用于各类型的手机，解决了各内核浏览器的兼容性问题，涉及了一些css3的动画操作，让个人简历能够有个人特色，更充分的展现了自己的能力.rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（fontsizeoftheelement）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算三是为小游戏页面，该网页采用canvas技术，实现页面效果，让页面看起来更丰富，通过事件控制鱼的游动以及小鱼的跟随，采用定时器控制游戏的时间。

　　作者：谢世华