| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Home Page</title> |
| <script src="http://xiemin.me/bootstrap-2.3.0/assets/js/jquery.js" type="text/javascript"></script> |
| <script src="/Scripts/bootstrap/bootstrap.min.js" type="text/javascript"></script> |
| <link rel="stylesheet" href="/Scripts/bootstrap/bootstrap.min.css"> |
| <link rel="stylesheet" href="/Scripts/bootstrap/bootstrap-responsive.min.css"> |
| |
| <link rel="stylesheet" href="http://sharetour.cloudfoundry.com/css/elastislide.css"/> |
| <script type="text/javascript" src="http://sharetour.cloudfoundry.com/js/modernizr.custom.17475.js"></script> |
| <script type="text/javascript" src="http://sharetour.cloudfoundry.com/js/jquery.elastislide.js"></script> |
| |
| |
| |
| <script type="text/javascript" src="http://xiemin.me/bootstrap-2.3.0/assets/js/google-code-prettify/prettify.js"></script> |
| <link rel="stylesheet" href="http://xiemin.me/bootstrap-2.3.0/assets/js/google-code-prettify/prettify.css"/> |
| |
| <style type="text/css"> |
| body { |
| padding-bottom: 40px; |
| } |
| .box { |
| border: 5px solid #fff; |
| padding: 30px; |
| float: left; |
| margin: 5px; |
| position: relative; |
| overflow: hidden; |
| -webkit-box-shadow: 1px 1px 1px 1px #ccc; |
| -moz-box-shadow: 1px 1px 1px 1px #ccc; |
| box-shadow: 1px 1px 1px 1px #ccc; |
| } |
| |
| /* Base class */ |
| .bs-docs-example { |
| position: relative; |
| margin: 15px 0; |
| padding: 39px 19px 14px; |
| *padding-top: 19px; |
| background-color: #fff; |
| border: 1px solid #ddd; |
| -webkit-border-radius: 4px; |
| -moz-border-radius: 4px; |
| border-radius: 4px; |
| } |
| |
| /* Echo out a label for the example */ |
| .bs-docs-example:after { |
| content: "新闻"; |
| position: absolute; |
| top: -1px; |
| left: -1px; |
| padding: 3px 7px; |
| font-size: 12px; |
| font-weight: bold; |
| background-color: #f5f5f5; |
| border: 1px solid #ddd; |
| color: #9da0a4; |
| -webkit-border-radius: 4px 0 4px 0; |
| -moz-border-radius: 4px 0 4px 0; |
| border-radius: 4px 0 4px 0; |
| } |
| |
| /* Remove spacing between an example and it's code */ |
| .bs-docs-example + .prettyprint { |
| margin-top: -20px; |
| padding-top: 15px; |
| } |
| |
| /* Tweak examples |
| ------------------------- */ |
| .bs-docs-example > p:last-child { |
| margin-bottom: 0; |
| } |
| .bs-docs-example .table, |
| .bs-docs-example .progress, |
| .bs-docs-example .well, |
| .bs-docs-example .alert, |
| .bs-docs-example .hero-unit, |
| .bs-docs-example .pagination, |
| .bs-docs-example .navbar, |
| .bs-docs-example > .nav, |
| .bs-docs-example blockquote { |
| margin-bottom: 5px; |
| } |
| .bs-docs-example .pagination { |
| margin-top: 0; |
| } |
| |
| /*导航*/ |
| |
| .bs-docs-sidenav { |
| width: 228px; |
| margin: 30px 0 0; |
| padding: 0; |
| background-color: #fff; |
| -webkit-border-radius: 6px; |
| -moz-border-radius: 6px; |
| border-radius: 6px; |
| -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); |
| -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); |
| box-shadow: 0 1px 4px rgba(0,0,0,.065); |
| } |
| .bs-docs-sidenav > li > a { |
| display: block; |
| width: 190px \9; |
| margin: 0 0 -1px; |
| padding: 8px 14px; |
| border: 1px solid #e5e5e5; |
| } |
| .bs-docs-sidenav > li:first-child > a { |
| -webkit-border-radius: 6px 6px 0 0; |
| -moz-border-radius: 6px 6px 0 0; |
| border-radius: 6px 6px 0 0; |
| } |
| .bs-docs-sidenav > li:last-child > a { |
| -webkit-border-radius: 0 0 6px 6px; |
| -moz-border-radius: 0 0 6px 6px; |
| border-radius: 0 0 6px 6px; |
| } |
| .bs-docs-sidenav > .active > a { |
| position: relative; |
| z-index: 2; |
| padding: 9px 15px; |
| border: 0; |
| text-shadow: 0 1px 0 rgba(0,0,0,.15); |
| -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); |
| -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); |
| box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); |
| } |
| /* Chevrons */ |
| .bs-docs-sidenav .icon-chevron-right { |
| float: right; |
| margin-top: 2px; |
| margin-right: -6px; |
| opacity: .25; |
| } |
| .bs-docs-sidenav > li > a:hover { |
| background-color: #f5f5f5; |
| } |
| .bs-docs-sidenav a:hover .icon-chevron-right { |
| opacity: .5; |
| } |
| .bs-docs-sidenav .active .icon-chevron-right, |
| .bs-docs-sidenav .active a:hover .icon-chevron-right { |
| background-image: url(../img/glyphicons-halflings-white.png); |
| opacity: 1; |
| } |
| .bs-docs-sidenav.affix { |
| top: 40px; |
| } |
| .bs-docs-sidenav.affix-bottom { |
| position: absolute; |
| top: auto; |
| bottom: 270px; |
| } |
| |
| |
| |
| |
| /**/ |
| |
| .slide{ |
| border: 5px solid #fff; |
| cursor: pointer; |
| float: right; |
| margin: 5px; |
| position: relative; |
| overflow: hidden; |
| -webkit-box-shadow: 1px 1px 1px 1px #ccc; |
| -moz-box-shadow: 1px 1px 1px 1px #ccc; |
| box-shadow: 1px 1px 1px 1px #ccc; |
| } |
| |
| </style> |
| <script type="text/javascript"> |
| $(document).ready(function () { |
| $('#submit').bind('click', function () { |
| var commentVal = $('#comment').val(); |
| var pidVal = $('#pid').val(); |
| |
| if (commentVal == '') { |
| alert('请输入评论!'); |
| return false; |
| } |
| $.post('/comment', |
| { |
| comment: commentVal, |
| pid: pidVal |
| }, function (data) { |
| if (data == '-1') { |
| alert('内容为空!'); |
| return false; |
| } |
| else if (data != '0') { |
| var username = $('#username').val(); |
| var $newcomment = $('<div><div class="head-img span1">' + |
| '<img src="/img/head.jpg" class="img-rounded"></div>' + |
| '<div class="span11"><p>' + username + '怎么了?</p>' + |
| '<p>' + commentVal + '</p></div></div><br>'); |
| $('#comment-list').append($newcomment); |
| $('#comment').val(''); |
| } |
| |
| }); |
| return false; |
| }); |
| |
| $('#carousel').elastislide(); //图片滚动 |
| |
| $('#myTab a').click(function (e) { |
| e.preventDefault(); |
| $(this).tab('show'); |
| }) |
| |
| $("a[data-toggle=popover]")//向右提示 |
| .popover() |
| .click(function(e) { |
| e.preventDefault() |
| }) |
| window.prettyPrint && prettyPrint();// 代码格式化 |
| |
| setTimeout(function () {//左侧导航 |
| $('.bs-docs-sidenav').affix({ |
| offset: { |
| top: function () { return $window.width() <= 980 ? 290 : 210 } |
| , bottom: 270 |
| } |
| }) |
| }, 100); |
| |
| }); |
| |
| |
| </script> |
| </head> |
| <body> |
| <!--navbar --> |
| <div class="navbar navbar-static-top"> |
| <div class="navbar-inner"> |
| <div class="container"> |
| <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </a> |
| <a class="brand" href="/Home/index">DIY Show</a> |
| <div class="nav-collapse collapse"> |
| <ul class="nav"> |
| <li class="active"><a href="//Home/index">首页</a></li> |
| <li><a href="/Home/about">T-Shirt</a></li> |
| <li><a href="/Home/about">DIY</a></li> |
| </ul> |
| <form class="navbar-form pull-right" method="post" action="/login"> |
| <input class="span2" type="text" name="username" placeholder="Email"> |
| <input class="span2" type="password" name="password" placeholder="Password"> |
| <button type="submit" class="btn">登录</button> |
| <a class="btn" href="/registerpage">注册</a> |
| </form> |
| </div><!--/.nav-collapse --> |
| </div> |
| </div> |
| </div> |
| <div class="container"> |
| |
| |
| |
| |
| |
| |
| <!-- head gallery --> |
| <ul class="elastislide-list"> |
| <li><a href="/journal/40"><img alt="" src="/Content/1.jpg" /></a></li> |
| <li><a href="/journal/41"><img alt="" src="/Content/2.jpg" /></a></li> |
| <li><a href="/journal/42"><img alt="" src="/Content/3.jpg" /></a></li> |
| <li><a href="/journal/43"><img alt="" src="/Content/4.jpg" /></a></li> |
| <li><a href="/journal/44"><img alt="" src="/Content/5.jpg" /></a></li> |
| <li><a href="/journal/45"><img alt="" src="/Content/6.jpg" /></a></li> |
| </ul> |
| |
| <div class="row-fluid"> |
| <div class="span8"> |
| <br /> |
| <ul class="nav nav-tabs"> |
| <li class="active"><a href="#profile" data-toggle="tab">首页</a></li> |
| <li><a href="#messages" data-toggle="tab">第二页</a></li> |
| <li><a href="#settings" data-toggle="tab">第三页</a></li> |
| </ul> |
| <div class="tab-content"> |
| <div class="tab-pane active" >首页首页首页首页首页首页</div> |
| <div class="tab-pane" >第二页第二页第二页第二页第二页第二页第二页第二页</div> |
| <div class="tab-pane" >第三页第三页第三页</div> |
| </div> |
| <div class="well"> |
| <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> |
| <!-- Modal --> |
| <div class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
| <h3 >来自XieMin博客的消息</h3> |
| </div> |
| <div class="modal-body"> |
| <p>内容内容内容</p> |
| </div> |
| <div class="modal-footer"> |
| <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button> |
| <button class="btn btn-primary">确定</button> |
| </div> |
| </div> |
| </div> |
| <div class="well"> |
| <p>推荐这里,还不错,便宜又实惠</p> |
| <div class="btn-group"> |
| <button class="btn btn dropdown-toggle" data-toggle="dropdown">小号按钮<span class="caret"></span></button> |
| <ul class="dropdown-menu"> |
| <li><a href="#">Action</a></li> |
| <li><a href="#">Another action</a></li> |
| <li><a href="#">Something else here</a></li> |
| <li class="divider"></li> |
| <li><a href="#">Separated link</a></li> |
| </ul> |
| </div><!-- /btn-group --> |
| </div> |
| <div class="well"> |
| <div class="tabbable tabs-left"> |
| <ul class="nav nav-tabs"> |
| <li class="active"><a href="#lA" data-toggle="tab">第一部分</a></li> |
| <li><a href="#lB" data-toggle="tab">第二部分</a></li> |
| <li><a href="#lC" data-toggle="tab">第三部分</a></li> |
| </ul> |
| <div class="tab-content"> |
| <div class="tab-pane active" > |
| <p>我在A.</p> |
| </div> |
| <div class="tab-pane" > |
| <p>我在B.</p> |
| </div> |
| <div class="tab-pane" > |
| <p>我在C.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="well"> |
| <button type="button" class="btn btn-primary" data-loading-text="提交中...">提交</button> |
| <br /> <input type="text" class="span3" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'> |
| <br /> |
| <a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="这是第一次,iPod touch 采用与 MacBook 产品线同类型的电镀铝金属打造而成。" title="iPod touch">向右显示</a> |
| </div> |
| <div class="well"> |
| <div class="alert alert-block alert-error fade in"> |
| <button type="button" class="close" data-dismiss="alert">×</button> |
| <h4 class="alert-heading">错误!</h4> |
| <p>该页面404了.</p> |
| <p> |
| <a class="btn btn-danger" href="#">换个页面试试</a> <a class="btn" href="#">取消</a> |
| </p> |
| </div> |
| </div> |
| <div class="accordion" > |
| <div class="accordion-group"> |
| <div class="accordion-heading"> |
| <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> |
| iPod shuffle |
| </a> |
| </div> |
| <div class="accordion-body collapse in"> |
| <div class="accordion-inner"> |
| iPod shuffle 色彩缤纷,戴上身就走。现有按键、VoiceOver 与播放列表功能,将几代 iPod shuffle 精华融为一体。由于主体由一块铝金属精密打造,因此 iPod shuffle 不仅手感坚实、外形精致,而且经久耐用。多彩的颜色让它成为绝好的时尚配饰。 |
| </div> |
| </div> |
| </div> |
| <div class="accordion-group"> |
| <div class="accordion-heading"> |
| <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> |
| iPod nano |
| </a> |
| </div> |
| <div class="accordion-body collapse"> |
| <div class="accordion-inner"> |
| 全新 iPod nano 薄度仅为 5.4 毫米,几乎如信用卡般大小,比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍,因此,你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲,也可调节音量。平滑的全新电镀铝金属设计,令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目,难以取舍的缤纷色彩,iPod nano 也就不是 iPod nano 了。 |
| </div> |
| </div> |
| </div> |
| <div class="accordion-group"> |
| <div class="accordion-heading"> |
| <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> |
| iPod touch |
| </a> |
| </div> |
| <div class="accordion-body collapse"> |
| <div class="accordion-inner"> |
| 这是第一次,iPod touch 采用与 MacBook 产品线同类型的电镀铝金属打造而成。其制造工艺也如出一辙:使用一整块铝金属打造机身。而你对 iPod touch 的第一印象,将是它那几乎可以忽视的重量,接着是极其光滑的表层做工,然后是所有 Apple 独有的细节,如高度抛光的斜面边缘。iPod touch 采用硬度极高的一种铝金属制成。这不仅为其带来令人赞叹的外观和触感,它还足够坚固,能伴你度过许多狂欢之夜。 |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="well"> |
| <div class="control-group warning"> |
| <label class="control-label" for="inputWarning">警告</label> |
| <div class="controls"> |
| <input type="text" > |
| <span class="help-inline">有问题</span> |
| </div> |
| </div> |
| |
| <div class="control-group error"> |
| <label class="control-label" for="inputError">出错</label> |
| <div class="controls"> |
| <input type="text" > |
| <span class="help-inline">请修改错误</span> |
| </div> |
| </div> |
| |
| <div class="control-group info"> |
| <label class="control-label" for="inputInfo">资料</label> |
| <div class="controls"> |
| <input type="text" > |
| <span class="help-inline">用户名已被使用</span> |
| </div> |
| </div> |
| |
| <div class="control-group success"> |
| <label class="control-label" for="inputSuccess">成功</label> |
| <div class="controls"> |
| <input type="text" > |
| <span class="help-inline">不错!</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="well"> |
| <img src="/Content/1.jpg" class="img-rounded"> |
| <img src="/Content/2.jpg" class="img-circle"> |
| <img src="/Content/3.jpg" class="img-polaroid"> |
| |
| </div> |
| <div class="well"> |
| <div class="control-group"> |
| <label class="control-label" for="inputIcon">邮箱地址</label> |
| <div class="controls"> |
| <div class="input-prepend"> |
| <span class="add-on"><i class="icon-envelope"></i></span> |
| <input class="span2" type="text"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="well"> |
| <div class="alert"> |
| <button type="button" class="close" data-dismiss="alert">×</button> |
| <select> |
| <option>1</option> |
| <option>2</option> |
| <option>3</option> |
| <option>4</option> |
| <option>5</option> |
| </select> |
| |
| <select multiple="multiple"> |
| <option>1</option> |
| <option>2</option> |
| <option>3</option> |
| <option>4</option> |
| <option>5</option> |
| </select> |
| <br /> |
| <div class="input-append"> |
| <input class="span2" type="text"> |
| <button class="btn" type="button">搜索</button> |
| <button class="btn" type="button">选项</button> |
| </div> |
| <strong>警告!</strong> 温度过高. |
| </div> |
| </div> |
| <div class="well"> |
| <div class="carousel slide"> |
| <ol class="carousel-indicators"> |
| <li data-target="#myCarousel" data-slide-to="0" class="active"></li> |
| <li data-target="#myCarousel" data-slide-to="1"></li> |
| <li data-target="#myCarousel" data-slide-to="2"></li> |
| </ol> |
| <div class="carousel-inner"> |
| <div class="item active"> |
| <img src="/Content/1.jpg" alt=""> |
| <div class="carousel-caption"> |
| <h4>一</h4> |
| <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> |
| </div> |
| </div> |
| <div class="item"> |
| <img src="/Content/2.jpg" alt=""> |
| <div class="carousel-caption"> |
| <h4>二</h4> |
| <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> |
| </div> |
| </div> |
| <div class="item"> |
| <img src="/Content/3.jpg" alt=""> |
| <div class="carousel-caption"> |
| <h4>三</h4> |
| <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> |
| </div> |
| </div> |
| <div class="item"> |
| <img src="/Content/4.jpg" alt=""> |
| <div class="carousel-caption"> |
| <h4>4</h4> |
| <p>44Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> |
| </div> |
| </div> |
| </div> |
| <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> |
| <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> |
| </div> |
| </div> |
| </div> |
| <div class="span3"> |
| <br /> |
| <div class="well"> |
| <legend>同城评价</legend> |
| <p>推荐这里,还不错,便宜又实惠</p> |
| <p>不一定非要称缆车,下面有小路的~</p> |
| <p>虽然生活在这里,不过我也没去过哎</p> |
| </div> |
| <br /> |
| <div class="bs-docs-example"> |
| <pre class="prettyprint linenums"> |
| <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> |
| <li><a tabindex="-1" href="#">注册</a></li> |
| <li class="disabled"><a tabindex="-1" href="#">修改</a></li> |
| <li><a tabindex="-1" href="#">退出</a></li> |
| </ul> |
| </pre> |
| </div> |
| <br /> |
| <div class="span3 bs-docs-sidebar"> |
| <ul class="nav nav-list bs-docs-sidenav"> |
| <li><a href="#overview"><i class="icon-chevron-right"></i> 概述</a></li> |
| <li><a href="#transitions"><i class="icon-chevron-right"></i> 过渡</a></li> |
| <li><a href="#modals"><i class="icon-chevron-right"></i> 对话框</a></li> |
| <li><a href="#dropdowns"><i class="icon-chevron-right"></i> 下拉菜单</a></li> |
| <li><a href="#scrollspy"><i class="icon-chevron-right"></i> 监听滚动</a></li> |
| <li><a href="#tabs"><i class="icon-chevron-right"></i> 标签</a></li> |
| <li><a href="#tooltips"><i class="icon-chevron-right"></i> 提示</a></li> |
| <li><a href="#popovers"><i class="icon-chevron-right"></i> 提示框</a></li> |
| <li><a href="#alerts"><i class="icon-chevron-right"></i> 通知</a></li> |
| <li><a href="#buttons"><i class="icon-chevron-right"></i> 按钮</a></li> |
| <li><a href="#collapse"><i class="icon-chevron-right"></i> 切换</a></li> |
| <li><a href="#carousel"><i class="icon-chevron-right"></i> 轮播</a></li> |
| <li><a href="#typeahead"><i class="icon-chevron-right"></i> 输入提醒</a></li> |
| <li><a href="#affix"><i class="icon-chevron-right"></i> 附加导航</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> |
| <li><a tabindex="-1" href="#">行为</a></li> |
| <li><a tabindex="-1" href="#">其他行为</a></li> |
| <li><a tabindex="-1" href="#">特别行为</a></li> |
| <li class="divider"></li> |
| <li><a tabindex="-1" href="#">分割链接</a></li> |
| </ul> |
| </div> |
| </div> |
| </body> |
| </html> |
|