使用bootStrap制作一个展示物品详细信息的页面,带有一个退回上一页面的按钮,所有内容屏幕居中
时间: 2024-03-10 14:45:22 浏览: 14
好的,这是一个使用 Bootstrap 制作展示物品详细信息的页面示例,并且带有一个退回上一页面的按钮,并且所有内容都屏幕居中:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展示物品详细信息页面</title>
<!-- 引入 Bootstrap 样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<style>
html, body {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<h1>物品名称</h1>
<p>物品描述信息</p>
<img src="物品图片链接" alt="物品图片">
<h2>物品详细信息</h2>
<p>物品详细信息</p>
<a href="javascript:history.go(-1);" class="btn btn-primary">退回上一页面</a>
</div>
<!-- 引入 jQuery 和 Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
```
这是一个屏幕居中的页面结构,你需要根据自己的需求进行修改。同时,需要注意以下几点:
1. 引入 Bootstrap 样式和 JS,可以通过 CDN 或下载本地文件来实现;
2. 在页面中使用 Bootstrap 的类来实现样式,如 `container`、`h1`、`p`、`img`、`btn` 等;
3. 在退回按钮中使用 `href="javascript:history.go(-1);"` 来实现退回上一页面的功能;
4. 使用 CSS 代码将页面内容屏幕居中。