Bootstrap之栅格布局
布局系统
- Bootstrap提供了.cintainer和.container-fluid两种容器布局
- 这两种样式是启用布局栅格系统最基本的要素
- .cintainer是固体自适应方式,.container-fluid是流体100%自适应方式
- 容器布局可以嵌套,但一般不推荐使用
- Bootstrap是以移动端优先的
栅格系统
- Bootstrap栅格系统是一个以移动为优先的网格系统;
- 基于12列的布局,5种响应尺寸(面向不同屏幕设备);
- 完全使用flexbox流式布局构建的,完全支持响应式标准;具体采用div容器的行、列和对齐内容来构建响应式布局;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!--移动设备优先--><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--引入Bootstrap CSS--><link rel="stylesheet" href="css/bootstrap.min.css" /><title></title><style>.row {border: dashed 1px red;margin-top: 10px;}.col-sm,.aa {border: solid 1px blue;background-color: #EFEFEF;}</style></head><body><div class="container"><div class="row"><div class="col-sm">第一列</div><div class="col-sm">第二列</div><div class="col-sm">第三列</div></div></div><div class="container-fluid"><div class="row"><div class="col-sm">第一列</div><div class="col-sm">第二列</div><div class="col-sm">第三列</div></div></div><div class="container"><div class="row"><div class="col-sm-2 aa">第一列</div><div class="col-sm-4 aa">第二列</div><div class="col-sm-6 aa">第三列</div></div></div><!--引入JavaScript和jQuery--><!--jQuery第一个,然后Bootstrap (集成了 Popper.js和Bootstrap.js)--><script src="js/jquery.js"></script><script src="js/bootstrap.bundle.min.js"></script></body></html>
- .row表示一行,.col-*表示一列,实现了智能三列;
- sm表示屏幕类型
- 如果采用的是.container-fluid,会100%占用屏幕的宽度;
- 在.col-sm-的“”位置,还可以强制设定每列所占有的栅格列;所占的栅格位正好是12列,超过12列则会换行,小于12例则不能100%占满;
- 智能计算和强制设置栅格位都是等宽的,也可以设置不对称。
栅格等级
超小屏幕<576px | 小屏幕>=576px | 中等屏幕>=768px | 大屏幕>=992px | 超大屏幕>=1200px | |
---|---|---|---|---|---|
最大容器宽度 | None(auto) | 540px | 720px | 960px | 1140px |
类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col.xl- |
列数 | 12 |
- 如果同时使用两个或以上的级别,并且比例相同,则遵循移动端优先的原则;
- 栅格系统支持只指定其中一种或几种,其它随机的方式,指定数字奇偶均可;
- 可以通过两个或以上来实现不同设备不同比例的混合布局;
- 使用.w-100可以切割栅格栏位,进行分行操作;
- 如果强制设置了col-3数值,那切割后,将不会自动填充;
例如:
<div class="container"><div class="row"><div class="aa col-4 col-sm-2 col-md-5 col-lg-6">第一列</div><div class="aa col-3 col-sm-3 col-md-2 col-lg-3">第二列</div><div class="w-100"></div><div class="aa col- 5 col-sm-7 col-md-5 col-lg-3">第三列</div></div>
</div>
隐藏和显示方法
可实现在不同尺寸的屏幕上,显示不同的效果。
屏幕尺寸 | 类 |
---|---|
隐藏在所有 | .d-none |
仅在xs上隐藏 | .d-none .d-sm-block |
仅在sm上隐藏 | .d-none .d-md-block |
仅在md上隐藏 | .d-none .d-lg-block |
仅在lg上隐藏 | .d-none .d-xl-block |
仅在xl上隐藏 | .d-none .d-xl-none |
所有人可见 | .d-block |
仅在xs上可见 | .d-block .d-sm-none |
仅在sm上可见 | .d-block .d-sm-none .d-md-none |
仅在md上可见 | .d-block .d-md-none .d-lg-none |
仅在lg上可见 | .d-block .d-lg-none .d-xl-none |
仅在xl上可见 | .d-block .d-xl-block |
对齐与排列
栅格对齐:
样式(作用域行间) | |
---|---|
居顶(默认) | .align-items-start |
居中 | .align-items-center |
居底 | .align-items-end |
行对齐,用在行中(给行高看效果)
样式(作用域列间) | |
---|---|
居顶(默认) | .align-self-start |
居中 | .align-self-center |
居底 | .align-self-end |
列对齐,用在列中
样式(作用域行间) | |
---|---|
居左(默认) | .justify-content-start |
居中 | .justify-content-center |
居右 | .justify-content-end |
间隔相等(分散) | .justify-content-around |
两端对齐(分散) | .justify-content-between |
不是100%填充,实现水平对齐方式,用在行中
栅格排列:
- 栅格的列可以排序,使用.order-N,N最大值为12
- 使用.order-first强行设置列为第一列,.order-last为最后一列使用
- .offset-N或.offset-*-N设置列的偏移量,N表示棚格列数
- 使用.ml-N或.mr-N微调列距离
- 使用.ml-auto和.mr-auto来左右对齐
Bootstrap之栅格布局相关推荐
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- Bootstrap的栅格布局
说明 行使用的row 列使用的col 代码 <!doctype html> <html > <head><meta charset="utf-8&q ...
- 【Bootstrap】bootstrap入门之栅格布局、弹性布局、组件类_02
目录 一.响应式网页 二.Bootstrap 三.栅格布局 1.语法 2.源码解析 3.不带数字的col类 4.栅格的列偏移 四.弹性布局 五.关于input 的样式
- b关于bootstrap官网https://v4.bootcss.com/docs/layout/grid/关于栅格布局的学习和实践博客
一,首先,我们来认识一下什么是bootstrap 什么是Bootstrap? 工欲善其事,必先利其器,话说在前端开发中,如何快速的搭建一个网站页面呢? 在程序的世界里,最不缺的就是轮子,凡是你能想到 ...
- bootstrap 标题居中加颜色_BootStrap从基础到项目实战_第1季_03章_01_CSS样式之栅格布局...
目标 目标一.理解什么是栅格布局 目标二.掌握栅格布局具体应用 目标三.掌握BootStrap通用CSS样式(排版.代码.代码.表单.按钮.图片.辅助类.响应式工具) 内容 一.BootStrap全局 ...
- Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置 简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- Bootstrap栅格布局分析grid源码
前言 此为本人自学经验和某站博主经验,与其他简书作者经验共同写出. 如有侵权请联系. 布局 首选布局前,大家要明白bootstrap几种布局方式 栅格&flex 这篇文章先讲解栅格,flex以 ...
- Bootstrap栅格布局
1.栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin ...
最新文章
- rockmq运维指令_RocketMQ运维监控
- nginx日记分割脚本
- mysql分页案例_php+mysql 进行分页案例
- linux 下的lamp的简单安装
- 图解opengl 3D 图形绘制实例
- Sql字符串分组Split函数的两种实现方法
- java iterator map_Java循环遍历输出map方法
- 蓝桥杯:2018年第九届蓝桥杯省赛B组第七题—螺旋折线
- 10怎么读_孩子学习浑浑噩噩,做事拖拖拉拉,老是做不完作业,家长怎么办?...
- c# ioc 单例模式_C# IOC 控制反转
- PySide QtCore.Signal帮助手册
- 关于synchronized
- ABAP新手基础入门知识
- 汽车4G车载TBOX智能终端
- 华为防火墙实现双机热备配置详解
- 如何知晓代理IP所属城市?
- Microsoft edge浏览器下载速度太慢怎么办?今天我手把手教你提速
- Linux下的画图软件
- 6.3 马氏链-常返性(Durrett)答案
- 卷不动了?300 秒快速了解 Java 9 - 16 新特性,助你脱离内卷