Wil*_*sem 5 html javascript css twitter-bootstrap impress.js
我正在寻找一种方法来为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.css和Bootstrap Less包编译的:
custom.less
div.bootstrapslide {
@import "bootstrap.less";
}
您的导入位置错误。
您正在将所有引导代码导入到div.bootstrapslide. 相反，您可以执行以下两种操作之一：
将相关引导代码直接复制到您的类中：
div.bootstrapslide {
// boostrapslide CSS here
}
或者只是在文件开头导入它并使用本机引导类：
@import "bootstrap.less";
// your CSS here
| 归档时间： |
|
| 查看次数： |
827 次 |
| 最近记录： |