bootstrap中栅格布局的详细介绍_F11 - 专业站长和开发者的学习网站

分享到

bootstrap中栅格布局的详细介绍

bootstrap 来源：互联网作者：秩名发布时间：2022-08-10 20:03:09 人浏览

摘要

1.什么是栅格布局？以前的网页制作布局用的是tabel布局，通过把表格将网页分为大大小小的表格，再从表格中填充元素。后来发展为div+css布局。通过div+css浮动。flaot:right和float:left.布

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>

<style>

.row {

border: 1px dashed #000;

margin-top: 20px;

}

.col {

border: 1px solid #0069d9;

background: #f1b0b7;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</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）

您可能感兴趣的文章 :

原文链接 : https://www.php.cn/bootstrap/492962.html

Tag : Bootstrap(19)

bootstrap panel的详细介绍

1、面板面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同
Bootstrap中列表组、分页和进度条组件的用法介绍

列表组使用.list-group选择列表组添加.active到 a.list-group-item以指示当前的活动选择。【相关推荐：《bootstrap教程》】添加.disabled到 a.list-gr
bootstrap中栅格布局的详细介绍

1.什么是栅格布局？以前的网页制作布局用的是tabel布局，通过把表格将网页分为大大小小的表格，再从表格中填充元素。后来发展为div+c
bootstrap用于jsp页面的详细介绍

jsp页面是指在传统的HTML页面文件中加入java程序和jsp标签的页面 JSP 页面的扩展名为 .jsp 或.jspx，web 服务器通过此扩展名通知 JSP 引擎处理该
bootstrap是自适应的吗？

bootstrap是自适应的吗 bootstrap是自适应的自适应是不管屏幕多大，都尽量不换行，而只是横向缩放。而Boostrap是通过栅栏系统实现自适应的。
bootstrap怎么做到点击表格表头排序

本篇文章介绍bootstrap怎么做到点击表格表头排序使用Bootstrap可以快速制作出响应式网页，有时候项目中会用到Bootstrap点击表格table的表头列
bootstrap实现响应式方法

本篇文章介绍bootstrap实现响应式方法响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在
为什么使用bootstrap框架

本篇文章介绍为什么使用bootstrap框架 Bootstrap是一种前端开发框架，它由规范的css，javascript插件构成，其最大的优势是响应式布局，使得开发