Bootstrap v5版本的HTML模板

一个基本的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>  
      
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>  
      
      
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">script>  
body>  
html>

这个模板中,我已经包含了Bootstrap v5的CSS和JS的CDN链接。在

标签中,您可以添加您自己的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>  
      
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>  
      
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>  
      
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>  
      
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">script>  
body>  
html>

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

你可能感兴趣的:(前端,html,bootstrap,前端)