bootstrap的底层原理原来是.........

最新推荐文章于 2024-04-27 23:07:09 发布

婆婆丁的成长记

最新推荐文章于 2024-04-27 23:07:09 发布

阅读量6k

点赞数

文章标签： bootstrap css media

本文链接：https://blog.csdn.net/weixin_42855542/article/details/84350664

版权

什么是响应式布局？
简单地说，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
在说到响应式，很多人会立刻想到：
Boilerplate，Foundation，Ulkit，bootstrap这些框架。

而以下，我将就Twitter推出的bootstrap为例，毕竟最火，使用的人也多。

类似bootstrap这类响应式框架其底层实现原理就是媒体查询，
在这里插入图片描述
（来自Bootstrap 核心 CSS 文件：https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css）
上述我并选择打开开发版，而是压缩版，是为了证明即使是压在了一起，仍是万码丛中一@，清晰可见。换成开发版：
在这里插入图片描述

在这简单的做个小实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media screen and (max-width:480px){
            .ads {
                display:none;
            }
        }
    </style>
</head>
<body>
<img class="ads" src="http://imgsrc.baidu.com/imgad/pic/item/2934349b033b5bb574039a2a3cd3d539b700bc0a.jpg" alt="">

<script>

</script>
</body>
</html>

当max-width:480px，即你屏幕缩到<=480px时,类名为ads的标签display：none。
是不是响应了呢？！

我们进入v3版本的bootstrap
（bootstrap：https://v3.bootcss.com/getting-started/）

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--jq必须有，bootstrap核心js文件依赖jq-->
<script     src="http://code.jquery.com/jquery-3.3.1.js"  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="    crossorigin="anonymous"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap 本着移动设备优先的策略开发的，按照这一策略，我们优先为移动设备优化代码，然后根据每个组件的情况并利用 CSS 媒体查询（CSS media queries）技术为组件设置合适的样式。所以下述标签，最好也务必放上

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为 最多12列

在这里插入图片描述
即：

注意
column必须在row里，row必须在.container的容器里
根据col-xx-？中的xx浏览器会根据判断是xs、sm、md、lg进行响应，所以需要加相对应的类名，才能实现我们的多分辨率屏响应。

<div class="container">
    <div class="colum" >
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
        <div class="col-md-1 col-xs-1">.col-md-1</div>
    </div>
</div>

婆婆丁的成长记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap的底层原理原来是.........

什么是响应式布局？简单地说，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。在说到响应式，很多人会立刻想到：Boilerplate，Foundation，Ulkit，bootstrap这些框架。而以下，我将就Twitter推出的bootstrap为例，毕竟最火，使用的人也多。类似bootstrap这类响应式框架其底层实现原理就是媒...
复制链接

扫一扫