Bootstrap لـ AngularJS

AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

Bootstrap

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 元素中添加如下代码:

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

“المرجع “المنراع” “المنراع “AngularJS “المنراع” “المنراع “Bootstrap “المنراع”–

“HTML “المرجع”

“<!DOCTYPE “html”–
“<html”
“<link “rel=“stylesheet””
href=“http://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””
“<body”　
　ng-app=“myApp” “ng-controller=“userCtrl”–
　
<div>
<h2>Users</h2>
<table　
class="table　table-striped">
　　<thead><tr>
　　　　<th>Edit</th>
　　　　<th>First　
Name</th>
　　　　<th>Last　Name</th>
　　</tr></thead>
　　<tbody><tr　
ng-repeat="user　in　users">
　　　　<td>
　　　　　　<button　ng-click="editUser(user.id)">
　　　　　
<span></span>  Edit
　　　　　
</button>
　　　　</td>
　　　　<td>{{　user.fName　}}</td>
　　　　<td>{{　user.lName　}}</td>
　
</tr></tbody>
</table>
<hr>
<button　
ng-click="editUser('new')">
　　<span></span>　Create　New　User
</button>
<hr>
<h2　ng-show="edit">Create　New　User:</h2>
<h2　ng-hide="edit">Edit　
User:</h2>
<form>
<div>
　
<label>First　Name:</label>
　　<div　
class="col-sm-10">
　　　　<input　type="text"　ng-model="fName"　ng-disabled="!edit"　
placeholder="First　Name">
　　</div>
	</div>　
<div>
　
<label>Last　Name:</label>
　　<div　
class="col-sm-10">
　　　　<input　type="text"　ng-model="lName"　ng-disabled="!edit"　
placeholder="Last　Name">
　　</div>
</div>
	<div>
　
<label>Password:</label>
　　<div　
class="col-sm-10">
　　　　<input　type="password"　ng-model="passw1"　
placeholder="Password">
　　</div>
</div>
	<div>
　
<label>Repeat:</label>
　　<div　
class="col-sm-10">
　　　　<input　type="password"　ng-model="passw2"　
placeholder="Repeat　Password">
　　</div>
</div>
</form>
<hr>
<button　ng-disabled="error　||　incomplete">
　　<span></span> حفظ　
التغييرات
</button>
</div>
<script src="myUsers.js"></script>
</body>
　</html>

تحليل رمز JavaScript