bootstrap胶囊导航

注意bootstrap.css ,bootstrap.js,jquery.js三个文件都要引入

<template>
  <div>
    <ul class="nav nav-pills">
          
      <li class="nav-item">
                   
        <a class="nav-link active" data-toggle="pill" href="#one-pill">胶囊1</a>             
      </li>
              
      <li class="nav-item">
                    
        <a class="nav-link" data-toggle="pill" href="#two-pill">胶囊2</a>

                
      </li>

              
      <li class="nav-item">
                    
        <a class="nav-link" data-toggle="pill" href="#three-pill">胶囊3</a>

                
      </li>

          
    </ul>

        
    <!--胶囊项对应的内容-->

        
    <div class="tab-content">
              
      <div class="tab-pane active" id="one-pill">胶囊1对应的内容: Lorem</div>

              
      <div class="tab-pane" id="two-pill">
                     胶囊2对应的内容：Lorem
      </div>

              
      <div class="tab-pane" id="three-pill">
                     胶囊3对应的内容：Lorem
      </div>

          
    </div>
  </div>
</template>



<script>
export default {
  
}
</script>