AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。
Bootstrap
你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：
<link href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。
HTML 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="userCtrl"> <div> <h3>Users</h3> <table> <thead> <tr> <th>编辑</th> <th>名</th> <th>姓</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td> <button ng-click="editUser(user.id)"> <span></span>编辑 </button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr> </tbody> </table> <hr> <button ng-click="editUser('new')"> <span></span>创建新用户 </button> <hr> <h3 ng-show="edit">创建新用户:</h3> <h3 ng-hide="edit">编辑用户:</h3> <form> <div> <label>名:</label> <div> <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名"> </div> </div> <div> <label>姓:</label> <div> <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓"> </div> </div> <div> <label>密码:</label> <div> <input type="password" ng-model="passw1" placeholder="密码"> </div> </div> <div> <label>重复密码:</label> <div> <input type="password" ng-model="passw2" placeholder="重复密码"> </div> </div> </form> <hr> <button ng-disabled="error || incomplete"> <span></span>修改 </button> </div> <script src="https://www.jb51.net/myUsers.js"></script> </body> </html>
运行结果：
指令解析
AngularJS 指令
描述
<html ng-app
为 <html> 元素定义一个应用(未命名)
<body ng-controller
为 <body> 元素定义一个控制器
<tr ng-repeat
循环 users 对象数组，每个 user 对象放在 <tr> 元素中。
<button ng-click
当点击 <button> 元素时调用函数 editUser()
<h3 ng-show
如果 edit = true 显示 <h3> 元素
<h3 ng-hide
如果 edit = true 隐藏 <h3> 元素
<input ng-model
为应用程序绑定 <input> 元素
<button ng-disabled
如果发生错误或者 ncomplete = true 禁用 <button> 元素
Bootstrap 类解析
元素
Bootstrap 类
定义
<div>
container
内容容器
<table>
table
表格
<table>
table-striped
带条纹背景的表格
<button>
btn
按钮
<button>
btn-success
成功按钮
<span>
glyphicon
字形图标
<span>
glyphicon-pencil
铅笔图标
<span>
glyphicon-user
用户图标
<span>
glyphicon-save
保存图标
<form>
form-horizontal
水平表格
<div>
form-group
表单组
<label>
control-label
控制器标签
<label>
col-sm-2
跨越 2 列
<div>
col-sm-10
跨越 10 列
JavaScript 代码
myUsers.js