其三篇bootstrap 网格基础

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

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

<div class=”row”>

        <div class=”col-sm-2″>col2</div>

        <div class=”col-sm-10″>col10</div>

</div>

亮效果如下:

 图片 1

 

加以了Class=”row”的样式表示行,加了class=”col-sm-2”的体表示列,系统将全屏幕分为12卖,col-sm-2表示该列跨2客,col-sm-10比表示该列跨10份。显示的效能就算会见使达到图所示,表示无异尽两排列,第一排列占2客,第二排占10份。

bootstrap是一个响应式的前端框架,体现于网格系统受不怕是对准应于不同的来得大小的设施,可以呈现出不同之展示力量。如下所示:

<div class="row">

    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-个4</div> 

</div>

 

 

Col-md-8表示以中游屏幕仍平常台式机及笔记本下该列占8份。Col-xs-12表示于稍屏幕照机械电脑下该列占12卖。以上代码表示在普通台式机和笔记本下一样实践两排,第一列占8卖,第二排列占4客,在机械电脑下一样尽两排,第一排占12卖,第二列占6卖。通过这个种植方法达成在不同之显得设备及显得不同功效。可以经调整浏览器的大大小小来学一下顿时简单种植情景。

产图表示Bootstrap 的网格系统是什么在余屏幕设备上行事之

 图片 2

 

 

相关文章