你的位置:首页 > 网页设计

[网页设计]第三篇bootstrap 网格基础


Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里,可以是div,内容放置在列内,网页设计中的网格用于布局内容,让网站易于浏览,下面是一个用bootstrap网格布局的例子。

<div >

        <div >col2</div>

        <div >col10</div>

</div>

显示效果如下:

 

 

加了Class=”row”的样式表示行,加了class=”col-sm-2”的样式表示列,系统将整个屏幕分为12份,col-sm-2表示该列跨2份,col-sm-10比表示该列跨10份。显示的效果就会如上图所示,表示一行两列,第一列占2份,第二列占10份。

bootstrap是一个响应式的前端框架,体现在网格系统中就是对应于不同的显示大小的设备,可以呈现出不同的显示效果。如下所示:

<div >
    <div >.col-xs-12 .col-md-8</div> 
<div >.col-xs-6 .col-md-4</div> 
</div>

 

 

Col-md-8表示在中等屏幕比如普通台式机和笔记本下该列占8份。Col-xs-12表示在小屏幕比如平板电脑下该列占12份。以上代码表示在普通台式机和笔记本下一行两列,第一列占8份,第二列占4份,在平板电脑下一行两列,第一列占12份,第二列占6份。通过此种方式达到在不同的显示设备上展示不同效果。可以通过调整浏览器的大小来模拟一下这两种情况。

下图表示Bootstrap 的网格系统是如何在多种屏幕设备上工作的