bootstrap响应式栅格介绍
工具/原料
1
bootstrap
2
eclipse
方法/步骤
1
我们不想随着浏览器大小的改变，删除自动换行。
2
可以通过定义多种样式实现响应式布局实例。<%@ 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());%>
栅格1
栅格2
栅格1
栅格2
3
这样当页面大小减小时，我们的宽度就相应改变了。在栅格样式定义之中定义了多种栅格显示方式。那么如果说现在有一些内容比较多，会发现显示也不好看，我们可以隐藏一些样式。
4
响应式布局实例：<%@ 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());%>
特别小的设备隐藏 特别小的设备可见
中型的设备隐藏 中型的设备可见
5
针对于整个bootstrap而言，自动的设备响应式整个布局的关键。
特别小的设备隐藏 特别小的设备可见
6
针对于显示操作方式在bootstrap3.2开始出现了一些变化。总体来说，栅格布局的总结如下：
上一篇：不吃药怎么治胃病