bootstrap手机端布局模板
时间: 2023-07-27 10:33:01 浏览: 48
Bootstrap提供了许多针对移动设备的响应式布局模板,其官方文档中也有相应的示例代码。以下是一个简单的手机端布局模板示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Mobile Template</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Bootstrap Mobile Template</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>Hello, world!</p>
</div>
</div>
</div>
</body>
</html>
```
该示例中使用了Bootstrap的网格系统,将页面分为12列,并使用`col-sm-12`类将标题和文本内容分别放置在两个行中。同时,为了适应移动设备,还添加了`viewport`元标记,使页面宽度自适应设备宽度。最后,引入了Bootstrap的CSS和JS文件,以及jQuery和Popper.js库。