impress.js 中的引导幻灯片答案

【问题标题】：Bootstrap slides in impress.jsimpress.js 中的引导幻灯片
【发布时间】：2014-11-30 06:29:46
【问题描述】：

我正在寻找一种方法来为 impress.js 演示文稿中的某些幻灯片启用 Bootstrap 样式。我尝试通过将bootstrapslide 样式添加到这些幻灯片并编译Boostrap Less 使其仅应用于具有该样式的div 项目来做到这一点。然而，幻灯片中很少显示 Boostrap 样式。

这可能是因为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.css 和 Bootstrap Less 包编译而成：

custom.less

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

【问题讨论】：

能显示bootstrap.less的内容吗？
就是bootstrap.less文件，可以下载（比如在GitHub上）github.com/twbs/bootstrap/blob/master/less/bootstrap.less
我尝试将您的示例代码转换为代码 sn-p。问题可能是由 less 编译器创建的 custom.css 不是有效的 css 使得浏览器 css 解析器简单地放弃。如果您查看 pastebin.com/raw.php?i=dTdEky6N 中的 custom.css，您会注意到无效的 html 元素，例如 trdiv。
实际上，如果我在本地网络服务器上尝试它，它就可以正常工作。我在第一张纸上添加了一个.btn .btn-primary 按钮，我确实看到了引导样式。 Bootstrap 在html 和body 元素上设置很多默认样式不也是一个问题吗？这些将不适用于您的情况，因为它们将以 div.bootstrapslide html 和 div.bootstrapslide body 出现，并且永远不会匹配任何元素。如果这只是关于您自己的演示文稿，您可以查看作用域 css (css-tricks.com/saving-the-day-with-scoped-css) 并使用 Firefox (caniuse.com/#feat=style-scoped)

标签： javascript html css twitter-bootstrap impress.js

【解决方案1】：

你的导入放错地方了。

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

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

div.bootstrapslide {
    // boostrapslide CSS here
}

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

@import "bootstrap.less";
// your CSS here

【讨论】：

但是引导代码应该在div.bootstrapslide中。没有额外的css代码。 bootstrapslide 元素应该像引导样式中的 minipages 一样处理。
也许我误解了你。但我认为你的 bootstrap.less 的内容是你链接的内容，所以：// Core variables and mixins @import "variables.less"; @import "mixins.less"; ... 是吗？
你试过这个解决方案了吗？因为这与 ckuijjer 提出的观点基本相同，而且显然对他有用。

【解决方案2】：

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

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;
}

【讨论】：