1

I am designing a conventional Web Portal. Do i design, header, body, footer of pages separately for the 3 platforms? Or using which classes can i make coding cross platform?

I am talking from practical standpoint. I've gone thru the http://getbootstrap.com and understand the responsive elements. But there is a choice, to either make holding class-fluid or use basic divs which do not show on alternative platforms. Hence the need of the question.

Edit: --

When I try to avoid tables, i end up using column classes 1col-lg- which make my code (html) different for web and mobile! How do i avoid this?

form(name="input", action="home", method="get").form-inline.pull-right
      .row
        .col-lg-4
          label Username
        .col-lg-4
          label Password
      .row
        .col-lg-4
          input(type="text", name="user")
        .col-lg-4
          input(type="password", name="pswd")
        .col-lg-4
          input(type="submit", value="Login")
      .row
        .col-lg-5
          <input type="checkbox" checked="1" value="1" > keeps me logged in</input>
        .col-lg-5
          a(href='#') forgot your password
4

1 回答 1

2

Bootstrap 3 是自动响应的，不像 Bootstrap 2 需要额外的可选 .css 文件。响应式设计是非常主观的，永远不会有一个正确的答案。

根据设备类型设计专用页面可以让您更好地控制设备上显示的内容，但非常耗费人力。

响应式元素旨在允许提供相同的页面，这大大减少了劳动力，但对输出的控制也少得多。

您的主要决定应该是您的目标受众。如果您要拥有一个希望用户在其设备上方便使用的 Web 门户，请使用响应式元素。如果您正在设计一个在移动设备上使用但带有可选桌面门户的网站，请使用单独的专用页面。

编辑

我不确定您要准确完成什么，但在 bootstrap 3 网格系统中，一行中的所有项目应加起来最多 12 列，否则它们开始偏移并且永远不会正确排列。此外，您可以在同一个 div 中同时使用 .col-lg-4 和 .col-4 来帮助控制 div 的堆叠方式。

于 2013-08-12T12:26:43.887 回答