Bootstrap学习

 模态框

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="meLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Title</h4>
                <div class="modal-body">
                    Content
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

调用方式一：
<button type="button" data-toggle="modal" data-target="#myModal" >
    启动Modal
</button>
方式二：
<script>
    $("#myModal").modal('show');   //其他方法   hide  toggle   {keyboard: false}
</script>

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

show.bs.modal    shown.bs.modal

hide.bs.modal    hidden.bs.modal

loaded.bs.modal

下拉菜单 

<button data-toggle="dropdown">
    Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
    <li><a>Python</a></li>
    <li><a>Python</a></li>
    <li><a>Python</a></li>
</ul>

事件：
　　show.bs.dropdown   shown.bs.dropdown   hide.bs.dropdown  hiden.bs.dropdown

监听滚动

<body data-spy="scroll" data-target=".navbar" data-offset="70">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="collapse navbar-collapse js-navbar-scrollpy" id="myScrollpy">
                    <ul class="nav navbar-nav">
                        <li><a href="#python">Python</a></li>
                        <li><a href="#php">PHP</a></li>
                        <li><a href="#java">Java</a></li>
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#jquery">jQuery</a></li>
                                <li><a href="#angular">AngularJS</a></li>
                                <li><a href="#node">NodeJS</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

　　　　<h2 id="Python">Python</h2>

　　　　　　...

事件：

　　<script>
　　　　$("#myScrollpy").on('activate.bs.scrollspy', function() {
　　　　　//do something 
　　})
   </srcipt>

标签页

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div  class="tab-content">
    <div id="home" class="tab-pane">        //   fade in active  
        <p>I am in home page</p>
    </div>
    <div id="profile" class="tab-pane">
        <p>Now I am in profile page</p>
    </div>
</div>

事件：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { ...})
show.bs.tab  shown.bs.tab  hide.bs.tab  hiden.bs.tab

工具提示

<a href="#" data-toggle="tooltip" title="索隆" data-placement="bottom">Roronoa zoro</a>

<script>
    $(a[data-toggle="tooltip"]').tooltip("show");
</script>

事件：

show.bs.tooltip ...

弹出框

<button type="button" class="btn btn-info btn-lg" data-toggle="popover" 
        title="popover title" data-content="popover content" data-placement="bottom" 
        data-trigger="focus"
>Popover</button>    //尽量用a代替button，但要加tabindex="0"属性

<script>
    $('[data-toggle="popover"]').popover();
</script>

事件： show.bs.popover ...

警告框定时关闭实例（jQuery方法）
    <script>
        $(document).ready(function() {
            setTimeout(function() {
                $("#flash").alert('close');
            }, 3000);
        })
    </script>



 






警告框




<div class="alert alert-danger fade in ">
    <button type="button" class="close" data-dismiss="alert">
        <span aria-hiden="true">&times;</span>
    </button>
    some text    
</div>

事件：
close.bs.alert  closed.bs.alert







 折叠 




<a href="#collapseExample" class="btn btn-info" data-toggle="collapse">打开折叠</a>
<div class="collapse" id="collapseExample">
    <p class="well">Hello</p>
</div>

手风琴效果




<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Title1</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
                Hello
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Title2</a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
                Hello
            </div>
        </div>
    </div>
</div>






事件： show shown hide hiden...







 轮播





<div id="myCarousel" class="carousel slide">    默认属性 data-interval="5000"  data-pause="hover"  data-wrap="true"
    <!--轮播指标-->
    <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>
    <!--轮播项目-->
    <div class="carousel-inner">
        <div class="item active">
            <img src="src/img/bg1.jpg" alt="bg1">
　　　　　　　<div class="calsourel-caption">
　　　　　　　　  <h3>标题</h3>
　　　　　　　　　<p>描述</p>
　　　　　　　</div>

        </div>
        <div class="item">
            <img src="src/img/bg2.jpg" alt="bg2">
        </div>
        <div class="item">
            <img src="src/img/bg3.jpg" alt="bg3">
        </div>
    </div>
    <!--轮播导航-->
    <a class="carousel-control left" data-slide="prev" href="#myCarousel">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" data-slide="next" href="#myCarousel">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>


自动开始：


<script>
    $(".carousel").carousel({interval: 2000});
</script>



事件： slide.bs.carousel   slid.bs.carousel







附加菜单(侧边栏停靠)





<div class="container" >
    <div class="col-md-2">
        <ul class="list-group affixed-element-top js-affixed-element-top" >
            <li class="list-group-item"><a href="#">Python1</a></li>
            <li class="list-group-item"><a href="#">Python2</a></li>
            <li class="list-group-item"><a href="#">Python3</a></li>
        </ul>
    </div>

    <div class="col-md-8">
        ...
    </div>

    <div class="col-md-2 js-content">
        <ul class="list-group affixed-element-bottom js-affixed-element-bottom" >
            <li class="list-group-item"><a href="#">Python1</a></li>
            <li class="list-group-item"><a href="#">Python2</a></li>
            <li class="list-group-item"><a href="#">Python3</a></li>
        </ul>
    </div>
</div>



<style>
    .affixed-element-top.affix {
        top: 10px;
    }
    .affixed-element-top.affix-bottom {
        position: relative;
    }
    .affixed-element-bottom.affix {
        bottom: 10px;
    }
    .affixed-element-bottom.affix-bottom {
        position: relative;
    }

</style>


<script>
    $(function () {
        $(".js-affixed-element-top").affix({
            offset:{

            }
        })
    })
    $(function () {
        $(".js-affixed-element-bottom").affix({
            offset:{
                bottom:100
            }
        })
    })

</script>








    KEEP LEARNING!




        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/roronoa-sqd/p/5410985.html