BootstrapAngularJs的UI组件ui-Bootstrap分享(一)

初稿地址:http://www.cnblogs.com/pilixiami/p/5597634.html

UI-Bootstrap是
AngularJs团队在Bootstrap基础及,用AngularJs实现之同一组UI控件,包括Tab页,手风琴,下拉菜单,模态窗口,日期选择当
等。原生的这些控件在Bootstrap里是因此Jquery写的,用了UI-Bootstrap就可摒弃Jquery,以AngularJs的作风实现
我们的以了

准备工作:

1.     
既然UI-Bootstrap是Angularjs和Bootstrap的合体,那么它们必然要依让AngularJs脚本和Bootstrap的样式,所以于页面中,一共用引入这几乎独文件:

    <script
src=”/Scripts/angular.js”></script>

    <script
src=”/Scripts/ui-bootstrap-tpls-1.3.2.js”></script>

    <link href=”/Content/bootstrap.css”
rel=”stylesheet” />

注:

Angularjs的本子要于1.4.0上述(后面例子中动用的凡1.5.5),Bootstrap的版要以3.0之上(后面例子中使的凡3.3.6)

ui-bootstrap-tpls-1.3.2.js名字被包含”tpls”,表示是脚论是连了命令中所用到之沙盘

要急需为此到动画与滑动,需要引入Angular-animate.js和Angular-touch.js文件

而欲用日期,货币,数字之本地化,需要引入angular-locale_zh-cn.js文件

2.     
引入科学的本子后,在module中需要指定依赖之module,即:

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

3.     
bootstrap使用的字图标有半点单文件,后缀为woff和woff2.默伏情况下,IIS是勿支持即片独文件类型的,因此待添加MIME类型,如下:

 

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff"/>
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2"/>
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>

 

4.     
在ui-bootstrap中,以性方式以的通令对应之值,大多数啊表达式,比如is-disabled=true,is-disabled的价值就只是
以安为一个表达式,或者下{{}}绑定一个$scope的变量。有少部分下令的价值不能够是表达式,而若设置也字符串,在后边例子中会说明。

ui-bootstrap及其依赖之公文(点击下载)

 

相关文章