接着Bootstrap(一): 简介及使用方法 点击打开链接,继续学习bootstrap中的栅格系统
栅格系统的作用:
栅格系统是用于分割页面宽度的。比如说,我们现在想要将一个页面等分成4份,之前的做法是,给这4个块添加一个相同的类设置这个类的格式,让它们的宽度为25%,然后向左浮动。
<style>
.col-4{
width: 25%;
float: left;
}
</style>
<div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
效果图:
这样做还远远不够,因为我们将页面不断缩小时,会发现,每一块之间都没有间隔,而且当页面缩小时,这个页面布局还是以等分4块的布局展示出来,没有做到响应式布局。
效果图:
在bootstrap中,设置了很好的栅格系统,有效的解决了上述的两个问题。使用语句:
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa doloribus, eius.</div>
在这里,div中间的内容是你要写在页面上的内容。这里的col-md-3就是bootstrap中针对栅格系统定义的类。在bootstrap中,将这个页面分为12份,'3'代表该板块要占据母元素中3份,也就是12份当中的3份,整个页面宽度的25%。'md'代表当整个页面为多大时会发生响应式布局的效果,含有四个参数:lg(大宽度)、md(中等宽度)、sm(小宽度)、xs(自动宽度),具体宽度见下表:
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
---|---|---|---|---|
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
将上面的实例改为引入bootstrap样式:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
<title>Document</title>
<style>
.col-sm-3{
float: left;
}
</style>
</head>
<body>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa doloribus, eius.</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa doloribus, eius.</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa doloribus, eius.</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa doloribus, eius.</div>
</body>
</html>
在这里,我给.col-sm-3这个类添加了一个float: left样式,才使他们在整个页面中等分为4份分布,如果不添加这个样式,上面代码的所有内容会始终只分布在整个页面左边的1/4处。
效果图:
当页面缩小时:
它会自动完成响应式布局的分布,便于阅读,而且每一块会自动添加一个padding。