ui-bootstrap-tpls 中文 现在还不全的啊~,组件太多了,有空就更新

最新推荐文章于 2024-06-03 20:31:46 发布
最新推荐文章于 2024-06-03 20:31:46 发布
阅读量1.2w 收藏 6
点赞数 4
分类专栏： AngularJS知识点汇总 文章标签： ui.bootstrap.modal angular UI Bootstrap api 中文 ui-bootstrap-tpls.mi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/50622714
版权

UI Bootstrap,用angular打造的bootstrap组件.

开始

依赖:

  • angularJS
  • angular-animate
  • Bootstrap Css
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 

配置:

angular.module('myModule', ['ui.bootstrap']);

手风琴--Accordion (ui.bootstrap.accordion)
手风琴提供一个项目列表,通过点击条目的标题来使主体内容折叠或展开.

官网上的例子：
html: 
<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </uib-accordion-group>
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </uib-accordion-group>
    <uib-accordion-group heading="Dynamic Body Content">
      <p>The body of the uib-accordion group grows to fit the contents</p>
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
    </uib-accordion-group>
    <uib-accordion-group heading="Custom template" template-url="group-template.html">
      Hello
    </uib-accordion-group>
    <uib-accordion-group heading="Delete account" panel-class="panel-danger">
      <p>Please, to delete your account, click the button below</p>
      <button class="btn btn-danger">Delete</button>
    </uib-accordion-group>
    <uib-accordion-group is-open="status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      This is just some content to illustrate fancy headings.
    </uib-accordion-group>
  </uib-accordion>
</div>
js: 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});


一个例子 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
<span style="white-space:pre">	</span>.active{background:red}
</style>


</head>
<body>


<div ng-app="myApp" ng-controller="AccordionDemoCtrl" >
<span style="white-space:pre">	</span>  <uib-accordion >
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </uib-accordion-group>


<span style="white-space:pre">	</span> <uib-accordion-group heading="elset">
      <p>Please, to delete your account, click the button below</p>
    </uib-accordion-group>
  </uib-accordion>
</div>


<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function ($scope) {


  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

});

</script>
</body>
</html>

uib-accordion 设置
1:"close-others":true/false.一个折叠打开的时候,其他折叠关闭,默认为"true".
 

<uib-accordion close-others="false">
2:"template-url": 指定模板地址 

<uib-accordion template-url="setting/setting.html" >

uib-accordion-group设置

1:"heading":设置折叠可点击的头部 

 <uib-accordion-group heading="Dynamic Body Content">


2:"is-disabled": true/false 默认"false",是否禁用折叠 

<uib-accordion-group heading="elset" is-disabled="true" >

3:"is-open":true/false 默认"false",折叠是否展开 

<uib-accordion-group heading="elset" is-open="true" >

4:"panel-class":给折叠设置样式类 

 <uib-accordion-group heading="elset" panel-class="active">

5: "template-url":指定模板地址 

<uib-accordion-group heading="elset" template-url="tl.html">

警告--Alert (ui.bootstrap.alert)


官网上的例子
html 
<div ng-controller="AlertDemoCtrl">
  <script type="text/ng-template" id="alert.html">
    <div class="alert" style="background-color:#fa39c3;color:white" role="alert">
      <div ng-transclude></div>
    </div>
  </script>

  <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
  <uib-alert template-url="alert.html">A happy alert!</uib-alert>
  <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

js 
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
  $scope.alerts = [
    { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];

  $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!'});
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
});


一个例子 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
	.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="AlertDemoCtrl" >
   <script type="text/ng-template" id="alert.html">
    <div class="alert" style="background-color:#fa39c3;color:white" role="alert">
      <div ng-transclude></div>
    </div>
  </script>
  <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
  <uib-alert template-url="alert.html">A happy alert!</uib-alert>
  <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('AlertDemoCtrl', function ($scope) {
  $scope.alerts = [
    { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];
  $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!'});
  }
  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
});

