时间戳

首页 > 解决方案 > 在页面周围和选项卡内容内引导 4 个选项卡

html - 在页面周围和选项卡内容内引导 4 个选项卡

问题描述

我们可以像下面的例子那样做一个设计吗，我只需要用 html、css、bootstrap 4 个标签来创建，我看过很多例子但我没有找到任何解决方案，任何人都可以提供参考，请提供参考这将是一个很大的帮助。请给我任何解决方案如何实现...请给我发送任何参考示例，如下图所示

在此处输入图像描述

非常感谢，如果有人接受我的要求，请告诉我如何实现

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">


  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Home</a></li>
    <li><a data-toggle="tab" href="#tab2">TAB 1</a></li>
    <li><a data-toggle="tab" href="#tab3">TAB 2</a></li>
    <li><a data-toggle="tab" href="#tab4">TAB 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="tab3" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="tab4" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

标签： htmlcsstwitter-bootstraptabs

解决方案

您可以使用引导网格布局来实现此效果。

您将拥有包含一行和一列的常规容器类，第一行 12 个图像，每个包含 1 列。

而随后的行将有 1 列用于左侧图像，1 列用于右侧图像，以及介于两者之间的 10 列图像。

<div class="container">
  <div class="row">
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">...</div>
  </div>
</div>

然后对于左图和右图，您可以执行以下操作

    <div class="container">
      <div class="row">
        <div class="col-md-1">...</div>
        <div class="col-md-10">...</div>
        <div class="col-md-1">...</div>
      </div>
    </div>

然后，您可以以常规方式添加图片，您可以根据需要设置大小、填充和边距。请注意，中产阶级的列数可以等于 10。

推荐阅读