Bootstrap栅格参数

2024-05-24 06:52:22

Bootstrap栅格参数

跨设备组合定义

定义一行，在中等分辨率下是8:4，在超小分辨率下是6:6，在小分辨率下是3:6

<hr />

<div class="row">

<div class="col-md-8 col-xs-6 col-sm-3">8</div>

<div class="col-md-4 col-xs-6 col-sm-6">4</div>

</div>

运行结果：

这是在中等分辨率下，此时它是8:4

这是在超小分辨率下，此时它是6:6

这是在小分辨率下，此时它是3:6

也就是说，我们可以指定4种分辨率底下的比例模式。这个我们就叫做跨设备组合。

清除浮动clearfix visible-xs

1）首先我们先重新建一个demo04.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>demo04</title>

<link rel="stylesheet" href="css/bootstrap.min.css" />

<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="application/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

<div id="container">

<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="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>

</div>

</body>

</html>

运行效果：

在超小分辨率底下，前两个各占6格，后两个也各占6格，所以要排两列。44

在小分辨率下，第一个占3格，第二个占3格，第三个占3格，第四个也占3格，所以一行就可以排完了。

2）我们可以给它设置一个背景

<style type="text/css">

div{ border: 1px #101010 solid;}

#container{ width: 800px; margin: 10px auto;}

</style>

运行效果：

3）我们可以在第一行第一列添加内容。

运行结果：

第一个占了两行的位置，第一列的内容比较多，所以第三个没有从最左边排。

4）我们把第三列排到第一列的底下，就要在第三列前面加清除浮动。

“clearfix visible-xs”

“visible-xs”表示只在超小分辨率下才加清除浮动，其它分辨率底下不清除。

运行结果：

这样就回到了原始的排版方式

注意：一个container拆分成12个小格，当你给的格数大于12格就自动排到下面来了。

Bootstrap栅格参数相关推荐

Bootstrap栅格布局
1.栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin ...
Bootstrap 栅格系统理解与总结
Bootstrap 栅格系统学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
如何使用BOOTSTRAP 栅格系统？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...
bootstrap 栅格系统实现类似table跨行
2019独角兽企业重金招聘Python工程师标准>>> 通过bootstrap 栅格系统实现类似table跨行的效果,如下: 具体代码如下: <div class=" ...
BootStrap栅格之间留出空隙
BootStrap栅格系统可以把我们的container容器划分为若干等分,如果想要每个部分之间留出一定的空隙,我们很可能首先想到的方法就是用margin外边距来使它们分离从而产生空隙,这样做真的的可 ...
Bootstrap栅格布局解析
文章目录栅格布局初始栅格栅格布局源码 grid.less mixin中的grid.less clearfix.less 栅格布局源码分析流体容器&固定容器公共样式 @grid-gutt ...
Bootstrap栅格系统扩展五格
Bootstrap栅格系统布局的魅力是毋容置疑的,但是再好的东西也会有不完美的地方,比如当布局上需要水平排列5列平分宽度时,bootstrap就显得比较尴尬了,这时候就需要老司机按照它的命名风格自定义 ...
BootStrap(栅格系统)
目录 1.什么是BootStrap 2.BootStrap简介 BootStrap栅格layout 3.BootStrap常用样式与标签常用样式 4.BootStrap常用组件按钮组件面板组件 ...

最新文章

热门文章