Menu
I'm looking for a way to enable the Bootstrap style for certain slides in an impress.js presentation. I've tried to do this by adding the bootstrapslide style to these slides and compiling Boostrap Less such that it is applied only to these div items with that style. However the slides show little of the Boostrap Style.
This is probably because impress.js first empties all styles (h1, pre,...) and that bootstrap adds some attributes, but fails to make the changes visible. I have however no immediate solution to this problem.
Minimal Working Example:
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 is compiled from custom.css and the Bootstrap Less package:
custom.less
div.bootstrapslide {
@import "bootstrap.less";
}
451
Your import is in the wrong place.
You are importing all your bootstrap code into div.bootstrapslide. Instead, you could do one of two things:
Copy the relevant bootstrap code directly into your class:
div.bootstrapslide {
// boostrapslide CSS here
}
or just import it at the beginning of the file and use the native bootstrap class:
@import "bootstrap.less";
// your CSS here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
