bootstrap怎么用
时间: 2023-09-16 08:15:02 浏览: 87
Bootstrap 是一种用于网页应用程序的开源框架,它可以帮助您更快地创建响应式和移动设备优化的网页。要使用 Bootstrap,您可以下载并包含所需的 CSS 和 JavaScript 文件,然后使用类来定义布局和样式。例如,要创建一个带有导航栏和网格布局的页面,您可以使用以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Bootstrap Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h1>Welcome to my website!</h1>
<p>This is a sample webpage created with Bootstrap.</p>
</div>
<div class="col-md-6">
<img src="https://via.placeholder.com/500" class="img-fluid">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
```
这个代码显示了一个具有导航栏和网格布局的页面,其中包含一个“欢迎”消息和一张图片。通过使用 Bootstrap 的 CSS 和 JavaScript 类和库,您可以轻松地创建自己的网页应用程序。
阅读全文