响应式网站模板

1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美，直观并且给力的web设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的JavaScript插件。 Bootstrap是用动态语言LESS写的，主要包括四部分的内容： 脚手架——全局样式，响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此，如果你的设计需要实现响应式布局，那么你需要手动开启这项功能。基础CSS——包括基础的HTML页面要素，比如表格(table)，表单(form)，按钮(button)，以及图片(image)，基础CSS为这些要素提供了优雅，一致的多种样式。组件——收集了大量可以重用的组件，如下拉菜单（dropdowns），按钮组（button groups），导航面板（navigation control）——包括：tabs,pills,lists标签，面包屑导航（breadcrumbs）以及页码（pagination），缩略图(thumbnails)，进度条（progress bars），媒体对象（media objects）等等。JavaScript——包括一系列jQuery的插件，这些插件可以实现组件的动态页面效果。插件主要包括模态窗口（modals），提示效果（tool tips），“泡芙”效果（popovers），滚动监控（scrollspy），旋转木马(carousel)，输入提示(typeahead)，等等。Bootstrap已经足够强大，能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发，很多工具和资源可以用来配合使用，下面列举了其中的一部分工具和资源。 jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源，能够把 Bootstrap的清爽界面组件引入到jQuery UI中。jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似，这是一个为jQuery Mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问，那么这个资源对你来说很方便易用。Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装，修改，更新以及优化都很简单方便。StyleBootstrap.info —— Bootstrap提供了自己的几种界面风格，StyleBootstrap提供了的配色选项，并且你可以给每个组件都应用不同的配色。BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果，这个应用都会生成一个唯一的URL方便你与他人分享，你也可以在任意时刻修改你的主题。Bootswatch —— 提供大量免费的Bootstrap主题。Bootsnipp —— 在线前端框架交互组件制作工具，是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性，简单便捷。 2. Fbootstrapp Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML，包括排版、表单、按钮、表格、栅格、导航等等，风格与Facebook类似。3. BootMetro BootMetro框架的灵感来自于Metro UI CSS，基于Bootstrap 框架构建，用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能，并添加了几个额外的功能，比如页面平铺，应用程序栏等等。4. Kickstrap Kickstrap是Bootstrap的一个变体。它基于Bootstrap，并在它的基础上添加了许多app，主题以及附加功能。这使得这个框架可以单独地用于构建网站，而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上，然后用就可以了。 App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加的app。 选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。 附加功能是一些用来扩展Bootstrap UI 库的附件，它们的语法基本相同或者相似。5. Foundation Foundation 是一款强大的，功能丰富的并且支持响应式布局的前端开发框架，你可以通过Foundation快速创建原型，利用它所包含的大量布局框架，元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略，它拥有大量实用的语义化功能，并且使用Zepto类库来取代jQuery，这样可以带来更好的用户体验，并且提高运行的速度。 Foundation拥有一套12列的灵活可嵌套的网格系统，你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义了很多的样式，比如字体排版，按钮，表单，以及多种多样的导航控件。它也提供了很多的CSS组件，例如操作面板（panels），价格表（price tables），进度条（progress bars），表格（tables）以及可以适应不同设备的可伸缩视频（flex video）。与此同时，Foundation还包括了很多的JavaScript插件，如下拉菜单（dropdowns），joyride（网站功能引导插件），magellan（网站固定导航插件），orbit（支持触摸的响应式图片轮播插件），reveal（弹出框插件），sections（强大的tab插件）以及tooltips（工具提示）等。 Foundation框架还提供了很多有用的扩展。 模板（Stencils）——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF两种格式的下载，你可以用它们来方便快捷的绘制线框图和原型图。HTML模板 —— HTML模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码，然后丢到页面的标签之间就好了。图标字体（Icon Fonts） —— 包含自定义图标的一种网页字体。SVG 社交网络图标（Social Icons）—— 一组不依赖分辨率的社交网络图标（可缩放矢量图标）。响应式表格——Foundation框架中响应式表格的实现机制是固定表格的左边第一列，然后表格的其他列可以通过滚动条拖拉进行访问。关闭帆布布局（Off-Canvas Layouts）—— 这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏，当浏览屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候，网页内容或者导航控件将会滑动出现。如你所见，对于web开发者以及设计师来说，Foundation就像是一个巨大的宝藏。在下载框架的时候，你可以自定义下载框架的内容。6. GroundworkCSS GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5，CSS以及JavaScript工具包，可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。 GroundworkCSS拥有一个灵活，可嵌套的流式网格系统，方便你创建任何布局。这个框架有很多让人印象深刻的功能，比如在平板以及移动端上的网格系统，当屏幕的宽度小于768或者480像素时，页面中原本并列排版的表格列（grid column）会自动变为独立的行，而不是折叠在一起。另一个很酷的功能是jQuery的响应式文本（ResponsiveText）插件，这个插件可以动态调整页面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。 GroundworkCSS包含了大量的UI组件，如tabs、响应式数据表格导航、按钮、表单、响应式导航控件、tiles（一套替代radio按钮以及其他默认表单元素的优雅组件）、工具提示、对话框、Cycle2（一款强大的，响应式的内容滑块）以及其他很多的有用组件。它还提供了很多矢量社交网络图标以及图标字体。 你可以通过切换页面上方的导航按钮选择不同的浏览设备要来查看这款框架的效果。通过这种方式，你可以测试在不同的浏览设备上各种组件的响应式布局情况。 GroundworkCSS的文档写的非常好，并且包含着很多的示例，为了让你更快的上手，他还提供了多种响应式的模板。对于这款框架，唯一我可以想到的缺点就是不能自定义要下载的框架内容。7. Gumby Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。 它的流式-固定布局（fluid-fixed layout）可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局，包括多列混杂的嵌套模式。Gumby提供两套PSD的模板，方便你在12列和16列的网格系统上进行设计。 Gumby提供了一个功能丰富的UI工具包，包括按钮，表单，移动端导航，tabs，跳转链接（skip links），拨动开关（toggles and switches，可以方便快捷地切换元素的class，而不需要进行额外的js操作），抽屉功能（drawers），响应式图片以及retina图片等等。为了紧跟最近的设计潮流，Gumby的UI元素中还包括了Metro风格的扁平化设计，你也可以用Pretty风格的渐变设计，或者按照你的想法糅合两种设计风格。该框架还提供了一套出众的响应式，拥有独立分辨率的Entypo图标，你可以在自己的web项目中尽情使用。 Gumby有一个很好自定义下载选择器，你可以自行配置各个组件的颜色，并且按自己的需求方便地下载。8. HTML KickStart HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干净，符合标准以及跨浏览器兼容的代码。 这款框架提供了多种样式表，包括网格，排版，表单，按钮，表格，列表以及一些跨浏览器兼容的web组件比如JavaScript的幻灯片功能，tabs，面包屑导航，包含子菜单的菜单以及工具提示等等。 你可以使用99Lime UIKIT提供的UI组件来搭建你的产品线框图。9. IVORY IVORY 是一款轻量，简单但是强大的前端框架，可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。 当你需要一款轻量灵活，不需要额外的其他功能，并且适应不同浏览设备的框架时，IVORY是你最好的选择。10.Kube 最后，如果你的新项目需要一款实在的，不需要复杂的额外功能组件的，足够简单的框架，那么 Kube 将会是你正确的选择。Kube是一款最小化的，支持响应式的前端框架，它没有强加的样式设计，因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式，比如网格，表单，排版，表格，按钮，导航，链接以及图片等等。 Kube框架包括一个简洁的CSS文件用于方便地创建响应式布局，还包括了两个JS文件来完成tab以及页面的按钮操作。如果你希望得到Kube最大化的灵活性以及个性化定制，那么你可以下载开发者版本（developer version），这个版本包括了LESS文件（包括各种变量，mixins以及模块）。如何选择一款优秀的前端开发框架？ 可以根据以下评估标准： 将根据以下标准对这些框架进行评估： 学习曲线针对简单任务的开发效率针对复杂、特殊任务的开发效率依赖管理代码性能/安全优化调整的能力平台升级/冗余能力在企业市场中的认同度开发、使用SOAP和REST服务的复杂性 总结：灵活运用框架，将会得到意想不到的效果。这个看怎么灵活运用，有好的方案大家分享一下共同学习，进步。学习前端，重在分享！

