导读：暑假在巩固自己的前端知识，也学着使用bootstrap来实践一下项目，以此来记录下自己学习的点滴。我相信平时微小的累积，定会让我成长成参天大树，加油。
（1）要点一：bootstrap的栅格系统。
介绍我就不详细展开了，看看官方文档即可，这里我给我一个我认为不错的链接:https://www.runoob.com/bootstrap/bootstrap-grid-system.html这里面的东西更全。
不管你怎么样布局，地基必须，记住是必须按照这样写
<body>
<div class="container-fluid" >
<div class="row" >
<div class="col-md-6" >
</div>
<div class="col-sm-6" >
</div>
...
</div>
<div class="row" >
<div class="col-sm-4">
</div>
<div class="col-sm-8">
</div>
</div>
<div class="row">
<div class="col-sm-12">
</div>
</div>
...
</div>
</body>解释一下：给你一张白纸，先画一个大的矩形contrainer当作窗口，再把这个矩形分成n行，最后把每一行分成m列，以后的css样式都放在这些列中。
如图所示：
（2）要点二：
现在的div只是虚幻般的存在，并不表现出上图网格的形状，所以我们这里要使每个格子“站起来”，使用min-heigh,min-width等样式就可以实现。另外还有一个小细节需要明白的，div的高度会随着其内部元素的增多而增加的。
我的代码如下：
加入的一下边框只是为了增强的展示效果。
<body>
<div class="container-fluid" style="border: 1px solid red;">
<div class="row" style=" border: 3px solid red;min-height:50px;">
<div class="col-md-6" style="border: 1px dashed green;">
</div>
<div class="col-sm-6" style="border: 1px dashed green;">
</div>
</div>
<div class="row" style="border:4px solid blue;min-height:450px;">
<div class="col-sm-4" style=" border: 1px dashed blue;min-height: 450px;max-width: 250px;">
</div>
<div class="col-sm-8" style=" border: 1px dashed blue;">
</div>
</div>
<div class="row" style="border: 1px solid red;min-height:50px;">
<div class="col-sm-12" style=" border: 1px dashed blue;">
</div>
</div>
</div>
</body>
代码截图：
效果截图：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
