Bootstrap-栅格系统

最新推荐文章于 2023-07-06 11:30:00 发布

浪子唐少

最新推荐文章于 2023-07-06 11:30:00 发布

阅读量581

点赞数 2

分类专栏： Bootstrap框架文章标签： Bootstrap 栅格系统

本文链接：https://blog.csdn.net/lin_dark/article/details/103360597

版权

Bootstrap框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Bootstrap-栅格系统

1.栅格系统简介

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的格子中。

2.栅格系统组成

由div嵌套组成，给div设置不不同类样式名来对网页进行布局。对应类样式名和描述如下表：

类样式名	描述	类似于表格
.container 或 .container-fluid	布局的容器 container 固定大小 container-fluid占100%	table
.row	表示一行	tr
col-xx-n : xx有四个取值 xx为以下设备选择，选lg，或者md lg 大型设备如：电视机 md 中型设备如：电脑 sm 小型设备如：平板 xs 微型设备如：手机 n 一列占几格一行最多12格	指定一列占几个格子（一行最多12格子） .col-lg-4 在大型设备一列占4个格子 .col-md-3 在中型设备一列占3个格子 .col-sm-6 在小型设备一列占6个格子 .col-xs-12 在微型设备一列占12个格子	td

3.Bootstrap设备分类

Bootstrap框架将设备分成了了四类，如下表：

类型	说明	对应字母
微型设备	手机	xs
小型设备	平板	sm
中型设备	电脑	md
大型设备	电视机	lg

4.两种布局容器器

栅格系统布局容器器	说明
.container	在不同的分辨率下有不同固定宽度。四种设备宽度各不相同。
.container-fluid	在所有的分辨率下都以100%宽度显示

案例：演示两种布局容器器的区别

案例例代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gbk">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 模板</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
div {
border: 1px red solid;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
container容器：在不同的分别率下有固定的宽度
</div>
<div class="container-fluid">
container-fluid容器：与分别率无关，宽度100%
</div>
</body>
</html>

在这里插入图片描述

5.栅格系统基本格式

栅格系统由container(容器)、row(行)、col(列)组成，row必须在container里面，row只能包含col且col必须在row里面
一个row由12列组成
Bootstrap栅格系统有2种容器：.container(非全宽,固定宽度)和.container-fluid(全宽,弹性宽度)

<div class="container">
  <div class="row">
    <div class="col">
      One of two columns
    </div>
    <div class="col">
      One of two columns
    </div>
  </div>
</div>

6.栅格系统示例

1.示例1

1.需求

栅格系统的基本结构。为了让 div可见，设置 div 的边框和高度的样式。

2.示例代码

<!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">
<title>Bootstrap 模板</title>
<!-- Bootstrap 样式文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.row div {
border: 1px red solid;
height: 150px;
}
</style>
</head>
<body>
<!-- 等价:table标签 -->
<div class="container">
<!--等价：tr标签-->
<div class="row">
<!-- 等价：td col-md-4：表示在中型设备上,一列占4个单元格，总共12个单元格，所以显示一行已经占满了-->
<!-- 一行最终不得超过12个，不然列会乱掉，可以设置一个单元格只占2列或者3列，-->
<div class="col-md-4">
电脑
</div>
<div class="col-md-4">
电脑
</div>
<div class="col-md-4">
电脑
</div>
</div>
<!--等价：tr标签-->
<div class="row">
<!-- 等价：td col-md-4：表示在中型设备上，一个单元格占据4列-->
<div class="col-md-4">
电脑
</div>
<div class="col-md-4">
电脑
</div>
<div class="col-md-4">
电脑
</div>
</div>
</div>
</body>
</html>

3.示例效果

在这里插入图片描述

2.示例2

1.需求

省略row的情况下，在container中直接写6个col-md-3，即每列占3格子，如果超过4个div，则会自动
变成2行。

2.示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--指定页面内容的编码-->
    <meta charset="utf-8">
    <!--告诉浏览器使用最新的解析引擎解析当前页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--viewport：视口 为了移动设备，让页面在移动设备上显示的大小和当前设备大小一致-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>两种布局容器</title>

    <!-- 引入Bootstrap的样式文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        .container div {
            border: 1px solid red;
            height: 200px;
        }
    </style>

</head>
<body>

    <!--省略row的情况下，在container中直接写6个col-md-3，
即每列占3格子，如果超过4个div，则会动变成2行。-->
    <!--等价table标签-->
    <div class="container">
        <div class="col-md-3">电脑</div>
        <div class="col-md-3">电脑</div>
        <div class="col-md-3">电脑</div>
        <div class="col-md-3">电脑</div>
        <div class="col-md-3">电脑</div>
        <div class="col-md-3">电脑</div>
    </div>



    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

3.示例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4QOyd5Pi-1575332631529)(assets/1575272159367.png)]

