BootStrap 杂记

 

一：Bootstrap中的弹出窗口组件：模态框（Modal）

　　

<h2>创建模态框（Modal）</h2>

// 按钮触发模态框 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>

// 通过 JavaScript 调用
$('#myModal').modal()

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
     

 

注意：1-需要先引入jquery的js文件，再引入bootstrap的js文件

 

---

 

 

二：让div或者文字居中

    在标签的class里加上  text-center 。

 

---

 

 

三：代码块的轮播滚动效果   -- (Boorstrap手册 - JS插件 - Carousel)

　　英文文档-http://v3.bootcss.com/javascript/#carousel

      中文文档-http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html　　

 

<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">&lsaquo;
    </a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next">&rsaquo;
    </a>
</div>

1-设置图片自动滚动，和轮转的时间间隔

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">　　　　

如果上面的不起作用，可以手动初始化一下：

$(function(){
    $('#myCarousel').carousel();
});

//如果想控制图片轮转的时间间隔，还有参数：
$(function(){
     $('#myCarousel').carousel({
        interval: 3000
    });
});

2-如果设置不自动播放　　

$('#myCarousel').carousel({
    pause: true,
    interval: false
});