Bootstrap基础组件
基础组件
4.1 使用按钮
按钮是网页上常见的交互元素，Bootstrap提供了丰富的按钮样式和变体。以下是一些使用Bootstrap按钮的示例：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5入门示例</title>
<!-- 引入Bootstrap的CSS文件 -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>
<body>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-dark">Dark Button</button>
<button class="btn btn-outline-primary">Outline Primary Button</button>
<button class="btn btn-link">Link Button</button>
<!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>
</html>显示效果：
4.2 创建导航栏
导航栏是网站顶部的常见元素，Bootstrap使创建导航栏变得简单。以下是一个基本的导航栏示例：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5入门示例</title>
<!-- 引入Bootstrap的CSS文件 -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Logo</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>
</html>显示效果：
大屏
移动端小屏
小屏可点击右侧三个横线弹出下拉菜单导航
4.3 图片和响应式图像
Bootstrap可以轻松地使图像响应式，以适应不同的屏幕尺寸。使用img-fluid类来创建响应式图像：<img src="path/to/image.jpg" alt="Responsive Image" class="img-fluid">
4.4 列表和表格样式
Bootstrap还提供了样式化的列表和表格选项。以下是一个列表和表格的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5入门示例</title>
<!-- 引入Bootstrap的CSS文件 -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>
<body>
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
</table>
<!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>
</html>显示效果：
网友评论0