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窗口的变化而变化 ...
随机推荐
- Pseudo-devices On GNU/Linux
先分享一则有意思Q&A,来自The FreeBSD Funnies 17.4 . Where does data written to* /dev/null* go? It goes in ...
- jsp中EL表达式不起作用的问题1
问题:在jsp页面中使用el表达式取值,取不到值,但是使用jsp中嵌套java代码可以取到值,对应代码如下: 解决: 只要在 jsp中 头文件中写上 : <%@page isELIgnored= ...
- 6.python内置函数
1. abs() 获取绝对值 >>> abs(-10) 10 >>> a = -10 >>> a.__abs__() 10 2. all() ...
- Mac和Xcode常用的快捷键
Mac电脑一般都不怎么用鼠标,因此除了触摸屏的各种双指.三指甚至四指的操作之外,快捷键的使用可以带来非常大的便利,本文则主要收集整理了自己在Mac常规和Xcode开发过程中常用的一些快捷键. 一.Ma ...
- 用过的关于css的知识
1.代码片段 让两个div并排起来显示. <div style="width:1000px; text-align:center;" id="content&quo ...
- [HDU - 5170GTY's math problem 数的精度类
题目链接:HDU - 5170GTY's math problem 题目描述 Description GTY is a GodBull who will get an Au in NOI . To h ...
- Java JTS & 空间数据模型
空间数据模型 判断两个几何图形是否存在指定的空间关系.包括: 相等(equals).分离(disjoint).相交(intersect).相接(touches).交叉(crosses).包含于(wit ...
- 一张图讲清楚TCP流量控制
- lua的通用print函数
1.前言 最近在做关于openresty方面的工作,涉及到lua脚本语言,经常需要打日志查看内容.普通的print函数遇到nil或table时,非常无力.而项目中的代码经常遇到参数为nil或table ...
- bzoj 2427: [HAOI2010]软件安装
Description 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和 ...