Bootstrap 创建一个网页

lsx202406

于 2024-06-15 12:51:36 发布

阅读量294

点赞数 8

文章标签：开发语言

本文链接：https://blog.csdn.net/lsx202406/article/details/139700693

版权

Bootstrap 创建一个网页

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网页。它由 Twitter 开发，并得到了世界各地开发者的广泛使用。Bootstrap 提供了一套丰富的预定义样式和组件，以及强大的 JavaScript 插件，使得网页开发变得更加快捷和简单。在本教程中，我们将学习如何使用 Bootstrap 创建一个基本的网页。

1. 准备工作

在开始之前，请确保您的计算机上已安装了以下软件：

文本编辑器（如 Visual Studio Code、Sublime Text 或 Atom）
现代浏览器（如 Google Chrome、Mozilla Firefox 或 Safari）

此外，您还需要了解一些基本的 HTML、CSS 和 JavaScript 知识。

2. 创建一个新的 HTML 文件

打开您的文本编辑器，创建一个新的 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 网页</title>
    <!-- 引入 Bootstrap CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, Bootstrap!</h1>
    <!-- 引入 Bootstrap JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. 添加内容

在 <body> 标签内，您可以添加各种 Bootstrap 组件和样式，以构建您的网页。以下是一个简单的示例：

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">我的网站</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <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" aria-current="page" 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>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系我们</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 内容 -->
<div class="container mt-4">
    <h2>欢迎来到我的网站</h2>
    <p>这是一个使用 Bootstrap 创建的简单网页。您可以在此处添加更多内容，以丰富您的网站。</p>
</div>

<!-- 页脚 -->
<footer class="bg-light text-center text-lg-start">
    <div class="container p-4">
        <div class="row">
            <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                <h5 class="text-uppercase">关于我们</h5>
                <p>
                    这里可以添加一些关于您的网站的介绍。
                </p>
            </div>
            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <h5 class="text-uppercase">链接</h5>
                <ul class="list-unstyled mb-0">
                    <li>
                        <a href="#!" class="text-dark">链接 1</a>
                    </li>
                    <li>
                        <a href="#!" class="text-dark">链接 2</a>
                    </li>
                    <li>
                        <a href="#!" class="text-dark">链接 3</a>
                    </li>
                    <li>
                        <a href="#!" class="text-dark">链接 4</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <h5 class="text-uppercase mb-0">联系信息</h5>
                <ul class="list-unstyled">
                    <li>
                        <a href="#!" class="text-dark">邮箱：example@example.com</a>
                    </li>
                    <li>
                        <a href="#!" class="text-dark">电话：1234567890</a>
                    </li

lsx202406

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap 创建一个网页

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网页。它由 Twitter 开发，并得到了世界各地开发者的广泛使用。Bootstrap 提供了一套丰富的预定义样式和组件，以及强大的 JavaScript 插件，使得网页开发变得更加快捷和简单。在本教程中，我们将学习如何使用 Bootstrap 创建一个基本的网页。
复制链接

扫一扫