如何在沒有手動父選擇器的情況下將 Bootstrap 樣式套用到特定元素？

在特定元素上使用CSS 樣式

從基於表格的版面轉換到CSS 時，您可能會遇到需要套用CSS 樣式的情況僅針對網頁的特定部分。這可以透過將所需的元素封裝在指定的類別中來實現。例如，您可以使用「bootstrap」類別將表單包裝在 div 中，如下所示：

<div>

但是，您希望頁面上的其他表單保留其目前的樣式。有沒有更簡單的方法來實現此目的，而無需手動將父選擇器新增至每個 Bootstrap CSS 規則？

解決方案

對於 Bootstrap 3，使用 LESS 簡化了過程：

1. 下載 Bootstrap 原始碼並建立 style.less文件，如下圖所示：

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

2. 編譯 LESS 文件。您可以將 Node.js 等命令列工具與 Less.js 結合使用，或探索 GUI 編譯器。或者，使用 npm 安裝 LESS 並編譯文件，如下所示：

npm install -g less
lessc style.less style.css

以上是如何在沒有手動父選擇器的情況下將 Bootstrap 樣式套用到特定元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！