Bootstrap v5版本的HTML模板

最新推荐文章于 2024-06-03 23:50:56 发布

蔚蓝星辰mic

最新推荐文章于 2024-06-03 23:50:56 发布

阅读量562

点赞数 6

分类专栏：前端文章标签： html bootstrap 前端

本文链接：https://blog.csdn.net/weixin_45532870/article/details/134649956

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一个基本的Bootstrap v5版本的HTML模板。这是一个非常基础的模板，包含了Bootstrap CSS和JS的引用，以及一个基本的HTML结构。

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Bootstrap v5 模板</title>  
    <!-- 引入 Bootstrap CSS -->  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-6l9sXXGgb5JGb5hlT/hWJLLPLW9eStAefghSJwS+CJpc33ujIW1HnIhR7aZ+6U95Ex" crossorigin="anonymous">  
</head>  
<body>  
    <div class="container">  
        <h1>欢迎来到我的网页</h1>  
        <p>这是一个基于Bootstrap v5的模板。</p>  
    </div>  
      
    <!-- 引入 Bootstrap JS -->  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>  
</body>  
</html>

这个模板中，我已经包含了Bootstrap v5的CSS和JS的CDN链接。在<div class="container">标签中，您可以添加您自己的HTML内容。

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>登录页面</title>  
    <!-- 引入 Bootstrap CSS -->  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-6l9sXXGgb5JGb5hlT/hWJLLPLW9eStAefghSJwS+CJpc33ujIW1HnIhR7aZ+6U95Ex" crossorigin="anonymous">  
</head>  
<body>  
    <div class="container my-5">  
        <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="username" class="form-label">用户名</label>  
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>  
                    </div>  
                    <div class="mb-3">  
                        <label for="password" class="form-label">密码</label>  
                        <input type="password" class="form-control" id="password" placeholder="请输入密码" required>  
                    </div>  
                    <div class="d-grid gap-2">  
                        <button type="submit" class="btn btn-primary">登录</button>  
                    </div>  
                </form>  
            </div>  
        </div>  
    </div>  
    <!-- 引入 Bootstrap JS -->  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>  
</body>  
</html>

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>注册页面</title>  
    <!-- 引入 Bootstrap CSS -->  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-6l9sXXGgb5JGb5hlT/hWJLLPLW9eStAefghSJwS+CJpc33ujIW1HnIhR7aZ+6U95Ex" crossorigin="anonymous">  
</head>  
<body>  
    <div class="container my-5">  
        <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="username" class="form-label">用户名</label>  
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>  
                    </div>  
                    <div class="mb-3">  
                        <label for="email" class="form-label">邮箱</label>  
                        <input type="email" class="form-control" id="email" placeholder="请输入邮箱地址" required>  
                    </div>  
                    <div class="mb-3">  
                        <label for="password" class="form-label">密码</label>  
                        <input type="password" class="form-control" id="password" placeholder="请输入密码" required>  
                    </div>  
                    <div class="mb-3">  
                        <label for="confirmPassword" class="form-label">确认密码</label>  
                        <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码" required>  
                    </div>  
                    <div class="d-grid gap-2">  
                        <button type="submit" class="btn btn-primary">注册</button>  
                    </div>  
                </form>  
            </div>  
        </div>  
    </div>  
    <!-- 引入 Bootstrap JS -->  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>  
</body>  
</html>

更多的Bootstrap组件或者样式，您可以参考Bootstrap的官方文档。

蔚蓝星辰mic

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap v5版本的HTML模板

一个基本的Bootstrap v5版本的HTML模板。这是一个非常基础的模板，包含了Bootstrap CSS和JS的引用，以及一个基本的HTML结构。这个模板中，我已经包含了Bootstrap v5的CSS和JS的CDN链接。更多的Bootstrap组件或者样式，您可以参考Bootstrap的官方文档。标签中，您可以添加您自己的HTML内容。
复制链接

扫一扫

专栏目录