效果图如下:
pc端:
移动端效果:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用bootstrap3库布局</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.icon_seartch{
margin-right: 10px;
}
.box200-250{
width: 11rem;
height: 21rem;
background-color:gray;
}
.pd_pd{
padding:10px 0 10px 10px!important;
}
</style>
</head>
<body>
<div class="container">
<!-- <div class="border-bottom text-center "><h2>Bootstrap官网</h2></div> -->
<!-- 头部 -->
<header class="d-flex justify-content-between align-items-center">
<div class=""><a href="#" class="text-muted text-decoration-none">Subsricl</a></div>
<div class=" "><h2 class=""><a href="#" class="text-dark text-decoration-none">Large</a></h2></div>
<div class="">
<a href="#" class="text-decoration-none "><i class="icon_seartch">Q</i></a>
<a href="#" class="btn btn-sm btn-outline-secondary">Sign up</a>
</div>
</header>
<div class="border-bottom"></div>
<!-- 导航条 -->
<nav class="d-flex justify-content-between align-items-center py-1 mb-2 overflow-auto">
<a href="#" class="text-muted p-2">Home</a>
<a href="#" class="text-muted p-2">Documentation</a>
<a href="#" class="text-muted p-2">Examples</a>
<a href="#" class="text-muted p-2">Themes</a>
<a href="#" class="text-muted p-2">Expo</a>
<a href="#" class="text-muted p-2">Blog</a>
<a href="#" class="text-muted p-2">supporting</a>
<a href="#" class="text-muted p-2">card</a>
<a href="#" class="text-muted p-2">natural</a>
<a href="#" class="text-muted p-2">little</a>
</nav>
<div class="jumbotron bg-dark text-white">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<!--左右布局 -->
<div class="row">
<div class="col-md-6 mb-4">
<div class="row border shadow-sm rounded no-gutters overflow-hidden pd_pd">
<div class="col">
<strong class="d-inline-block mb-2 text-primary">world</strong>
<h3 class="mb-0">Hello, world!</h3>
<div class="mb-1 text-muted"></div>
<p class="card-text">
This article is reproduced with permission from the magazine nature. The article was first published on September 14, 2012</p>
<a class="stretched-link" href="#">Learn more</a>
</div>
<div class="col-auto d-none d-md-block">
<a href="#"><div class="box200-250"></div></a>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="row border shadow-sm rounded no-gutters overflow-hidden pd_pd">
<div class="col">
<strong class="d-inline-block mb-2 text-primary">world</strong>
<h3 class="mb-0">Hello, world!</h3>
<div class="mb-1 text-muted"></div>
<p class="card-text">
This article is reproduced with permission from the magazine nature. The article was first published on September 14, 2012</p>
<a class="stretched-link" href="#">Learn more</a>
</div>
<div class="col-auto d-none d-md-block">
<a href="#"><div class="box200-250"></div></a>
</div>
</div>
</div>
</div>
<!-- bottom 左右 -->
<div class="row">
<div class="col-md-8">
<h3 class="font-italic border-bottom py-4 font-weight-bold">Form the Firehose</h3>
<div class="mt-4">
<h2>Sample blog post</h2>
<p>September 14, 2021 <a href="#">Mark</a></p>
<p class="border-bottom pb-4">This is a simple hero unit, a simple jumbotron-style component <a href="#" class="">for calling extra attention to</a> featured content or information.</p>
<p>It uses utility classes for typography and spacing to space <strong>content out within</strong> the larger containerIt uses utility classes for typography and spacing to space</p>
<p>It uses utility classes for typography and spacing to space content out within the larger container It uses utility classes for typography and spacing to space</p>
</div>
<div class="mt-4">
<h2>Sample blog post</h2>
<p>September 14, 2021 <a href="#">Mark</a></p>
<p class="border-bottom pb-4">This is a simple hero unit, a simple jumbotron-style component <a href="#" class="">for calling extra attention to</a> featured content or information.</p>
<p>It uses utility classes for typography and spacing to space <strong>content out within</strong> the larger containerIt uses utility classes for typography and spacing to space</p>
<p>It uses utility classes for typography and spacing to space content out within the larger container It uses utility classes for typography and spacing to space</p>
</div>
<div class="mt-4">
<h2>Sample blog post</h2>
<p>September 14, 2021 <a href="#">Mark</a></p>
<p class="border-bottom pb-4">This is a simple hero unit, a simple jumbotron-style component <a href="#" class="">for calling extra attention to</a> featured content or information.</p>
<p>It uses utility classes for typography and spacing to space <strong>content out within</strong> the larger containerIt uses utility classes for typography and spacing to space</p>
<p>It uses utility classes for typography and spacing to space content out within the larger container It uses utility classes for typography and spacing to space</p>
</div>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary rounded-pill">Older</a>
<a href="#" class="btn btn-outline-secondary disabled rounded-pill">Newer</a>
</div>
</div>
<div class="col-md-4">
<div class="bg-light rounded p-4 mt-4">
<h3 class="font-italic">About</h3>
<p>After revelations by the former National Security Agency contractor Edward J. Snowden in 2013 that the government both cozied up to certain tech companies and hacked into others to gain access to private data on an enormous scale, tech giants began to recognize the United States government as a hostile actor</p>
</div>
<div class="mt-4 ml-md-2">
<h3>Archives</h3>
<ol class="list-unstyled">
<li><a href="#">September 11</a></li>
<li><a href="#">September 12</a></li>
<li><a href="#">September 13</a></li>
<li><a href="#">September 14</a></li>
<li><a href="#">September 15</a></li>
<li><a href="#">September 16</a></li>
<li><a href="#">September 17</a></li>
<li><a href="#">September 18</a></li>
<li><a href="#">September 19</a></li>
<li><a href="#">September 20</a></li>
</ol>
</div>
<div class="mt-4 ml-md-2">
<h3>Elsewhere</h3>
<ul class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="containder-fluid bg-light text-center p-4 mt-4 text-muted">
<p class="my-4">This is a simple hero unit, a simple jumbotron-style <a href="#">component for callingextra</a> attention to featured content</p>
<p><a href="#">Back to top</a></p>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
总结:样式可以改为自己想要的样式,这里只是基础的样式,代码中class是第三方库中css自带的class名，想要定义margin和top的引入class名就可以了,也可以自定义class的样式。
4767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
