（1）bootstrap网页布局

来源：互联网发布：蜂窝移动数据打不开编辑：程序博客网时间：2024/06/11 10:41

导读：暑假在巩固自己的前端知识，也学着使用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>

代码截图：

效果截图：
效果图

阅读全文

0 0