Bootstrap 警告
可以在警告框中添加可选的关闭按钮。要创建内联的可取消警告框,请使用warnings jQuery插件。
可以通过创建一个<div>
并添加一个来添加一个基本警告框。警报类和四个上下文类之一(即.Alert success、.Alert info、.Alert warning、.Alert danger)。
<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>
Bootstrap 警告运行截图如下:
可取消的警告(解雇警报)
创建可取消警告的步骤如下:
通过创建一个<div>
并添加一个.Alert类和四个上下文类之一,添加一个基本警告框。警报成功。警报信息。警报警告,。警惕危险。
同时,添加可选。警报对上述类不可用。
添加关闭按钮。
确保使用带有数据丢失=“警报”数据属性的元素。
警告中的链接
在警报中创建链接的步骤如下:
通过创建一个<div>
并添加一个.Alert类和四个上下文类之一,添加一个基本警告框。警报成功,。警报信息,。警报警告,。警惕危险。
使用。警报链接实体类以快速提供具有匹配颜色的链接。
<div class="alert alert-success">
<a href="#" class="alert-link">成功!很好地完成了提交。</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">信息!请注意这个信息。</a>
</div>
<div class="alert alert-warning">
<a href="#" class="alert-link">警告!请不要提交。</a>
</div>
<div class="alert alert-danger">
<a href="#" class="alert-link">错误!请进行一些更改。</a>
</div>
警告中的链接运行截图如下:
Bootstrap 轮播
bootstrap carousel插件是一种灵活且响应迅速的方式,可以向站点添加滑块。此外,内容足够灵活,可以是图像、嵌入式框架、视频或任何其他类型的内容。
如果要单独引用此插件的功能,则需要引用carousel js或者,如“bootstrap插件概述”一章所述,您可以参考bootstrap JS或bootstrap.min.JS的压缩版本。
下面是一张简单的幻灯片,使用引导旋转木马插件来显示循环元素的公共组件。为了实现旋转,您只需要添加带有此标记的代码。不需要使用数据属性,只需要简单的基于类的开发。
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Bootstrap 轮播运行截图如下:
可以在中为幻灯片添加标题。.Item中的旋转木马标题元素。只要把任何可选的HTML放在那里,它就会自动对齐并格式化。
通过数据属性:可以使用数据属性轻松控制旋转木马的位置。
属性数据幻灯片接受关键字prev或next,用于更改幻灯片相对于当前位置的位置。
使用数据滑动将原始滑动索引传递给旋转。数据滑动到=“2”将滑块移动到特定索引,索引从0开始计数。
data ride=“carousel”属性用于标记加载页面时旋转开始动画播放。
通过javascript:可以通过javascript手动调用carousel,如下所示:
$(“.carousel”).carousel()
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
interval | number 默认值:5000 |
data-interval | 自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。 |
pause | string 默认值:"hover" |
data-pause | 鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。 |
wrap | boolean 默认值:true |
data-wrap | 轮播是否连续循环。 |