我想使用Twitter Bootstrap，但僅在特定元素上使用，因此我需要找出一種方法，用我的前綴為所有Twitter Bootstrap類添加前綴，或使用較少的mixins。我對(duì)此還沒有經(jīng)驗(yàn)，所以我不太了解該怎么做。這是我嘗試設(shè)置樣式的HTML的示例：<div class="normal-styles"> <h1>dont style this with bootstrap</h1> <div class="bootstrap-styles"> <h1>use bootstrap</h1> </div></div>在此示例中，Twitter Bootstrap會(huì)同時(shí)使用兩種樣式h1，但是我想對(duì)我在哪些方面應(yīng)用Twitter Bootstrap樣式有更多選擇。
3 回答
桃花長(zhǎng)相依
TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊
您還需要注意，引導(dǎo)程序會(huì)修改主體{}，主要是為了添加字體。因此，當(dāng)您通過LESS / SASS對(duì)其命名空間時(shí)，您的輸出css文件如下所示：（在引導(dǎo)程序3中）
.bootstrap-styles body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: white;
}
但很明顯，div內(nèi)不會(huì)有body標(biāo)記，因此您的引導(dǎo)程序內(nèi)容將沒有引導(dǎo)程序字體（因?yàn)樗幸龑?dǎo)程序都從父級(jí)繼承字體）
要解決此問題，答案應(yīng)為：
.bootstrap-styles {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: white;
@import 'bootstrap';
}
收到一只叮咚
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超5個(gè)贊
如果將以下內(nèi)容包含在名為“ bootstrap-namespaced.less”的文件中，則只需將“ bootstrap-namespaced.less”導(dǎo)入到其他文件中文件：
// bootstrap-namespaced.less
// This less file is intended to be imported from other less files.
// Example usage:
// my-custom-namespace {
// import 'bootstrap-namespaced.less';
// }
// Import bootstrap.css (but treat it as a less file) to avoid problems
// with the way Bootstrap is using the parent operator (&).
@import (less) 'bootstrap.css';
// Manually include styles using selectors that will not work when namespaced.
@import 'variables.less';
& {
// From normalize.less
// Previously inside "html {"
// font-family: sans-serif; // Overridden below
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
// Previously inside "body {"
margin: 0;
// From scaffolding.less
// Previously inside "html {"
// font-size: 10px; // Overridden below
-webkit-tap-highlight-color: rgba(0,0,0,0);
// Previously inside "body {"
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
}
- 3 回答
- 0 關(guān)注
- 571 瀏覽
添加回答
舉報(bào)
0/150
提交
取消