zoukankan      html  css  js  c++  java
  • Offcanvas 自适应窗口示例

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自己写</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    overflow-x: hidden;
    }
    @media screen and (max- 767px) {
    .r1 {
    position: relative;
    right: 0;
    transition: all .25s ease-out;
    }
    .r1 .my-sidebar {
    right: -50%;
    }
    .r1.active {
    right: 50%;
    }
    .my-sidebar {
    position: absolute;
    top: 0;
    50%;
    }
    }
    </style>
    </head>
    <body>

    <nav class="navbar navbar-inverse">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
    aria-expanded="false">Dropdown <span class="caret"></span></a>
    <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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">One more separated link</a></li>
    </ul>
    </li>
    </ul>
    </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>


    <div class="container">
    <div class="row r1">
    <div class="col-md-9 col-sm-9">
    <p class="pull-right visible-xs">
    <button class="btn-xs btn btn-primary" id="toggle-sidebar">切换</button>
    </p>
    <div class="jumbotron">
    <h1>《钗头凤》</h1>
    <p>世情薄,人情恶,雨送黄昏花易落。晓风干,泪痕残。欲笺心事,独语斜阑。难,难,难!
    人成各,今非昨,病魂常似秋千索。角声寒,夜阑珊。怕人寻问,咽泪装欢。瞒,瞒,瞒!
    </p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多…</a></p>
    </div>

    <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-6">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
    Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-6">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
    Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-6">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
    Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-6">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
    Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-6">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
    Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-6">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
    Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
    </div>
    </div>


    </div>
    <div class="col-sm-3 my-sidebar" id="s1">
    <ul class="list-group">
    <li class="list-group-item active">《钗头凤 世情薄》</li>
    <li class="list-group-item">唐琬</li>
    <li class="list-group-item">世情薄,人情恶,</li>
    <li class="list-group-item">雨送黄昏花易落。</li>
    <li class="list-group-item">晓风干,泪痕残。</li>
    <li class="list-group-item">欲笺心事,独语斜阑。</li>
    <li class="list-group-item">难,难,难!</li>
    <li class="list-group-item">人成各,今非昨,</li>
    <li class="list-group-item">病魂常似秋千索。</li>
    <li class="list-group-item">角声寒,夜阑珊。</li>
    <li class="list-group-item">怕人寻问,咽泪装欢。</li>
    <li class="list-group-item">瞒,瞒,瞒!</li>
    </ul>
    </div>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function () {
    $("#toggle-sidebar").click(function () {
    $(".r1").toggleClass("active");
    });
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    .Net Core2.1 秒杀项目一步步实现CI/CD(Centos7.2)系列一:Docker入门
    在ASP.Net Core 中使用枚举类而不是枚举
    ASP.Net Core 中使用Zookeeper搭建分布式环境中的配置中心系列一:使用Zookeeper.Net组件演示基本的操作
    Redis系列文章总结:ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁
    从源码中学习设计模式系列——单例模式序/反序列化以及反射攻击的问题(二)
    ASP.NET Core依赖注入——依赖注入最佳实践
    2019年第一天——使用Visual Studio 2019 Preview创建第一个ASP.Net Core3.0的App
    ASP.Net Core2.1中的HttpClientFactory系列二:集成Polly处理瞬态故障
    ASP.Net Core2.1中的HttpClientFactory系列一:HttpClient的缺陷
    Docker for .Net Developers(part1:Docker基本概念介绍)
  • 原文地址:https://www.cnblogs.com/yifugui/p/7687199.html
Copyright © 2011-2022 走看看