SoFunction
Updated on 2025-03-10

Example of the display effect of the tab content switching implemented by Bootstrap

This article describes the display effect of the tab content switching effect implemented by Bootstrap. Share it for your reference, as follows:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Bootstrap Example - Tags（Tab）Plugin</title>
  <link href="/bootstrap/3.0.3/css/" rel="external nofollow" rel="stylesheet">
  <script src="/jquery/2.0.0/"></script>
  <script src="/bootstrap/3.0.3/js/"></script>
</head>
<body>
<ul  class="nav nav-tabs">
  &lt;li class="active col-md-4"&gt;&lt;a href="#dingcan" rel="external nofollow" data-toggle="tab">Order meals</a></li>  &lt;li class="col-md-4"&gt;&lt;a href="#yonghu" rel="external nofollow" data-toggle="tab">User Center</a></li>  &lt;li class="col-md-4"&gt;&lt;a href="#dingdan" rel="external nofollow" data-toggle="tab">Order Center</a></li>&lt;/ul&gt;
&lt;div  class="tab-content"&gt;
  &lt;div class="tab-pane fade in active" &gt;
   &lt;p&gt;Order meals&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="tab-pane fade" &gt;
   &lt;p&gt;User Center&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="tab-pane fade" &gt;
   &lt;p&gt;Order Center&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

PS: Regarding bootstrap layout, here I recommend an online visual layout tool for your reference:

Online bootstrap visual layout editing tool:
http://tools./aideddesign/layoutit

I hope this article will be helpful to everyone's programming based on bootstrap.