一文带你马上清楚bootstrap的栅格系统

bootstrap的栅格系统

我们都知道bootstrap的栅格系统是为了实现网站的响应式布局,但bootstrap提供了一套响应式、移动设备优先的流式栅格系统,它会将网页分为12等价(宽度),举个例子,假设你设置最外层div的宽度为1200px,那么每一份就占100px。话不多说,直接上代码和效果图吧。
可见代码中的注释说明:
例1:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstarp 栅格系统title>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

    
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style>
        .row div{
      
            border: 2px solid #ff0000;
            height: 100px;
        }
    style>
head>
<body>
    
    
    
    <div class="container">
    	
        <div class="row">
            <div style="width:30%">1div>
            <div style="width:40%">2div>
            <div style="width:30%">3div>
        div>
        
        
        <div class="row">
            <div class="col-4">1div>
            <div class="col-4">2div>
            <div class="col-4">3div>
        div>
    div>

body>
html>

如图:
一文带你马上清楚bootstrap的栅格系统_第1张图片
例2:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstarp 栅格系统title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

    
    
    
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <style>
        .row div{
      
            border: 2px solid #ff0000;
            height: 100px;
        }
    style>
head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-12">第一行第一列div>
            <div class="col-sm-3 col-12">第一行第二列div>
        div>
    div>

body>
html>

如图:
PC端显示
一文带你马上清楚bootstrap的栅格系统_第2张图片
根据例2扩展例3:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstarp 栅格系统title>
    <link rel="stylesheet" type="text/css" 

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

    
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <style>
        .row div{
      
            border: 2px solid #ff0000;
            height: 100px;
        }
        .container{
      
            border: 5px solid yellow;
        }

        /*分辨率大于1200px的时候,因为bootstrap默认最大1140px*/
        @media (min-width: 1200px) {
      
            .container{
      
                max-width: 1300px;
            }
        }
    style>
head>
<body>
   <div class="container">
        <div class="row">
            
            
            
            
            
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none d-sm-block">1div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">2div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">3div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">4div>
        div>
    div>

body>
html>

在这里插入图片描述
一文带你马上清楚bootstrap的栅格系统_第3张图片
一文带你马上清楚bootstrap的栅格系统_第4张图片
好了,到这里你应该已经比较清楚bootstrap的栅格系统是怎么工作的了吧,不妨自己把代码写一写看看各种效果,这样子会理解得更快。

你可能感兴趣的:(前端学习)