angular-bootstrap

bootstrap是很好用的css框架,angularJS对其进行了集成。

项目主页:https://angular-ui.github.io/bootstrap/

通常来讲,需要引入AngularJS,bootstrap.css。

1.tooltip

angular已经封装好了tooltip这个指令。

<button tooltip='some words to show when arrow hovers'>button</button>

问:hover效果如何在chrome中看详情?

答:鼠标放上去,待tooltip出现后右击,然后在“Elements”视图中查看即可。见图1-1

图1 -1  tooltip元素审查

问:当内容展示过多,被截断怎么办?

答:可尝试直接修改bootstrap.css。由图1-1中可以看到应该修改的是 ".tooltip-inner",见下:

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #000;
  border-radius: 4px;
  /*add one line by yichu*/
  word-wrap: break-word;
}
时间: 2024-10-26 05:33:34

angular-bootstrap的相关文章

仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件_AngularJS

在一个项目中需要一个用来输入分钟数和秒数的控件,然而调查了一些开源项目后并未发现合适的控件.在Angular Bootstrap UI中有一个类似的控件TimePicker,但是它并没有深入到分钟和秒的精度. 因此,决定参考它的源码然后自己进行实现.  最终的效果如下:   首先是该directive的定义: app.directive('minuteSecondPicker', function() { return { restrict: 'EA', require: ['minuteSec

Angular的Bootstrap(引导)和Compiler(编译)机制_AngularJS

在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制. 一:Bootstrap:Angular的初始化 1:Angular推荐的自动化初始如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> &l

angular基于路由控制ui-router实现系统权限控制_AngularJS

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限.  一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分

Angular中使用ui router实现系统权限控制及开发遇到问题_AngularJS

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配

Angular中在前后端分离模式下实现权限控制 - 基于RBAC

权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们需要额外多做一些事

AngularJs bootstrap详解及示例代码_AngularJS

AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu

angular如何在一个网页中同时启动两个app?

AngularJS深入 这个系列真不错,是我想学的深入内容. http://syaning.com/2015/07/16/dive-into-angular-1/ 一般情况下,一个页面中只有一个应用,但是一个页面上多个应用也是可以共存的.通过上面对源码的分析,可以知道,只有第一个应用会自动启动,因此其余的应用需要手动来启动,例如: <div id="app1" ng-app="MyModule1"> <div ng-controller="

AngularJS API之bootstrap启动

对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了. 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script s

利用browserify与requirejs构建ng项目

随着业务的增长,利用ng来构建项目时候,文件数量就会显著的上升,从而上线部署的时候就要考虑压缩合并问题,随着前端工程化的发展,现在已经有很多种第三方工具来实现开发与部署的便捷性,browserify与requirejs就是其中的两个比较好多的工具. browserify以commonjs模块开发规范来约束前端模块开发,最后上线时提供命令行生成合并文件,详情请 点击这里 requirejs以amd模块开发规范来约束前端模块开发,最后上线的时候提供r.js命令行工具来生成合并压缩文件,详情请 点击这

Angular-Bootstrap和Compiler

在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制. 一: Bootstrap:Angular的初始化 1:Angular推荐的自动化初始如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> &