Bootstrap 栅格布局

news/2024/2/29 3:35:15

栅格布局系统:

思想:一个表达式足以描述, 百分比占位 + 多媒体查询 + float + relative

Bootstrap栅格系统的工作原理:

  • row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

  • 通过“行(row)”在水平方向创建一组“列(column)”。

  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

  • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。

  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

栅格参数:

图片描述

从堆叠到水平排列

<div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div>
</div>

流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

<div class="container-fluid"><div class="row">...</div>
</div>

移动设备和桌面屏幕

.col-xs-*
.col-md-*

混合使用,xs、md依次添加(权重问题)。

手机、平板、桌面

支持平板可以添加

.col-sm-*

混合使用,xs、sm、md依次添加(权重问题)。

多余的列(column)将另起一行排列

如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。

column reset

栅格系统组成的重要部分是使用了float。必然导致了dom脱离文档流对布局的影响。解决方法:添加.clearfix清除浮动对布局的影响

<div class="row"><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

列偏移

使用.col-md-offset-*类可以将当前列向右侧偏移,css表达式为margin-left: xx%

<div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row"><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

嵌套列

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm- 元素到已经存在的 .col-sm- 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

列排序

通过使用 .col-md-push-.col-md-pull-类就可以很容易的改变列(column)的顺序。
原理:利用relative,可以理解为


.col-md-push-3 => 当前位置 向右移动
left = 100/12*3 % => 效果为:
left : 25%.col-md-pull-9=> 当前位置 向左移动
right = 100/12*9 % => 效果为:
right : 75%

https://www.jiucaihua.cn/news/show-4238380.html

相关文章

php屏蔽ip段,学习猿地-php如何禁止ip段

php禁止ip段的方法&#xff1a;1、禁用单个ip&#xff0c;代码为【$ip$_SERVER["REMOTE_ADDR"];】&#xff1b;2、禁用ip段&#xff0c;代码为【$ip$_SERVER["REMOTE_ADDR"];】。php禁止ip段的方法&#xff1a;本文实例讲述了php禁止某ip或ip地址段访问的方…

ORACLE -- RAC JDBC 配置

我们都知道&#xff0c;ORACLE 对外提供服务有 这么几种方式 THIN CONNECT ,OCI CONNECT ,DATALINK等数据连接方式。 1.THIN Connect 在单实例情况下,JDBC Connect String &#xff1a; jdbc:oracle:thin:10.11.1.243:1521/orcl 其中IP 10.11.1.243:1521 服务器IP地址和Lisener…

Windows Server 2008 中的打印管理

Windows Server 2008 中管理打印服务器主要有两个工具&#xff1a; 1. 服务器管理器&#xff1a; 2. “打印管理” 管理单元 服务器管理器主要用来安装和配置“打印服务”这个服务器角色。它还会显示事件查看器中与打印有关的事件&#xff0c;并且包括一个管理本地服务器的“打…

Cobalt_Strike_4.5渗透工具的安装与使用

前言&#xff1a; Cobalt Strike是一款内网渗透测试神器&#xff0c;Cobalt Strike分为客户端和服务器端&#xff0c;该服务器端被称为团队服务器&#xff0c;是Beacon有效负载的控制器&#xff0c;同时&#xff0c;cobalt strike也具有社会工程学功能&#xff0c;团队服务器还…

js中的date.parse函数

2019独角兽企业重金招聘Python工程师标准>>> js Date对象的 parse()用法&#xff1a; parse&#xff1a;解析一个包含日期的字符串&#xff0c;并返回该日期与1970年1月1日午夜之间所间隔的毫秒数。 Date.parse(dateVal) 其 中必选项 dateVal 是一个包含以诸如 &…

第一次软工作业改进版

最初由简单的数据结构导致的低性能&#xff0c;然后改进了数据结构&#xff0c;取得了很高的性能提升&#xff1b; 最终是性能较高的分析&#xff1a;转载于:https://www.cnblogs.com/wx1991/archive/2012/10/28/2743992.html

js基础(二)数据类型小结

2019独角兽企业重金招聘Python工程师标准>>> 上一节简单的描述了一个六种数据类型在使用时返回的值及字符串&#xff0c;这一节来描述其中一 些比较特殊且容易弄混乱的东西。 一、Undefined的两种情况&#xff1a;未初始化和未定义的变量 //undefined的两种情况&…

LDP发现

LDP发现是一种使LSR能够发现潜在的LDP对等体的机制。这样就无须显式配置LSR的标记交换对等体。 有两种不同的发现机制&#xff1a; 基本的发现机制用来发现链路层直连的LSR邻居扩展的发现机制用来查找链路层非直连的LSR。基本发现机制: 运行了LDP的LSR&#xff0c;周期性地从运…

vagrant制作box文件

2019独角兽企业重金招聘Python工程师标准>>> 虽然这里http://www.vagrantbox.es/已经罗列出了许多个base box&#xff0c;但有些时候&#xff0c;可能根据自身的业务需要一些特殊的box&#xff0c;比如&#xff0c;笔者遇到的&#xff0c;需要一个带桌面环境和浏览器…

oracle 查看ocr备份,OracleRAC备份和恢复OCR(10g)

Oracle集群每4个小时自动备份一次。在任一时刻&#xff0c;Oracle集群总会保存3份备份文件。他们分别是最近4小时&#xff0c;最近1天和最近1周的备份文Oracle RAC 备份和恢复OCROracle RAC 添加和删除OCR参考&#xff1a;voting disks备份恢复参考&#xff1a;1.OCR有两种备份…
最新文章