bootstrap笔记（三）——插件

bootstrap笔记（三）——插

模态框

### 生成模态框

<button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#modal1">模态框</button>
<div id="modal1" class="modal" >
	<div class="modal-dialog">
		<div >
			<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
				<h1>1111111111</h1>
			</div>
			<div class="modal-body">
				这里写上一些内容...
			</div>
			<div class="modal-footer">
				<button class="btn btn-info">确认</button>
				<button class="btn btn-warning" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div><!-- modal-dialog -->
</div><!-- modal -->

• 使用模态窗口，需要有某种触发器，可以使用按钮或链接。这里我使用的是按钮。
• 给触发器添加 data-toggle=“modal” 属性，添加data-target="#modal1"(id选泽到弹出框)
• 为弹出框添加.modal类，以及id
• modal-dialog和 modal-content 可以加在一个div里面
• 然后添加一下里面header | body | footer三部分

还有一些可以调用的方法

在调用 show 方法后触发

$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})

当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

当调用 hide 实例方法时触发。

$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})

当模态框完全对用户隐藏时触发。

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

这里简单做了一个页面加载两秒后触发模态框的例子，配合上面监听弹出方法可以增加浏览器主动行为，也有好多用

setTimeout(function() {
		$('#modal1').modal('show');//调用会弹出模态框
	},2000)

alert插件

<div id="myalert" class="alert alert-danger">
	<a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>警告！</strong>您的网络连接有问题。
</div>

• 同样也有一些方法

$('#myalert').bind('closen-bs-alert', function() {
	alert(9999999999)
});

• 该方法让所有的警告框都带有关闭功能。

$('#identifier').alert();

• 该方法关闭所有的警告框。

$('#identifier').alert('close'); 

轮播(幻灯片)

• 直接粘贴改图片路径就好

<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>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</a>
</div>

• 一些方法参考一下，感觉用不上