如何使用 Angular UI Bootstrap 制作标签？

在本文中，我们将了解如何使用 Angular UI 引导程序制作选项卡。 Angular UI Bootstrap 是由 Angular UI 开发人员创建的 Angular JS 框架，用于提供更易于使用的 UI。

从链接下载 AngularUI：

https://angular-ui.github.io/bootstrap

方法：

• 首先，添加项目所需的 Angular UI 引导脚本。

• 使用其 UIBootStrap 类创建选项卡，这将设置选项卡的 UI 外观。
• 现在使用不同的类制作不同类型的选项卡并运行代码。

示例 1：制作带有对齐内容的选项卡。

HTML

  
  
    
    
    
    
    
    
    
    
    
    
    
      // Adding Modules
      angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
      angular.module('gfg').controller('tab', function ($scope) {
      });
    
  
  
  
    
      
      
        
          Column-1 Content
        
        
          Column-2 Content
        
        
          Column-3 Content
        
      
    
  

输出：

示例 2：

HTML

  
  
    
    
    
    
    
    
    
    
    
    
  
    
      // Adding Modules
      angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
      angular.module('gfg').controller('tab', function ($scope) {
      });
    
  
  
  
    
        
        
            
              Row-1 Content
          
            
              Row-2 Content
          
            
              Row-3 Content
          
        
    
  

输出：

参考： https://angular-ui.github.io/bootstrap/#!#Tabs