bootstrap------栅格系统
2017-11-28 23:52
309 查看
个人比较喜欢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"></
4000
div>
<div class="col-md-3"><img src="images/11.jpg"></div>
</div>
</div>
</body>
</html>
这是写的第一个很喜欢布局的class,接下来还会写一些新的比较实用布局的class。
写代码最好可以举一反三,自己主动去尝试主动去写,加油,一直小菜鸟正在努力的路上!
今天写的是栅格系统,在平时的使用过程中主要用到的我觉得可以在导航栏,网页的底部(可以写多排的显示),照片排版
我们首先要知道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"></
4000
div>
<div class="col-md-3"><img src="images/11.jpg"></div>
</div>
</div>
</body>
</html>
这是写的第一个很喜欢布局的class,接下来还会写一些新的比较实用布局的class。
写代码最好可以举一反三,自己主动去尝试主动去写,加油,一直小菜鸟正在努力的路上!
相关文章推荐
- bootstrap 栅格系统
- 【6】了解Bootstrap栅格系统基础案例(1)
- Bootstrap 栅格系统
- Bootstrap栅格系统的使用和理解2
- bootstrap及栅格系统
- Bootstrap3.0学习第二轮(栅格系统原理)
- Bootstrap 栅格系统 理解与总结
- bootstrap系列之一栅格系统
- Bootstrap3 栅格系统-实例:响应列重置(Responsive column resets)
- Bootstrap3 栅格系统-列排序
- Bootstrap--全局CSS样式之栅格系统
- bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
- Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
- bootstrap 栅格系统 理解与总结
- Bootstrap 栅格系统 理解与总结
- bootstrap栅格系统
- bootstrap--栅格系统
- Bootstrap----------栅格系统
- Bootstrap入门书籍之(三)栅格系统
- Bootstrap3.0学习第三轮(栅格系统案例)