master

分支 (1)

管理

管理

master

bootstrap-response-web
/
index.html

<!--
    intro: bootstrap 构建的自适应网站
    author:sam9029
    date:2023/1/6
 -->
<!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>Document</title>
    <!-- bootstrap Css -->
    <link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义 -->
    <!-- <link href="./style.css" rel="stylesheet"> -->
    <style>

    </style>
</head>
<body>
    <!-- header -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
        <div class="container">
            <a href="#" class="navbar-brand">Sam9029-Bootstrap-Web</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">
                    <!-- ms margin-start -->
                    <li class="nav-item"><div class="nav-link">sam9029</div></li>
                    <li class="nav-item"><div class="nav-link">sam9029</div></li>
                    <li class="nav-item"><div class="nav-link">sam9029</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">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quo nostrum ad! Repellendus officiis sint hic nesciunt quam, laborum porro exercitationem, at, aliquid maiores nobis eligendi in! Tempora, expedita obcaecati.
                        Odio architecto consequuntur illum atque suscipit quod doloremque, neque obcaecati dolorem dolore eius, earum facere placeat harum praesentium sunt unde beatae! Omnis fugit quam itaque incidunt culpa eum. Praesentium, ea.
                    </p>
                    <button class="btn btn-primary btn-lg">冲冲冲</button>
                </div>
                <img src="./img/showcase.svg" alt="showcase" srcset="" 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">
                <h3 class="mb-3">现在注册账号开启编程之路</h3>
                <div class="input-group w-50">
                    <input type="text" class="form-control news-input">
                    <button class="btn btn-dark btn-lg">按钮</button>
                </div>
            </div>
        </div>
    </section>


    <!-- 栅栏系统布局 -->
    <section class="p-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-md">
                    <div class="card bg-dark text-light">
                        <div class="card-body">
                            <div class="card-title text-center">前端技术</div>
                            <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ad at natus accusantium, veniam tenetur dolore, ab sed atque ea necessitatibus, et saepe aperiam consectetur illum sequi quam. Alias, corporis!</div>
                            <a href="#" class="btn btn-primary mt-2">学习</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 ">前端技术</div>
                            <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ad at natus accusantium, veniam tenetur dolore, ab sed atque ea necessitatibus, et saepe aperiam consectetur illum sequi quam. Alias, corporis!</div>
                            <a href="#" class="btn btn-dark mt-2">学习</a>
                        </div>
                    </div>
                </div>
                <div class="col-md">
                    <div class="card bg-dark text-light text-end">
                        <div class="card-body">
                            <div class="card-title text-center">后端技术</div>
                            <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ad at natus accusantium, veniam tenetur dolore, ab sed atque ea necessitatibus, et saepe aperiam consectetur illum sequi quam. Alias, corporis!</div>
                            <a href="#" class="btn btn-primary mt-2">学习</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">
                    <img src="./img/1.svg" alt="1" srcset="" class="img-fluid">
                </div>
                <div class="col-md p-5">
                    <h2 class="">技术介绍</h2>
                    <p class="lead">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet voluptas veniam corrupti blanditiis, sint illo quo ratione nulla sit. Quo mollitia nemo sit provident ea tenetur, aliquid debitis cum exercitationem.
                    </p>
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet voluptas veniam corrupti blanditiis, sint illo quo ratione nulla sit. Quo mollitia nemo sit provident ea tenetur, aliquid debitis cum exercitationem.
                    </p>
                    <a href="" class="btn btn-light">查看更多</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 class="">技术介绍</h2>
                    <p class="lead">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet voluptas veniam corrupti blanditiis, sint illo quo ratione nulla sit. Quo mollitia nemo sit provident ea tenetur, aliquid debitis cum exercitationem.
                    </p>
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet voluptas veniam corrupti blanditiis, sint illo quo ratione nulla sit. Quo mollitia nemo sit provident ea tenetur, aliquid debitis cum exercitationem.
                    </p>
                    <a href="" class="btn btn-light">查看更多</a>
                </div>
                <div class="col">
                    <img src="./img/2.svg" alt="2" srcset="" class="img-fluid">
                </div>
            </div>
        </div>
    </section>

    <!-- link nav -->
    <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">
                    <!-- data-bs-toggle 以什么方式触发 -->
                    <!-- data-bs-target 触发目标 -->
                    <button
                        class="accordion-button collapsed" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#flush-collapseOne"
                        aria-expanded="false"
                        aria-controls="flush-collapseOne">
                      Sam9029 E
                    </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">
                      Sam9029 E
                    </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">
                      Sam9029 E
                    </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-white mb-5">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, sequi id pariatur obcaecati eligendi cum soluta ad odio doloremque facere voluptatem totam et itaque inventore voluptate ratione minus cupiditate atque.
            </p>
        </div>
        <div class="row g-4 ">
            <div class="col-md-6 col-lg-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <div style="width: 128px;height: 128px;margin: 0 auto;">
                            <img src="./img/john.jpg" alt="1man" class="mb-3 rounded-circle img-fluid">
                        </div>
                        <h3 class="card-title">Sam9</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nesciunt saepe, deserunt quas deserunt quas.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <div style="width: 128px;height: 128px;margin: 0 auto;">
                            <img src="./img/john.jpg" alt="1man" class="mb-3 rounded-circle img-fluid">
                        </div>
                        <h3 class="card-title">Sam9</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nesciunt saepe, deserunt quas deserunt quas.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <div style="width: 128px;height: 128px;margin: 0 auto;">
                            <img src="./img/john.jpg" alt="1man" class="mb-3 rounded-circle img-fluid">
                        </div>
                        <h3 class="card-title">Sam9</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nesciunt saepe, deserunt quas deserunt quas.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <div style="width: 128px;height: 128px;margin: 0 auto;">
                            <img src="./img/john.jpg" alt="1man" class="mb-3 rounded-circle img-fluid">
                        </div>
                        <h3 class="card-title">Sam9</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nesciunt saepe, deserunt quas deserunt quas.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="p-5">
        <div class="container">
            <h2 class="text-center mb-4">联系我</h2>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">电话：120XXXXXX</li>
                <li class="list-group-item">微信：D2987689</li>
                <li class="list-group-item">住址：sjhagfsaubfu</li>
            </ul>
        </div>
    </section>


    <!-- 脚部 -->
    <footer class="p-5 bg-dark text-white text-center">
        <div class="container">
            <p class="lead">Copyright &copy; 2022 Sam9029-Bootstrap-Web </p>
        </div>
    </footer>

    <!--  -->
    <!--
    <section class="p-5">
        <div class="container"></div>
    </section>
     -->
    <!-- bootstrap JS -->
    <script src="./assets/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>