html - タブ付きコンテンツ内のブートストラップ定数ボックス

Question

タブを使用して異なるコンテンツを切り替える Web サイトがあります。そのコンテンツには、デザイン要素のボックスがあります。私がしたいのは、そのボックスのhtmlを6回または7回繰り返さずに、すべてのタブ内で一定に保つことです。これは可能ですか？

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <li class="active"><a href="#design" data-toggle="tab">Cover Design</a></li>
  <li><a href="#video" data-toggle="tab">Video Trailers</a></li>
  <li><a href="#web" data-toggle="tab">Web Banner</a></li>
</ul>
<div class="tab-content">
 <div class="tab-pane active" id="design">
   <h2>Design Elements</h2>
   <ul>
     <li>This is the content that need to be static</li>
     <li>Skill: I'm skilled!</li>
     <li>Skill: I'm skilled!</li>
     <li>Skill: I'm skilled!</li>
   </ul>
   <p>Content that needs to be switched between tabs</p>
 </div>
</div>

どんな助けでも素晴らしいでしょう。例を示すために、上にタブの 1 つだけを配置しました。それらをすべて投稿すると、読むには長すぎます。