使用Bootstrap 4使一个小页面响应的步骤如下:
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<!-- 左侧内容 -->
</div>
<div class="col-sm-6">
<!-- 右侧内容 -->
</div>
</div>
</div>
.container
类包裹内容,使其在不同屏幕上居中显示。.row
类创建行,行内的列会自动换行。.col-*-*
类定义列的大小,其中第一个*
表示屏幕大小(xs、sm、md、lg、xl),第二个*
表示列占据的格数(1-12)。<div class="container">
<div class="row">
<div class="col-sm-6">
<!-- 左侧内容 -->
</div>
<div class="col-sm-6">
<!-- 右侧内容 -->
</div>
</div>
</div>
.img-fluid
类使图片自适应父容器的大小。<img src="image.jpg" class="img-fluid" alt="Responsive image">
.text-*
类根据屏幕大小调整文本的样式。<p class="text-center text-sm-left">居中显示,小屏幕左对齐</p>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!-- 导航栏内容 -->
</nav>
以上是使用Bootstrap 4使一个小页面响应的基本步骤。Bootstrap提供了丰富的组件和样式,可以根据具体需求进行调整和扩展。腾讯云没有直接相关的产品和产品介绍链接地址,但可以使用腾讯云提供的云服务器、云数据库等基础服务来支持Bootstrap应用的部署和运行。
领取专属 10元无门槛券
手把手带您无忧上云