本文为翻译文档。原文是https://angular-ui.github.io/bootstrap/(需要翻墙)。

准备工作:

依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生AngularJS指令。致使UIBootstrap是不依赖jQuery和Bootstrap的js文件的。这仅仅需要依赖着:

  • AngularJS
  • Bootstrap CSS

文件的下载可以从官网中下载。

安装

只要你有所有文件下载并包含在你的页面中,你只需要在ui.bootstrap模块中申请依赖关系。

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

你可以从这个页面中看到这里描述的工作示例。

CSS

最初引导的CSS取决于空href属性,来为几个组件添加样式游标(分页,标签等),但是在AngularJS中添加空的href属性将会导致不必要的路线的更改。这就是为什么我们需要从指示结果模板和样式不正确的应用中删除空的href链接。解决办法很简单,只要将下面的样式添加到你的应用程序中:

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

Accordion

Alert

Buttons

Carousel

Collapse

Datepicker

Dropdown

Modal

Pagination

Popover

Progressbar

Rating

Tabs

Timepicker

Tooltip

Typeahead

 

UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件的更多相关文章

  1. angularjs UI Libraries

    angularjs UI Libraries ● ng-bootstrap is currently available. ● PrimeNG has largest number of compon ...

  2. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  3. 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理汇总.如果对文中的题目全部了然于胸,觉得对整个angular框架应该掌握的七七八八了.希望志同道合的通知补充 ...

  4. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  5. angularjs源码分析之:angularjs执行流程

    angularjs用了快一个月了,最难的不是代码本身,而是学会怎么用angular的思路思考问题.其中涉及到很多概念,比如:directive,controller,service,compile,l ...

  6. 你会用AngularJS,但你会写AngularJS文档么?

    你会用AngularJS,但你会写AngularJS文档么? 涉及知识:gulp javascript 我们经常在写代码的时候要求写好注释,方便日后维护.但其实注释还有一个重要的用途:生成API文档. ...

  7. Android中实时预览UI和编写UI的各种技巧

    一.啰嗦 之前有读者反馈说,你搞这个所谓的最佳实践,每篇文章最后就给了一个库,感觉不是很高大上.其实,我在写这个系列之初就有想过这个问题.我的目的是:给出最实用的库来帮助我们开发,并且尽可能地说明这个 ...

  8. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  9. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

随机推荐

  1. So many good projects for studying C programming lanuage.

    Some one asked a question for studying C programming language on stackexachange.com. He got a bucket ...

  2. 一个python

    #!/usr/bin/env python #coding=utf-8 import os # 遍历文件 r=input("type a directory name:") for ...

  3. Spring中的设计模式

    [Spring中的设计模式] http://www.uml.org.cn/j2ee/201301074.asp [详解设计模式在Spring中的应用]    [http://www.geek521.c ...

  4. wchar_t 和 char 之间转换

    vc++2005以后,Visual studio 编译器默认的字符集为Unicode.VC中很多字符处理默认为宽字符wchar_t,如CString的getBuffer(),而一些具体操作函数的输入却 ...

  5. 习总强调网络安全 ,咱们国产SSL证书必须加快普及速度

    上海(2014 年 2 月 27 日)—— 央视新闻联播 27 日报道中央网络安全和信息化领导小组于当日成立的消息及习总在该小组首次会议上的重要讲话.据悉,该小组由习总任小组长,李克强.刘云山任副组长 ...

  6. Firefox 32 支持 Public Key Pinning 对抗中间人攻击。

    Firefox 32 支持 Public Key Pinning 对抗中间人攻击.8月28日消息,即将发布的Firefox 32将支持Public Key Pinning机制,以防止中间人攻击.Pub ...

  7. AllocateHwnd is not Thread-Safe

    http://www.thedelphigeek.com/2007/06/allocatehwnd-is-not-thread-safe.html http://gp.17slon.com/gp/fi ...

  8. Html游戏开发-画图

    1. 画矩形和写字 var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context ...

  9. Maven实战之Quick Start

    Introduction Maven是一个异常强大的构建工具,能够帮我们自动化构建过程,从清理.编译.测试到生成报告,再到打包和部署.通过Maven,我们只需要输入简单的命令(如mvn clean i ...

  10. 安装luinxWEB

    Webmin的安装很简单,下面就详细说一下安装步骤. 1.用ssh客户端软件登陆服务器2.切换目录到root下,命令是:cd /root/3.下载Webmin的安装文件,命令是:wget http:/ ...