小型项目

2024-10-17
作者今晚打老虎
~6.29 K字

Bootstrap 小型项目：制作个人简介网站和简单登录页面

在本篇博客中，我们将使用 Bootstrap 创建两个小型项目：一个个人简介网站和一个简单的登录页面。这两个示例将涵盖 Bootstrap 的基本使用，包括布局、组件和样式的应用，帮助您更好地掌握 Bootstrap 的开发技巧。

1. 制作个人简介网站

1.1 项目结构

在本示例中，我们将构建一个简单的个人简介网站，展示个人信息、技能和联系方式。项目的基本结构如下：

personal-profile/
├── index.html
└── styles.css

1.2 index.html 文件

以下是 index.html 的完整代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <title>个人简介网站</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">我的个人简介</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#about">关于我</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#skills">技能</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contact">联系方式</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container mt-5">
    <section id="about" class="mb-5">
        <h2>关于我</h2>
        <p>您好，我是一名热爱编程的开发者，熟悉前端和后端开发技术，喜欢学习新技术并应用于实际项目中。</p>
    </section>

    <section id="skills" class="mb-5">
        <h2>技能</h2>
        <ul class="list-group">
            <li class="list-group-item">HTML & CSS</li>
            <li class="list-group-item">JavaScript</li>
            <li class="list-group-item">Bootstrap</li>
            <li class="list-group-item">React</li>
            <li class="list-group-item">Node.js</li>
        </ul>
    </section>

    <section id="contact" class="mb-5">
        <h2>联系方式</h2>
        <p>邮箱: example@example.com</p>
        <p>电话: 123-456-7890</p>
    </section>
</div>

<footer class="text-center py-4">
    <p>© 2024 我的个人简介网站</p>
</footer>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

1.3 styles.css 文件

以下是 styles.css 的样式代码：

body {
    font-family: Arial, sans-serif;
}

footer {
    background-color: #f8f9fa;
    position: relative;
    bottom: 0;
    width: 100%;
}

1.4 代码解析

导航栏：使用 Bootstrap 的导航组件创建一个简单的导航栏，链接到不同的部分（关于我、技能、联系方式）。
容器：使用 .container 类来布局内容，确保其在不同屏幕尺寸下的适应性。
列表：使用 .list-group 组件展示技能，使用 .list-group-item 列出每项技能。

2. 创建简单的登录页面

2.1 项目结构

在本示例中，我们将创建一个简单的登录页面，项目结构如下：

login-page/
├── index.html
└── styles.css

2.2 index.html 文件

以下是 index.html 的完整代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <title>登录页面</title>
</head>
<body>

<div class="container mt-5">
    <h2 class="text-center">登录</h2>
    <form>
        <div class="form-group">
            <label for="email">邮箱地址</label>
            <input type="email" class="form-control" id="email" placeholder="输入邮箱" required>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="输入密码" required>
        </div>
        <button type="submit" class="btn btn-primary btn-block">登录</button>
    </form>
    <p class="mt-3 text-center">
        还没有账号？ <a href="#">注册</a>
    </p>
</div>

<footer class="text-center py-4">
    <p>© 2024 登录页面</p>
</footer>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

2.3 styles.css 文件

以下是 styles.css 的样式代码：

body {
    font-family: Arial, sans-serif;
}

footer {
    background-color: #f8f9fa;
    position: relative;
    bottom: 0;
    width: 100%;
}

2.4 代码解析

表单：使用 Bootstrap 的表单组件创建一个登录表单，包括邮箱和密码输入框。
按钮：使用 .btn 和 .btn-primary 类来样式化登录按钮，使其更美观且易于识别。
布局：整个表单被放置在一个 .container 中，以确保在不同设备上的适应性。

3. 总结

通过以上两个小型项目，您可以看到如何使用 Bootstrap 创建个人简介网站和简单的登录页面。Bootstrap 提供了丰富的组件和样式，使得构建响应式网站变得更加简单和高效。希望这些示例能够帮助您在自己的项目中更好地应用 Bootstrap 的各种功能！

今晚打老虎