bootstrap有2种容器:1、固定布局容器,将默认栅格放到“class=”container””的容器中即可创建固定布局;2、流式布局容器,将流式栅格放到“class=”container-fluid””的流式容器中即可创建流式布局。
本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑
Bootstrap容器
在Bootstrap中容器是响应式布局的基础, Bootstrap推荐将所有内容都定义在容器之中,且容器是启用Bootstrap栅格系统必不可少的前置条件。
Bootstrap提供了两种类型的布局容器,一种是固定宽度的布局容器,一种是流式布局容器。将栅格放在某种容器中,即可实现相应的布局。
固定布局
将Bootstrap的默认栅格放到 class=”container” 的容器中,即可创建固定宽度的布局。固定布局在整个页面上居中显示。如:
...
登录后复制
效果如下图所示(Bootstrap固定布局容器):
简单的讲,就是将内容统统放到 class=”container” 的容器中,即可创建居中、固定宽度的布局。具体实例如下:
span4span8span3span6span3
登录后复制
布局效果如下图所示(Bootstrap固定布局实例):
流式布局
同理,将Bootstrap的流式栅格放到 class=”container-fluid” 的流式容器中,即可创建流式布局。流式布局将填满整个视口宽度。如:
登录后复制
布局效果如下图所示(Bootstrap流式布局):
【相关推荐:《bootstrap教程》】
以上就是bootstrap有几种容器的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2940679.html