美文网首页我爱编程
bootstrap学习笔记(四)栅格系统

bootstrap学习笔记(四)栅格系统

作者: bruce_wu | 来源:发表于2016-06-05 22:13 被阅读78次

bootstrap的12栅格系统就是把网页的总宽度平均分为12等份，方便我们自由使用组合。bootstrap还提供了更灵活的栅格系统，即栅格系统所使用的总宽度可以不固定，你可以针对一个div元素使用12等分的栅格，因为bootstrap是按照百分比进行12等分的。

栅格系统的主要工作原理：

  1. 行(.row)必须包含在.container中，以便为其赋予合适的对齐方式和padding。
  2. 使用行(.row)在水平方向创建一组 .col。
  3. 具体内容应放在.col中，而且只有.col可以作为.row的直接子元素。
  4. 内置了一堆样式，可以使用.row和.col-xs-4这样的样式来使用栅格布局。
  5. 通过设置padding来设置.col之间的间隔，然后通过设置第一列和最后一列的margin为负值抵消掉padding带来的影响。
  6. 栅格系统中的列通过制定1到12的值来表示其跨越的范围。

相关文章

  • Bootstrap学习资源

    bootstrap笔记总结 Bootstrap入门笔记之（三）栅格系统 我的Bootstrap笔记，常用类名知...

  • bootstrap学习笔记(四)栅格系统

    bootstrap的12栅格系统就是把网页的总宽度平均分为12等份，方便我们自由使用组合。bootstrap还提供...

  • bootstrap栅格系统分析

    bootstrap栅格系统 bootstrap栅格系统是bootstrap的核心以及精髓所在 一、容器 1.流体容...

  • 栅格化系统在设计中的运用

    刚开始对栅格系统有很多疑惑，什么是栅格化系统？Bootstrap中为什么要使用栅格系统？设计师为什么要学习栅格系统...

  • 第三谈：对齐与排列

    本节课我们来开始学习 Bootstrap 的栅格对齐和排列，以实现更加灵活的布局操作。 一．栅格对齐 对于栅格系统...

  • Bootstrap响应式栅格布局实现方法

    栅格系统的原理 Bootstrap的栅格系统下面我们将一起来看一下常见的栅格布局的设计和bootstrap中的设计...

  • bootstrap栅格化系统

    Bootstrap栅格化系统 Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类...

  • some useful links

    栅格系统Bootstrap可视化布局系统Github Desktop

  • 第二谈：布局系统

    本节课我们来开始学习 Bootstrap 布局知识，了解栅格系统以及如何分配列、栅格等级并且简单了解不同等级的作用...

  • bootstrap学习笔记(五)栅格系统用法

    栅格系统的使用其实就是栅格的列的不同组合方式. 列的组合上代码: 1 .......省略10个跟上面一样的di...

网友评论

    本文标题：bootstrap学习笔记(四)栅格系统

    本文链接：https://www.haomeiwen.com/subject/qturdttx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    我爱编程

    关于我们|服务条款|联系我们|bootstrap学习笔记(四)栅格系统|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！