<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<title>Your page title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a href="#" class="navbar-brand">我在B站玩视频</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNavAltMarkup">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<div class="nav-link">首页</div>
</li>
<li class="nav-item">
<div class="nav-link">登录</div>
</li>
<li class="nav-item">
<div class="nav-link">其他</div>
</li>
</ul>
</div>
</div>
</nav>
<section class="p-5 bg-dark text-light text-center text-sm-start">
<div class="container">
<div class="d-flex">
<div>
<h1>成为一个<span class="text-warning">前端工程师</span></h1>
<p class="my-4"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto autem commodi consequatur enim eveniet facere magnam nesciunt odio omnis, placeat porro quos reiciendis reprehenderit voluptatibus. Ipsa laborum porro reiciendis?</span><span>Ab aliquam delectus dolorem dolorum ducimus earum illo illum in, ipsa magnam modi molestias natus nemo optio quam quidem quo recusandae unde, vitae voluptatibus. Ab fugit placeat rerum soluta voluptas!</span><span>Aliquam at aut consequuntur debitis dolore eaque eligendi eos ipsum itaque neque numquam odio perspiciatis rem soluta, sunt, tempora vel vitae voluptas! Asperiores excepturi id impedit nulla quas sapiente sequi.</span>
</p>
<button class="btn btn-primary btn-lg">开始学习</button>
</div>
<img src="/static/img/111.jpg" alt="" class="w-50 d-none d-md-block">
</div>
</div>
</section>
<section class="p-5 bg-primary text-light">
<div class="container">
<div class="d-md-flex justify-content-between align-items-center">
<div style="width: 30%;"><h2 class="mb-3">开始自动计算之旅</h2></div>
<div class="input-group">
<input type="text" class="form-control" placeholder="输入你的邮箱">
<button class="btn btn-dark btn-lg">注册</button>
</div>
</div>
</div>
</section>
<section class="p-5">
<div class="container">
<div class="row g-4 text-center">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<h3 class="card-title">前端工程师</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
adipisci aliquam asperiores atque autem blanditiis consectetur consequuntur cumque delectus
dicta distinctio doloremque eaque eius eligendi enim eos error est fuga harum iusto
laboriosam laudantium libero magnam maiores molestias nam nemo nesciunt nihil nobis numquam
officia omnis pariatur perferendis placeat provident</p>
<button class="btn btn-primary mt-2">开始学习</button>
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light">
<div class="card-body">
<h3 class="card-title">后端工程师</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
adipisci aliquam asperiores atque autem blanditiis consectetur consequuntur cumque delectus
dicta distinctio doloremque eaque eius eligendi enim eos error est fuga harum iusto
laboriosam laudantium libero magnam maiores molestias nam nemo nesciunt nihil nobis numquam
officia omnis pariatur perferendis placeat provident</p>
<button class="btn btn-dark mt-2">开始学习</button>
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body">
<h3 class="card-title">全工程师</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
adipisci aliquam asperiores atque autem blanditiis consectetur consequuntur cumque delectus
dicta distinctio doloremque eaque eius eligendi enim eos error est fuga harum iusto
laboriosam laudantium libero magnam maiores molestias nam nemo nesciunt nihil nobis numquam
officia omnis pariatur perferendis placeat provident</p>
<button class="btn btn-primary mt-2">开始学习</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p-5">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md p-5">
<img src="/static/img/111.jpg" alt="" class="img-fluid">
</div>
<div class="col-md">
<h2>学习</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aliquam
asperiores atque autem blanditiis consectetur consequuntur cumque delectus dicta distinctio
doloremque eaque eius eligendi enim eos error est fuga harum iusto laboriosam laudantium libero
magnam maiores molestias nam nemo nesciunt nihil nobis numquam officia omnispariatur perferendis
placeat provident</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aliquam
asperiores atque autem blanditiis consectetur consequuntur cumque delectus dicta distinctio
doloremque eaque eius eligendi enim eos error est fuga harum iusto laboriosam laudantium libero
magnam maiores molestias nam nemo nesciunt nihil nobis numquam officia omnispariatur perferendis
placeat provident</p>
<a class="btn btn-light mt-2">查看更多</a>
</div>
</div>
</div>
</section>
</section>
<section class="p-5 bg-dark text-light">
<div class="container">
<div class="row align-items-center justify-content-between p-5">
<div class="col-md">
<h2>学习</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci
aliquam asperiores atque autem blanditiis consectetur consequuntur cumque delectus dicta
distinctio doloremque eaque eius eligendi enim eos error est fuga harum iusto laboriosam
laudantium libero magnam maiores molestias nam nemo nesciunt nihil nobis numquam officia
omnispariatur perferendis placeat provident</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci
aliquam asperiores atque autem blanditiis consectetur consequuntur cumque delectus dicta
distinctio doloremque eaque eius eligendi enim eos error est fuga harum iusto laboriosam
laudantium libero magnam maiores molestias nam nemo nesciunt nihil nobis numquam officia
omnispariatur perferendis placeat provident</p>
<a class="btn btn-light mt-2">查看更多</a>
</div>
<div class="col-md p-5">
<img src="/static/img/111.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<section class="p-5">
<div class="container">
<h2 class="text-center">常见问题</h2>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate
the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate
the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine
this being filled with some actual content.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate
the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more
exciting happening here in terms of content, but just filling up the space to make it look, at
least at first glance, a bit more representative of how this would look in a real-world
application.
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p-5 bg-primary">
<div class="container">
<h2 class="text-center text-light">讲师介绍</h2>
<p class="lead text-center text-light mb-5">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspe</span>
</p>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<img src="/static/img/111.jpg" alt="" class="mb-3 rounded-circle">
<h3 class="card-title">张三</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ab aliquam cum
error eum facilis ipsam minima nam non provident repellendus sint unde vero? Possimus quas rerum
sunt tenetur ullam.</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<img src="/static/img/111.jpg" alt="" class="mb-3 rounded-circle">
<h3 class="card-title">张三</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta optio
repellat? Adipisci, blanditiis modi necessitatibus quae quo reprehenderit soluta temporibus.
Aspernatur consequatur, inventore laboriosam magni nisi quas similique tenetur!</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<img src="/static/img/111.jpg" alt="" class="mb-3 rounded-circle">
<h3 class="card-title">张三</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus delectus
dolores eum harum laborum quod rem. A animi dignissimos, distinctio expedita iure laudantium
magni molestias nobis quis repellendus. Commodi, quidem.</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<img src="/static/img/111.jpg" alt="" class="mb-3 rounded-circle">
<h3 class="card-title">张三</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, minima,
veniam! Aliquam aspernatur at dolore eaque explicabo necessitatibus nobis officia. Assumenda
atque enim hic magnam obcaecati pariatur quisquam, repudiandae sit!</p>
</div>
</div>
</div>
</div>
</section>
<section class="p-5">
<div class="container">
<div class="row g-4">联系我们
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">电话：123456789101</li>
<li class="list-group-item">电话：123456789101</li>
<li class="list-group-item">电话：123456789101</li>
</ul>
</div>
</section>
<footer class="p-5 bg-dark text-white text-center">
<div class="container">
<p class="lead">
Copyright © 2021-2022
<a href="#">
<span class="text-warning">
<i class="fas fa-laptop-code"></i>
MyBlog
</span>
</a>
</p>
</div>
</footer>
{% block content %}
{% endblock %}
</body>
</html>
敲了一下午的代码：bootstrapy，模仿别人教学的代码
最新推荐文章于 2024-10-01 23:46:18 发布
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
