gpt4 book ai didi

javascript - impress.js 中的 Bootstrap 幻灯片

转载 作者:太空狗 更新时间:2023-10-29 16:41:39 25 4
gpt4 key购买 nike

我正在寻找一种方法来为 impress.js 演示文稿中的某些幻灯片启用 Bootstrap 样式。为此,我尝试将 bootstrapslide 样式添加到这些幻灯片并编译 Boostrap Less,使其仅应用于具有该样式的这些 div 元素。然而,幻灯片几乎没有显示 Boostrap 风格。

这可能是因为impress.js先清空了所有样式(h1, pre,...)然后bootstrap添加了一些属性,但未能使更改可见。然而,我没有立即解决这个问题。

最小工作示例:

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.csscustom.css 和 Bootstrap Less 包编译而成:

custom.less

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

最佳答案

您的导入位置错误。

您正在将所有 Bootstrap 代码导入div.bootstrapslide。相反,您可以执行以下两项操作之一:

将相关的 Bootstrap 代码直接复制到您的类中:

div.bootstrapslide {
// boostrapslide CSS here
}

或者只是在文件的开头导入它并使用 native Bootstrap 类:

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

关于javascript - impress.js 中的 Bootstrap 幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27210691/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com