bootstrap中有栅格布局吗
前言
bootstrap中有栅格布局;栅格布局指的是将一行分为12个栅格,将12个栅格分配给不同的div元素来进行布局,可以通过设置列所占有的栅格的个数来设置列的宽度,是通过列数来定义模块化的页面布局方式。
正文
bootstrap中有栅格布局吗
bootstrap中有栅格布局
1.什么是栅格布局?
以前的网页制作布局用的是tabel布局,通过把表格将网页分为大大小小的表格,再从表格中填充元素。后来发展为div css布局。通过div css浮动。flaot:right和float:left.布局。
现在bootstrap运用的是栅格布局。简单来说就是把一行分为12个栅格。将12个栅格分配给不同的DIV元素来进行布局。
-
在Bootstrap中引入了栅格布局,将页面分成类似于表格一样的布局
-
每一行由12列组成,可以通过设置列所占有的列的个数来设置列的宽度
-
支持响应式布局,分别有5种响应尺寸,分别对应不同的设备宽度
-
使用flexbox流式布局来实现页面布局
-
使用div来实现容器、行、列的布局
2.如何实现栅格布局?
首先,使用bootstrap由很多方式,webpack加载或者使用CND引用等。我是直接从CDN上下载3.37版本到本地。再通过link标签引用。这点和引用Jquery类似。
其次,根据布局分配栅格。举个例子,比如说要实现水平的三列等大布局。那么就给每个DIV分配12/3=4个栅格,
如果是三列不等大的,左边大约为3个栅格,中间为5个,右边为4个
具体操作:
-
首先布置一个容器div用来存放栅格,为div添加container类实现容器
-
为子元素添加row类实现行的布局,而列的布局使用col-*来实现
-
当类名为container-fluid的话,默认占据的宽度为100%,占据整个页面
-
使用col-时,不设置的大小,会默认智能平分宽度,设置*的大小会按照比例分割页面空间
-
但是同一行中*的大小不能超过12,可以小于12,会存在空白;当超过12时,会将超过的部分放在下一行中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格布局</title>
<!-- 移动端优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 引入bootstrap.css文件-->
<link rel="stylesheet" href="https://www.php.cn/bootstrap/css/bootstrap.css">
<style>
.row {
border: 1px dashed #000;
margin-top: 20px;
}
.col {
border: 1px solid #0069d9;
background: #f1b0b7;
}
</style>
</head>
<body>
<!-- 不设置*的大小,默认平分列的宽度-->
<div>
<div>
<div class="col col-sm">第一列</div>
<div class="col col-sm">第二列</div>
<div class="col col-sm">第三列</div>
</div>
</div>
<!--设置container-fluid默认占满宽度-->
<div>
<div>
<div class="col col-sm">第一列</div>
<div class="col col-sm">第二列</div>
<div class="col col-sm">第三列</div>
</div>
</div>
<!--当设置*的大小时,默认按照比例分割宽度-->
<div>
<div>
<div class="col col-sm-5">第一列</div>
<div class="col col-sm-2">第二列</div>
<div class="col col-sm-5">第三列</div>
</div>
</div>
<!--小于12时,会出现空白区域-->
<div>
<div>
<div class="col col-sm-3">第一列</div>
<div class="col col-sm-2">第二列</div>
<div class="col col-sm-3">第三列</div>
</div>
</div>
<!--当超出12时,会自动换行-->
<div>
<div>
<div class="col col-sm-5">第一列</div>
<div class="col col-sm-5">第二列</div>
<div class="col col-sm-7">第三列</div>
</div>
</div>
<!--首先引入jQuery文件,再引入poper文件,最后引入bootstrap文件-->
<script src="https://www.php.cn/bootstrap/js/jquery.slim.min.js"></script>
<script src="https://www.php.cn/bootstrap/js/popper.min.js"></script>
<script src="https://www.php.cn/bootstrap/js/bootstrap.js"></script>
</body>
</html>
3.栅格布局class参数是什么意思?
栅格的class有四个col-lg-1,col-md-1,col-sm-1,col-xs-1,分别对应大屏幕(large),中等屏幕(middl),小屏幕(smll),极小(xs)。其中col表示列的意思column,中间为尺寸的缩写,最后是div分配的栅格大小(例子是占用的是1/12)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbhbi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24