【前端开发】bootstrap框架综合案例（5）

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><

一殊酒

1135人浏览 · 2021-06-17 14:40:44

一殊酒 · 2021-06-17 14:40:44 发布

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入css文件夹中bootstrap.min.css基础样式文件 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Web技术社区</title>
</head>

<body>
    <!-- 页头 -->
    <!-- 响应式导航栏 -->

    <!-- 使用 .navbar 类来创建一个标准的导航栏，后面紧跟: 
    .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)
    导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 
    .nav-item 类， <a> 元素上使用 .nav-link 类 -->

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a href="#">Web技术社区</a>
        <!-- 折叠导航栏 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler">
            <span></span>
        </button>
        <div class="collapse navbar-collapse" id="navToggler">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a href="#">首页</a>
                </li>
                <!-- 下拉菜单 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Bootstrap</a>
                    <div>
                        <a href="#">布局</a>
                        <a href="#">组件</a>
                        <a href="#">插件</a>
                    </div>
                </li>
                <li>
                    <a href="#">PHP</a>
                </li>
                <li>
                    <a href="#">MySQL</a>
                </li>
                <li>
                    <a href="#">Laravel</a>
                </li>
            </ul>
        </div>
    </nav>

    <div id="introduction">
        <div id="content">
            <h2>欢迎来到Web技术社区</h2>
            <p>本站包括Bootstrap、PHP、MySQL、Laravel等Web技术教程</p>
        </div>
    </div>

    <!-- 栅格系统 -->
    <!-- 最外层容器100%宽度-->
    <div class="contanier-fluid">
        <!-- 行 -->
        <div>
            <!--第一张图片和标题-->
            <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
            <div class="col-lg-3 col-6">
                <div>
                    <img src="img/bootstrap.png">
                    <div>
                        <p>Bootstrap</p>
                    </div>
                </div>
            </div>
            <!--第二张图片和标题-->
            <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
            <div class="col-lg-3 col-6">
                <div>
                    <img src="img/php.png">
                    <div>
                        <p>PHP</p>
                    </div>
                </div>
            </div>
            <!--第三张图片和标题-->
            <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
            <div class="col-lg-3 col-6">
                <div>
                    <img src="img/mysql.png">
                    <div>
                        <p>MySQL</p>
                    </div>
                </div>
            </div>
            <!--第四张图片和标题-->
            <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
            <div class="col-lg-3 col-6">
                <div>
                    <img src="img/laravel.png">
                    <div>
                        <p>Laravel</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 导入js文件夹里的jquery-3.2.1.min.js文件和bootstrap.min.js文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

body {
    font-size: 20px;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

.navbar {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 99;
}

.brand {
    color: white;
    /* 盒模型 */
    /* 边框1px，白色，实线 */
    border: 1px solid #fff;
    /* 内边距5px */
    padding: 5px;
    /* 外边距5px */
    margin: 5px;
}

.brand:hover {
    color: white;
    text-decoration: none;
}

#introduction {
    /* 背景从上到下颜色渐变 */
    background: linear-gradient(to bottom, black, white);
    width: 100%;
    height: 400px;
    /* 字体颜色 */
    color: rgba(255, 255, 255, 0.9);
}

#content {
    position: absolute;
    top: 16%;
    left: 16%;
    width: 68%;
    text-align: center;
}

#content h2:hover {
    font-size:2.25(rem);
    /* 设置字体大小为根元素大小的2.25倍 */
    transition: font-size 1s;
    /* 使用过渡，1s内标题字号变大 */
}

.card {
    margin: 10px;
    box-shadow: 1px 1px 5px black;
    /* 盒阴影 */
    text-align: center;
    align-items: center;
}

.card-img-top {
    margin-top: 10px;
    width: 60%;
}

.card-text {
    text-align: center;
}

技术共进，成长同行——讯飞AI开发者社区

更多推荐

【大模型入门教程】一文带你看懂什么是人工智能体（AI_Agent）？零基础小白收藏这一篇就对了！！

讯飞AI开发者社区

AI Compass前沿速览：Kimi K2、InfinityHuman-AI数字人、3D-AI桌面伴侣、叠叠社–AI虚拟陪伴

Apertus是瑞士由EPFL、ETH Zurich和瑞士国家超级计算中心（CSCS）联合推出的首个大规模、开放、多语言的大型语言模型（LLM），作为瑞士AI倡议的一部分，旨在推动透明、开放且合规的AI发展。Midoo AI基于对AI工具聚合平台内容的分析，该平台汇集了多种人工智能工具，旨在提升用户在信息处理、内容创作及学习辅助方面的效率。在数据收集阶段，严格执行数据隐私和版权保护原则，仅使用公开