3.示例3

1.需求

不同屏幕的适配。每个 div 设置三个样式，col-md-3， col-sm-4 ，col-xs-6，格子的数量会随着屏幕尺寸
的变化而不同。

2.示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--指定页面内容的编码-->
    <meta charset="utf-8">
    <!--告诉浏览器使用最新的解析引擎解析当前页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--viewport：视口 为了移动设备，让页面在移动设备上显示的大小和当前设备大小一致-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>两种布局容器</title>

    <!-- 引入Bootstrap的样式文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        .container div {
            border: 1px solid red;
            height: 200px;
        }
    </style>

</head>
<body>

    <!--
    不同屏幕的适配。每个 div 设置三个样式，
    col-md-3 col-sm-4 col-xs-6，格子的数量会随着屏幕尺寸的变化而不同。-->

    <!--等价table标签-->
    <div class="container">
        <div class="col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-md-3 col-sm-4 col-xs-6"></div>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

3.示列效果

在这里插入图片描述

4.示例4

1.需求

显示与隐藏列。不同屏幕尺寸的时候，visible 让某些 div 显示，hidden 可以让某些 div 隐藏。

2.示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--指定页面内容的编码-->
    <meta charset="utf-8">
    <!--告诉浏览器使用最新的解析引擎解析当前页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--viewport：视口 为了移动设备，让页面在移动设备上显示的大小和当前设备大小一致-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>两种布局容器</title>

    <!-- 引入Bootstrap的样式文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        .container div {
            border: 1px solid red;
            height: 200px;
        }
    </style>

</head>
<body>

    <!--
    显示与隐藏列。不同屏幕尺寸的时候，
    visible 让某些 div 显示，hidden 可以让某些 div 隐藏。
    -->
    <!--等价table标签-->
    <div class="container">
        <div class="col-md-3 visible-xs">在手机上显示</div>
        <div class="col-md-3">电脑</div>
        <div class="col-md-3 hidden-md">在电脑上隐藏</div>
        <div class="col-md-3">电脑</div>
        <div class="col-md-3">电脑</div>
        <div class="col-md-3">电脑</div>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

3.示例效果

在这里插入图片描述

5.示例5

1.需求

栅格系统嵌套：可以将每一列又看成是一个由12格子组成的栅格系统

2.示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--指定页面内容的编码-->
    <meta charset="utf-8">
    <!--告诉浏览器使用最新的解析引擎解析当前页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--viewport：视口 为了移动设备，让页面在移动设备上显示的大小和当前设备大小一致-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>两种布局容器</title>

    <!-- 引入Bootstrap的样式文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        .container div {
            border: 1px solid red;
            height: 200px;
        }
    </style>

</head>
<body>

    <!--栅格系统嵌套-->
    <!--等价table标签-->
    <div class="container">
        <div class="col-md-4"></div>
        <div class="col-md-8">
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
        </div>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

3.示例效果

在这里插入图片描述

6.小结

栅格系统中类名小结

类样式名	作用
.container	在不同的设备上显示固定宽度
.container-fluid	始终以100%宽度显示
.row	一行
.col-xs-n	在微型设备上跨几格
.col-sm-n	在小型设备上跨几格
.col-md-n	在中型设备上跨几格
.col-lg-n	在⼤大型设备上跨几格
.hidden-lg/md/sm/xs	在指定设备上隐藏
.visible-lg/md/sm/xs	在指定设备上显示

浪子唐少

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-栅格系统

Bootstrap-栅格系统1.栅格系统简介Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的格子中。2.栅格系统组成由div嵌套组成，给div设置不不同类样式名来对网页进行布局。对应类样式名和描...
复制链接

扫一扫

专栏目录