</script>
</body>
</html>


uib-alert设置

1:"close":显示关闭按钮. 

uib-alert  close="closeAlert($index)">

 
  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };

2:"dismiss-on-timeout":设置超时时间后警告自动关闭,单位毫秒.这个属性需要关闭属性的存在. 

 <uib-alert  close="closeAlert($index)" dismiss-on-timeout='1000'>

3:"template-url":指定模板地址 

 <uib-alert template-url="alert.html">A happy顶顶顶顶 alert!</uib-alert>

4:"type":success/danger/info/warning.设置警告类型 

<uib-alert  type="danger" >

按钮--Buttons (ui.bootstrap.buttons)


通过给按钮添加属性"uib-btn-checkbox"或者"uib-btn-radio" 我们可以让按钮变成一组复选框或者一组单选按钮.

一个综合例子 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
	.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">
	
	<div ng-controller="ButtonsCtrl">
    <h4>Single toggle</h4>
    <pre>{{singleModel}}</pre>
    <button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
        Single Toggle
    </button>
    <h4>Checkbox</h4>
    <pre>Model: {{checkModel}}</pre>
    <pre>Results: {{checkResults}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
        <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
    </div>
    <h4>Radio & Uncheckable Radio</h4>
    <pre>{{radioModel || 'null'}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
    </div>
    <div class="btn-group">
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
    </div>
    <div>
        <button class="btn btn-default" ng-click="uncheckable = !uncheckable">
            Toggle uncheckable
        </button>
    </div>
</div>
   
</div>

<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ButtonsCtrl', function ($scope) {
  $scope.singleModel = 1;

  $scope.radioModel = 'Middle';

  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };

  $scope.checkResults = [];

  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
      if (value) {
        $scope.checkResults.push(key);
      }
    });
  });
});

</script>



</body>
</html>

多选按钮例子 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
	.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">	
	<div ng-controller="ButtonsCtrl">
    <pre>Results: {{checkResults}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
        <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
    </div>
</div>  
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ButtonsCtrl', function ($scope) {
  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };

  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
      if (value) {
        $scope.checkResults.push(key);
      }
    });
  });
});
</script>
</body>
</html>

ui-btn-checkbox 设置


1:"ng-model":设置按钮默认选中状态. 

<label class="btn btn-primary" ng-model="true" uib-btn-checkbox >Left</label>
2:"btn-checkbox-true"/"btn-checkbox-false":根据按钮是否选中来设定值 

<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"> Single Toggle</button>


单选按钮例子 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
	.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">
	
    <pre>{{radioModel || 'null'}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
    </div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);

</script>



</body>
</html>

uib-btn-radio 设置

1"ng-model":所有单选按钮都应该给相同的名称 

<label class="btn btn-primary" ng-model="radioModel" >Left</label>
<label class="btn btn-primary" ng-model="radioModel">Middle</label>
<label class="btn btn-primary" ng-model="radioModel">Right</label>

2:"uib-btn-radio":给按钮设定值 

<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>

折叠--Collapse (ui.bootstrap.collapse)




折叠提供了一个简单的方法来显示和隐藏一个元素.


简单例子 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
<span style="white-space:pre">	</span>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" >
<div ng-controller="CollapseDemoCtrl">
<span style="white-space:pre">	</span><button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<span style="white-space:pre">	</span><hr>
<span style="white-space:pre">	</span><div uib-collapse="isCollapsed">
<span style="white-space:pre">		</span><div class="well well-lg">Some content</div>
<span style="white-space:pre">	</span></div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
<span style="white-space:pre">	</span>app.controller('CollapseDemoCtrl', function ($scope) {
  $scope.isCollapsed = false;
});
</script>
</body>
</html>

1:"uib-collapse":true/false 默认为false设置折叠是否展开 

<div uib-collapse="false">


Pagination (ui.bootstrap.pagination)



Tabs (ui.bootstrap.tabs)






