您好,欢迎访问一九零五行业门户网

bootstrap有几种容器

bootstrap有2种容器:1、固定布局容器,将默认栅格放到“class=container”的容器中即可创建固定布局;2、流式布局容器,将流式栅格放到“class=container-fluid”的流式容器中即可创建流式布局。
本教程操作环境:windows7系统、bootsrap3.3.7版、dell g3电脑
bootstrap容器
在bootstrap中容器是响应式布局的基础, bootstrap推荐将所有内容都定义在容器之中,且容器是启用bootstrap栅格系统必不可少的前置条件。
bootstrap提供了两种类型的布局容器,一种是固定宽度的布局容器,一种是流式布局容器。将栅格放在某种容器中,即可实现相应的布局。
固定布局
将bootstrap的默认栅格放到 class=container 的容器中,即可创建固定宽度的布局。固定布局在整个页面上居中显示。如:
<body> <div class="container"> ... </div></body>
效果如下图所示(bootstrap固定布局容器):
简单的讲,就是将内容统统放到 class="container" 的容器中,即可创建居中、固定宽度的布局。具体实例如下:
<body> <div class="container"> <div class="row"> <div class="span4">span4</div> <div class="span8">span8</div> </div> <div class="row"> <div class="span3">span3</div> <div class="span6">span6</div> <div class="span3">span3</div> </div> </div></body>
布局效果如下图所示(bootstrap固定布局实例):
流式布局
同理,将bootstrap的流式栅格放到 class="container-fluid" 的流式容器中,即可创建流式布局。流式布局将填满整个视口宽度。如:
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--sidebar content--> </div> <div class="span10"> <!--body content--> </div> </div></div>
布局效果如下图所示(bootstrap流式布局):
【相关推荐:《bootstrap教程》】
以上就是bootstrap有几种容器的详细内容。
其它类似信息

推荐信息