开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 示例</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .feature-icon { font-size: 2rem; margin-bottom: 1rem; color: #0d6efd; } .hero-section { background-color: #f8f9fa; padding: 5rem 0; margin-bottom: 3rem; } </style> </head> <body> <!-- 导航栏 --> <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4"> <div class="container"> <a class="navbar-brand" href="#">我的网站</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">产品</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我们</a> </li> </ul> </div> </div> </nav> <!-- 主要内容区 --> <div class="container"> <!-- 英雄区域 --> <div class="hero-section text-center rounded-3"> <h1 class="display-4">欢迎来到 Bootstrap 5 世界</h1> <p class="lead">使用最流行的前端框架快速构建响应式网站</p> <button class="btn btn-primary btn-lg">了解更多</button> </div> <!-- 特性卡片 --> <div class="row g-4 mb-5"> <div class="col-md-4"> <div class="card h-100"> <div class="card-body text-center"> <div class="feature-icon">?</div> <h5 class="card-title">响应式设计</h5> <p class="card-text">自动适应各种屏幕尺寸，从手机到桌面设备都能完美显示。</p> </div> </div> </div> <div class="col-md-4"> <div class="card h-100"> <div class="card-body text-center"> <div class="feature-icon">⚡</div> <h5 class="card-title">快速开发</h5> <p class="card-text">丰富的组件和工具类，让您专注于业务逻辑而非样式设计。</p> </div> </div> </div> <div class="col-md-4"> <div class="card h-100"> <div class="card-body text-center"> <div class="feature-icon">?</div> <h5 class="card-title">高度可定制</h5> <p class="card-text">通过Sass变量轻松修改颜色、间距等设计元素。</p> </div> </div> </div> </div> <!-- 表单示例 --> <div class="row justify-content-center"> <div class="col-md-6"> <h2 class="text-center mb-4">联系我们</h2> <form> <div class="mb-3"> <label for="name" class="form-label">姓名</label> <input type="text" class="form-control" id="name" required> </div> <div class="mb-3"> <label for="email" class="form-label">邮箱</label> <input type="email" class="form-control" id="email" required> </div> <div class="mb-3"> <label for="message" class="form-label">留言</label> <textarea class="form-control" id="message" rows="3"></textarea> </div> <div class="d-grid"> <button type="submit" class="btn btn-primary">提交</button> </div> </form> </div> </div> </div> <!-- 页脚 --> <footer class="bg-light mt-5 py-4"> <div class="container text-center"> <p class="mb-0">© 2023 Bootstrap 5 示例. 保留所有权利.</p> </div> </footer> <!-- Bootstrap JS Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
运行结果：
