impress.js中的Bootstrap幻灯片
[英]Bootstrap slides in impress.js
问题描述
我正在寻找一种方法来为impress.js演示文稿中的某些幻灯片启用Bootstrap样式。 我试图通过将bootstrapslide样式添加到这些幻灯片并编译Boostrap Less以使其仅应用于具有该样式的这些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和Bootstrap Less包编译的：
custom.less
div.bootstrapslide {
@import "bootstrap.less";
}
2 个解决方案
解决方案1
1 2014-12-03 18:22:43
您的导入位置错误。
您正在将所有引导代码导入div.bootstrapslide 。 相反，你可以做以下两件事之一：
将相关的引导代码直接复制到您的类中：
div.bootstrapslide {
// boostrapslide CSS here
}
或者只是在文件的开头导入它并使用本机引导类：
@import "bootstrap.less";
// your CSS here
解决方案2
0 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;
}
Impress.js和AngularJS控制器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.