正文
bootstrap 练习
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
bookList.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- 父路径 -->
<!-- <base href="/demo/"> -->
<!-- 页面编码 -->
<meta charset="UTF-8">
<!-- 响应式布局 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap样式文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <!-- Jquery脚本文件 -->
<script src="../scripts/jquery-1.12.2.min.js"></script>
<!-- Bootstrap脚本插件文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- 标签名称 -->
<title>component</title>
</head>
<body class="container">
<header class="page-header">
<h1 class="text-capitalize">dropdown</h1>
</header> <div> <div class="row">
<div class="col-sm-3">
<!-- 折叠面板 -->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#comp"> 计算机类 </a></h4>
</div>
<div id="comp" class="panel-collapse collapse in">
<div> </div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#cult"> 文学类 </a></h4>
</div>
<div id="cult" class="panel-collapse collapse">
<div> </div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#chrd"> 儿童类 </a></h4>
</div>
<div id="chrd" class="panel-collapse collapse">
<div> </div>
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="panel panel-info">
<div class="panel-heading"> </div>
<div class="panel-body">
<blockquote>
<h2><span id="title"></span></h2>
<footer>
作者：<span id="author"></span>
</footer>
</blockquote>
<div class="row">
<div class="col-sm-6">
<img id="img" alt="" class="img-responsive img-rounded">
</div>
<div class="col-sm-6">
<p class="lead">
价格：
<span class="glyphicon glyphicon-usd"></span>
<span id="price"></span>
</p>
<p class="lead">
出版日期：
<code>
<span id="pubdate"></span>
</code>
</p>
<p class="lead">
类别：
<span id="category"></span>
</p>
<p class="text-right">
<button type="button" class="btn btn-primary btn-block btn-lg">
<span class="glyphicon glyphicon-shopping-cart"></span>
Add to cart
</button>
</p>
</div>
</div>
</div>
</div> </div>
</div> <script>
var comps = new Array();
var cults = new Array();
var chrds = new Array();
var a = 0;
var b = 0;
var c = 0;
function showBookInfo(book) {
$("#title").html(book.Title);
$("#author").html(book.Author);
$("#price").html(book.Price);
$("#pubdate").html(book.PubDate);
$("#category").html(book.Category.Name);
$("#img").attr("src", "images/Koala.jpg");
} $(function() {
$.getJSON("books.json", null, function(data) { $(data).each(function(index, book) {
if (book.Category.Id == 1) {
comps[a++] = book;
}
if (book.Category.Id == 2) {
cults[b++] = book;
}
if (book.Category.Id == 3) {
chrds[c++] = book;
}
});
$(comps).each(function(index, book) {
$("#comp").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {
var b = $(this).data("b");
showBookInfo(b);
})));
});
$(cults).each(function(index, book) {
$("#cult").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {
var b = $(this).data("b");
showBookInfo(b);
})));
});
$(chrds).each(function(index, book) {
$("#chrd").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {
var b = $(this).data("b");
showBookInfo(b);
})));
});
$("a[href='#comp']").append($("<span>").addClass("badge pull-right").html(comps.length));
$("a[href='#cult']").append($("<span>").addClass("badge pull-right").html(cults.length));
$("a[href='#chrd']").append($("<span>").addClass("badge pull-right").html(chrds.length));
});
});
</script> </div> <footer class="navbar-fixed-bottom text-center">
© 2015 <span class="glyphicon glyphicon-copyright-mark"></span>
</footer>
</body>
</html>
books.json
[
{
"Id": 1,
"Title": "JAVA LOGIC",
"Author": "Oracle",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 2,
"Title": "HTML",
"Author": "W3C",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 3,
"Title": "SQL BASIC",
"Author": "Microsoft",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 4,
"Title": "C# LOGIC",
"Author": "Microsoft",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 5,
"Title": "JAVA OOP",
"Author": "Oracle",
"Price": 50.99,
"PubDate": "2010-05-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 6,
"Title": "JAVASCRIPT",
"Author": "W3C",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 7,
"Title": "JSP",
"Author": "Oracle",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 8,
"Title": "SQL ADVANCE",
"Author": "Microsoft",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 9,
"Title": "C# OOP",
"Author": "Microsoft",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 10,
"Title": "NTIER",
"Author": "Microsoft",
"Price": 50.99,
"PubDate": "2010-05-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 11,
"Title": "ASP.NET",
"Author": "Microsoft",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 12,
"Title": "AJAX",
"Author": "Microsoft",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 13,
"Title": "HIBERNATE",
"Author": "Oracle",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 14,
"Title": "STRUTS",
"Author": "Oracle",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 15,
"Title": "SPRING",
"Author": "Oracle",
"Price": 50.99,
"PubDate": "2010-05-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 16,
"Title": "西游记",
"Author": "吴承恩",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 17,
"Title": "三国演义",
"Author": "罗贯中",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 18,
"Title": "水浒传",
"Author": "施耐庵",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 19,
"Title": "红楼梦",
"Author": "曹雪芹",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 20,
"Title": "傲慢与偏见",
"Author": "简奥斯汀",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 21,
"Title": "呼啸山庄",
"Author": "艾米莉勃朗特",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 22,
"Title": "战争与和平",
"Author": "列夫托尔斯泰",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 23,
"Title": "红与黑",
"Author": "司汤达",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 24,
"Title": "灰姑娘",
"Author": "格林",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 25,
"Title": "卖火柴的小女孩",
"Author": "格林",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 26,
"Title": "白雪公主",
"Author": "格林",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 27,
"Title": "睡美人",
"Author": "格林",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 28,
"Title": "小红帽",
"Author": "安徒生",
"Price": 10.99,
"PubDate": "2010-05-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 29,
"Title": "拇指姑娘",
"Author": "安徒生",
"Price": 20.99,
"PubDate": "2010-06-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 30,
"Title": "青蛙王子",
"Author": "安徒生",
"Price": 30.99,
"PubDate": "2010-07-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 31,
"Title": "海的女儿",
"Author": "安徒生",
"Price": 40.99,
"PubDate": "2010-08-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
}
]
个人简历
<!DOCTYPE html>
<html lang="zh-cn">
<head> <!-- 页面编码 -->
<meta charset="UTF-8">
<!-- 响应式布局 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap样式文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 自定义样式文件 -->
<link rel="stylesheet" href="styles/site.css">
<!-- Jquery脚本文件 -->
<script src="../scripts/jquery.min.js"></script>
<!-- Bootstrap脚本插件文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- 标签名称 -->
<title>personal resume</title>
</head>
<body class="container">
<header class="page-header">
<h1 class="capitalize">
resume
<small>rammderek</small>
</h1>
</header>
<div class="row"> <div class="col-sm-3">
<div class="row">
<blockquote>
<p class="text-info">个人信息</p>
<small>personal info</small>
</blockquote>
<img class="img-responsive img-rounded" src="data:images/Koala.jpg" alt="证件照" title="证件照">
<section class="text-center">
<span class="lead text-primary">Ramm Derek</span>
</section>
</div>
<div class="row">
<blockquote>
<p class="text-success">联系方式</p>
<small>contact me</small>
</blockquote>
<section>
<address>
<span class="text-muteded">通信地址:</span>
<span class="glyphicon glyphicon-home"></span>
海淀区中鼎大厦<code>7</code>层
<br>
<span class="text-muteded">邮政编码:</span>
<span class="glyphicon glyphicon-barcode"></span>
<kbd>1</kbd><kbd>0</kbd><kbd>0</kbd><kbd>0</kbd><kbd>9</kbd><kbd>8</kbd>
<br>
<span class="text-muteded">电子邮件:</span>
<span class="glyphicon glyphicon-envelope"></span>
<a href="mailto:rammderek@163.com">rammderek@163.com</a>
<br>
<span class="text-muteded">联系电话:</span>
<span class="glyphicon glyphicon-earphone"></span>
<mark>13110012345</mark>
<br>
</address>
</section>
</div>
</div>
<div class="col-sm-8 col-sm-offset-1">
<div class="row">
<div class="jumbotron">
<p class="text-justified"><kbd>3</kbd>年Web前端开发经验，<kbd>5</kbd>个商业网站的制作</p>
<p class="text-justified"><mark>精通</mark><code>HTML5</code>,<code>CSS3</code>,<code>JavaScript</code></p>
<p class="text-justified"><mark>熟练掌握</mark><code>JQuery</code>,<code>Bootstrap</code>,<code>AngularJS</code></p>
<p class="text-justified">
<button class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-search"></span>
了解更多。。。
</button>
</p>
</div>
</div>
<div class="row">
<h3 class="text-success">工作经历
<small> -- job exp</small>
</h3>
<section>
<dl class="dl-horizontal">
<dt>达内时代科技集团</dt>
<dd>2010/1 - 2012/2</dd>
<dd>Web前端工程师 <em>主要从事商业网站前端设计与开发工作</em></dd>
<dt>百度</dt>
<dd>2012/3 - 2013/3</dd>
<dd>用户体验工程师<em>主要承担产品用户体验与产品测试维护工作</em></dd>
<dt>微软</dt>
<dd>2013/3 - 至今</dd>
<dd>产品经理<em>负责产品的推广、设计与产品线的主持工作</em></dd>
</dl>
</section>
</div>
<div class="row">
<h3 class="text-info">教育经历
<small> -- edu exp</small>
</h3>
<section>
<div class="table-responsive">
<table class="table table-condensed table-hover table-striped">
<tr class="active">
<td>时间</td>
<td>学校</td>
<td>专业</td>
<td>学历</td>
</tr>
<tr>
<td>2006/7-2010/2</td>
<td>清华大学</td>
<td>计算机专业</td>
<td>硕士</td>
</tr>
<tr>
<td>2002/7 - 2006/7</td>
<td>北京大学</td>
<td>软件工程</td>
<td>本科</td>
</tr>
<tr>
<td>1999/7 - 2002/7</td>
<td>人大附中</td>
<td><code>N/A</code></td>
<td>高中</td>
</tr>
</table>
</div>
</section>
</div> <div class="row">
<h3 class="text-primary">作品展示
<small> -- proj gallary</small>
</h3>
<div class="row">
<div class="col-sm-3">
<img alt="." src="data:images/Chrysanthemum.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Tulips.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Penguins.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Jellyfish.jpg" class="img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img alt="." src="data:images/Chrysanthemum.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Tulips.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Penguins.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Jellyfish.jpg" class="img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img alt="." src="data:images/Chrysanthemum.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Tulips.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Penguins.jpg" class="img-thumbnail">
</div>
<div class="col-sm-3">
<img alt="." src="data:images/Jellyfish.jpg" class="img-thumbnail">
</div>
</div>
</div> </div> </div> <footer class="navbar-fixed-bottom text-center">© 2015</footer>
</body>
</html>
taxCalc.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>angularjs</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet/less" href="styles/site.less">
<script src="scripts/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="scripts/less.js"></script>
<script src="scripts/angular-1.2.5.js"></script>
<script src="js/controller.js"></script>
<script src="js/module.js"></script>
</head>
<body class="container">
<header class="page-header">
<h1>个税计算器</h1>
</header> <section> <div data-ng-app="appTax" data-ng-controller="taxCtrl"> <div class="row">
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon">请输入税前工资：</span>
<input type="text" data-ng-model="basicSalary" class="form-control" />
</div>
</div>
</div> <div class="row">
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon">你的税后工资是：</span>
<input type="text" class="form-control" />
</div>
</div> </div> <div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<code>社保和公积金缴纳明细（参数可调整）</code>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5" style="line-height: 35px;">
<small>缴纳基数￥：社保</small>
</div>
<div class="col-sm-7">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5" style="line-height: 35px;">
<small>公积金</small>
</div>
<div class="col-sm-7">
<input type="text" class="form-control" />
</div>
</div>
</div> <div class="col-sm-6"> <div class="row">
<span>缴纳比例：单位缴纳</span>
</div>
<div class="row">
<!-- 养老 -->
<div class="input-group input-group-sm">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<span class="input-group-addon"> 养老</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 医疗 -->
<div class="input-group input-group-sm">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<span class="input-group-addon"> 医疗</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 失业 -->
<div class="input-group input-group-sm">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<span class="input-group-addon"> 失业</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 工伤 -->
<div class="input-group input-group-sm">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<span class="input-group-addon"> 工伤</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 生育 -->
<div class="input-group input-group-sm">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<span class="input-group-addon"> 生育</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 公积金 -->
<div class="input-group input-group-sm">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<span class="input-group-addon">公积金</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div> </div>
</div> <div class="col-sm-6"> <div class="row">
<span>个人缴纳</span>
</div>
<div class="row">
<!-- 养老 -->
<div class="input-group input-group-sm">
<span class="input-group-addon hidden-sm hidden-dm hidden-lg"> 养老</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 医疗 -->
<div class="input-group input-group-sm">
<span class="input-group-addon hidden-sm hidden-dm hidden-lg"> 医疗</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 失业 -->
<div class="input-group input-group-sm">
<span class="input-group-addon hidden-sm hidden-dm hidden-lg"> 失业</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 工伤 -->
<div class="input-group input-group-sm">
<span class="input-group-addon hidden-sm hidden-dm hidden-lg"> 工伤</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 生育 -->
<div class="input-group input-group-sm">
<span class="input-group-addon hidden-sm hidden-dm hidden-lg"> 生育</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div>
<!-- 公积金 -->
<div class="input-group input-group-sm">
<span class="input-group-addon hidden-sm hidden-dm hidden-lg">公积金</span>
<input type="text" class="form-control">
<span class="input-group-addon">%</span>
<span class="input-group-addon">￥16000</span>
</div> </div>
</div> <div class="col-sm-6">
<div class="row">
单位共缴纳：￥3358.00
</div>
</div>
<div class="col-sm-6">
<div class="row">
个人共缴纳：￥1779.00
</div>
</div> <div class="row">
<div class="col-sm-2">个税明细</div>
<div class="col-sm-2">
<input type="radio"/> 旧个税
</div>
<div class="col-sm-2">
<input type="radio" checked/> 现行个税
</div>
<div class="col-sm-2">
缴纳个税
</div>
<div class="col-sm-4">
<span class="text-info">￥167.00</span>
</div>
</div> </div>
</div>
</div>
</div>
</div> </section> <footer class="navbar-fixed-bottom text-center">
<span>© 2015</span>
</footer>
</body>
</html>
