Hello Fellow Developers,
我即将开始一个新项目,我们的客户是美国的。在完成了要求和设计指南之后,我发现他们正在寻找主要支持桌面浏览器的固定宽度网站,但是在未来我看到他们可能希望在更紧凑的通信ipads,手机版本上运行它们的潜力很大。 。
我在bootstrap 2.3上工作了,但是过去的一年时间已经脱离了引导程序。我知道bootstrap 2.3和3.x的强大功能,首先是针对移动设备。
我的查询是,查看只想支持桌面浏览器的客户的观点,我是否仍然可以在固定宽度的网站上使用bootstrap,并为将来客户端提供一个空缺想把它移植到更小的设备上。在当前版本中容纳它是否合理。我知道,如果没有看到页面或线框的复杂性,它就不能回答。我只想获得理解的诀窍。
实现这一目标的最佳方法是什么?
希望在这方面有一些建议。
答案 0 :(得分:3)
正如您自己提到的,bootstrap更强调移动第一种方法,但它没有规定使用它。
框架的美妙之处在于您可以根据您的要求使用它。 无论它只是您网页中的一个小元素还是一个完整的网站,bootstrap都为您提供了自定义所有内容的选项。
根据您的情况,我在项目的启动阶段(即UI设计)中经历了多次。无论客户端告诉你多少次(这只是一个桌面应用程序),作为开发人员,我们对现在的网站的可用性场景有一个很好的了解,即如果它不是移动它不在那里。
考虑到您没有提供有关网站规模和复杂性的任何细节,我将假设它与用户界面相关。因此,我的建议是继续使用桌面版本,并为所有页面制作一个干净的框架,以便以后在需要时可以容纳移动版本。
P.S - 我在前面的坚固结构的帮助下做了很多次。答案 1 :(得分:1)
如果你想使用bootstrap,你可以:
评论与bootstrap css中所需宽度无关的所有媒体
/*@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {*/
.container {
width: 1170px;
}
/*}*/
它没有很好的组织,但我希望它有点帮助^^
答案 2 :(得分:1)
http://getbootstrap.com/css/#grid-options
由于bootstrap定义了网格本身,这对你有帮助。
答案 3 :(得分:1)
我这样做的方法是创建一个div
作为整个页面的包装器。在div
上设置宽度,Bootstrap应该响应该宽度。如果遇到div
可能溢出的任何情况,请将div
(或其父级,取决于上下文)的宽度设置为width: inherit
。
如果在桌面浏览器中查看页面,则所有内容都应该看起来应该保持固定宽度。如果在移动设备上查看,内容可能会根据您使用Bootstrap的网格系统的方式进行调整,但它应该以响应和优雅的方式进行调整。
答案 4 :(得分:1)
我们遇到了类似的问题。我们的解决方案是禁用xs和sm css(即强制所有屏幕使用md或lg屏幕)。
这很有效,因为移动设备已经擅长渲染大型网站。还记得iPad首次推出时网站是如何呈现的吗?您可能需要放大阅读内容,但一切仍然有效。
禁用xs和sm的最简单方法是使用引导程序自定义程序(http://getbootstrap.com/customize/):
基本上这意味着如果屏幕尺寸小于65px宽,则查看xs;如果屏幕宽度小于100px,则表示为sm(这应该不会发生)。
如果你没有config.json,那么这些变量在bootstrap的CSS中广泛使用会变得更难。我刚检查过,如果你想手动做的话,发现需要改变的53行...不是不可能,但你会非常小心。
尽管如此,我还是强烈建议你在一个不想满足移动设备需求的新系统上(至少不是主要的)。
答案 5 :(得分:0)
我会继续使用标准的Bootstrap网格系统布置网站。您没有义务使用Bootstrap CSS,您可以:
后一种方法至少会为您提供熟悉的Bootstrap外观,而不需要响应功能,您无需自己创建任何样式。
答案 6 :(得分:0)
您可以这样做,首先删除bootstrap的响应性(点击链接)。 Disable responsiveness
根据引导线(连接链接)。您必须根据您的设计覆盖容器的宽度。所有这些都已设置,当您想要做出响应时,只需进行一些更改即可。我正在使用这种方法很多时间。