移动网页布局 - 旋转木马

Question

我一直在尝试构建一个与手机差距一起使用的移动应用程序。 在定义布局时虽然我有一些问题：

我想使用侧滚动构建单页面布局，使用与旋转木马图像库相同的效果，但不是切换图像，而是想在页面之间切换。

我想实现像旋转“页面”这样的旋转木马，并且正在考虑使用像Bootstrap或Ink这样的东西，并使用提供的布局，这样我就可以让每个列表现为不同的屏幕。类似于此处所解释的，其中红色方块表示当前可视化的屏幕（或列），蓝色方块是屏幕“不可见”（或列）。因此，您可以看到每列应“缩放”以填充屏幕/视口。

从两个框架中读取文档我没看到如何实现这个，因为列定义是

  

默认的Bootstrap网格系统使用12列，制作一个   940px宽的容器，未启用响应功能。随着   添加了响应式CSS文件，网格适应724px和1170px宽   取决于您的视口。低于767px视口，列成为   流体和垂直堆叠。

用于bootstrap和

  

使用Ink，您将获得三种可以用于心灵的布局   内容。

     

代表小M的S代表中等L代表   大默认情况下，这些对应于以下屏幕大小   间隔（我们将展示如何在一秒钟内自定义这些内容）：

     

小：低于650像素宽介质：宽度介于651和960像素之间   大：宽度超过961像素

for Ink。

所以，根据我的理解，我无法达到预期的效果。

我的问题是：如何获得所需效果，如何使引导或Ink更改其列定义，以便每列代表一个屏幕（或一组列，因为它们的总和必须为12列）？这甚至可能吗？我还应该考虑其他替代方案吗？

最诚挚的问候， Celso Santos

Answer 1

我没有对此进行测试，但它可能在没有任何奇怪的库的情况下在CSS3中完成。

首先创建一个像这样的html布局：

<div id="wrapper">
  <header>Website header</header>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
</div>

然后使用CSS表和table-cell创建列效果。表格的宽度为100 *儿童

非常重要

html, body { height: 100%; }
#wrapper { display: table; width: 400%; margin-top: 100px; }
#wrapper > header { position: fixed; top: 0px; height: 100px; width: 100%; } 
#wrapper > section { display: table-cell; height: 100%; width: 25%; }

一个很好的副作用是当屏幕旋转时，页面将只是旋转并缩放（如果设置）

编辑：允许每个部分的边距

<div id="wrapper">
  <header>Website header</header>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
</div>

每个html部分现在都有一个包装器和一个“气泡”。将包装器设置为position：relative并将容器设置为position：absolute，如下所示：

.page_wrapper { position: relative; width: 100%; height: 100%; } 
.page_bubble { position: absolute; top: 0px; right: 25px; bottom: 0px; left: 25px; }

在高度和宽度的某个包装中定义绝对位置的所有边。它在某种程度上表现为一个拉伸容器填充相对包装器（在这种情况下）左侧和右侧25px的边距也允许在内部内容超过高度或宽度时自动溢出:)有关这个小CSS'hack'的更多信息：

SuperStretching elements

Answer 2

除了上面的答案以及“如何使用像上面代码这样的表格单元结构时允许一些余量的问题”的回答？

由于表格单元格不允许使用边距，因此您可以使用容器。在我的工作方式中，他们的包装和容器是不同的。一个包装器就像一个真正的包装器，就像糖果棒一样（适合它的内容）一个容器占用空间，就像船上的seacontainer一样。集装箱放在船上，但能够悬挂在船舶边界外（对于命名惯例很重要）现在让我们继续下去：

以下是添加了一些内容的相同示例

<div id="wrapper">
  <header>Website header</header>
  <div class="cell">
    <section>
      <div class="container">
        <header>Home header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 2 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 3 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 4 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
</div>

  html, body, #wrapper { height: 100%; }
  #wrapper { display: table; width: 400%; margin-top: 100px; }
  #wrapper > header { position: fixed; top: 0px; height: 100px; width: 100%; } 
  #wrapper > .cell { display: table-cell; height: 100%; width: 25%; }
  /* set position relative in the section since position relative on cells don't work */
  #wrapper > .cell > section { position: relative; height: 100%; } 

下一个规则是所谓的CSS黑客攻击。以某种奇怪的方式，这将元素拉伸到100％的高度和宽度       请记住，必须设置所有5个规则（绝对位置，顶部，左侧，右侧和底部）       在这种情况下，我给了左右15px，这将把.container 15px放在'船边界'上。也可以在容器上使用overflow-y。以某种奇怪的方式，滚动条可以使用这种流体设计方法（不要问为什么，但它真棒）

#wrapper > .cell > section > .container { 
  position: absolute; 
  top: 0px; right: 15px; bottom: 0px; left: 15px; 
  overflow-y: auto; border: 1px solid #000000; 
} 

正如你可以看到它不是真正的魔法，但它可以解决问题，因为你使用严格的名字和'＆gt;'选择器，它不会影响任何其他元素，这允许您在几乎所有流畅的网站设计中使用它。