bootstrap搭建一个简单的官网案例附代码

bootstrap搭建一个简单的官网案例附代码

效果

大概的效果如下
主要都是用bootstrap的代码实现的
网站是照着 b站视频做的
查看视频教程
建议自己先看一遍文档再跟着视频写,不然可能看不懂
bootstarp中文文档
logo是从别人的站上扒的有点不太协调,不过不影响现在只要写出来就行,其他的以后再说
在这里插入图片描述
在这里插入图片描述

常用属性

只列举了一些,要想了解全还得看文档

m-:添加上下左右的margin。
mt-:添加顶部方向的 margin。
mb-:添加底部方向的 margin。
ml-:添加左侧方向的 margin。
mr-:添加右侧方向的 margin。
mx-:添加水平方向的 margin。
my-:添加垂直方向的 margin。

相当于margin,-后面跟的是数字
padding也是一样

p-:添加上下左右的padding。
pt-:添加顶部方向的 padding。
pb-:添加底部方向的 padding。
pl-:添加左侧方向的 padding。
pr-:添加右侧方向的 padding。
px-:添加水平方向的 padding。
py-:添加垂直方向的 padding

给div添加一下类可以实现水平垂直居中

 row align-items-center justify-content-between 

让图片变成圆形

rounded-circle

让图片缩小

w-50:让图片宽度缩小到50%
h-50:让 图片高度缩小到50%

盒子

d-flex相当于display:flex
d-none相当于display:none

完整代码

bootstrap的依赖自己去官网下载一个我用的版本是5.0.2
下载地址
https://www.getbootstrap.cn/docs/5.0/components/accordion/
下载好把下面html中的css,js换成自己下载的
图片也要自己的换一下

style.css

@media (min-width:768px) {
    .news-input{
        width: 50%;
    }
}

body::before{
    display: none;
    content: "";
    height: 56px;
}

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">产品介绍</div>
            </li>
            <li class="nav-item mx-5">
              <div class="nav-link">关于我们</div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="p-5 mt-5 bg-dark text-light text-center text-md-start">
      <!--相当于padding-->
      <div class="container">
        <div class="d-flex">
          <div>
            <h1>
              Lorem ipsum <span class="text-warning">dolor sit amet</span>
            </h1>
            <!-- 相当于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">联系我们</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区</li>
          </ul>
      </div>
    </section>

    <footer class="p-5 bg-dark text-center text-light">
      <div class="container">
        <p>Copyright &copy; 2024 CSDN@yijianace</p>
      </div>
    </footer>

    <script src="./bootstrap5/bootstrap.bundle.min.js"></script>
  </body>
</html>

  • 8
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是使用 Bootstrap 搭建音乐播放器网站的步骤: 1. 首先,创建一个 HTML 文件,并在其中引入 Bootstrap 的 CSS 和 JavaScript 文件。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <!-- 在这里添加页面内容 --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html> ``` 2. 在页面中添加一个导航栏,并在其中添加一个音乐播放器的链接。 ``` <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">音乐播放器</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">音乐播放器</a> </li> </ul> </div> </nav> ``` 3. 在页面中添加一个音乐播放器的区域,并在其中添加一个音乐文件和控制按钮。 ``` <div class="container mt-3"> <div class="card"> <div class="card-body"> <audio controls> <source src="music.mp3" type="audio/mpeg"> 您的浏览器不支持 HTML5 音频播放器。 </audio> </div> <div class="card-footer"> <button type="button" class="btn btn-primary">播放</button> <button type="button" class="btn btn-secondary">暂停</button> </div> </div> </div> ``` 4. 最后,添加一些样式来美化页面。 ``` body { padding-top: 70px; } .card { max-width: 500px; margin: 0 auto; } audio { width: 100%; } .card-footer { text-align: center; } ``` 这样,你就可以使用 Bootstrap 搭建一个简单的音乐播放器网站了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亦简_yz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值