HTML 是一种用于创建网页的标准标记语言，而 Bootstrap 是一个流行的前端框架，它包含了许多预定义的 CSS 和 JavaScript 组件，可以帮助开发者快速构建响应式网站，在本文中，我们将介绍如何使用 HTML 和 Bootstrap 来创建一个基本的网页。
1. 引入 Bootstrap
我们需要在 HTML 文件中引入 Bootstrap，你可以通过以下两种方式之一来实现：
方法一：使用 CDN
将以下代码添加到 HTML 文件的 <head> 部分：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
方法二：下载并本地引用
从 Bootstrap 官网（https://getbootstrap.com/）下载最新版本的 Bootstrap，然后将下载的文件解压缩，接下来，将以下代码添加到 HTML 文件的 <head> 部分：
<link rel="stylesheet" href="path/to/your/css/bootstrap.min.css"> <script src="path/to/your/js/jquery-3.2.1.min.js"></script> <script src="path/to/your/js/bootstrap.min.js"></script>
请确保将 path/to/your 替换为实际的文件路径。
2. 创建基本结构
接下来，我们将使用 Bootstrap 创建一个基本的网站结构，在 HTML 文件中添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-引入 Bootstrap -->
</head>
<body>
<!-页面内容 -->
</body>
</html>
3. 添加导航栏
Bootstrap 提供了一个内置的导航栏组件，我们可以轻松地将其添加到我们的网站中，在 <body> 标签内添加以下代码：
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">网站标题</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</nav>
4. 添加主要内容区域
现在，我们将添加一个主要内容区域，用于显示网站的主要内容，在 <body> 标签内添加以下代码：
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>欢迎来到我们的网站！</h1>
<p>这里是网站的主要内容。</p>
</div>
<div class="col-md-4">
<h2>侧边栏</h2>
<p>这里是侧边栏的内容。</p>
</div>
</div>
</div>
5. 添加页脚
我们将添加一个页脚，在 <body> 标签内添加以下代码：
<footer class="footer">
<div class="container">
<p class="text-muted">版权所有 © 2017</p>
</div>
</footer>
至此，我们已经使用 HTML 和 Bootstrap 创建了一个简单的网站，你可以根据需要修改和扩展这个基本结构。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/369587.html
微信扫一扫 