如何使用Angular UI Bootstrap制作按钮

在这篇文章中，我们将看到如何使用Angular UI Bootstrap制作按钮。Angular UI Bootstrap是一个Angular JS框架，由Angular UI开发者创建，用于提供更好的UI，可以很容易地使用。

Buttons指令是用来制作按钮的。

语法:

<buttonclass='btn btn-primary'>button</button>

从链接中下载AngularUI：。

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

步骤:

首先，添加你的项目所需的Angular UI bootstrap脚本。

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js”></script> <script src=”https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js”></script>

用它的UIBootStrap类制作一个按钮，它将为按钮设置UI外观。
现在使用不同的类制作不同类型的按钮并运行代码。

示例:

<!DOCTYPE html>
<html ng-app="gfg">
  <head>
 
    <!-- Adding CDN scripts required for our page -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js">
    </script>
    <script src=
"https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js">
    </script>
 
    <script>
      // Adding Modules
      angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
      angular.module('gfg').controller('button', function ($scope) {
        });
    </script>
    <link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          rel="stylesheet">
  </head>
  <body>
    <div ng-controller="button">
       
      <!-- Making a primary button -->
      <button class="btn btn-primary">Primary Button</button>
      <br>
      <br>
 
      <!-- Making a success button -->
      <button class="btn btn-success">Success Button</button>
      <br>
      <br>
 
      <!-- Making a default button -->
      <button class="btn btn-default">Default Button</button>
      <br>
      <br>
 
      <!-- Making a danger button -->
      <button class="btn btn-danger">Danger Button</button>
      <br>
      <br>
 
      <!-- Making a warning button -->
      <button class="btn btn-warning">Warning Button</button>
 
      <br>
      <br>
 
      <!-- Making a label primary button -->
      <label class="btn btn-primary">
        Primary Button using label
      </label>
    </div>
  </body>
</html>

输出:

如何使用Angular UI Bootstrap制作按钮？