响应式网格布局

最新推荐文章于 2024-07-21 17:23:08 发布

sunyueru

最新推荐文章于 2024-07-21 17:23:08 发布

阅读量1k

点赞数

分类专栏：前端开发文章标签： bootstrap 响应式网格布局框架

本文链接：https://blog.csdn.net/sunyueru/article/details/75093964

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言：之前一直没有 学习bootstrap框架，所以就着这次机会就学习了一下bootstrap框架如何使用。首先先针对任务八提出的响应式网格布局总结一下，然后再总结一下bootstrap的基本使用方法。

一、任务八总结：
要求说明：
刚看到要求的时候完全不知道怎么下手，也是review了别人的代码之后才知道网格布局的实现原理。这里就算是学习总结一下，下次就知道怎么写了。
这里写图片描述

代码实现：

  <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6"></div>
            <div class="col-md-4 col-sm-6"></div>
            <div class="col-md-4 col-sm-12"></div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-3"></div>
            <div class="col-md-6 col-sm-6"></div>
            <div class="col-md-3 col-sm-3"></div>
        </div>
        <div class="row">
            <div class="col-md-1 col-sm-2"></div>
            <div class="col-md-1 col-sm-2"></div>
            <div class="col-md-2 col-sm-8"></div>
            <div class="col-md-2 col-sm-3"></div>
            <div class="col-md-6 col-sm-3"></div>
        </div>
    </div>

样式：

*{
    margin:0;
    padding: 0;
}
.container{
    box-sizing: border-box;
    padding: 10px;
}
.row:before,
.row:after{
    content:"";
    display:table;
    clear: both;
}
[class *='col-']{
    box-sizing: border-box;
    float: left;
    background-color: #eee;
    border: 1px solid #999;
    height: 50px;
    margin:10px;
}
/*大于768px*/
@media (min-width: 769px) {
    .col-md-1{
        width: calc( 8.333% - 20px );
    }
    .col-md-2{
        width: calc( 16.666% - 20px );
    }
    .col-md-3{
        width: calc( 25% - 20px );
    }
    .col-md-4{
        width: calc( 33.333% - 20px );
    }
    .col-md-6{
        width: calc( 50% - 20px );
    }
}
/*小于768px*/
@media (max-width: 768px) {
    .col-sm-2{
        width: calc( 16.666% - 20px );
    }
    .col-sm-3{
        width: calc( 25% - 20px );
    }
    .col-sm-6{
        width: calc( 50% - 20px );
    }
    .col-sm-8{
        width: calc( 66.666% - 20px );
    }
    .col-sm-12{
        width: calc( 100% - 20px );
    }

代码总结：

@media媒体查询
calc（）函数
css选择器

1、@media
css3的一个属性，直接参考案例：
如果文档宽度小于300px则修改背景颜色：

@media all and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

2、calc()函数
函数本身很简单，注意点就是： **calc( 25% - 20px )**25%和“减号”之间需要有一个空格，否则失效。
关键是能想到使用这个函数来防止因为margin值而使得总体宽度超过预设值出现不必要的自动换行的现象。这点还是值得学习一下。
3、css选择器
之前一般都用class和id，以及*通用三种选择器。结合本栗子，我们需要选中所有row下面的div，其实可以有很多方法。
这里用：[class *=’col-‘]
这里写图片描述
看了官方介绍就明白了吧。
此外，还可以写成：[class |=col]

应该也有其他的方式选到你要的所有的div的，这里不再详细说明了。
就是参考手册没事要多看几眼，用到的时候才能想起了有这些个方法。
http://www.w3school.com.cn/cssref/css_selectors.asp

二、bootstrap框架的使用
这两天才开始看这个框架的相关知识。虽然简单易上手，但是要熟能生巧才可以用得好。后面再不断实践吧。
下面简单说一下框架的使用：
首先在head标签内添加

 <meta name="viewport" content="width=device-width, initial-scale=1">

为什么要引入这个呢？因为这个框架是移动设备优先的。为了确保适当的绘制和触屏缩放。width为设备的宽度，同时网页加载的时候以1：1比例呈现，就是这个意思。

接下来就是在head标签内引入三个文件，让一个html文件变成bootstrap模板。分别是： jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件。因为bootstrap的js是依赖jQ的，所以必须要引入jquery文件哦。

准备工作做好之后，接下来就是根据你自己的需求，查询对应的bootstrap官方使用文档，大致读懂代码里面每个块的意义，根据自己的需求修改就可以了。如果需要定制自己的bootstrap的话，需要学一下sass，这个之后再说（我还没开始学，晕。。。）

下面说一下今天尝试的几个小组件（小案例）的使用：
①bootstrap网格系统

基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

每个class名称都是bootstrap固定好的，如果要自定义其他的class名称不要冲突了。
使用方法就是最外层包裹一个container，然后有几行就有几个row块。每个row块内再按照自己的需求添加不同的网格选项：
这里写图片描述

以任务八为例，我们看一下用bootstrap框架是如何实现的：

<!DOCTYPE html>
<html>
<head>
    <title>grid example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
         *{
    margin:0;
    padding: 0;
}
.container{
  /*  box-sizing: border-box;*/
    padding: 10px;
}
/*.row:before,
.row:after{
    content:"";
    display:table;
    clear: both;
}*/
[class |=col]{
    box-sizing: border-box;
    /*float: left;*/
    background-color: #eee;
    border: 1px solid #999;
    height: 50px;
    /*margin:10px;*/
}
    </style>
</head>
<body>
<div class="container">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6"></div>
            <div class="col-md-4 col-sm-6"></div>
            <div class="col-md-4 col-sm-12"></div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-3"></div>
            <div class="col-md-6 col-sm-6"></div>
            <div class="col-md-3 col-sm-3"></div>
        </div>
        <div class="row">
            <div class="col-md-1 col-sm-2"></div>
            <div class="col-md-1 col-sm-2"></div>
            <div class="col-md-2 col-sm-8"></div>
            <div class="col-md-2 col-sm-3"></div>
            <div class="col-md-6 col-sm-3"></div>
        </div>
    </div>
</div>

</body>
</html>

就是按照基本格式搭建框架，设置好基本的背景颜色就可以了。

最近想用bootstrap框架模仿一个网站主页，如果做完了，之后再来追加关于bootstrap的使用心得吧。

sunyueru

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
响应式网格布局

前言：之前一直没有学习bootstrap框架，所以就着这次机会就学习了一下bootstrap框架如何使用。首先先针对任务八提出的响应式网格布局总结一下，然后再总结一下bootstrap的基本使用方法。一、任务八总结：要求说明：刚看到要求的时候完全不知道怎么下手，也是review了别人的代码之后才知道网格布局的实现原理。这里就算是学习总结一下，下次就知道怎么写了。代码实现： <div
复制链接

扫一扫

专栏目录