Bootstrap 创建一个网页
Bootstrap 创建网页技术文档
什么是Bootstrap？
Bootstrap是一个开源的前端框架，由Twitter开发，旨在应用于开发Web应用程序和网站设计。使用它可以快速构建适用于不同设备的动态、响应式和移动优化的Web页面。
Bootstrap的特点
- 响应式设计
- 移动优化
- 强大的网格系统
- 预定义的CSS样式和组件
- JavaScript插件
Bootstrap的环境要求
- Jquery库
- Bootstrap CSS和Javascript文件
- 可以在任何浏览器中使用
如何使用Bootstrap？
- 在head标签里添加必要的库文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap</title>
<!--添加 CSS 文件-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
<!--添加 js 文件-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
- 在网站应用页面的body标签中添加HTML代码
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Bootstrap网站</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="#">主页<span class="sr-only">(current)</span></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>
</nav>
<div class="container-fluid">
<div class="row my-5">
<div class="col-md-6 mx-auto">
<h2>欢迎您来到Bootstrap网站！</h2>
<p>我们为您提供最好的网站体验，以适应所有移动设备和桌面设备。</p>
<button class="btn btn-primary">了解更多</button>
</div>
</div>
</div>
</body>
网站结构和元素
网站导航栏
Bootstrap 提供了我们一个现成的导航栏组件，可以轻松地在网站中集成。可以使用class .navbar， .navbar-expand-*，.navbar-toggler。
例如：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Bootstrap网站</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="#">主页<span class="sr-only">(current)</span></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>
</nav>
网站容器
Bootstrap包括两种容器： .container和 .container-fluid，它们是响应式的。
<div class="container">
<p>这是容器</p>
</div>
<div class="container-fluid">
<p>这是容器 - 100% 宽度屏幕</p>
</div>
网格布局
Bootstrap的网格系统是我们进行响应式设计和布局的理想选择。我们可以选择 1 到 12 个栅格，以便为各种屏幕尺寸设定宽度。
<div class="container">
<div class="row">
<div class="col-md-6">列 1</div>
<div class="col-md-6">列 2</div>
</div>
</div>
Bootstrap的表格
Bootstrap表格是针对移动设备进行响应式设计的，可以让文本显示更加整齐和易读。
<div class="container">
<h2>Bootstrap表格</h2>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>zhangsan@gmail.com</td>
</tr>
<tr>
<td>李四</td>
<td>lisi@gmail.com</td>
</tr>
<tr>
<td>王五</td>
<td>wangwu@gmail.com</td>
</tr>
</tbody>
</table>
</div>
Bootstrap的媒体对象
Bootstrap为我们提供了一种媒体对象的组件，它可以通过很好的安排文本、图像和视频等内容，使得布局更加清晰明确。
<div class="container">
<h2>媒体对象</h2>
<div class="media">
<img src="img_avatar.jpg" alt="Avatar" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
总结
Bootstrap是一个简单而强大的前端框架，可以帮助我们构建出响应式、适应于不同设备和浏览器的Web应用程序、网页和其他项目。通过这个技术文档，我们学习了如何在Bootstrap中创建网站并掌握了一些常见的HTML元素和组件的使用。随着更多的实践，您可以更好地了解Bootstrap，并创建出适合所有设备的优秀网站。