5

我正在寻找一种方法来为impress.js演示文稿中的某些幻灯片启用Bootstrap样式。我试图通过将样式添加到这些幻灯片并编译 Boostrap Less 以使其仅应用于具有该样式的这些项目来做到这一点。然而，幻灯片几乎没有展示 Boostrap 风格。bootstrapslidediv

这可能是因为impress.js首先清空了所有样式（h1, pre,...），并且引导程序添加了一些属性，但未能使更改可见。然而，我没有立即解决这个问题。

最小工作示例：

presentation.htm：

<!doctype html>
<html lang="en">

<head>
  <link href="http://netdna.impressjscdn.com/impressjs/0.5.3/css/impress-demo.css" rel="stylesheet" />

  <!-- custom.css -->
  <link href="http://pastebin.com/raw.php?i=dTdEky6N" rel="stylesheet" />
</head>

<body>
  <div id="impress">
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
      <h1><center>Presentation</center></h1>
      <span><center>November 30, 2014</center></span>
    </div>
    <div id="slide0" class="step slide bootstrapslide" data-x="1800" data-y="0">
      <h1>Title1</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <div id="slide1" class="step slide bootstrapslide" data-x="3600" data-y="0">
      <h1>Title2</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://netdna.impressjscdn.com/impressjs/0.5.3/js/impress.js"></script>
  <script>
    impress().init();
  </script>
</body>

</html>

custom.css编译自custom.cssBootstrap Less 包：

custom.less

div.bootstrapslide {
    @import "bootstrap.less";
}
4

2 回答 2

1

您的导入位于错误的位置。

您正在将所有引导代码导入div.bootstrapslide. 相反，您可以做以下两件事之一：

将相关的引导代码直接复制到您的类中：

div.bootstrapslide {
    // boostrapslide CSS here
}

或者只是在文件开头导入它并使用本机引导类：

@import "bootstrap.less";
// your CSS here
于 2014-12-03T18:22:43.780 回答
0

尝试删除这些行？它对我有用。 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
于 2016-09-08T14:46:34.880 回答