我看你的是QQ邮箱，编写邮件的时候，可以选择使用HTML编写。 能不能具体点呀 写信，格式，HTML格式

手机网站简称移动端网站，电脑网站简称pc站点，手机站的是适合使用手机的人群而电脑网站的是适合在电脑上访问网站的人群！第一、显示终端不同PC网站只适合电脑页面浏览，不适合手机页面的浏览，一旦PC网站在手机上展示，就会不可避免地出现比例不协调，排版不整齐、错位、变形、甚至出现乱码的现象，这将有损企业形象，降低合作伙伴对企业的好感和信任，进而直接降低合作率和业务量，这是对企业一种致命的伤害。而手机网站是针对手机屏幕和手机分辨率的大小而定制的网站，文字和图片的显示比例都适合手机页面浏览，吻合手机用户的视觉习惯和需求。两者可谓是一个萝卜一个坑，它们各自都是为自己的显示终端量身订做，不可通用。因此，手机网站制作已成企业当今的刚性需求。第二、风格特点不同PC网站和手机网站风格有“详”与“简”的区别。PC网站展现的是企业全面详细的信息，它的特点就是面面俱到;而手机网站是居于电话、短信、定位、分享、留言等基本功能的网站，它只展现企业的核心信息，针对性和目的性强，传输数据量小，访问速度快，这些特点更有利于其在手机终端发挥营销价值。简而言之，它是PC网站的简约版，具备画面清晰、板块简约、排版整齐、视觉冲击力强等优势。第三、登录方式不同访问PC网站需要通过输入网址或者通过搜索引擎来进行访问，而手机WAP网站的访问方式更新颖、更方便，访问手机网站可通过拍摄二维码直接登录访问，省去了手动输入网址的麻烦，很好地满足了人的惰性。众所周知，能满足客户惰性的产品更具生命力，更容易吸引客户，被客户所接受

