下面是关于"bootstrap3.0教程之栅格系统案例"的一些详细讲解。
栅格系统简介
在制作一个网页时,我们通常会使用栅格系统来布局页面,把页面上的内容划分为若干个列和行,然后在列中放置内容。Bootstrap框架提供了一套非常好用的栅格系统,可以让你快速的创建响应式布局的页面。
栅格选项说明
Bootstrap栅格系统有5个选项,分别是:超小屏幕设备(<768px)、小屏幕设备(≥768px)、中等屏幕设备(≥992px)、大屏幕设备(≥1200px)和特大屏幕设备(≥1440px)。
从堆叠到水平排列
在 Bootstrap 中,如果你不显式地指定栅格布局类,那么所有的列都会自动堆叠在一起,形成一个垂直的布局。你可以使用栅格系统来将一列内容分割成几个区块,或者将多列内容组合成更复杂的布局。
下面是一个从堆叠到水平排列的示例:
<div class="container">
<div class="row">
<div class="col-sm-4">列1</div>
<div class="col-sm-4">列2</div>
<div class="col-sm-4">列3</div>
</div>
</div>
在这个示例中,.container
包裹了整个栅格系统,.row
类用来创建一些列,并且在列中包含栅格类,如.col-sm-4
。这三个 .col-sm-4
类表示,在小屏幕(≥768px)以上,将每行分为3列。
移动设备和桌面平台的排列
在 Bootstrap 中,你可以使用推荐的col-xs-类来为超小屏幕设备设置一些列布局,使用col-sm-类为小屏幕及以上设备设置列布局。如果你想要为大屏幕设备增加一些特殊的布局,可以使用col-md-类。如果你想要为特大屏幕设备设置一些特殊的布局,可以使用col-lg-类。
下面是一个移动设备和桌面平台的排列示例:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">1</div>
<div class="col-sm-6 col-md-4 col-lg-3">2</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3">3</div>
<div class="col-sm-6 col-md-4 col-lg-3">4</div>
</div>
</div>
在这个列布局中,我们使用推荐的col-xs-*
类来设置了列的布局。在小屏幕设备上,每一行会显示两个列;在大屏幕设备上,每行会显示四个列。
我们还使用了clearfix
类来打断每一行的布局,并且可见性使用了.visible-sm-block
类,这样可以让此元素仅在屏幕尺寸小于768像素的视窗下可见,在更大的屏幕尺寸下自动隐藏。
以上就是关于Bootstrap 3.0栅格系统的一些基础说明和示例,希望能帮到你。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等 - Python技术站