html - 使用 Bootstrap 分层图像

标签 html css twitter-bootstrap

我正在尝试使用 Bootstrap 创建以下(模型) /image/vkgBu.jpg

我的想法是，这些方 block 中的每一个都是一个图像，当单击背景图像时它们出现/消失时，我将拥有 Javascript 控件。我遇到的麻烦是让小方 block 像我一样堆叠在上面。我在这里做了研究，自己尝试了很多东西，但接近但没有雪茄。

这是我最接近的(首先测试 1 行)。 /image/mqTc1.jpg

方 block 彼此相邻排列得很好，但是它们没有正确显示在同一网格列/行中。

相关 HTML:

<div class="container-fluid">
    <div class="row-centered">
    <div class="row row-centered">
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img"> 
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">

        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
    </div>
    </div>
    <div class="row row-centered">
        <div class="col- col-centered">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
    </div>
</div>

CSS: 

.character-img{
    position: relative;
    z-index: 10;
}

.stock-img{
    position: relative;
    z-index: 20;
}

编辑: 更新版本会产生更好的结果？包括将蓝色框添加到第二行。

HTML

<div class="container-fluid">
    <div class="row-centered">
    <div class="row row-centered">
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img"> 
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
    </div>
    </div>
    <div class="row-centered">
    <div class="row row-centered">
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img"> 
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
    </div>
    </div>
</div>

CSS

.character-img{
position: relative;
z-index: 10;
}

.stock-img{
position: relative;
z-index: 20;
}

结果:https://imgur.com/vd3IZsP

最佳答案

根据您向我们展示的描述您想要的结果的图像，我认为 Bootstrap 是一个明智的选择。您想要在布局中执行的大部分操作都可以使用 native 类来实现。但也很明显，您缺乏对 Bootstrap 框架的基本了解，我强烈建议您重新访问他们的文档。

可以在以下位置查看您尝试实现的结构的完整示例:https://www.bootply.com/SwuSKmlKWe

但让我们看一下单个“盒子”元素的 HTML:

<div class="col-6 col-md-4 col-lg-3 mb-4">
  <div class="h-100 bg-secondary p-4">
    <img src="//placehold.it/200x200" class="rounded-circle img-fluid d-block mx-auto" />

    <div class="row mt-4">
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
    </div>
  </div>
</div>

第一个<div> element 是一个列包装器，它提供有关将影响显示的断点的信息。从左到右，它是用最小的断点 ( col-* ) 到最大的。如果我们要将其翻译成可读的内容，它可能会显示为:

At the smallest breakpoint use 6/12 columns. At the medium breakpoint begin using 4/12 columns, and at the large breakpoint use 3/12 columns.

注意:col-sm-*存在但未在此处使用。因为没有使用“小”断点，所以 Bootstrap 将默认为下一个最小的断点(在本例中为 col-6

在列包装器内部，我们有另一个包含多个类的包装器:

  • .h-100 帮助我们创建等高元素，无论 内容决定了较小的高度。
  • .bg-secondary 是一个实用类，提供深色背景
  • .p-4 是一个实用程序类，它在 X 和 Y 边距上提供填充(4 表示填充的“级别”，可以低至 0 和高至 5)

此时我们开始看到实际内容。您的主图像有几个影响其形状和位置的类别:

  • .rounded-circle 是强制圆形边框半径的图像缩略图类。
  • .img-fluid 是一个响应式类，可帮助图像大小与其所在的元素成比例地放大和缩小。
  • .d-block 转换 img进入 block 级元素
  • .mx-auto 将 X 边距设置为“自动”，与 d-block 结合使用, 居中图像。

从这里我们可以看到您原始帖子中引用的 8 个按钮/图像。 Bootstrap Grid 是此类组织的完美解决方案，但由于我们已经在处理 Grid Element 中的内容，因此我们需要创建一个新的 .row。 .

里面新.row我们有一个断点列(.col-3)和几个实用程序类:text-center将内容居中，mb-2以类似于 p-* 的方式设置下边距实用程序类更改填充。

关于html - 使用 Bootstrap 分层图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51615628/

上一篇：html - 视口(viewport)中带有 WOW.js 的元素动画

下一篇：html - 将@media 直接添加到元素中？

相关文章：

html - 如何删除 Elementor 中的小部件和布局子项之间的间隙/空间？

javascript - ReactJS - 清除焦点上的选择值

html - CSS 选择器正在选择页面中的所有 p 元素

html - 使用 CSS 一个接一个地垂直放置输入

javascript - Bootstrap Modal - 使用 Javascript 将数据传递到 Modal

html - 更改 iframe 上的鼠标光标

css - 在没有 JS 的 CSS 动画之后应用样式

Ember.js 的 CSS 继承问题

javascript - Bootstrap文章风格

css - 奇怪的 CSS/导航空白

©2024 IT工具网  联系我们