文章/答案/技术大牛

发布

问impress.js中的引导幻灯片
EN

Stack Overflow用户

提问于 2014-11-30 06:29:46

回答 2查看 983关注 0票数 5

我正在寻找一种方法来启用impress.js演示文稿中某些幻灯片的引导样式。我尝试将bootstrapslide样式添加到这些幻灯片中，并少编译Boostrap，使其只应用于这些具有这种样式的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和引导程序包中编译的：

custom.less

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

html

css

twitter-bootstrap

impress.js

javascript

回答 2

Stack Overflow用户

发布于 2014-12-03 18:22:43

你的进口是在错误的地方。

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

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

div.bootstrapslide {
    // boostrapslide CSS here
}

或者，只需在文件开始时导入它，并使用本机引导类：

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

票数 1

Stack Overflow用户

发布于 2016-09-08 14:46:34

试着删除这些行？对我起作用了。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27210691

复制

相似问题

问impress.js中的引导幻灯片
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问impress.js中的引导幻灯片EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问impress.js中的引导幻灯片
EN