zoukankan      html  css  js  c++  java
  • BootStrap 学习之笔记

      <!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 {
      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;
      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 id="carousel" 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" style=" 650px; height: 411px;" /></a></li>
      <li><a href="/journal/42"><img alt="" src="/Content/3.jpg" style=" 600px; height: 402px;" /></a></li>
      <li><a href="/journal/43"><img alt="" src="/Content/4.jpg" style=" 650px; height: 423px;" /></a></li>
      <li><a href="/journal/44"><img alt="" src="/Content/5.jpg" style=" 640px; height: 454px;" /></a></li>
      <li><a href="/journal/45"><img alt="" src="/Content/6.jpg" style=" 650px; height: 433px;" /></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" id="profile">首页首页首页首页首页首页</div>
      <div class="tab-pane" id="messages">第二页第二页第二页第二页第二页第二页第二页第二页</div>
      <div class="tab-pane" id="settings">第三页第三页第三页</div>
      </div>
      <div class="well">
      <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
      <!-- Modal -->
      <div id="myModal" 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 id="myModalLabel">来自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" id="lA">
      <p>我在A.</p>
      </div>
      <div class="tab-pane" id="lB">
      <p>我在B.</p>
      </div>
      <div class="tab-pane" id="lC">
      <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" style="margin: 0 auto;" 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">&times;</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" id="accordion2">
      <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 id="collapseOne" 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 id="collapseTwo" 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 id="collapseThree" 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" id="inputWarning">
      <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" id="inputError">
      <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" id="inputInfo">
      <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" id="inputSuccess">
      <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" id="inputIcon" type="text">
      </div>
      </div>
      </div>
      </div>
       
      <div class="well">
      <div class="alert">
      <button type="button" class="close" data-dismiss="alert">&times;</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" id="appendedInputButtons" type="text">
      <button class="btn" type="button">搜索</button>
      <button class="btn" type="button">选项</button>
      </div>
      <strong>警告!</strong> 温度过高.
      </div>
      </div>
      <div class="well">
      <div id="myCarousel" 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">&lsaquo;</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</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">
      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;
      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;注册&lt;/a&gt;&lt;/li&gt;
      &lt;li class="disabled"&gt;&lt;a tabindex="-1" href="#"&gt;修改&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;退出&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      </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>
     
    作者:Bober Song
    出处:http://bober.cnblogs.com/
    CARE健康网: http://www.aicareyou.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    “冷面杀手”王励勤赢了
    当VS.NET 无法调试时,不妨尝试一下下面的办法
    Oracle如何调用Windows动态链接库
    根本不值得一提的乒乓球国手王浩
    向总版主提一些建议
    你的家乡话,你还知多少
    黄山三日游(200706020604)
    今天是我的生日,常怀感恩的心
    如果有一个工具可以帮助你将你的代码可视化,你需要吗?
    是社会变化太快,还是我心态有有点怪
  • 原文地址:https://www.cnblogs.com/bober/p/2944622.html
Copyright © 2011-2022 走看看