Bootstrap栅格系统

一、响应式布局
同一套页面可以兼容不同分辨率的设备
实现
依赖栅格系统，将一行平均分成12个格子，可以指定元素占几个格字
步骤
1.定义容器：相当于之前的table
容器类：1.container 2.container-fluid
2.定义行：相当于之前的tr样式：row
3.定义元素：指定该元素在不同设备上，所占的格子数目
样式：col-设备代号-格子的数目
二、设备代号
xs 超小屏幕，手机（<768px）
.col/-xs-12
sm 小屏幕 平板（>=768px）
.col-sm-12
md 中等屏幕 桌面显示器（>992px）
.col-md-12
lg 大屏幕 大桌面显示器（>=1200px）
.col-lg-12
代码
<!doctype html>

<html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> 
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<style>
    .inner{
        border: 1px solid red;
    }
</style>

  <!-- 定义一个容器 -->
  <div class="container-fluid">
    <!-- 定义行 -->
    <div class="row">
        <!-- 定义元素 -->
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
        <div class="col-lg-1 col-md-2 col-xs-3 inner">栅格</div>
    </div>

</div>
posted @ 2022-07-03 18:35  月花夕沉  阅读(82)  评论(0)    收藏  举报