bootstrap中的布局方式有哪些
这篇文章主要介绍了bootstrap中的布局方式有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇bootstrap中的布局方式有哪些文章都会有所收获，下面我们一起来看看吧。
bootstrap有2种布局方式：1、固定宽度的布局，将默认栅格放到“class="container"”的容器中，即可创建该布局；2、流式布局，将流式栅格放到“class="container-fluid"”的流式容器中，即可创建该布局。
本教程操作环境：Windows7系统、bootsrap3.3.7版、DELL G3电脑
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中的布局方式有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
