bootstrap 練習
bookList.htmljavascript
<!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.jsoncss
[
{
"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": "兒童類"
}
}
]
我的簡歷html
<!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="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="images/Chrysanthemum.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="images/Tulips.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="images/Penguins.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="images/Jellyfish.jpg" class="img-thumbnail"> </div> </div> <div class="row"> <div class="col-sm-3"> <img alt="." src="images/Chrysanthemum.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="images/Tulips.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="images/Penguins.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="images/Jellyfish.jpg" class="img-thumbnail"> </div> </div> <div class="row"> <div class="col-sm-3"> <img alt="." src="images/Chrysanthemum.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="images/Tulips.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="images/Penguins.jpg" class="img-thumbnail"> </div> <div class="col-sm-3"> <img alt="." src="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>
相關文章
- 1. 練習練習在練習
- 2. Bootstrap小練習------插件系列
- 3. BootStrap複習之BootStrap簡介
- 4. BootStrap複習之BootStrap組件
- 5. JAVA0508練習（練習）
- 6. Bootstrap學習 Base
- 7. Bootstrap學習4
- 8. Bootstrap學習1
- 9. 03-Bootstrap學習
- 10. bootstrap學習
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 練習練習在練習
- 2. Bootstrap小練習------插件系列
- 3. BootStrap複習之BootStrap簡介
- 4. BootStrap複習之BootStrap組件
- 5. JAVA0508練習（練習）
- 6. Bootstrap學習 Base
- 7. Bootstrap學習4
- 8. Bootstrap學習1
- 9. 03-Bootstrap學習
- 10. bootstrap學習