本文實(shí)例為大家分享了Bootstrap選項(xiàng)卡的學(xué)習(xí)筆記，供大家參考，具體內(nèi)容如下
tab選項(xiàng)卡
<body> <div class="container"> <!-- tab選項(xiàng)卡 --> <ul class="nav nav-tabs"> <li class="active"><a href="#pan1" data-toggle="tab">發(fā)現(xiàn)</a></li> <li><a href="#pan2" data-toggle="tab">搜索</a></li> <li><a href="#pan3" data-toggle="tab">工具</a></li> </ul> <!-- 面板 --> <div class="tab-content"> <div class="tab-pane active" id="pan1">發(fā)現(xiàn)面板內(nèi)容發(fā)現(xiàn)面板內(nèi)容</div> <div class="tab-pane fade in" id="pan2">搜索面板內(nèi)容搜索面板內(nèi)容</div> <div class="tab-pane fade" id="pan3">工具面板內(nèi)容工具面板內(nèi)容</div> </div> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script></body>
膠囊選項(xiàng)卡
<body> <div class="container"> <!-- 膠囊選項(xiàng)卡 --> <ul class="nav nav-pills"> <li class="active"><a href="#pan1" data-toggle="pill">發(fā)現(xiàn)</a></li> <li><a href="#pan2" data-toggle="pill">搜索</a></li> <li><a href="#pan3" data-toggle="pill">工具</a></li> </ul> <!-- 面板 --> <div class="tab-content"> <div class="tab-pane active" id="pan1">發(fā)現(xiàn)面板內(nèi)容發(fā)現(xiàn)面板內(nèi)容</div> <div class="tab-pane" id="pan2">搜索面板內(nèi)容搜索面板內(nèi)容</div> <div class="tab-pane" id="pan3">工具面板內(nèi)容工具面板內(nèi)容</div> </div> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script></body>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
