相关疑难解决方法(0)

有没有什么好方法可以帮助识别项目中未使用的CSS定义？一堆css文件被拉进来,现在我正在尝试清理一些东西.

我刚从Twitter开始使用Bootstrap,我想知道什么是"最佳实践"用于定制.我想开发一个系统,该系统将利用一个CSS模板的所有电源(引导或其他),彻底(容易地)修改的,是可持续的(即 - 当引导的下一个版本是从Twitter的我不要公布"我必须重新开始.

例如,我想在顶部导航中添加背景图像.看起来有三种方法可以解决这个问题:

1. 修改bootstrap.css中的.topbar类.我不是特别喜欢这个,因为我会有很多.topbar项目,我不一定要以同样的方式修改它们.
2. 使用我的背景图像创建新类并应用这两种样式(new和bootstrap到我的元素).这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中然后仅使用我的自定义类未处理的部分来避免这种冲突.同样,这需要比我认为必要的更多工作,虽然它很灵活,但是当Twitter发布下一部分时,它不允许我轻松更新bootstrap.css.
3. 使用.LESS中的变量来实现自定义.这似乎是一个很好的方法,但没有使用过.很少我担心在客户端编译css和代码可持续性.

虽然我使用的是Bootstrap,但这个问题可以推广到任何css模板.

提前感谢您的意见.

我正在使用wordpress的根主题:https://github.com/retlehs/roots/

它已经预编译了bootstrap.css,并建议使用app.css进行任何自定义.由于我没有通过html或javascript将类添加到按钮的选项,我想使用LESS源来引用一个css类,例如,我想给一个提交按钮引导按钮样式:

input#submit{
.btn;
.btn-primary;
}

如果我使用@import 'bootstrap.less';它将整个bootstrap css添加到app.css中.我怎样才能使用bootstrap.less作为编译参考？

Twitter的Bootstrap 3按钮颜色有限.默认情况下,将有5 7种颜色(默认主要,错误,警告,信息,成功和链接)请参阅:

每个按钮都有3个状态(默认,活动和禁用)

如何添加更多颜色或创建自定义按钮？Twitter的Bootstrap 2.x:Styling twitter bootstrap按钮已经回答了这个问题.Bootstrap 3不向后兼容.less和css文件中会有很多变化.对IE7的支持将被取消.TB3首先是移动设备.标记代码也会改变.

我正在使用Bootstrap Twitter做我的第一步,并且需要扩展组件.例如,我想更改导航栏背景,但不更改原始css文件.

我尝试.test使用新背景创建一个新类:

.test{
    background-color: red !important;
}

我在hmtl中调用了它:

 <div class="navbar navbar-fixed-top test">

但是,它不起作用.怎么办呢？

我试图自定义Twitter Bootstrap的CSS而不改变引导代码的本地副本.*所以我将Twitter Bootstrap项目克隆到一个文件夹中,并将我的应用程序代码放在它自己的文件夹中:

/html
    /bootstrap
       ...etc...
       /js
       /less
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

在我的"style.less"文件中,我定义了一些LESS变量,然后包含引导程序文件:

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

由于LESSCSS变量确实是常量,所以当我将LESS文件编译成CSS时,我很惊讶我的@sansFontFamily没有被拾取:lessc style.less > MyApp.css --yui-compress

那么......我错过了什么？为什么我的变量被Bootstrap的LESS文件中定义的变量覆盖？

* - 我已经检查了" Twitter Bootstrap Customization Best Practices ",但是考虑利用常量将是一种更好的方法(如果我可以让它工作).

我正在考虑将LESS集成到我的Bootstrap编辑器(Bootply.com)中,以符合Bootstrap自定义最佳实践,并支持mixins.

但是,我还没有确定使用LESS而不是简单CSS覆盖的特定优势(性能和其他方面).似乎最终LESS被编译为CSS.看起来LESS将引入更多的维护/重新编译任务,因为引入了新版本的Bootstrap.

我知道可以在'bootstrap.css'之后使用自定义'theme.css'来完成Bootstrap自定义.所以,如果你想改变.navbar颜色,我只需要在'theme.css'中加几行就像..

.navbar-custom .navbar-inner {
   background-color:#444444;
}

然后标记看起来像:

<div class="navbar navbar-custom navbar-fixed-top">..

如果这不是定制的最佳实践,那么LESS如何改进呢？

我正在使用python和twitter-bootstrap开发一个Web应用程序,我的CSS将真正受益于使用LESS来生成我的样式和主题.我想继承bootstrap提供的类,这意味着我必须得到bootstrap源代码,并针对boostrap .less文件编译我的LESS样式表.

我的问题是双重的:

1)似乎使用LESS最简单的方法不是"实时"编译样式表,而是每次对样式进行更改时都要运行构建步骤.这是典型的吗？似乎很多人在他们的服务器进程中动态运行LESS,但这可能是我可能不需要的额外头痛,而且我不希望在客户端运行较少.

2)感谢LESS,我的项目现在不仅仅依赖于bootstrap,而且还依赖于bootstrap "source" - 在项目管理方面处理这个问题的最佳方法是什么？我不想只是吸收当前版本的bootstrap到我的git repos中的所有内容,因为看起来像更新版本的bootstrap更新它会很麻烦(也感觉很吵!)尽管如此,我需要在项目树中至少包含缩小的js/css才能部署我的应用程序.在开发Web应用程序时,人们通常如何处理这样的依赖关系？

我编写了一个Landing页面,只是为了尝试使用Less文件的Twitter Bootstrap.我不确定我是否按照应有的方式组织了较少的文件.

在我的index.html的head部分:

<link rel="stylesheet/less" type="text/css" href="bootstrap.less" />

这里是我bootstrap.less的内容

// Core variables and mixins
@import "less/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "less/mixins.less";

// CSS Reset
@import "less/reset.less";

// Grid system and page structure
@import "less/scaffolding.less";
@import "less/grid.less";
@import "less/layouts.less";

// Base CSS
@import "less/type.less";

// Utility classes
@import "less/utilities.less"; // Has to be last to override when necessary

在我的文件夹"less"中,我有以下文件

• utilities.less
• utilities.css
• variables.less
• variables.css
• grid.less
• grid.css
• type.less
• layouts.less
• mixins.less
• scaffolding.less
• reset.less

它们实际上是使我的登陆页面工作所必需的,但我不确定这个文件组织是否是最佳解决方案.我对此感到有点困惑,你能帮助我,告诉我,如果我做得好吗？有没有更好的方法来组织文件？

在这里,您可以看到登录页面

有没有办法将第5个breakpont添加到4已经存在？不幸的是,对于我们目前正在进行的项目来说,4还不够.我的想法是创建一个超过1400px的新断点screen-hd.有简单的方法吗？

我正在使用LESS使用Bootstrap,我是LESS的新手,所以我有疑问.

例如,我想向body添加padding属性.

body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}

在bootstrap.less我做了这个:

@import "bootstrap/scaffolding.less";
body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
  padding: 50px;
}

但是在编译的CSS文件中,我有两个正文类,一个是原始的,然后是我自己的.如何在没有重复的情况下向类添加属性？谢谢.