Modal (ui.bootstrap.modal)

一:在angular中应用modal

$uibModal

使用方法:

直接注入到控制器中

.controller('name', function($scope,$uibModal) {
调用者 


<span style="white-space:pre">		</span>$scope.withSelected = function(tem, con) {// 打开modal
<span style="white-space:pre">				</span>var selectNum = 0, selectAction = "";
<span style="white-space:pre">				</span>$scope.isok = false;
<span style="white-space:pre">				</span>$scope.iscancal = false;
<span style="white-space:pre">				</span>$scope.is_no_user = false;
<span style="white-space:pre">				</span>$scope.is_has_user = false;
<span style="white-space:pre">				</span>$scope.selectNum = 0;
<span style="white-space:pre">				</span>$('.user_check:checked').each(function() {
<span style="white-space:pre">					</span>selectNum = selectNum + 1;
<span style="white-space:pre">				</span>});
<span style="white-space:pre">				</span>if (selectNum == 0) {
<span style="white-space:pre">					</span>$scope.isok = true;
<span style="white-space:pre">					</span>$scope.is_no_user = true;
<span style="white-space:pre">				</span>} else {
<span style="white-space:pre">					</span>$scope.selectNum = selectNum;
<span style="white-space:pre">					</span>$scope.isok = true;
<span style="white-space:pre">					</span>$scope.iscancal = true;
<span style="white-space:pre">					</span>$scope.is_has_user = true;
<span style="white-space:pre">					</span>$scope.selectAction = selectAction;


<span style="white-space:pre">				</span>}
<span style="white-space:pre">				</span>$scope.enable=function(){
<span style="white-space:pre">					</span>alert(222)//方法
<span style="white-space:pre">				</span>}
<span style="white-space:pre">				</span>$scope.items = {//属性
<span style="white-space:pre">					</span>isok : $scope.isok,
<span style="white-space:pre">					</span>is_no_user : $scope.is_no_user,
<span style="white-space:pre">					</span>iscancal : $scope.iscancal,
<span style="white-space:pre">					</span>is_has_user : $scope.is_has_user,
<span style="white-space:pre">					</span>selectNum : $scope.selectNum,
<span style="white-space:pre">					</span>selectAction : $scope.fselectedtValue,
<span style="white-space:pre">					</span>fun:$scope.enable
<span style="white-space:pre">				</span>};
<span style="white-space:pre">				</span>var _this = this;
<span style="white-space:pre">				</span>var modalInstance = $uibModal.open({
<span style="white-space:pre">					</span>templateUrl : 'setting/modal/' + tem + '.html',
<span style="white-space:pre">					</span>controller : con,
<span style="white-space:pre">					</span>resolve : {//传递信息给model控制器
<span style="white-space:pre">						</span>items : function() {
<span style="white-space:pre">							</span>return $scope.items;
<span style="white-space:pre">						</span>},parent: function(){
               <span style="white-space:pre">					</span> return _this
            }
<span style="white-space:pre">					</span>}
<span style="white-space:pre">				</span>});




<span style="white-space:pre">			</span>};

被调用者

.controller('ModalWithSelectCtrl', function($scope, $uibModalInstance, items,parent) {
	$scope.isok = items.isok;
	$scope.is_no_user = items.is_no_user;
	$scope.iscancal = items.iscancal;
	$scope.is_has_user = items.is_has_user;
	$scope.selectNum = items.selectNum;
	$scope.selectAction = items.selectAction;
	$scope.ok = function() {
	$uibModalInstance.close();
     parent.enable()//可以调用调用者的方法
};
	$scope.cancel = function() {
		$uibModalInstance.dismiss();
	};

})



二：" $uibModal.open()",方法返回的是一个modal实例,下面是一些可用参数

1:animation:设置为false,关闭动画效果.默认"true".

2:appendTo:给modal设置一个容器.默认:"body".

3:backdrop:设置false关闭控件背景,默认为"true".

可能的值:

"true":有背景可以通过点击背景来关闭控件. 

"false":没有背景. 

"static":有背景,但点击背景不能关闭控件.

4:"backdropClass":给背景添加一个样式类.

5:"controller":为modal内容添加控制器.

6:"keyboard":设置modal是否可以通过按键"ESC"关闭,默认:"true".

7:"openedClass":modal打开时,为html body 添加样式类.

8:"size":设置modal的大小.可能的值:

"lg"

"sm"

9:"template":设置modal内容.

10:"templateUrl":通过引入html来设置modal的内容.

11:"windowClass":为modal添加样式类.

12:"windowTopClass":为当前modal添加样式类.

13:"resolve":调用控制器与modal控制器中传递值.



三:下面是uibModalInstance一些可用的对象.

1:"$uibModalInstance.dismiss();":取消modal

2:" $uibModalInstance.close();":关闭modal
























吴杼恩
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
BootStrap4（五）组件
weixin_45650998的博客
09-02 803
组件
ui-bootstrap-tpls.min.js 和 ui-bootstrap.min.js 有什么区别
dowemo的博客
11-14 2974
ui-bootstrap-tpls.min.js 和 ui-bootstrap.min.js 有什么区别 tpls 标记表示文件也包含模板。 下面是示例： ui-bootstrap.js angular.module("ui.bootstrap" ["ui.bootstrap.transition" "ui.bootstrap.collapse" "ui.bootstra
Angularjs第三方插件ui-bootstrap-tpls.min.js和ui-bootstrap.min.js的区别、差异、不同
u014743116的专栏
10-11 8240
文章链接：http://camnpr.com/javascript/1651.html
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
最新发布
林林一928的博客
06-03 850
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
ui-bootstrap-tpls-2.2.0.min.js
12-09
ui-bootstrap-tpls-2.2.0.min.js;可试试ui-bootstrap-tpls-2.2.0.min.js
Angular -ui - BootStrap组件的解释以及使用
weixin_30781631的博客
03-03 555
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。 1. 关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别 ngroute是用AngularJS框架的路由的核心部分。 ui-router是一个社区库，...
BootStrap中datepicker的使用和修改
热门推荐
10-31 3万+
笔者的应用场景是angular封装下的bootstrap中datepicker的使用。并一定程度上展示这个插件的diy修改.这两天用到了bootstrap中的datepicker插件。然后查阅了一下各种资料，总的来说，这个插件还是很好用的。但是网上的示例多以自由情景下的使用，多配合jQuery或者js来使用，而像笔者这样使用angularJs下封装的datepicker还是比较少的。惯例是先列出几个
swagger-bootstrap-ui-1.9.6-API文档-中文版.zip
07-13
赠送jar包：swagger-bootstrap-ui-1.9.6.jar； 赠送原API文档：swagger-bootstrap-ui-1.9.6-javadoc.jar； 赠送源代码：swagger-bootstrap-ui-1.9.6-sources.jar； 赠送Maven依赖信息文件：swagger-bootstrap-ui-...
ui-bootstrap-tpls-0.13.1-SNAPSHOT
05-21
"ui-bootstrap-tpls-0.13.1-SNAPSHOT" 是一个与前端开发相关的项目，主要基于JavaScript技术栈，特别是针对UI设计和Bootstrap框架的一个版本。"SNAPSHOT"通常在软件开发中指的是一个未正式发布的、处于开发过程中的...
ui-bootstrap-tpls-1.3.2.
06-19
官网发布的AngularJs的UI指令集,是AngularJs团队以AngularJs方式重写的Bootstrap组件. 此文件包含了指令中用到的模板 依赖文件:angular.js(1.4版本以上)和bootstrap.css(3.0版本以上)
ui-bootstrap-tpls-1.3.2.js
08-24
官网发布的AngularJs的UI指令集,是AngularJs团队以AngularJs方式重写的Bootstrap组件. 此文件包含了指令中用到的模板 依赖文件:angular.js(1.4版本以上)和bootstrap.css(3.0版本以上)
AngularJs的UI组件ui-Bootstrap分享（一）
weixin_33726313的博客
04-23 233
原文地址：http://www.cnblogs.com/pilixiami/p/5597634.html UI-Bootstrap是 AngularJs团队在Bootstrap基础上，用AngularJs实现的一组UI控件，包括Tab页，手风琴，下拉菜单，模态窗口，日期选择等 等。原生的这些控件在Bootstrap里是用Jquery写的，用了UI-Bootstrap就可以抛开Jquery，以An...
angular、ui-bootstrap-tpls分页
09-08
angular、ui-bootstrap-tpls分页 angular、ui-bootstrap-tpls分页 angular、ui-bootstrap-tpls分页 angular、ui-bootstrap-tpls分页 angular、ui-bootstrap-tpls分页
Bootstrap 5-折叠-Accordion（手风琴）
m0_73839298的博客
09-22 514
Accordion（手风琴）
【总结】AngularJs的UI组件ui-Bootstrap
weixin_40326021的博客
11-07 778
http://www.cnblogs.com/pilixiami/p/5597634.html 引入      &lt;script src="/Scripts/angular.js"&gt;&lt;/script&gt;     &lt;script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"&gt;&lt;/script&gt;     &lt;
Bootstrap手风琴(accordion)的用法(v-for)
Lingoic的博客
12-27 483
【代码】Bootstrap手风琴(accordion)的用法(v-for)
【总结】angular-ui-bootstrap
weixin_40326021的博客
11-13 864
要配合angular.js和bootstrap.css https://www.bootcdn.cn/angular-ui-bootstrap/   下载js文件 https://v3.bootcss.com/getting-started/#download bootstrap下载 https://www.cnblogs.com/pilixiami/p/5677515.html   博客参...
bootstrap中的Accordion组件如何使用
qq_39482708的博客
01-27 1365
bootstrap作为一个前端组件库, 可以方便大家做页面开发, 这篇文章来解释下Accordion组件如何使用. Accordion组件功能介绍 Accordion的中文是手风琴, 它的作用是在比较狭小的空间里可以写上比较多的文字. 下面是一个示例: 在初始状态下, 所有文字是收缩的. 但是当我点击某个标题时, 就会展开. 当我点击下一个标题时, 前面展开的会收缩, 然后展开当前点击标题的内容. 由此我们可以知道, Accordion组件的作用就是在狭小的空间内展示比较多的文字内容. Accordi
$uibModal
Mr__jin的博客
03-06 1万+
uibModal是一种创建模态窗口的服务。
springfox-swagger-ui和swagger-bootstrap-ui的区别
05-05
`springfox-swagger-ui` 和 `swagger-bootstrap-ui` 都是 Swagger UI 的实现，可以帮助开发人员快速构建和测试 RESTful API 接口文档。 但它们之间的区别在于： 1. **UI 风格不同**：`springfox-swagger-ui` 风格较为简洁，`swagger-bootstrap-ui` 则更注重美观和易用性。 2. **依赖不同**：`springfox-swagger-ui` 是 Springfox 的一部分，需要引入 `springfox-swagger2` 和 `springfox-swagger-ui` 两个依赖才能使用；而 `swagger-bootstrap-ui` 则是一个独立的项目，可以直接引入。 3. **配置方式不同**：在 Spring Boot 中，`springfox-swagger-ui` 的配置可以通过 `application.properties` 或者 `application.yml` 文件进行配置；而 `swagger-bootstrap-ui` 则需要在代码中进行配置。 综上所述，选择哪一个实现取决于个人的喜好和项目需求。如果你更注重简洁和易用性，可以选择 `springfox-swagger-ui`；如果你更注重美观和自定义能力，可以选择 `swagger-bootstrap-ui`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值