怎么用bootstrap写响应式的网页
时间: 2023-06-23 10:08:31 浏览: 68
Bootstrap一个流行的前端框架,可以帮助开发者快速构建响应式的网页。以下是一个简单的例子:
1. 在 HTML 中引入 Bootstrap:
```html
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
```
2. 在 HTML 中使用 Bootstrap 的网格系统:
```html
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">左侧栏</div>
<div class="col-sm-8">主内容</div>
</div>
</div>
```
3. 使用 Bootstrap 的响应式工具类:
```html
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-2">左侧栏</div>
<div class="col-sm-8 col-md-9 col-lg-10">主内容</div>
</div>
</div>
```
在这个例子中,左侧栏将在小屏幕设备上占用四个网格单元,在中等屏幕设备上占用三个网格单元,在大屏幕设备上占用两个网格单元。主内容将在小屏幕设备上占用八个网格单元,在中等屏幕设备上占用九个网格单元,在大屏幕设备上占用十个网格单元。
Bootstrap 还提供了许多其他的工具类,例如导航栏、表单、按钮等,可以根据需要灵活使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![epub](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)