响应式网站又称响应式网站布局、响应式网站设计、响应式网站制作，是一种网络页面设计布局。其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。响应式的设计和开发思路让页面更加“弹性”了，图片的尺寸可以被自动调整，页面布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们的选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。简单地说，响应式网站可以自动适应不同分辨率的电脑端显示器屏幕，也可以适应各种大小不同的手机屏幕、iPad屏幕等，而您不需要为不同的屏幕分辨率单独制作一套模板，切实节约公司或企业对网站部署和开发的成本。传统企业网站，就是大家所接触到的普通意义上的企业或公司网站。

123456789101112131415161718<!-- //平台、设备和操作系统var system ={win : false,mac : false,xll : false};//检测平台var p = navigator.platform;system.win = p.indexOf("Win") == 0;system.mac = p.indexOf("Mac") == 0;system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);//跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面if(system.win||system.mac||system.xll){}else{window.location.href="http://www.72mj.cn/wap.html";}-->

dedecms建站移动化问题，从6.18织梦更新手机站后问题就解决了，下面是对网站系统做的一些升级记录（记得升级之前一定要备份，切记）以网站http://boaer.com为例：第一步：下载官方升级文件v57sp1-20150618.zip （记得升级之前一定要备份，切记）第二步：解压覆盖原来的文件。上传到服务覆盖之前的文件。第三步：对模板文件的修改。复制以前的老模板文件，分别加上一下代码：首页：<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/index.html"><script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/index.html";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>栏目页<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}"><script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>文章页面<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}"><script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>建议把其中的{dede:global.cfg_mobileurl/} 修改为手机站网站，例如修改成http://m.boaer.com/ 。这代码的主要含义是手机跳转到手机页面。对手机端模板修改，主要是添加统计代码，对css的一些调整，手机模板也存在于默认模板下.主要的有：header_m 顶部index_m   首页footer_m  底部index_default_m  列表页修改之后覆盖。解决验证码失效问题：直接取消验证码1、打开 login.php 找到：if($validate==” || $validate != $svali)替换为：if( false )2、在模板文件dede/templets/login.htm里去掉以下验证码的具体HTML代码：<li><span>验证码：</span>   <input name=”validate” type=”text” id=”vdcode” style=’width:50px;text-transform:uppercase;’ />   <img id=”vdimgck” src=”../include/vdimgck.php” alt=”看不清？点击更换” align=”absmiddle” style=”cursor:pointer” onclick=”this.src=this.src+’?'” /></li>第四步：把二级目录变为二级域名，就可以方位手机站了。网址：http://www.boaer.com/m/ 为了更友好，可以把二级目录变为二级域名。1、解析二级域名到服务器IP。2、解决图片不显示的问题。把图片变成绝对地址改目录include下的文件extend.func.php，在最后面添加一个函数方法function replaceurl($newurl){$newurl=str_replace('src="/uploads/allimg/','src="http://你的域名/uploads/allimg/',$newurl);return $newurl;}另外调用文章正文内容的标签{dede:field.body/}需要改成： {dede:field.body function='replaceurl(@me)'/}此方法可以适用于任何调用绝对路径图片的页面。手机访问网站时就会自动跳转到手机站网址了。其他问题可以去DEDECMS官方论坛看看，或者百度搜索基本上都能找到答案。

首先你要知道一个概念！ 响应式模板是通过CSS来决定在不同设备或者屏幕尺寸来决定是否加载某段CSS代码的！ 一般用百分比会比较好，自适应！一般的大型网站实际上用的是rem 像网易，淘宝，搜狐都是这样用的！ 一般个人网站用百分比或者em就行！

我也在研究网站自适应问题，总的来说就是为了让你的网站在不同的客户端上浏览无误。宽屏电脑和平板及手机。不同的设备显示的尺寸像素不一样。一般能够自适应就都是用百分比控制的。

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。