Bootstrap前端开发框架_在bootstrap 4中,bootstrap预先提供了()名称来实现页面样式-CSDN博客

本文链接：https://blog.csdn.net/MDR_0820/article/details/120727338

Bootstrap前端开发框架

Bootstrap 简介

在这里插入图片描述
Bootstrap 需要为页面内容和栅格系统包裹一个、.container容器， Bootstrap 预先定义好这个类叫
.container 提供了两个作用此处的类

container类
响应式布局的容器固定宽度
大屏（> = 1200px）宽度为1170px
中屏（> = 992px ）宽度为970px
小屏（> = 768px）宽度为750px
超小屏（100%）

container-fluid 类

流式布局容器 100% 宽度
占全部视口的容器
适合单独做移动端开发

栅格系统

是指将页面布局换分为等宽的列然后通过列数的定义来模块化页面布局
bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸增加
系统会自动分为最多12分
bootstrap 里面 container 宽度是固定的但是不同屏幕下 container 的宽度不同我们在吧container划分为12等份

栅格选项参数

在这里插入图片描述

<meta charset="UTF-8">
    <!-- 要求当前网页使用 ie浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 照顾 IE 6 7 8  -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^=col]{
            border: 2px solid red;
            border-radius: 20px;
            margin: 5px 0;
            font-size: 20px;
            text-align: center;
        }
        .row:nth-child(1){
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <div class="container">
    <div class="row">
        <!-- 平均分12等分 -->
        <div class="col-lg-3  col-md-4 col-sm-6" >1</div>
        <div class="col-lg-3  col-md-4 col-sm-6" >2</div>
        <div class="col-lg-3  col-md-4 col-sm-6" >3</div>
        <div class="col-lg-3  col-md-4 col-sm-6" >4</div>
    </div> 
    <div class="row">
        <!-- 分12等分  份额所占不一 -->
        <div class="col-lg-5" >1</div>
        <div class="col-lg-3" >2</div>
        <div class="col-lg-3" >3</div>
        <div class="col-lg-1" >4</div>
    </div>
    <div class="row">
           <!-- 大于12等分 会另起一行显示 -->
        <div class="col-lg-6" >1</div>
        <div class="col-lg-3" >2</div>
        <div class="col-lg-3" >3</div>
        <div class="col-lg-2" >4</div>
    </div>
    <div class="row">
        <!-- 不够12等分 会空着 -->
        <div class="col-lg-4" >1</div>
        <div class="col-lg-3" >2</div>
        <div class="col-lg-3" >3</div>
        <div class="col-lg-1" >4</div>
    </div>
    </div>
</body>