bootstrap栅格布局介绍

2025-10-20 23:17:55

1、进行页面开发，最头疼的问题在于：页面写完了，发现换个浏览器不支持了（显示风格瞬间改变）。什么是栅格系统？

bootstrap栅格布局介绍

2、栅格布局样式定义：

bootstrap栅格布局介绍

3、如果要真想实现栅格，那么就必须有一个可以容纳多个栅格的行，而多个栅格行最终就组成了一个页面。在整个bootstrap之中最多只能够存在12栅格，不管你怎样定义，最终别超过12个就可以了，可以少，但是不能多。

bootstrap栅格布局介绍

4、如果现在是一个宽容器的窗口，那么整个栅格都会按照宽屏幕的方式完成显示，而到了窄屏页面，那么会自动改变显示的风格。

栅格布局的实现：

如果要想实现栅格布局，只要通过四个样式完成的：col-lg-*(大型设备)，col-md-*(中型设备)，col-sm-*(小型设备),col-xs-*(极小型设备)。不同的样式主要应该在不同的屏幕宽度上。但是问题是，我们如何确定要使用何种栅格呢？我一直强调会由bootstrap自动检测。

bootstrap栅格布局介绍

5、这些媒体宽度决定使用不同的容器(.container),所有的栅格一定要建立在容器之中。

bootstrap栅格布局介绍

6、栅格使用要求如下图：

bootstrap栅格布局介绍

7、为了更好的理解，下面实现一个简单的栅格操作：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

pageContext.setAttribute("APP_PATH",request.getContextPath());

</script>

<html>

<body>

</div>

</body>

</html>

bootstrap栅格布局介绍

8、运行程序，查看运行结果。此时可以发现，栅格会根据屏幕宽度的改变，而自动的进行排版。

bootstrap栅格布局介绍

9、利用栅格实现下面的效果：栅格跨列，如果你需要跨列，那么就写多少个列。

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

pageContext.setAttribute("APP_PATH",request.getContextPath());

</script>

<html>

<body>

</div>

</div>

</div>

</body>

</html>

bootstrap栅格布局介绍

10、列偏移介绍。

使用列偏移：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

pageContext.setAttribute("APP_PATH",request.getContextPath());

</script>

<html>

<body>

</div>

</div>

</body>

</html>

bootstrap栅格布局介绍

11、除了可以进行整体栅格操作（代码之中需要清除的是栅格就相当于一个表格），所以栅格依然是可以嵌套的。

bootstrap栅格布局介绍

12、栅格嵌套：

内嵌栅格1

</div>

内嵌栅格2

</div>

</div>

bootstrap栅格布局介绍

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。