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-width: 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;
width: 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>
Offcanvas 自适应窗口示例的更多相关文章
- DIV+CSS自适应窗口高度
<html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...
- Qt图片自适应窗口控件大小（使用setScaledContents）
最近在用Qt设计一个小程序,想让一幅图片自适应窗口大小,由于本人比较笨,一直找不到好方法.找到了很多方法但都会出一些小问题, 刚刚摸索出解决办法了,在些记录. 思想: 1 显示图像是用QLabel2 ...
- Qt(自适应窗口)
关于窗口布局: 默认控件的大小为最小尺寸: 如果此时右键设置布局时,窗口大小会自动缩放对应大小,不利于调整. 建议窗口控件设置好最小尺寸,便于窗口布局时,控件不会变形,例如: 改变minimumsiz ...
- 【转】补充说明：关于Beaglebone black上debian无图形界面的问题及QT的窗口示例
有个兄弟发了一个站内的私信给我,内容如下: 时间:2014-03-05 09:08:19 大哥,debian 的BBB版本没有图形界面吧 我安装后只有文本界面 我突然意识到,我前面有没有说清楚的地方, ...
- JQuery图片自适应窗口轮播图（淡入淡出效果）
<script>var w = $(window).width();//获取窗口宽度var h = $(window).height();//获取窗口高度 $(".box&quo ...
- NPOI 列宽自适应 代码示例
//列宽自适应,只对英文和数字有效 for (int i = 0; i <= maxColumn; i++) { sheet.AutoSizeColumn(i); } //获取当前列的宽度,然后 ...
- C# 窗口自适应窗口宽度和高度
其实winform并不适合做自适应这玩意的,虽然,能做是能做, 就像菜刀一样能切水果,但是,不是那么合适,毕竟有水果刀 wpf做自适应拉伸窗体,会更好一些. 代码: #region 自适应 priva ...
- android布局自适应小示例（用户反馈界面）
要求: 1.整个界面刚好填满屏幕,不需要滚动 2.输入反馈内容的EditText控件高度能够自适应 3.提交按钮位于屏幕最下方 核心布局文件如下: <?xml version="1.0 ...
- React组件自适应窗口宽高
很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化 ...
随机推荐
- 如何修改maven默认仓库（即repository）的路径
如何修改maven默认仓库(即repository)的路径 1 在maven的安装目录下,修改Eclipse(或IntelliJ IDEA)的MAVEN的存储位置,点击Browser按钮,选择set ...
- Android项目实战（三十五）：多渠道打包
多渠道打包: 可以理解为:同时发布多个渠道的apk.分别上架不同的应用商店.这些apk带有各自渠道的标签,用于统计分析各个商店的下载次数等数据. 实现步骤 一.添加友盟渠道标签 添加位置:app目录下 ...
- 引言关于本博客的ES6
本博客ES6全部取自于阮一峰的<ES6标准入门>里面掺杂着一些node.js,写这些东西是为了让大家更好的去理解这本书,其实更像是一个教材参考,里面有一些是阮一峰先生可能没有考虑到新手的某 ...
- puppet配置问题统计
一. [root@client puppet]# puppetd --test --server master.test.cominfo: Creating a new SSL key for cli ...
- Python Web框架(URL/VIEWS/ORM)
一.路由系统URL1.普通URL对应 url(r'^login/',views.login) 2.正则匹配 url(r'^index-(\d+).html',views.index) url(r'^i ...
- 【Uva623】500！(高精)
Description 求N! \(N \leq 1000\) Sample Input 10 30 50 100 Sample Output 10! 3628800 30! 265252859812 ...
- 优化css选择器
1.css选择器效率排行从高到低如下: id选择器(#head) 类选择器(.content) 标签选择器(p,h1) 相邻选择器(h1+p) 子选择器(ul < li)
- Zabbix自动发现java进程
一:简介 使用Python psutil模块,查找java模块,并获取启动命令,结合zabbix监控自动监控.点击下载 二:操作 发现脚本 #!/usr/bin/env python # coding ...
- websocket教程（一） 非常有趣的理解websocket
一.websocket与http WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有 1 ...
- JavaUtil_06_DES加解密工具
一.示例 CommonUtil.java package com.ray.test.des; import java.io.ByteArrayOutputStream; import java.io. ...