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事件

【前端知识体系-CSS相关】Bootstrap相关知识的更多相关文章

  1. Atitit 知识图谱解决方案:提供完整知识体系架构的搜索与知识结果overview

    Atitit 知识图谱解决方案:提供完整知识体系架构的搜索与知识结果overview   知识图谱的表示和在搜索中的展1 提升Google搜索效果3 1.找到最想要的信息.3 2.提供最全面的摘要.4 ...

  2. 【前端知识体系-CSS相关】CSS工程化方案

    1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器 使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + ...

  3. 【前端知识体系-CSS相关】CSS预处理器

    1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CS ...

  4. 【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比

    CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 【前端知识体系-CSS相关】CSS布局知识强化

    1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { ma ...

  6. 【前端知识体系-CSS相关】CSS基础知识强化

    1.CSS样式(选择器)的优先级? 1.1 权重的计算规则 第一优先级:无条件优先的属性只需要在属性后面使用!important.它会覆盖页面内任何位置定义的元素样式.(ie6支持上有些bug). 第 ...

  7. 思维探索者:完善个人知识体系的重要性 Google只会告诉你结果

    http://www.nowamagic.net/librarys/veda/detail/1711前面说了,人类解决问题大部分时候会习惯性地使用联想思维,简言之就是首先枚举你关于这个问题能够想到的所 ...

  8. 【JVM 知识体系框架总结】

    JVM 内存分布 线程共享数据区: 方法区->类信息,静态变量 堆->数组对象 线程隔离区 虚拟机栈-> 方法 本地方法栈->本地方法库 native 堆.程序计数器 JVM ...

  9. [转帖]【JVM 知识体系框架总结】

    [JVM 知识体系框架总结] https://www.cnblogs.com/mousycoder/p/11612448.html JVM 内存分布 线程共享数据区:方法区->类信息,静态变量堆 ...

随机推荐

  1. 上传文件夹或上传文件到linux

    http://jingyan.baidu.com/article/d169e18658995a436611d8ee.html https://www.cnblogs.com/nbf-156cwl/p/ ...

  2. AppBoxFuture: 服务模型的在线调试与性能监测

      框架内的服务模型(ServiceModel)用于处理各类业务逻辑(如最简单的CRUD操作),在设计时以类似于伪代码的形式存在,发布时后端会通过Roslyn转换并编译为运行时代码.为了方便开发者作者 ...

  3. art-template的循环操作

    art-template的官方文档(网址:https://aui.github.io/art-template/docs/)中对循环的介绍如下: 循环 标准语法 {{each target}} {{$ ...

  4. 百万年薪python之路 -- 包

    包 使用import 和from xx import xx 现有如下结构 bake ├── __init__.py ├── api ├── __init__.py ├── policy.py └── ...

  5. SpringBoot 遇到 No identifier specified for entity

    No identifier specified for entity 从字面上不难看出来是没有设置主键 因为没有为标注为@Entity的实体类注明主键 import lombok.Data; impo ...

  6. 设计模式(六)Prototype模式

    Prototype模式就是不根据类来生成实例,而是根据实例来生成新实例.至于为什么不能根据类来生成实例,在最后会讲到. 还是根据实例程序来理解这种设计模式吧. 下面是实例代码. package Big ...

  7. Dotween 应用

    dotween是做缓动比较简单实用的插件,下面就使用经验进行浅谈 1)通用方法:如下图官网截图所示,如果看不懂可以跳过,这是一个通用方法,前两个参数为委托类型,可以用lambda表达式,也可以直接写成 ...

  8. JS旋转和css旋转

    js旋转 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <styl ...

  9. 关于dt分组、计数、排序的实例

    #region table去重复求和 var query = dt.Rows.Cast<DataRow>() .OrderByDescending(n => n["OPER ...

  10. Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

    近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...