【问题标题】:Importing modal.less in bootstrap在引导程序中导入 modal.less
【发布时间】:2018-04-25 21:42:55
【问题描述】:

我正在尝试在我的项目中导入 modals.less 文件,使用 bootstrap(v3.3.7)

下面是 bootstrap.less 代码:

 /*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Custom file
 */

 // Core variables and mixins
@import "variables.less";
@import "mixins.less";


// Core CSS
@import "scaffolding.less";
@import "grid.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "modals.less";
@import "navs.less";
@import "dropdowns.less";
@import "popovers.less";


// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

但是导入的时候报错

消息:'.transition-transform 未定义

这是这一行:

// When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate(0, -25%);
    .transition-transform(~"0.3s ease-out");
  }

我是否还需要导入我不知道的任何其他依赖项才能使用模态?

编辑

// Mixins
// --------------------------------------------------



// Utilities
@import "mixins/tab-focus.less";
@import "mixins/hide-text.less";
@import "mixins/responsive-visibility.less";
@import "mixins/image.less";
@import "mixins/reset-filter.less";
@import "mixins/reset-text.less";
/*
@import "mixins/opacity.less";
@import "mixins/labels.less";
@import "mixins/resize.less";
@import "mixins/size.less";
@import "mixins/vendor-prefixes.less";
@import "mixins/text-emphasis.less";
@import "mixins/text-overflow.less";*/

// Components
@import "mixins/forms.less";
@import "mixins/buttons.less";
@import "mixins/nav-divider.less";
/*
@import "mixins/alerts.less";
@import "mixins/panels.less";
@import "mixins/pagination.less";
@import "mixins/list-group.less";

@import "mixins/progress-bar.less";
@import "mixins/table-row.less";*/

// Skins
@import "mixins/border-radius.less";
/*
@import "mixins/background-variant.less";
@import "mixins/gradients.less";
*/
// Layout
@import "mixins/clearfix.less";
@import "mixins/center-block.less";
@import "mixins/nav-vertical-align.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";

【问题讨论】:

  • 你的mixins.less@import "mixins/vendor-prefixes.less";这一行吗?
  • @JosephMarikle 我刚刚检查过,mixins 文件夹中没有 vendor-prefixes.less 文件。 否定
  • 但是您正在运行v3.3.7?它应该在那里:github.com/twbs/bootstrap/blob/v3.3.7/less/mixins/…
  • 我以自定义方式使用它,所以没有将所有文件一起使用。
  • 那我建议你把那个文件加到mixins文件夹里,加上@import "mixins/vendor-prefixes.less";。通常它出现在mixins.less中的// Utilities评论下

标签: html css twitter-bootstrap less bootstrap-modal


【解决方案1】:

通过上述 cmets 进一步调查后,问题似乎是 @import "mixins/vendor-prefixes.less";mixins.less 文件中被注释掉了。我建议取消注释该行。

【讨论】:

  • 它现在可以工作了,我看到所有的过渡和其他规则都在那个less文件中定义了。
猜你喜欢
  • 2021-12-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-06-21
  • 2021-02-27
  • 2020-11-20
  • 2013-11-13
相关资源
最近更新 更多