Bootstrap响应式Web开发笔记03——Bootstrap栅格系统

最新推荐文章于 2022-08-18 21:39:46 发布

小C好好干饭

最新推荐文章于 2022-08-18 21:39:46 发布

阅读量545

点赞数 1

文章标签： css bootstrap html

本文链接：https://blog.csdn.net/qq_44408913/article/details/116461434

版权

Bootstrap响应式Web开发笔记01——基础入门

 Bootstrap响应式Web开发笔记02——移动端页面布局

Bootstrap响应式Web开发笔记03——Bootstrap栅格系统

Bootstrap响应式Web开发笔记04——常用组件

一、删格系统简介

栅格系统（Grid Systems），即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行页面布局。栅格系统被赋予了响应式设计的实现方式。

二、Bootstrap布局容器

容器是Bootstrap中最基本的布局元素，在使用默认网格系统时，容器是必须的。容器用于在其中容纳、填充一些内容，以及有时需要使用内容居中。容器中可以嵌套容器，不过大多数布局不需要嵌套容器。

1.布局容器宽度对应表格

屏幕大小	常规宽度范围	缩写字母
超小屏幕	<576px	xs
平板	≥576px	sm
桌面显示器	≥768px	md
大桌面显示器	≥992px	lg
超大桌面显示器	≥1200px	xl

2.container容器

.container容器：他在每个相应断点处设置了一个max-width最大宽度（两边会有空白）
.container-fluid容器：它在每个响应断点处设置布局容器的宽度为100% （屏幕会被沾满）
.container-{breakpoint}容器：它在每个响应断点处设置布局容器的宽度为100%,直到达到指定的断点为止。

三、栅格系统的基本使用

Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。

1.基本使用方式

<div class="container"><!--定义了一个栅格布局-->
    <div class="row"><!--定义了一行-->
        <!--定义了一个单元格占4个格子宽度-->
        <div class="col-md-4">姓名</div>
        <div class="col-md-4">年龄</div>
        <div class="col-md-4">性别</div>
    </div>
    <div class="row">
        <div class="col-md-4">张三</div>
        <div class="col-md-4">18</div>
        <div class="col-md-4">男</div>
    </div>
</div>

四、栅格系统的屏幕适配

1.栅格系统的类前缀

栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，删格系统具有类前缀如下表所示。

	.container 最大容器宽度	类前缀
超小设备 <576px	自动（100%）	.col-
平板 ≥576px	540px	.col-sm-
桌面显示器 ≥768px	720px	.col-md-
大桌面显示器 ≥992px	960px	.col-lg-
超大桌面显示器 ≥1200px	1140px	.col-xl-

表中，列的类名可以写多个，也就是可以同时设置.col-*、.col-sm-*、col-md-*、col-lg-*、col-xl-*类名。当使用这些类名的时候，他会根据当前屏幕的大小来使得不同屏幕大小时候不同的页面结构。

五、栅格系统中列的操作

1.引入核心样式文件

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>

2.基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
    <style>
        .row {
            background-color: pink;
            font-size: 30px;
        }

        [class^='col'] {
            border: 1px red solid;
            height: 200px;
        }
    </style>
</head>
<body>
<!--定义了一个栅格布局-->
<div class="container">
    <!--定义了一个栅格布局的行-->
    <div class="row">
        <!--定义了一个栅格布局的列-->
        <div class="col-12 col-md-8">第一列</div>
        <div class="col-12 col-md-4">第二列</div>
    </div>
    <div class="row">
        <div class="col-12 col-md-4">第一列</div>
        <div class="col-12 col-md-4">第二列</div>
        <div class="col-12 col-md-4">第三列</div>
    </div>
</div>
</body>
</html>

3.列偏移

<div class="col-md-3 offset-md-6">左偏移6格</div>

小C好好干饭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap响应式Web开发笔记03——Bootstrap栅格系统

一、删格系统简介栅格系统（Grid Systems），即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行页面布局。栅格系统被赋予了响应式设计的实现方式。二、Bootstrap布局容器容器是Bootstrap中最基本的布局元素，在使用默认网格系统时，容器是必须的。容器用于在其中容纳、填充一些内容，以及有时需要使用内容居中。容器中可以嵌套容器，不过大多数布局不需要嵌套容器。1.布局容器宽度对应表格屏幕大小常规宽度范围缩写字母超小屏幕<576pxxs平板≥
复制链接

扫一扫