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 ></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 ></div>
[!NOTE]
關鍵點：mediaQuery, 浮動，回應式布局，resize事件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100479.html
標籤：Html/Css