bootstrap的原理

1.响应式布局

   简单地说，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

  这个概念是为解决移动互联网浏览而诞生的。

  产品：Boilerplate，Foundation，Ulkit，bootstrap这些框架

 

2.bootstrap这类响应式框架其底层实现原理就是媒体查询

  Bootstrap 核心 CSS 文件：https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css）

  压缩版本

  

 

  开发版本 

 

 

 

3.示例

 

<!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>

 

 

 

 

 

 

 

学习来源：https://blog.csdn.net/weixin_42855542/article/details/84350664

posted @ 2020-09-18 17:05  小窝蜗  阅读(569)  评论(0)    收藏  举报