bootstrap------栅格系统
2017-11-28 23:52
267 查看
个人比较喜欢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（四）栅格系统----在路上（8）
- Bootstrap--全局CSS样式之栅格系统
- Bootstrap 栅格系统
- Bootstrap教程：[4]栅格系统详解
- Bootstrap3 栅格系统-列排序
- 10、Bootstrap--栅格系统与按钮样式
- Bootstrap的全局css样式之栅格系统、表单和图片部分常用类.
- bootstrap入门 css栅格系统
- Bootstrap3基础 栅格系统 1行最多12列
- 如何使用BOOTSTRAP 栅格系统？
- 不喜欢bootstrap的栅格系统，太复杂了，我发明了一个最简洁的20列栅格系统
- Bootstrap栅格系统的使用和理解2
- Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
- Bootstrap中的栅格布局系统
- Bootstrap 栅格系统
- Bootstrap学习笔记-栅格系统
- Bootstrap栅格系统扩展 五格
- Bootstrap3 栅格系统-实例：响应列重置(Responsive column resets)
- Bootstrap3 栅格系统-列排序
- Bootstrap栅格系统用法--Bootstrap基础