5.栅格系统
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yx7xPxw0-1594451881727)(D:bootstrapBootstrap入门.assetsimage-20200711135751305.png)]
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栅格系统</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<!--
class="container 居中的盒子 把所有的内容都装进去"
小到没设置的地方 自动默认占12份
-->
<div class="container">
<!--第一行 class="row"-->
<div class="row">
<div class="col-lg-6 col-md-12 bg-warning">1-1</div>
<div class="col-lg-6 col-md-12 bg-success">1-2</div>
</div>
<!--第二行class="row" 1~12 -->
<div class="row">
<div class="col-lg-4 col-md-6 bg-danger">2-1</div>
<div class="col-lg-4 col-md-6 bg-dark">2-2</div>
<div class="col-lg-4 col-md-12 bg-primary">2-3</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>6.data-toggle
data-toggle
1.下拉菜单 dropdown
2.模态框 modal
3.折叠 collapse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
/*
通过css代码 为 巨幕添加背景图片
*/
.jumbotron{
background:url(images/banner.jpg);
background-size:100% 100%;
}
.pt-10{
padding-top:8rem !important;
}
.pb-10{
padding-bottom:8rem !important;
}
</style>
</head>
<body>
<!--导航 bg-xxx 调整背景颜色 -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand text-white" href="#">大王土豆</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">土豆</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled text-white" href="#" tabindex="-1" aria-disabled="true">起沙</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--导航-->
<!--
1.巨幕
2.轮播
-->
<div class="jumbotron text-white">
<h1 class="display-4 ">来了,老弟</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 id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/banner2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/banner3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> -->
<!-- 轮播 -->
<!--核心内容-->
<div class="container">
<!--有row的地方 就有12等分 有肉 就有12分 -->
<div class="row">
<div class="col-lg-3 col-sm-6">
<img src="images/head.jpg" class="img-thumbnail" alt="">
<!--组件 -> 列表组-->
<ul class="list-group list-group-flush">
<li class="list-group-item">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bootstrap-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"/>
</svg>
小丫丫
</li>
<li class="list-group-item">13888888888</li>
<li class="list-group-item">在哪遥远什么地方~</li>
</ul>
</div>
<div class="col-lg-9 col-sm-6">
<div class="row">
<div class="col-lg-6">
<img src="images/lx.png" alt="">
<p>我。想有一天和你去旅行。去那没有去过的地方，没有行李，没有背包，不带电脑更不要手机，坐在最高的山顶上，捕捉最后的流星，可以听音乐，聊电影，吃东西，只要我们在一起，随便是什么——都可以</p>
</div>
<div class="col-lg-6">
我。想有一天和你去旅行。去那没有去过的地方，没有行李，没有背包，不带电脑更不要手机，坐在最高的山顶上，捕捉最后的流星，可以听音乐，聊电影，吃东西，只要我们在一起，随便是什么——都可以。 我。想有一天和你去旅行。去那没有去过的地方，没有行李，没有背包，不带电脑更不要手机，坐在最高的山顶上，捕捉最后的流星，可以听音乐，聊电影，吃东西，只要我们在一起，随便是什么——都可以。
<img src="images/xt.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!--核心内容-->
<!--
随笔
margin padding
padding-top -> 简化 pt 0~5 1 0.25rem 2 0.5rem 3 1rem 4 1.5rem 5 3rem
-->
<div class="row pt-10 pb-10">
<!--
text-center 让里面的文本居中
-->
<div class="col-md-12 text-center">
<h2>随笔</h2>
<p>世界上最有钱的人是奥特曼，因为所有取款机上都印着他名字的缩写“ATM” 。</p>
</div>
</div>
<!--随笔-->
<!--黄条-->
<div class="pt-5 pb-5" style="background:#ff5938 !important;">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12 text-white">
<div class="display-4">一路前行</div>
<p class="pt-4 lead">
我的眼中，旅行分两种，去看一个人，以及一个人去看。前者的说走就走固然会给对方带去惊喜，但有责任意识的人，或者说会多想一些事的人免不了会多思考一些，这次意料之外的行动会不会给对方带来更多的麻烦、对方惊喜的面庞之下有没有潜藏着更深层次的厌烦、不耐。与其在那么多担心中疲惫，不如给对方足够的时间去准备。这是一种束缚，也是一种尊重。
</p>
</div>
<div class="col-lg-6 col-md-12">
<img src="images/t1.png" class="img-fluid" alt="">
</div>
</div>
<div class="row pt-4">
<div class="col-lg-6 col-md-12">
<img src="images/t2.png" class="img-fluid" alt="">
</div>
<div class="col-lg-6 col-md-12">
<img src="images/t3.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<!--黄条-->
<!--
随笔
margin padding
padding-top -> 简化 pt 0~5 1 0.25rem 2 0.5rem 3 1rem 4 1.5rem 5 3rem
-->
<div class="row pt-10 pb-10">
<!--
text-center 让里面的文本居中
-->
<div class="col-md-12 text-center">
<h2>心情</h2>
<p>世界上最有钱的人是奥特曼，因为所有取款机上都印着他名字的缩写“ATM” 。</p>
</div>
</div>
<!--随笔-->
<!--卡片-->
<div class="container">
<div class="card-group">
<div class="card">
<img src="images/l1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">如沐春风</h5>
<p class="card-text">纵有疾风起,人生不言弃l lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="images/l2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="images/l3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<!--卡片-->
<div class="bg-dark pb-4 pt-4 text-white text-center">
© 版权所有 小丫丫~
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
<!--
***********
1. 栅格系统 bootstrap 核心 响应式布局核心
2. 组件 导航 巨幕 banner 列表 卡片
颜色 text-xxx bg-xxx
边距 pt-xxx pb-xxx
文字 h1~h6 display1~4 lead ..
完善
--><!DocType html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
*{padding:0;margin:0;}
.jumbotron{
background:url(images/banner.jpg);
background-size:100% 100%;
}
.pt-12{
padding-top:10rem !important;
}
.pt-10{
padding-top:8rem !important;
}
.pb-12{
padding-bottom:10rem !important;
}
.pb-10{
padding-bottom:8rem !important;
}
.mb-5{
margin-bottom:4rem !important;
}
</style>
</head>
<body>
<!--组件 -> 导航条-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand text-white" href="#">小丫丫的blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">看风景的人</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link text-white dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
旅程
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item text-dark" href="#">Action</a>
<a class="dropdown-item text-dark" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-dark" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled text-white" href="#" tabindex="-1" aria-disabled="true">晒一晒</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--导航条-->
<div class="jumbotron text-white pl-5">
<h1 class="display-5">Hi,老弟!</h1>
<p class="lead">总有疾风起,人生不言弃~</p>
<hr class="my-4">
<p>当你越来越有能力时，自然会有人看得起你；水之所以能穿石是因为永远在坚持。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<!--组件 巨幕-->
<!--banner-->
<!-- <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner.jpg" class="d-block w-100" alt="images/banner.jpg">
<div class="carousel-caption d-none d-md-block">
<h5>雪山</h5>
<p>纵有疾风起,人生不言弃。</p>
</div>
</div>
<div class="carousel-item">
<img src="images/banner2.jpg" class="d-block w-100" alt="images/banner2.jpg">
<div class="carousel-caption d-none d-md-block">
<h5>夜晚</h5>
<p>一夜梦游千里月，五更霜落万家钟。</p>
</div>
</div>
<div class="carousel-item">
<img src="images/banner3.jpg" class="d-block w-100" alt="images/banner3.jpg">
<div class="carousel-caption d-none d-md-block">
<h5>落日</h5>
<p>好看落日斜衔处，一片春岚映半环。</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> -->
<!--banner-->
<!-- 主要内容 测试的时候用到背景 工具类 - 颜色 bg-success -->
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<!--
页面内容->图片
-->
<img src="images/head.jpg" class="img-thumbnail" alt="Responsive image">
<!--text-center 工具类 -> 文本 h4 页面内容->排版-->
<p class="text-center h4">小丫丫</p>
<!--列表 组价 -> 列表组-->
<ul class="list-group list-group-flush">
<li class="list-group-item">
<svg class="bi bi-arrow-right-square" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
</svg> 18999999999
</li>
<li class="list-group-item">
<svg class="bi bi-brightness-alt-high-fill" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 11a4 4 0 1 1 8 0 .5.5 0 0 1-.5.5h-7A.5.5 0 0 1 4 11zm4-8a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm8 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zM4.464 7.464a.5.5 0 0 1-.707 0L2.343 6.05a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z"/>
</svg>
飞上天,和太阳肩并肩</li>
<li class="list-group-item">
<svg class="bi bi-tag-fill" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
<span>我地家在东北,松花江上~</span></li>
</ul>
</div>
<!--main的右边 border边框-->
<div class="col-lg-9 col-sm-6">
<div class="row">
<div class="col-lg-6 col-sm-12">
<img class="img-fluid" src="images/lx.png" alt="">
<p class="pt-2">我。想有一天和你去旅行。去那没有去过的地方，没有行李，没有背包，不带电脑更不要手机，坐在最高的山顶上，捕捉最后的流星，可以听音乐，聊电影，吃东西，只要我们在一起，随便是什么——都可以。</p>
</div>
<!--
d-none 不显示
d-block 显示
-->
<div class="col-lg-6 d-none d-lg-block">
我。想有一天和你去旅行。去那没有去过的地方，没有行李，没有背包，不带电脑更不要手机，坐在最高的山顶上，捕捉最后的流星，可以听音乐，聊电影，吃东西，只要我们在一起，随便是什么——都可以。
我。想有一天和你去旅行。去那没有去过的地方，没有行李，没有背包，不带电脑更不要手机，坐在最高的山顶上，捕捉最后的流星，可以听音乐，聊电影，吃东西，只要我们在一起，随便是什么——都可以。
<img class="img-fluid pt-3" src="images/xt.jpg" alt="">
</div>
</div>
</div>
</div>
<!--进入我的故事-->
<div class="row pt-10 pb-10">
<div class="col-md-12">
<div class='text-center'>
<h2 class='h1 mt-5 mb-4'>随笔</h2>
<p>世界上最有钱的人是奥特曼，因为所有取款机上都印着他名字的缩写“ATM” 。</p>
</div>
</div>
</div>
<!--进入我的故事-->
</div>
<!--黄条-->
<div class="pt-5 pb-5" style="background:#ff5938 !important">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="text-white">
<!--h1~h5 display1-4 更大-->
<h1 class="display-4 mb-3">一路前行</h1>
<p class='lead pt-4'>
我的眼中，旅行分两种，去看一个人，以及一个人去看。前者的说走就走固然会给对方带去惊喜，但有责任意识的人，或者说会多想一些事的人免不了会多思考一些，这次意料之外的行动会不会给对方带来更多的麻烦、对方惊喜的面庞之下有没有潜藏着更深层次的厌烦、不耐。与其在那么多担心中疲惫，不如给对方足够的时间去准备。这是一种束缚，也是一种尊重。
</p>
</div>
</div>
<div class="col-lg-6 col-md-6 mb-3">
<img src="images/t1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-6 col-md-6 mb-3">
<img src="images/t2.png" class="img-fluid" alt="">
</div>
<!--
d-none 都消失
d-lg-block 显示
-->
<div class="col-lg-6 col-md-6 mb-3 d-none d-lg-block">
<img src="images/t3.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<!--黄条-->
<!--进入我的故事-->
<div class="container">
<div class="row pt-10 pb-10">
<div class="col-md-12">
<div class='text-center'>
<h2 class='h1 mt-5 mb-4'>心情</h2>
<p>世界上最有钱的人是奥特曼，因为所有取款机上都印着他名字的缩写“ATM” 。</p>
</div>
</div>
</div>
</div>
<!--进入我的故事-->
<!--卡片 组件->卡片-->
<div class="container mb-5">
<div class="card-group">
<div class="card">
<img src="images/l1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">泰国</h5>
<p class="card-text">如此，说走就走，还是只适合一个人去看。在闲暇之余，安排好一切，去看看想去的地方，去看看一路上的人、一路上的风景，会想一些事但更多的时候会什么都不想。</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="images/l2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">新加坡</h5>
<p class="card-text">旅行去的地方不需要有动人的风景，不需要游人如织的证明，哪怕是从小到大看过无数遍的东西，比如我住了十年出租屋的天台，也同样可以是旅行的地点，十年过去，仍旧喜欢头顶的燕子。</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="images/l3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">印度尼西亚</h5>
<p class="card-text">再去回味时，得到的或许是快乐，或许是遗憾，也或许是平静，无论何种，都收获了一种心情，一份心境，因为一个只有你知道的故事，一笔你的财富。</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<!--拉片-->
<!--主要内容-->
<!--
尾部
-->
<div class="bg-dark pb-4 pt-4">
<div class='container'>
<div class='text-white text-center'>©版权所有:小丫丫---2020.06.22</div>
</div>
</div>
<!--尾部-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
