效果
大概的效果如下
主要都是用bootstrap的代碼實(shí)現(xiàn)的
網(wǎng)站是照著 b站視頻做的
查看視頻教程
建議自己先看一遍文檔再跟著視頻寫，不然可能看不懂
bootstarp中文文檔
logo是從別人的站上扒的有點(diǎn)不太協(xié)調(diào)，不過不影響現(xiàn)在只要寫出來就行，其他的以后再說
常用屬性
只列舉了一些，要想了解全還得看文檔
m-：添加上下左右的margin。
mt-：添加頂部方向的 margin。
mb-：添加底部方向的 margin。
ml-：添加左側(cè)方向的 margin。
mr-：添加右側(cè)方向的 margin。
mx-：添加水平方向的 margin。
my-：添加垂直方向的 margin。
相當(dāng)于margin，-后面跟的是數(shù)字
padding也是一樣
p-：添加上下左右的padding。
pt-：添加頂部方向的 padding。
pb-：添加底部方向的 padding。
pl-：添加左側(cè)方向的 padding。
pr-：添加右側(cè)方向的 padding。
px-：添加水平方向的 padding。
py-：添加垂直方向的 padding
給div添加一下類可以實(shí)現(xiàn)水平垂直居中
row align-items-center justify-content-between
讓圖片變成圓形
rounded-circle
讓圖片縮小
w-50：讓圖片寬度縮小到50%
h-50：讓 圖片高度縮小到50%
盒子
d-flex相當(dāng)于display：flex
d-none相當(dāng)于display:none
完整代碼
bootstrap的依賴自己去官網(wǎng)下載一個我用的版本是5.0.2
下載地址
https://www.getbootstrap.cn/docs/5.0/components/accordion/
下載好把下面html中的css，js換成自己下載的
圖片也要自己的換一下
style.css文章來源：http://www.zghlxwxcb.cn/news/detail-824315.html
@media (min-width:768px) {
.news-input{
width: 50%;
}
}
body::before{
display: none;
content: "";
height: 56px;
}
html代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-824315.html
<!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="./bootstrap5/bootstrap.min.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
<div class="container">
<a href="#" class="navbar-brand"><img src="./img/logo.png" style="width: 120px;height: 50px;" alt="" /></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-5">
<div class="nav-link">首頁</div>
</li>
<li class="nav-item mx-5">
<div class="nav-link">產(chǎn)品介紹</div>
</li>
<li class="nav-item mx-5">
<div class="nav-link">關(guān)于我們</div>
</li>
</ul>
</div>
</div>
</nav>
<section class="p-5 mt-5 bg-dark text-light text-center text-md-start">
<!--相當(dāng)于padding-->
<div class="container">
<div class="d-flex">
<div>
<h1>
Lorem ipsum <span class="text-warning">dolor sit amet</span>
</h1>
<!-- 相當(dāng)于margin-top 和margin-bottom-->
<p class="my-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequatur aperiam aut nulla magni officiis, architecto corrupti
inventore dolorem odio illo tempore officia soluta adipisci natus
labore. Eius omnis officia rerum!
</p>
<button class="btn btn-primary btn-md">Lorem ipsum dolor</button>
</div>
<img
src="./img/banner-img.webp"
class="w-50 d-none d-md-block"
alt=""
/>
</div>
</div>
</section>
<section class="p-5 bg-primary text-light">
<div class="container">
<div class="d-md-flex justify-content-between aline-items-center">
<h3 class="mb-3">Lorem ipsum dolor</h3>
<div class="input-group news-input">
<input
type="text"
class="form-control"
placeholder="please input your email"
/>
<button class="btn btn-dark btn-lg">Login</button>
</div>
</div>
</div>
</section>
<section class="p-5">
<div class="container">
<div class="row g-4">
<!--gap-->
<div class="col-md">
<div class="card bg-dark text-light text-center">
<div class="card-body">
<div class="card-title">Lorem</div>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laborum minus itaque in voluptates consectetur modi illum.
Omnis!
</div>
<a href="#" class="btn btn-primary mt-3">Lorem ipsum</a>
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light text-center">
<div class="card-body">
<div class="card-title">Lorem</div>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laborum minus itaque in voluptates consectetur modi illum.
Omnis!
</div>
<a href="#" class="btn btn-dark mt-3">Lorem ipsum</a>
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light text-center">
<div class="card-body">
<div class="card-title">Lorem</div>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laborum minus itaque in voluptates consectetur modi illum.
Omnis!
</div>
<a href="#" class="btn btn-primary mt-3">Lorem ipsum</a>
</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">
<img src="./img/banner-img.webp" class="img-fluid" alt="" />
</div>
<div class="col-md p-5">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio
laudantium deserunt autem ad, maxime nulla.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni,
laborum. Aliquam mollitia vero nostrum soluta.
</p>
<a href="" class="btn btn-light">learn more</a>
</div>
</div>
</div>
</section>
<section class="p-5 bg-dark text-light">
<div class="container">
<div class="row align-items-center justify-content-between">
<!--水平垂直居中-->
<div class="col-md p-5">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio
laudantium deserunt autem ad, maxime nulla.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni,
laborum. Aliquam mollitia vero nostrum soluta.
</p>
<a href="" class="btn btn-light">learn more</a>
</div>
<div class="col-md">
<img src="./img/banner-img.webp" class="img-fluid" alt="" />
</div>
</div>
</div>
</section>
<section class="p-5">
<div class="comtainer">
<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 show"
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 show"
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">講師介紹</h2>
<p class="text-light text-white mb-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum sunt
praesentium necessitatibus nisi inventore aspernatur, dolorum iure
dolore nostrum odit quia magnam, sapiente, itaque hic deleniti error
id mollitia tempore!
</p>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img
src="./img/128983356.jpg"
class="mb-3 rounded-circle"
alt=""
style="width: 80px; height: 80px"
/>
<h3 class="card-title">張三</h3>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
culpa officiis aperiam ad cupiditate exercitationem odio
quisquam excepturi dignissimos voluptatem.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img
src="./img/128983356.jpg"
class="mb-3 rounded-circle"
alt=""
style="width: 80px; height: 80px"
/>
<h3 class="card-title">張三</h3>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
culpa officiis aperiam ad cupiditate exercitationem odio
quisquam excepturi dignissimos voluptatem.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img
src="./img/128983356.jpg"
class="mb-3 rounded-circle"
alt=""
style="width: 80px; height: 80px"
/>
<h3 class="card-title">張三</h3>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
culpa officiis aperiam ad cupiditate exercitationem odio
quisquam excepturi dignissimos voluptatem.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img
src="./img/128983356.jpg"
class="mb-3 rounded-circle"
alt=""
style="width: 80px; height: 80px"
/>
<h3 class="card-title">張三</h3>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
culpa officiis aperiam ad cupiditate exercitationem odio
quisquam excepturi dignissimos voluptatem.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p-5">
<div class="container">
<h2 class="text-center mb-4">聯(lián)系我們</h2>
<ul class="list-group-flush">
<li class="list-group-item">電話: 189xxxxxxxx</li>
<li class="list-group-item">郵箱: xxx@xx.com</li>
<li class="list-group-item">地址: 北京市xxx區(qū)</li>
</ul>
</div>
</section>
<footer class="p-5 bg-dark text-center text-light">
<div class="container">
<p>Copyright © 2024 CSDN@yijianace</p>
</div>
</footer>
<script src="./bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>
到了這里，關(guān)于bootstrap搭建一個簡單的官網(wǎng)案例附代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
