BootStrap 网格系统

网络系统

bootstrap允许将页面划分成共12个等宽逻辑单元,既允许单独地使用这12个等分逻辑单元,也可以将其相邻的列合并成一个更宽的逻辑单元,甚至在一个逻辑单元中再划分12个子逻辑单元。如下图所示:

网格用到的类样式Bootstrap的网络系统支持可响应式布局,当其列屏幕大小发生变化时则自动计算列宽。

共有4个:

xs (phones)

sm (tablets)

md (desktops)

lg (larger desktops)

下面是BootStrap网络的基本结构:

"row">

"col-*-*">

"row">

"col-*-*">

"col-*-*">

"col-*-*">

"row">

...

示例

下面的示例是Bootstrap官方提供的基于Bootstrap构造HTML面页基本模板。

"en">

Bootstrap Example

"utf-8">

"viewport"content="width=device-width, initial-scale=1">

"stylesheet"href="css/bootstrap.min.css">

"js/jquery.min.js">

"js/bootstrap.min.js">

"text/css">

div{

border-left:1px dotted blue;

border-bottom:1px dotted blue;

}

"row">

"col-sm-1">1

"col-sm-1">2

"col-sm-1">3

"col-sm-1">4

"col-sm-1">5

"col-sm-1">6

"col-sm-1">7

"col-sm-1">8

"col-sm-1">9

"col-sm-1">10

"col-sm-1">11

"col-sm-1">12

"row">

"col-sm-4">4-1

"col-sm-4">4-2

"col-sm-4">4-3

"row">

"col-sm-4">4

"col-sm-8">8

"row">

"col-sm-6">6-1

"col-sm-6">6-2

效果如下图所示:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 栅格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份,再调整内外边距,最后再结合媒体查询,就制作出了强大...
    hcxowe阅读 849评论 0 2
  • 基本用法:网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootst...
    子非鱼666阅读 489评论 0 2
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,974评论 3 184
  • Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、...
    郭豪豪阅读 2,465评论 0 8
  • 分手半年,在一起半年,自然而然的在一起,水到渠成的分手。没有几个人知晓,分手也是平平淡淡,没有歇斯底里,没有悲痛欲...
    阅读 1,243评论 0 1