(BootStrap-栅格系统)的使用
大家好,这一期我们介绍BootStrap中的栅格系统的使用,由于最近打算自己搭建一个博客并且打算先从前台写起,为了适配不同分辨率的设备，所以打算借助BootStrap这款css框架来实现,暂且先不关注源码,先学会用。
-什么是栅格系统?
=> 栅格系统就是可以将一组块级元素水平排列并可以随着屏幕分辨率的不同来改变块级元素样式的。
行,这样说有点懵。
对比下:
-1).在没有使用BootStrap的时候我们来显示一行div元素
<style>
.container {
margin: 0 auto;
width: 1200px;
background: pink;
}
.container div {
float: left;
width: 300px;
height: 50px;
background: green;
}
</style>
...
<div class="container">
<div>div-1</div>
<div>div-2</div>
<div>div-3</div>
<div>div-4</div>
</div>
原始的写法并不可以实现响应式,即随着屏幕分辨率的改变浏览器中的一行div的位置样式并没有改变。
-2).使用BootStrap的时候我们来显示一行div元素
<!-- 测试样式 -->
<style>
.row-1,
.row-2 {
background: pink;
}
.row-1 div[class^=col],
.row-2 div[class^=col] {
background: purple;
text-align: center;
}
</style>
...
<!-- 固定容器 -->
<div class="container">
<!-- 第一行开始 -->
<div class="row row-1">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
</div>
<!-- 第一行结束 -->
<!-- 第二行开始 -->
<div class="row row-2">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
</div>
<!-- 第二行结束 -->
</div>屏幕分辨率为 >= 992px的时候
屏幕分辨率为 >= 768px 且 < 992px的时候
屏幕分辨率为 >= 576px 且 <= 768px的时候
屏幕分辨率为 < 576px的时候
由上面的图所示我们使用BootStrap可以轻松的就实现了响应式布局。
-为什么要使用栅格系统?
因为他可以帮助我们快速搭建一个类似导航的响应式的块级元素集合
-怎么使用栅格系统?
-1).导入BootStrap中的css样式文件
-2).导入js的jQuery文件
-3).导入BootStrap中的js样式文件
-4).明白概念:
-1.在BootStrap中一行分为12个部分。
-2.12部分其中的一个内容块中依然可以嵌套一个'行'。
-3.我们应该先用类container将我们需要展示的元素包裹住。
-4.再通过类row将元素分行。
-5再在每个内容块中加上适配内容。
贴一次完全的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="BootStrap,栅格系统之标识,响应式">
<meta name="description" content="栅格系统之标识">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>栅格系统之标识</title>
<!-- 导入BootStrap的css样式 -->
<link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- 导入js的jQuery -->
<script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>
<!-- 导入BootStrap的js文件 -->
<script src="../node_modules/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
<!-- 测试样式 -->
<style>
.row-1,
.row-2 {
background: pink;
}
.row-1 div[class^=col],
.row-2 div[class^=col] {
background: purple;
text-align: center;
}
</style>
</head>
<body>
<!-- 在BootStrap中的栅格系统中有4种标识(lg、md、sm、xs) -->
<!-- lg => 大屏幕PC端=> 分辨率>= 992px
md => 中屏幕PC端=> 分辨率>=768px 且 <992px
sm => 平板=> 分辨率>=576px 且 <768px
xs => 移动手机=> 分辨率<576px
-->
<!-- 固定容器 -->
<div class="container">
<!-- 第一行开始 -->
<div class="row row-1">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
</div>
<!-- 第一行结束 -->
<!-- 第二行开始 -->
<div class="row row-2">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3 col-md-6 col-sm-6 col-xs-12</div>
</div>
<!-- 第二行结束 -->
</div>
<script>
window.onload = function () {
'use strict'
}
</script>
</body>
</html>这样书写出来的代码大意就是在992分辨率往上的一行显示4个div
在768~992分辨率的一行显示3个div
在576~768分辨率的一行显示2个div
在576往下分辨率的一行显示1个div
如此BootStrap的栅格系统的使用便完成啦!