<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>栅格系统</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .a{ height: 50px; border: 1px solid #ccc; background-color: #eee; } </style> </head> <body> <!-- <div class="container"> <div class="row"> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> </div> <div class="row"> <div class="col-md-9 a">9</div> <div class="col-md-3 a">3</div> </div> <div class="row"> <div class="col-md-4 a">4</div> <div class="col-md-4 a">4</div> <div class="col-md-4 a">4</div> </div> </div> --> <!-- <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> </div> </div> --> <div class="container"> <div class="row"> <div class="col-md-8 a">8</div> <div class="col-md-3 col-md-offset-1 a">3</div> </div> <div class="row"> <div class="col-md-9 a" style="padding: 0"> <div class="col-md-4 a">4</div> <div class="col-md-4 a">4</div> <div class="col-md-4 a">4</div> </div> <div class="col-md-3 a">3</div> </div> <div class="row"> <div class="col-md-9 col-md-push-3 a">9</div> <div class="col-md-3 col-md-pull-9 a">3</div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
相关推荐
Bootstrap栅格系统
12栅格系统是BootStrap的核心功能,也是响应式设计核心理念的一个实现方式。 1.1.1 实现原理 栅格布局原理:定义容器大小,平分12分,在调整内外边距,最后结合媒体查询,制作出强大响应式的栅格系统。 1.最外层的...
本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式、移动设备优先的流式栅格系统。 一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏幕和设备等宽...
bootstrap栅格系统响应式布局,根据浏览器不同宽度进行自适应地样式响应调整,使pc、平板、手机三端不同风格完美融合~
本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考,具体如下: 先来看看效果图: 具体代码如下(某管理系统的Bootstrap实现): <!DOCTYPE ...
前端栅格系统样式 css样式 bootstrap.css bootstrap.css.map bootstrap.min.css bootstrap.min.css.map bootstrap-theme.css bootstrap-theme.css.map bootstrap-theme.min.css bootstrap-theme.min.css.map fonts ...
主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下
这是从bootstrap源码中提取出来有关栅格系统的源码
栅格系统 更好地帮助你学习前端
一个栅格系统,使用bootstrap,达到响应式布局
bootstrap栅格系统.zip
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列...
主要介绍了bootstrap3.0教程之栅格系统案例,包括栅格选项、从堆叠到水平排列、移动设备和桌面、Responsive column resets、列偏移、嵌套列、列排序,需要的朋友可以参考下
Bootstrap3修改版 原有的12个栅格改为24个,方便控制多元素行
任务3 Bootstrap栅格系统.doc
基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于...
02.Bootstrap栅格系统原理.rar
03.Bootstrap栅格系统用法.rar
Bootstrap栅格源码