邪修 Bootstrap，10 段“千萬別上生產(chǎn)”的黑魔法代碼
——僅供技術(shù)獵奇，切勿真用！

?? 每條都可能：布局崩壞、性能爆炸、可訪問性歸零、設(shè)計規(guī)范原地裂墳

面試炫技 OK，項目敢用就等死！

1?? 全站旋轉(zhuǎn)木馬（一行搞定）

<style>
html{animation:spin 10s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
</style>

整頁像陀螺，用戶 3 秒眩暈，Bootstrap 的 container 也救不了。

2?? 負(fù)邊距黑洞

.row > *{margin:-9999px;}

.row 的柵格直接飛出銀河系，滾動條長度 = ∞。

3?? !important 核爆

*{color:#fff!important;background:#000!important;}

一鍵清空所有主題色，設(shè)計師當(dāng)場掀桌。

4?? 柵格無限嵌套

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-12">
          <div class="row">…無限嵌套</div>
        </div>
      </div>
    </div>
  </div>
</div>

每嵌套一次 DOM 深度 +1，內(nèi)存直線上升。

5?? 動態(tài)卡片數(shù)量炸彈

// 用 jQuery 邪修版
for(let i=0;i<1e4;i++)
  $('.container').append('<div class="card">??</div>');

1 萬張 .card 瞬間生成，Chrome 直接 OOM。

6?? 隱藏 .modal-backdrop 導(dǎo)致全屏點(diǎn)擊

.modal-backdrop{opacity:0!important;}

模態(tài)框背景透明，用戶以為頁面可點(diǎn)，實則全部被攔截。

7?? 懸浮提示無限層級

.tooltip{z-index:2147483647!important;}

提示永遠(yuǎn)在最頂層，蓋住瀏覽器 DevTools。

8?? 按鈕禁用偽裝

<button class="btn btn-primary" disabled style="pointer-events:auto;">
  可點(diǎn)的假禁用
</button>

disabled 形同虛設(shè)，點(diǎn)擊事件照常觸發(fā)。

9?? 響應(yīng)式斷點(diǎn)錯位

@media (min-width:0px){.col-md-6{width:10000px;}}

斷點(diǎn) 0 px 即觸發(fā)，大屏幕直接橫向爆炸。

?? 文字顏色透明陷阱

.text-muted{color:transparent!important;}

看似有文字，實則全隱形，SEO 和可訪問性雙殺。

邪修口訣

“柵格當(dāng)黑洞，卡片當(dāng)炸彈；

!important 當(dāng)核武，Bootstrap 哭暈?！?/p>

PS

想要正經(jīng)的學(xué)習(xí) Bootstrap，從編程獅的《Bootstrap3 入門課程》開始！