发表于: 2020-03-10 23:16:56

1 1245


今日完成的事情

学习雪碧图自适应并简单应用


学习bootstrap4下拉框的使用


明日计划

完成下拉框


完成主体表格


遇到的问题

页面窗口高度缩小,图片会被拉伸缩放

<div class="location"></div>


.location {

    position: absolute;
    width: 5.8vw;
    height: 3.4vh;
    right: 2.5vh;
    /* border: 1px solid; */
    background: url(../img/6/6.pngno-repeat;

    background-size: 36.1vw 3.9vh;

    background-position:0 0;

}


使用vw vh作为单位,在pc端会过度拉伸缩放,在一般移动端影响较小

可在后期配合媒体查询为pc端适配

问题

col-xs-* 失效 

原因

引用的是bootstrap4 col-xs被删除

bootstrap4

bootstrap3


下拉选框结构也不相同

bootstrap4

bootstrap3


bootstrap4比3需多引用 

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

收获

区分了bootstrap4与3的一些区别,一些组件结构上比3更为简洁



返回列表 返回列表
评论

    分享到