欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【前端知识体系-CSS相关】Bootstrap相关知识

程序员文章站 2022-03-23 08:44:19
本文介绍了如何使用Bootstrap实现响应式布局,如何定制自己的响应式框架,Bootstrap响应式底层原理和模拟实现。 ......

1.bootstrap 的优缺点?

  • 优点:css代码结构合理,现成的代码可以直接使用(响应式布局)
  • 缺点:定制流程较为繁琐,体积大

2.如何实现响应式布局?

  • 原理:通过media query设置不同分辨率的class
  • 使用:为不同分辨率选择不同的class

3.如何定制自己的bootstrap样式?

  1. 使用css同名类覆盖(门槛低,见效快,可能会有bug)
  2. 修改源码重新构建(一次性彻底解决)
    [
    bootstrap.scss是入口文件,修改这个文件内容之后,使用node-sass重新编译scss文件
    node-sass --output-style expanded bootstrap/custom/scss/bootstrap.scss > bootstrap/custom/dist/css/bootstrap.css
    ]
  3. 引用scss源文件,修改变量(类似于预处理器的使用方式, 徐亚什么模块引入什么模块,会更加灵活,推荐)
    [
    1. 创建一个自己的custom.scss文件
    $primary: greed; @import './botstrap-custom/scss/bootstrap.scss'
    ]

4.如何实现一个响应式布局框架?

[!note]
面试常考考点,要求模拟实现boostrap的底层实现原理。

上面的[!note]是行匹配模式,默认情况下支持类型note,tip,warning和danger。

4.1 js的模拟实现

<style>
    .container{
    height: 40px;
       margin: 0 auto;
       background-color: rebeccapurple;
   }
</style>
<div class="container"></div>
<script>
    window.addeventlistener("load", function () {
        // 1. 获取容器
        let container = document.queryselector(".container");
        let clientw = 0;
        resize();
        // 2. 监听窗口的大小变化
        window.addeventlistener("resize", resize);
        function resize() {
            // 2.1 获取改变后的宽度
            clientw = window.innerwidth;
            // 2.2 判断
            if(clientw >= 1200){ // 超大屏幕
                container.style.width = "1170px";
            }else if(clientw >= 992){ // 大屏幕
                container.style.width = "970px";
            }else if(clientw >= 768){ // 小屏幕
                container.style.width = "750px";
            }else { // 超小屏幕
                container.style.width = "100%";
            }
        }
    });
</script>

4.2 css的模拟实现

<style>
        .container{
            height: 40px;
            margin: 0 auto;
            background-color: rebeccapurple;
        }

        /*媒体查询*/
        @media screen  and (max-width: 768px){
            .container{
                width: 100%;
            }
        }
     
        @media screen  and (min-width: 768px) and (max-width: 992px){
            .container{
                width: 750px;
            }
        }
        @media screen  and (min-width: 992px) and (max-width: 1200px){
            .container{
                width: 970px;
            }
        }
        @media screen  and (min-width: 1200px){
            .container{
                width: 1170px;
            }
        }
</style>
<div class="container"></div>

[!note]
关键点:mediaquery, 浮动,响应式布局,resize事件