javascript - 在类下使用 twitter bootstrap

标签 javascript css twitter-bootstrap less

我在一些 css 样式文件中使用许多自定义 css 样式构建了网站。我想在网站中使用 twitter bootstrap。但是如果我将它包含在我的页面中,例如 -

<link type="text/css" rel="Stylesheet" href="assets/css/bootstrap.css />

所以你可以猜到,因为有这么多样式和类被 Bootstrap 类和样式覆盖,所以有很多问题。所以如果有办法我可以在一个类下使用 twitter bootstrap css 和 js? 我可以在 bootstrap.css 文件中的每个类之前添加我的类名,但这很耗时,或者我愿意吗?我从网络研究中发现 -

.tw-bs {
    @import "less/bootstrap.less";
}

通过使用 lesscss.org. 但我还不知道如何在我的 Windows 电脑上编译东西,这样我就可以在我的网站上使用 .tw-bs 类下的 twitter bootstrap。如果有人知道一步一步,请保存我的时间。

最佳答案

我们发现的最好的方法是使用一个单独的 CSS 文件,您可以在其中故意用您想要/需要的内容覆盖一些 Bootstrap 样式。例如,Bootstrap 中的默认按钮具有半径为 4px 的圆 Angular 。我们决定我们想要一个更圆润的外观,所以我们将以下内容放入 CSS 文件中:

.btn{border-radius: 10px;}

当您在 Bootstrap 文件之后引用您的文件时,它将用您的值覆盖默认的 Bootstrap 值。有时 Bootstrap 的特异性很难被覆盖,在这种情况下,您需要通过直接引用元素的 ID 来设置样式(这比类更具体。)

关于javascript - 在类下使用 twitter bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16825223/

相关文章:

javascript - 复选框组获取选中复选框的值jquery

jquery - 显示/隐藏事件行的内容

javascript - 如何在不触发事件的情况下打开/关闭 Bootstrap 模式?

html - Bootstrap : How to properly align several rows of col-xs

javascript - Angularjs:为什么页面刷新会破坏 $rootScope 的值?

javascript - innerHTML 和访问对象属性

css - 在 IE8 中颜色透明?

javascript - 用图像和其他东西替换动态内容

html - 带有图像的 Bootstrap 输入组

javascript - 如何对已经由前进动画处理的元素应用悬停效果?