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>
bootstrap 练习的更多相关文章
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 旺财速啃H5框架之Bootstrap（二）
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
- 旺财速啃H5框架之Bootstrap（一）
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- [BootStrap] 富编辑器，基于wysihtml5
在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...
随机推荐
- java文件压缩和解压
功能实现. package com.test; import java.io.File; import java.io.BufferedOutputStream; import java.io.Buf ...
- django ATOMIC_REQUESTS
在数据库配置中,如果配置了此属性为True,如下: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.xxx', 'NAME': '', ...
- stty命令使用
stty [ -a ] [ -g ] [ Options ] stty(set tty)命令用于显示和修改当前注册的终端的属性. UNIX系统为键盘的输入和终端的输出提供了重要的控制手段,可以通过 ...
- 【自动部署】Ansible 怎么通过堡垒机/跳板机 访问目标机器
Ansible机器的 /root/.ssh/config 配置如下即可:Host 目标机器IP User root IdentityFile=/root/.ssh/xxx_id_rsa ProxyCo ...
- [20160804]synchronized
class Timer{ private static int num; void add(String name){ //synchronized (this){ num++; try{ Threa ...
- .NET中六个重要的概念：栈、堆、值类型、引用类型、装箱和拆箱 （转）
作者: Edison Chou 来源: 博客园 发布时间: 2014-09-03 15:59 阅读: 318 次 推荐: 2 原文链接 [收藏] 原文作者:Shivprasad k ...
- memcpy vs memmove
[本文连接] http://www.cnblogs.com/hellogiser/p/memcpy_vs_memmove.html [分析] memcpy与memmove的目的都是将N个字节的源内存地 ...
- ios 音乐播放，音乐信息显示方法
下面的博客写的很清楚了 http://msching.github.io/blog/page/2/ 主要涉及AVAudioPlayer和下面这几个函数 MPNowPlayingInfoCenter.d ...
- Velocity 基本语法
Velocity 基本语法 Velocity 是一个基于 Java 的模板引擎框架,提供的模板语言可以使用在 Java 中定义的对象和变量上.Velocity 是 Apache 基金会的项目,开发的目 ...
- eclipse远程调试Tomcat方法[转]
转载自:http://blog.csdn.net/afgasdg/article/details/9236877 1.Linux中配置tomcat在catalina.sh中添加如下CATALINA_O ...