Bootstrap——栅格系统的简单使用

作者:神秘网友 发布时间:2020-10-04 13:23:15

Bootstrap——栅格系统的简单使用

Bootstrap——栅格系统的简单使用

Bootstrap——栅格系统的简单使用

  • 什么是栅格系统
  • 栅格系统的基本使用
  • 栅格嵌套
  • 利用栅格系统进行网页布局

什么是栅格系统

· Bootstrap包含了一套响应式、移动设备优先的流式栅格系统。利用Bootstrap，我们可以快速地完成页面布局，以及适配不同大小的屏幕。
· 栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局。

栅格系统的基本使用

栅格系统的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
		… …   
   </div>
</div>

每一个row代表一行。每行默认最多12列

使用样例：

<div class="row" >	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
</div>
		
<div class="row" >
	<div class="col-md-4 border py-3 "> 4 </div>
	<div class="col-md-4 border py-3 "> 4 </div>	
	<div class="col-md-4 border py-3 "> 4 </div>
</div>
		
<div class="row" >
	<div class="col-md-3 border py-3 "> 3 </div>
	<div class="col-md-9 border py-3 "> 9 </div>	
</div>

<div class="row" >
	<div class="col-md-12 border py-3 "> 12 </div>
</div>

效果图：
Bootstrap——栅格系统的简单使用
Bootstrap的栅格系统允许您根据屏幕大小调整列的宽度。
示例中的py-3为设置列宽。
示例中col-md-1中的md用来匹配 ≥992px 的设备。
除md之外，Bootstrap还支持另外三种尺寸的设备：
· lg用来匹配大型设备（桌面显示器）：≥ 1200px 的屏幕；
· sm用来匹配小型设备（平板）：≥ 768px 的屏幕；
· xs用来匹配超小设备（手机）：< 768px 的屏幕；

栅格嵌套

栅格系统的.row是可以嵌套的，借此可以完成更加复杂的布局。
在某一列中继续添加一行.row，可以再进行细分

<div class="row" >
	<div class="col-md-8 border py-3">
		<div class="row">
			<div class="col-md-8 border py-3  ">	col-8-8		</div>
			<div class="col-md-4 border py-3  ">	col-8-4		</div>
		</div>
	</div>
	<div class="col-md-4 border py-3 ">col-4</div>
	<div class="row" >
		<div class="col-md-8 border py-3 ">	   col-8	</div>
		<div class="col-md-4 border py-3 ">	   col-4  	</div>	
</div>
	
</div>

效果图：
Bootstrap——栅格系统的简单使用

利用栅格系统进行网页布局

用栅格系统布局一个如下：顶部有一个logo区域，同时跨越两栏。左栏内容，右栏导航，两栏下方还有一个footer区域。

<body class="container">
		<h3 class="mb-4">栅格系统</h3>
		<div class="row">
			<div class="col border py-3 bg-info no-gutters " style="text-align:center">	LOGO		</div>
		</div>		
		<div class="row" style="height:500px">
			<div class="col-8 border py-3 bg-info no-gutters" style="text-align:center">	文本内容	</div>
			<div class="col-4 border py-3 bg-info no-gutters" style="text-align:center">	导航栏	</div>
		</div>
		
		<footer style="text-align: center; flex-grow: 1;display: flex;align-items: flex-end;justify-content: center">
		    <p>  底部footer </p>
		</footer>
		
</body>

效果图：
Bootstrap——栅格系统的简单使用

Bootstrap——栅格系统的简单使用相关教程

  1. 鸿蒙系统 OLED屏幕驱动

    鸿蒙系统 OLED屏幕驱动 Hi3861 OLED驱动 可以看附件视频详细说明 Hispark WiFi开发套件又提供一个oled屏幕，但是鸿蒙源码中没有这个屏幕的驱动，我们需要自己去移植。 经过一晚上的调试，现在终于在鸿蒙系统上实现OLED屏幕的显示了，效果如下： 这里记录一下

  2. 用python编写名片系统时遇到的import f.py导入命令，与from f.py

    用python编写名片系统时遇到的import f.py导入命令，与from f.py import *区别及问题 先说问题 ：用import f.py导入命令时，在card_main.py中，会先出现提示用户进行操作的信息，再出现之后的功能函数（如功能【1】新建卡片），如图1 但是用from f.py import

  3. Linux系统下安装配置 OpenLDAP + phpLDAPadmin

    Linux系统下安装配置 OpenLDAP + phpLDAPadmin 实验环境： 操作系统：Centos 7.4 服务器ip:192.168.3.41 运行用户：root 网络环境：Internet LDAP（轻量级目录访问协议）是一个能实现提供被称为目录服务的信息服务，也是一套用户认证体系系统；一般在大型企业

  4. 重装windows后ubuntu系统启动菜单不见的修复方法

    重装windows后ubuntu系统启动菜单不见的修复方法 为什么80%的码农都做不了架构师？ 当我们原来系统中有ubuntu的时候，如果我们重装或安装新的windows系统时，会发现ubuntu系统启动菜单不见啦，我们重现安装ubuntu系统也可以解决这个问题，但是我们以前在ubunt

  5. 操作系统的运行机制与体系结构（操作系统4）

    操作系统的运行机制与体系结构（操作系统4） 操作系统的运行机制与体系结构 视频链接地址：https://www.bilibili.com/video/BV1YE411D7nH/?spm_id_from=333.788.videocard.2 操作系统 系列文章目录 操作系统的运行机制与体系结构 前言 1 操作系统的运行机制 2

  6. 阿里云视觉AI五天训练营之搭建多场景人脸口罩检测系统（附效果动

    阿里云视觉AI五天训练营之搭建多场景人脸口罩检测系统（附效果动图） 搭建多场景人脸口罩检测系统-基于阿里云视觉智能平台 最后一次的课了，就不辣么水了。这次的试验目的是将用户上传的图片（例如在公共场合的监控照片）进行识别，返回当前图片中的人数、（

  7. 从零开始编写minecraft光影包（5）简单光照系统，曝光调节，色调

    从零开始编写minecraft光影包（5）简单光照系统，曝光调节，色调映射与饱和度 完整资源： 我的Github地址 前情提要： 从0开始编写minecraft光影包（0）GLSL，坐标系，光影包结构介绍 从零开始编写minecraft光影包（1）基础阴影绘制 从零开始编写minecraft光影

  8. 【Linux操作系统课堂笔记4】Vi和Vim编辑器及常用命令

    【Linux操作系统课堂笔记4】Vi和Vim编辑器及常用命令 文章目录： 一：介绍 二：Vi和Vim常用的三种模式 1.命令行模式/一般模式/正常模式 2.插入模式/编辑模式/输入模式 3.命令行模式/底线命令模式 三：Vi和Vim模式的相互转换 创建/打开文件 四：Vi和Vim的快捷