看到的原網址：http://www.cnblogs.com/dk1988/p/3670561.html

詳細的bootstrap網址可以去這看：  http://www.runoob.com/bootstrap/bootstrap-tutorial.html

bootst確實比較好用，不過官網的手冊不是很詳細，現自己收錄好例子，倒是直接貼上到專案中

1，提示框功能，此功能常用，自己寫比較浪費功夫

最基本例子如下，上下左右的提示

  <ul class="example" style="list-style:none;">
            <li>
                <a class="atip" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</a>
            </li>
            <li>
                <a href="#" class="atip" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</a>
            </li>
            <li>
                <a href="#" class="atip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</a>
            </li>
            <li>
                <a href="#" class="atip" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</a>
            </li>
        </ul>

      <script>
        $(function(){
            $(".atip").tooltip();
            
        });
    </script>
 

 <script>
        $(function(){
            $(".atip").tooltip();
            options={
                    delay: { show: 500, hide: 100 },
                    trigger:'click',
                    };
            $(".optiontip").tooltip(options);
        });
    </script>

有delay，tigger等等引數

還有個差不多的叫popover，樣子是兩層提示，一個標題，一個提示

格式如下，引數完全一樣，多個content

<a class="btn  btn-success"  id='pop' type="submit" rel="popover" title="泡芙提示" data-content="泡芙提示泡芙提示">  泡芙提示泡芙提示泡芙提示</a>


      <script>
        $(function(){
            $('#pop').popover();
        });
    
 
</script>