bootstrap快速创建响应式网页

最新推荐文章于 2024-10-10 10:42:41 发布

速易达网络

最新推荐文章于 2024-10-10 10:42:41 发布

阅读量224

点赞数

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

本文链接：https://blog.youkuaiyun.com/suny8/article/details/142618119

版权

前端精品专栏专栏收录该内容

1 篇文章

订阅专栏

创建一个简单的Bootstrap页面非常直接。Bootstrap是一个流行的前端框架，它包含了一套预先定义的CSS样式和JavaScript插件，使得开发响应式和移动优先的网站变得更加快捷和容易。以下是如何创建一个基本的Bootstrap页面的步骤：

‌引入Bootstrap‌：
首先，你需要在你的HTML文件中引入Bootstrap。你可以通过两种方式来做这件事：直接从Bootstrap的CDN链接引入，或者下载Bootstrap到你的项目中然后本地引入。

‌使用CDN‌：
在你的HTML文件的<head>部分添加以下代码来引入Bootstrap的CSS文件。同时，你也应该引入Bootstrap的JavaScript文件和依赖的Popper.js和jQuery库。

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

‌创建HTML结构‌：
使用Bootstrap的预定义类来创建页面的结构。例如，创建一个简单的导航栏和一个jumbotron（一个用于展示主要内容的大区块）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Example</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
    </div>
</nav>

<div class="jumbotron">
    <h1 class="display-4">Hello, Bootstrap!</h1>
    <p class="lead">This is a simple example of a Bootstrap page.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

<!-- 引入Bootstrap JS 和依赖 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

这段代码创建了一个包含导航栏和一个jumbotron的简单Bootstrap页面。你可以根据需要添加更多的Bootstrap组件和类来丰富你的页面。