【前端知识体系-CSS相关】Bootstrap相关知识
程序员文章站
2022-03-23 08:44:19
本文介绍了如何使用Bootstrap实现响应式布局,如何定制自己的响应式框架,Bootstrap响应式底层原理和模拟实现。 ......
1.bootstrap 的优缺点?
- 优点:css代码结构合理,现成的代码可以直接使用(响应式布局)
- 缺点:定制流程较为繁琐,体积大
2.如何实现响应式布局?
- 原理:通过media query设置不同分辨率的class
- 使用:为不同分辨率选择不同的class
3.如何定制自己的bootstrap样式?
- 使用css同名类覆盖(门槛低,见效快,可能会有bug)
- 修改源码重新构建(一次性彻底解决)
[
bootstrap.scss是入口文件,修改这个文件内容之后,使用node-sass重新编译scss文件
node-sass --output-style expanded bootstrap/custom/scss/bootstrap.scss > bootstrap/custom/dist/css/bootstrap.css
] - 引用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事件
上一篇: 美不胜收的美女图片,各类好看,各类妖娆。
下一篇: 平鱼和鲳鱼的区别,原来一直误会了……