随着技术和创新的提高,智能手机变得更加强大,负担得起的和常见的;毫无疑问,小屏幕(智能手机、平板电脑和笔记本电脑)已成为您的首选项。为了对企业成长和获得更多的人气,每个客户都希望创建一个移动网站。有一些重要的事情:一个为移动设备设计,另一个为平板电脑,设计必须与所有的屏幕分辨率。
作为一款与六年的经验,我们开发团队(DNNGo)找到了一个可行的解决方案,以满足不断发展的浏览器和互联网devices-taking利用响应设计与HTML 5, CSS3和引导技术让你的网站与各种设备和屏幕。
响应网页设计是什么?
维基百科将响应网页设计(RWD)定义为“网页设计的方法,旨在打造网站提供一个最佳的观看简单阅读和导航用最少的调整,平移,和滚动范围广泛的设备(从手机到桌面电脑显示器)。”
无论你使用的是什么屏幕分辨率,页面将符合用户的屏幕分辨率,图像大小和相关脚本。换句话说,页面有能力应对用户的设备环境。响应web设计允许网站的布局,以适应小和大屏幕设备为了共享相同的代码和内容不需要单独的网站属性。通过这种方式,我们不需要开发新版本变化的设备。
响应设计自2012年以来一直提到的很多;各种各样的网络响应的设计受到越来越多的关注。“让人们忘记了他们的设备尺寸”的概念将响应设计开发,这意味着Web设计会想出更负责的设计元素:UIKit,引导,Adobe边检查,基金会,SimpleGrid和响应测试。
所有款的皮我们商店开发引导,能够处理各种各样的手机,平板电脑和个人电脑,有很大的灵活性。
引导程序是什么?
引导是一个前端,开源工具用于创建网站和web应用程序,它是由马克·奥托雅各在Twitter和桑顿是一个最好的CSS框架为开发和设计内容管理系统。它有两个versions-Bootstrap 2和引导3。目前,最新的版本是3.0。
下面是我们的一些皮肤上开发引导2:
下面是我们的一些皮肤上开发引导3:
无限的敏感皮肤045款
无限的敏感皮肤043款
无限的敏感皮肤042款
引导网格系统的更多信息,请参见下面的链接:
引导2:http://getbootstrap.com/2.3.2/scaffolding.html fluidGridSystem
引导3:http://getbootstrap.com/css/网格
一些技巧在使用敏感肌肤:
1。如何设置图片在HTML模块响应?
在引导2中,你不需要添加任何额外的编码,图像能够适应父元素的宽度,因为引导2包含CSS代码片段如下:
img {max-width: 100%;}
而在引导3中,它不包括上面的代码片段中,您需要添加额外.img-responsive类。这是代码片段:
< img src = "…" class = " img-responsive“alt = "响应图像" >
2。如何使各设备模块隐藏/显示吗?
并不是所有的模块可以处理响应能力;在这种情况下,我们需要在移动设备隐藏模块。
在引导,响应类包括,它能够隐藏/显示内容。
下面是一个可用的表对一个给定的类及其影响媒体查询布局(由设备标签)。
引导2:
引导3:
通过利用这些类,您将能够在移动设备很容易隐藏模块。
登录到这个网站在管理角色,点击设置按钮在右上角的模块,并找到在高级设置页眉和页脚部分。
添加代码< div class = " hidden-phone " >在头部分。并添加< / div >在页脚部分,就像下图:
如果您使用的是Boostrap 3皮肤,您需要添加代码< div class = " hidden-xs " >头部分并添加页脚节< / div >。
以同样的方式,您可以显示这个模块在移动设备中,而隐藏在平板电脑和个人电脑。
3所示。如何使用引导网格系统吗?
引导包括响应、移动第一个流体网格系统适当尺度12列随着设备或视窗大小的增加。
我们也可以使用引导网格系统创建一个响应布局很容易。
例如:
我们可以添加以下编码HTML模块。
引导2:
< div class = " row-fluid " > < div class = " span4 " >…< / div > < div class = " span8 " >…< / div > < / div >
< div class = " row-fluid " > < div class = " span4 " >…< / div > < div class = " span4 " >…< / div > < div class = " span4 " >…< / div > < / div >
引导3:
< div class = "行" > < div class = " col-sm-4 " >…< / div > < div class = " col-sm-8 " >…< / div > < / div >
< div class = "行" > < div class = " col-sm-4 " >…< / div > < div class = " col-sm-4 " >…< / div > < div class = " col-sm-4 " >…< / div > < / div >
我们也可以创建一些额外的面板布局。
例如:
引导2:
< div class = " row-fluid " > < div class = " span4 " > < div class = " Grid4_Pane1 " id = " Grid4_Pane1 " runat = " server " > < / div > < / div > < div class = " span8 " > < div class = " Grid8_Pane2 " id = " Grid8_Pane2 " runat = " server " > < / div > < / div > < / div >
< div class = " row-fluid " > < div class = " span4 " > < div class = " Grid4_Pane1 " id = " Grid4_Pane1 " runat = " server " > < / div > < / div > < div class = " span4 " > < div class = " Grid4_Pane2 " id = " Grid4_Pane2 " runat = " server " > < / div > < / div > < div class = " span4 " > < div class = " Grid4_Pane3 " id = " Grid4_Pane3 " runat = " server " > < / div > < / div > < / div >
引导3:
< div class = "行" > < div class = " col-sm-4 " > < div class = " Grid4_Pane1 " id = " Grid4_Pane1 " runat = " server " > < / div > < / div > < div class = " col-sm-8 " > < div class = " Grid8_Pane2 " id = " Grid8_Pane2 " runat = " server " > < / div > < / div > < / div >
< div class = "行" > < div class = " col-sm-4 " > < div class = " Grid4_Pane1 " id = " Grid4_Pane1 " runat = " server " > < / div > < / div > < div class = " col-sm-4 " > < div class = " Grid4_Pane2 " id = " Grid4_Pane2 " runat = " server " > < / div > < / div > < div class = " col-sm-4 " > < div class = " Grid4_Pane3 " id = " Grid4_Pane3 " runat = " server " > < / div > < / div > < / div >
我们希望你发现这些技巧有用。如果你有任何意见、问题或建议敏感皮肤上的经验,请反馈发送给我们使用下面的评论部分。
