【AngularJS】panel基本用法——最基本的panel

来源:互联网 发布:神马seo搜索排名优化 编辑:程序博客网 时间:2024/06/07 00:26

最近在学AngularJS,用博客做笔记,之后会慢慢进阶;现最基本的一个panel如下;

1·源码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap实例-带语境色彩的面板</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"
>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="pannel-body">
这是一个基本的面板
</div>
</div>
</body>


注意:这里文中蓝色字体标识:

panel-primary:表示面板为蓝色;而其他:

panel-success:表示浅绿色面板;

panel-info:表示浅蓝色面板;

 panel-warning:表示浅黄色面板

 panel-danger:表示浅红色面板;



2·截图:






原创粉丝点击