【问题标题】:Using a common CSS class for Bootstrap 3 settings为 Bootstrap 3 设置使用通用 CSS 类
【发布时间】:2015-12-12 03:57:17
【问题描述】:

以前可能有人问过这个问题,但我找不到任何可以解决我的问题的内容,或者我没有按照正确的术语进行搜索。

有没有办法拥有一个 CSS 类,我可以设置特定的 Bootstrap 设置并一遍又一遍地使用该类。

EX:假设我想要一张带有边框、条纹和胡佛的桌子 (<table class="table table-striped table-hover table-condensed table-bordered">)。我会将其设置在一个类中,然后在创建表标记时调用该类。然后,如果我决定不再需要 hoover 效果,我将只更改该类,而不是整个站点的所有表格。

【问题讨论】:

    标签: css twitter-bootstrap twitter-bootstrap-3


    【解决方案1】:

    大卫的回答是正确的,但我还想详细说明另一个选项:

    您可能需要考虑选择 SASS 或 LESS。 Bootstrap 最初是用 LESS 编写的,然后被编译成 CSS(以及 SASS)。

    LESS 和 SASS 允许您做一些很酷的事情,例如扩展类。特别是在 SASS 中,您可以这样做以获得您想要的效果:

    .custom-table {
        @extend .table-striped;
        @extend .table-bordered;
        /* and so forth */
    }
    

    然后,您可以在所有表​​格上使用 .custom-table。如果以后想改表,可以修改规则。

    更多关于 SASS 的信息在这里:http://sass-lang.com/guide


    编辑:澄清一下——在常规 CSS 中没有很好的方法来执行此操作,除非您手动将 Bootstrap 规则复制到一个新类中,然后在需要时更改该类。如果您认为自己会经常使用该课程并且不想学习 SASS/LESS 但又不是很干,那么这不是一个坏主意。

    【讨论】:

    • 谢谢。我在 PluralSight 中看到了一个 SASS/LESS 类。我会尽快看的。我知道事情就是这样发展的,所以我需要加快速度。
    • 我不能推荐它。设置您的项目以使用它是一个巨大的痛苦,但是一旦您开始编码,就会变得更好。
    【解决方案2】:

    只需使用普通类并将其应用于表格,例如:

    <table class="my-class"></table>
    

    并像这样设置样式:

    .my-class {
      border: 1px solid #000;
      etc...
    }
    

    这只是 CSS 的基本用法——如果我理解正确的话,与引导程序无关。

    【讨论】:

    • 不具体。我想保留引导程序设置,以便可以很容易地更改主题。我在原始帖子中添加了一个表格标签作为示例。假设我在 10 个桌子上有那个桌子标签,然后决定我不想对它们产生胡佛效应。我想要一个中心位置(或班级),我只会更改一次设置,而不是在所有 10 个桌子上。
    • 好的,那么为什么不采用引导类或元素(如 table)并在您自己的 css 文件中扩展它,如 .table-striped{border:1px..} ,然后在您的 css 文件中使用 . table-striped:hover{cursor:pointer e.g} ?
    猜你喜欢
    • 2017-12-16
    • 1970-01-01
    • 2012-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多