bootstrap------栅格系统

来源：互联网发布：寄生虫学怎么学知乎编辑：程序博客网时间：2024/06/14 17:55

个人比较喜欢bootstrap这个框架然后自己也用这个框架写过很多的界面，但是里面的很多内容自己并没有很好的利用到，所以结合开发文档自己准备写一些自己觉得比较好玩的且使用的一些内容并且附上源码，当然内容也包括自己写过程中遇到的错误。

今天写的是栅格系统，在平时的使用过程中主要用到的我觉得可以在导航栏，网页的底部（可以写多排的显示），照片排版

我们首先要知道container，在我的浏览器上body显示的是794*900 div.container 750*900自己可以写简单的代码去测试一下。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><link rel="stylesheet" href="css/bootstrap.css" /><style>.container{background-color: red;height: 900px;}</style></head><body><div class="container"></div></body></html>

接着说col-md-X当然里面还有别的介绍我没用到就不具体介绍了，要记住col-md-X把container平均分成12个小份。具体内容可以自己尝试写调整一下，关于最下面出现的问题，是因为宽度适应的问题具体看截图就很清楚了。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>栅格参数</title><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script><link rel="stylesheet" href="css/bootstrap.css" /><style>.col-md-1{background-color: red;}.col-md-2{background-color: black;}.col-md-3{background-color: gray;}.col-md-6{background-color: yellow;}</style></head><body><div class="container"><div class="row"><div class="col-md-1">1</div><div class="col-md-2">2</div><div class="col-md-3">3</div><div class="col-md-6">6</div></div><hr /><div class="row"><div class="col-md-3"><img src="images/11.jpg"  width="100%" /></div><div class="col-md-3"><img src="images/1.jpeg"  width="100%" /></div><div class="col-md-3"><img src="images/1.jpeg"  width="100%" /></div><div class="col-md-3"><img src="images/1.jpeg"  width="100%" /></div></div>        <hr /><div class="row"><div class="col-md-3"><img src="images/11.jpg"></div><div class="col-md-3"><img src="images/11.jpg"></div><div class="col-md-3"><img src="images/11.jpg"></div><div class="col-md-3"><img src="images/11.jpg"></div></div></div></body></html>

这是写的第一个很喜欢布局的class,接下来还会写一些新的比较实用布局的class。

写代码最好可以举一反三，自己主动去尝试主动去写，加油，一直小菜鸟正在努力的路上！

阅读全文

0 0