相关疑难解决方法(0)

Twitter Bootstrap定制最佳实践

我正在使用LESS使用Bootstrap 2.0.3.我想广泛地自定义它,但我想尽可能避免对源进行更改,因为库的更改经常发生.我是LESS的新手,所以我不知道它的编译是如何完全有效的.使用基于LESS或LESS的框架有哪些最佳实践?

less twitter-bootstrap

285
推荐指数
4
解决办法
9万
查看次数

是否可以在另一个中引用一个CSS规则?

例如,如果我有以下HTML:

<div class="someDiv"></div>
Run Code Online (Sandbox Code Playgroud)

这个CSS:

.opacity {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

.someDiv {
    background: #000; height: 50px; width: 200px;

/*** How can I reference the opacity and radius classes here
     so this div has those generic rules applied to it as well ***/

}
Run Code Online (Sandbox Code Playgroud)

就像在脚本语言中一样,你拥有通常在脚本顶部编写的泛型函数,每次你需要使用该函数时,你只需调用函数而不是每次都重复所有代码.

css

95
推荐指数
4
解决办法
13万
查看次数

Bootstrap&LESS:仅作为参考导入mixins

我正在使用Bootstrap 3.0和LESS 1.5.我将为许多站点使用相同的bootstrap.css(或使用他们的CDN).所以我正在使用

@import (reference) "bootstrap-3.0.0/less/bootstrap.less";
@import (reference) "bootstrap-3.0.0/less/mixins.less";
Run Code Online (Sandbox Code Playgroud)

仅作为参考导入.

我的app.less(其中包括)

.herocontainer{
    .make-row();
    .iphoneblock{
        .make-sm-column-offset(1);
        .make-sm-column(4);
        text-align: center;
    }
    .copyblock{
        .make-sm-column(5);
        text-align: center;
        .copytext{
            @media(min-width: @screen-sm) {
              padding-top: 100px;
              }
        }
        .buybutton{
            .btn-lg;
            .btn-primary;
            background-color: #d6822f;
            }
    }
}
Run Code Online (Sandbox Code Playgroud)

生成的站点只是单列输出.但是,如果我从mixins中删除(引用),例如:

@import (reference) "bootstrap-3.0.0/less/mixins.less";
Run Code Online (Sandbox Code Playgroud)

然后我得到一个两列响应输出,但生成的CSS也有我不需要的类.

那么,a)我如何才能在css中获取我在app.less中编写的类而不是使用bootstrap类膨胀b)如何调试这样的css问题?(我确实使用Google Chrome工具,但这个问题比我能理解/调试的要多)

谢谢你,
约瑟夫

less twitter-bootstrap-3

5
推荐指数
1
解决办法
5815
查看次数