Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器。
如加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。
查看bootstrap.css可知.row类的样式为:
.row {
margin-left: -20px;
*zoom: 1;
}
<h2>栅格系统</h2>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1" >1</div>
<div class="span1" >1</div>
<div class="span1" >1</div>
<div class="span1" >1</div>
<div class="span1" >1</div>
<div class="span1" >1</div>
<div class="span1" >1</div>
<div class="span1" >1</div>
<div class="span1" >1</div>
</div>
<div class="row show-grid">
<div class="span2">2</div>
<div class="span3">3</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span5">5</div>
</div>
<div class="row show-grid">
<div class="span9">9</div>
</div>
</div>
- 大小: 4 KB
分享到:
相关推荐
这是从bootstrap源码中提取出来有关栅格系统的源码
利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。 下面是一些颇受关注的亮点: 从Less迁移到Sass: ...
bootstrap 导航条 栅格系统 Carousel(轮播效果) 标签页 简单好用有注释效果图在 http://blog.csdn.net/dingsai88/article/details/42970767
bootstrap-24grid bootstrap框架制定版下载 24栅格系统更适合中文网页 原版默认是12格,间距超大,不适合中文网页,这个是24格指定版本
Bootstrap栅格系统
真正解决bootstrap在ie8、ie9下栅格不兼容问题
前端栅格系统样式 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个人简历响应式网页模板基于Bootstrap3.3.1制作,自适应分辨率,兼容PC端和移动端,单页面多栏目设计,有首页、关于我、画廊、联系等网站栏目。
本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考,具体如下: 先来看看效果图: 具体代码如下(某管理系统的Bootstrap实现): <!DOCTYPE ...
bootstrap 与IE8不兼容,经过无数次尝试,终于真正解决了不识别栅格问题
bootstrap栅格系统响应式布局,根据浏览器不同宽度进行自适应地样式响应调整,使pc、平板、手机三端不同风格完美融合~
12栅格系统是BootStrap的核心功能,也是响应式设计核心理念的一个实现方式。 1.1.1 实现原理 栅格布局原理:定义容器大小,平分12分,在调整内外边距,最后结合媒体查询,制作出强大响应式的栅格系统。 1.最外层的...
(2)全局css样式 {栅格系统} (3)组件 (4)js插件 (5)定制 {less动态样式语言} 提示:Bootstrap知识点不难,但难点 1000+ 单词忆 3.4:Twitter Bootstrap--起步 #下载: http://www.bootcss.com/ css/fonts/js ...
主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下
Bootstrap3修改版 原有的12个栅格改为24个,方便控制多元素行
一个栅格系统,使用bootstrap,达到响应式布局
NULL 博文链接:https://onestopweb.iteye.com/blog/2266382
下面就简单介绍一下Bootstrap栅格系统的工作原理: 行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。使用行(row)在水平方向创建一组列(cpumn)。你的内容应当放置于列...
栅格系统 更好地帮助你学习前端
bootstrap栅格系统.zip