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的出现,或皮肤跟网站不匹配, ...
随机推荐
- python self introspection
http://www.ibm.com/developerworks/cn/linux/l-pyint/index1.html
- PHP入门笔记
PHP是一种创建动态交互性站点的强有力的服务器端脚本语言.PHP其代码可以直接嵌入HYML代码.PHP语法非常类似于Perl和C,常常搭配Apache一起使用. 1.PHP是指超文本预处理器(Hype ...
- 7 天玩转 ASP.NET MVC — 第 3 天
目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 我们假定你在开始学习时已经阅读了前两天的学习内容.在第 2 天我们完成了关于显示 Employee ...
- 如何使用shell脚本快速排序和去重文件数据
前面写过一篇通过shell脚本去重10G数据的文章,见<用几条shell命令快速去重10G数据>.然而今天又碰到另外一个业务,业务复杂度比上次的单纯去重要复杂很多.找了很久没有找到相应的办 ...
- JS 判断图片尺寸大小，以便页面resize时，动态调整页面元素位置
){ clearInterval(global_timename4pool); } } //由于无法判断图片显示完整的时机,只好用定时器来做,计算完成后再关掉定时器. global_timename4 ...
- vs2010 快捷键大全
vs2010 快捷键大全 VS2010版快捷键 Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 ...
- JSON数据格式
JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...
- Struts2应用流程注解
当Web容器收到请求(HttpServletReques t)它将请求传递给一个标准的的过滤链包括(ActionContextCleanUp)过滤器. 经过Other filters(SiteMe ...
- 【python】list,dict赋值不要用等号，要用extend,update
如果有一个list,我们用连等号的方式赋值 c = d = [1], 则当c改变时,d同样会改变.字典同理 正确做法应该是: d = [1] c = [1] 或者 d = [1] c.extend(d ...
- Vim 强大的配置
新建文件.vimrc,然后复制如下内容,并将该文件放到vim安装目录下 map <F9> :call SaveInputData()<CR> func! SaveInputDa ...