移动网页布局 - 轮播式

Question

我一直在做一些尝试构建一个移动应用程序以用于电话间隙。 在定义布局时虽然我有一些问题：

我想构建一个带有侧滚动的单页布局，使用与轮播图片库相同的效果，但我不想切换图像，而是想在页面之间切换。

我想实现类似轮播的效果切换“页面”，并且正在考虑使用 Bootstrap 或Ink 之类的东西并使用提供的布局，以便我可以让每一列都表现为不同的屏幕。类似于此处 解释的内容，其中红色方块代表当前可视化的屏幕（或列），蓝色方块是“不可见”的屏幕（或列）。因此，正如您所见，每一列都应“缩放”以填充屏幕/视口。

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

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

用于引导和

使用 Ink，您可以使用三种布局 内容。

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

小：650 像素宽以下 中：651 到 960 像素宽 大：宽 961 像素以上

墨水。

所以，据我所知，我不能完全达到预期的效果。

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

最好的问候， 塞尔索桑托斯

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 和 table-cell 创建列效果。为表格提供 100*children 的宽度很重要

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 部分都有一个包装器和一个“气泡”。将包装器设置为位置：相对并将容器设置为位置：绝对，如下所示：

.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

除了上述答案之外，还作为对“如何在使用上述代码之类的表格单元结构时允许一些边距？”问题的答案？

由于表格单元格不允许您使用边距，您可以使用容器。在我的工作方式中，它们是包装器和容器的区别。包装器就像一个真正的包装器，就像糖果条（适合其内容物）一样，容器占用空间并像船上的海运集装箱一样。容器放在船上，但可以挂在船边界外（对于命名约定很重要）现在让我们开始使用技巧：

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

<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 hack。以某种奇怪的方式，这会将元素拉伸到 100% 的高度和宽度 请记住，必须设置所有 5 条规则（绝对位置、顶部、左侧、右侧和底部） 在这种情况下，我给了左右 15 像素，这会将 .container 15 像素放在“船舶边界”上。也可以在容器上使用溢出-y。以某种奇怪的方式，滚动条确实适用于这种流畅的设计方法（不要问为什么，但它很棒）

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

正如你所看到的，它并不是真正的魔法，但它确实有效，因为你使用严格的名称与 '>' 选择器组合，它不会影响任何其他元素，这允许你在几乎所有流体中使用它网站设计。