Question

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

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

最小工作示例：

presentation.htm

＆＃13;

<!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>

＆＃13;

custom.css 是根据custom.css和Bootstrap Less软件包编译的：

custom.less

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

Answer 1

您的导入位置错误。

您正在将全部您的引导代码导入div.bootstrapslide。相反，你可以做两件事之一：

将相关的引导程序代码直接复制到您的班级中：

div.bootstrapslide {
    // boostrapslide CSS here
}

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

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

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

impress.js中的Bootstrap幻灯片

2 个答案: