本文實例為大家分享了Bootstrap標簽頁的具體實現代碼,供大家參考,具體內容如下
HTML代碼:
<div id="tabs"> <ul class="nav nav-tabs"> <li class="active"><a href="#item1" data-toggle="tab">項目一</a></li> <li><a href="#item2" data-toggle="tab">項目二</a></li> <li><a href="#item3" data-toggle="tab">項目三</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id="item1"> <table border="1"> <tr><td>購買材料1</td><td>購買材料2</td><td>購買材料3</td><td>購買材料4</td></tr> <tr><td>購買材料5</td><td>購買材料6</td><td>購買材料7</td><td>購買材料8</td></tr> <tr><td>購買材料9</td><td>購買材料10</td><td>購買材料11</td><td>購買材料12</td></tr> <tr><td>購買材料13</td><td>購買材料14</td><td>購買材料15</td><td>購買材料16</td></tr> </table> </div> <div class="tab-pane fade" id="item2"> <table border="1"> <tr><td>購買材料1</td><td>購買材料2</td><td>購買材料3</td><td>購買材料4</td></tr> <tr><td>購買材料5</td><td>購買材料6</td><td>購買材料7</td><td>購買材料8</td></tr> <tr><td>購買材料9</td><td>購買材料10</td><td>購買材料11</td><td>購買材料12</td></tr> <tr><td>購買材料13</td><td>購買材料14</td><td>購買材料15</td><td>購買材料16</td></tr> </table> </div> <div class="tab-pane fade" id="item3"> <table border="1"> <tr><td>購買材料1</td><td>購買材料2</td><td>購買材料3</td><td>購買材料4</td></tr> <tr><td>購買材料5</td><td>購買材料6</td><td>購買材料7</td><td>購買材料8</td></tr> <tr><td>購買材料9</td><td>購買材料10</td><td>購買材料11</td><td>購買材料12</td></tr> <tr><td>購買材料13</td><td>購買材料14</td><td>購買材料15</td><td>購買材料16</td></tr> </table> </div> </div> </div>
CSS代碼:
#tabs{ width:550px; height:210px; background:white; } #item1,#item2,#item3{ width:500px; height:120px; margin-left:20px; } #tabs table{ border-collapse:collapse; margin-top:20px; } #tabs td{ text-align:center; width:126px; height:30px; } #tabs ul li{ margin-right:10px; } 以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答