?

一：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 });

?

　　

?

轉載于:https://www.cnblogs.com/wangyuman26/p/5652998.html

總結

以上是生活随笔為你收集整理的BootStrap 杂记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。