Bootstrap（二）: 栅格系统

最新推荐文章于 2024-05-01 21:12:48 发布

榴莲丸子

最新推荐文章于 2024-05-01 21:12:48 发布

阅读量650

点赞数

分类专栏： css bootstrap 文章标签：学习

本文链接：https://blog.csdn.net/tuyi5078/article/details/79881984

版权

bootstrap 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

接着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。

榴莲丸子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap（二）: 栅格系统

接着Bootstrap（一）: 简介及使用方法点击打开链接，继续学习bootstrap中的栅格系统栅格系统的作用：栅格系统是用于分割页面宽度的。比如说，我们现在想要将一个页面等分成4份，之前的做法是，给这4个块添加一个相同的类设置这个类的格式，让它们的宽度为25%，然后向左浮动。&lt;style&gt; .col-4{ width: 25%; floa...
复制链接

扫一扫