Bootstrap CSS 学习笔记
Bootstrap 是 Twitter 推出的一款前端框架，提供了一系列常用的 UI 元素，支持响应式布局和多种样式主题。使用 Bootstrap 可以快速构建漂亮、现代化的网页。
基础语法
Bootstrap 的基础语法非常简单，只需要在 HTML 文件中引入相应的 CSS 和 JavaScript 文件即可。以下是一个基本的示例：
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Example</title>
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p>This is a simple Bootstrap example.</p>
</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在这个示例中，我们使用了 container 类来包裹页面内容，使得页面内容具有居中样式，并且使用了最新版本的 Bootstrap 4.6.0 样式和 JavaScript 文件。
响应式布局
Bootstrap 的响应式布局是它最重要的特性之一，可以根据不同的设备屏幕大小自动调整页面布局和样式。以下是一个简单的响应式布局示例：
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Example</title>
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p>This is a simple Bootstrap example.</p>
</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在这个示例中，我们使用了 Bootstrap 内置的 container 类来包裹页面内容，并且在导航栏中使用了 navbar-expand-lg 类来指定在大屏幕上显示，对小屏幕隐藏。
实例
以下是一个使用 Bootstrap 实现的响应式网页布局：
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Example</title>
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-6 col-sm-12">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet enim non metus elementum molestie. Integer quis laoreet justo. Sed vel orci et sapien fermentum suscipit.</p>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<h2>News</h2>
<ul class="list-group">
<li class="list-group-item">News item 1</li>
<li class="list-group-item">News item 2</li>
<li class="list-group-item">News item 3</li>
</ul>
</div>
</div>
</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在这个示例中，我们使用了 Bootstrap 的导航栏和网格系统来实现响应式布局，其中：
- 导航栏使用了
navbar、navbar-expand-lg和navbar-light bg-light类来指定样式； - 网页主要内容区域使用了
container、row和col-lg-8 col-md-6 col-sm-12类来指定样式，其中lg表示大屏幕样式，md表示中等屏幕样式，sm表示小屏幕样式； - 右侧新闻列表使用了
col-lg-4 col-md-6 col-sm-12类来指定样式，并且使用了list-group类来显示列表。
总结
Bootstrap 提供了一系列常用的 UI 元素，支持响应式布局和多种样式主题，可以大大提高网站开发的效率和质量。熟练掌握 Bootstrap 的使用方法和基础语法，将有助于您快速开发漂亮、现代化的网站。