Bootstrap 3.x +固定宽度网站

时间:2015-08-24 10:36:52

标签: twitter-bootstrap twitter-bootstrap-3

Hello Fellow Developers,

我即将开始一个新项目,我们的客户是美国的。在完成了要求和设计指南之后,我发现他们正在寻找主要支持桌面浏览器的固定宽度网站,但是在未来我看到他们可能希望在更紧凑的通信ipads,手机版本上运行它们的潜力很大。 。

我在bootstrap 2.3上工作了,但是过去的一年时间已经脱离了引导程序。我知道bootstrap 2.3和3.x的强大功能,首先是针对移动设备。

我的查询是,查看只想支持桌面浏览器的客户的观点,我是否仍然可以在固定宽度的网站上使用bootstrap,并为将来客户端提供一个空缺想把它移植到更小的设备上。在当前版本中容纳它是否合理。我知道,如果没有看到页面或线框的复杂性,它就不能回答。我只想获得理解的诀窍。

实现这一目标的最佳方法是什么?

希望在这方面有一些建议。

7 个答案:

答案 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;
            }
    /*}*/
    
  • Bootstrap non-responsive

它没有很好的组织,但我希望它有点帮助^^

答案 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/):

  • 加载config.json
  • 将@ screen-sm-min设置为“(@ screen-sm / 10)”
  • 将@ screen-md-min设置为“(@ screen-md / 10)”

基本上这意味着如果屏幕尺寸小于65px宽,则查看xs;如果屏幕宽度小于100px,则表示为sm(这应该不会发生)。

如果你没有config.json,那么这些变量在bootstrap的CSS中广泛使用会变得更难。我刚检查过,如果你想手动做的话,发现需要改变的53行...不是不可能,但你会非常小心。

尽管如此,我还是强烈建议你在一个不想满足移动设备需求的新系统上(至少不是主要的)。

答案 5 :(得分:0)

我会继续使用标准的Bootstrap网格系统布置网站。您没有义务使用Bootstrap CSS,您可以:

  1. 根本不加载Bootstrap CSS并自行定义布局尺寸。
  2. 自定义Bootstrap CSS(请参阅http://getbootstrap.com/customize/)并禁用网格系统。
  3. 后一种方法至少会为您提供熟悉的Bootstrap外观,而不需要响应功能,您无需自己创建任何样式。

答案 6 :(得分:0)

您可以这样做,首先删除bootstrap的响应性(点击链接)。 Disable responsiveness

根据引导线(连接链接)。您必须根据您的设计覆盖容器的宽度。所有这些都已设置,当您想要做出响应时,只需进行一些更改即可。我正在使用这种方法很多时间。