Boostarp-响应式
一、响应式
响应式介绍
- 响应式布局是什么？
同一个网页在不同的终端上呈现不同的布局等
- 响应式怎么实现的？
1. CSS3 media query 媒体查询
2. JS去控制网页的布局和样式等
- 缺点：工作量大，网页响应慢
- 优点： 专治疑难杂症
3. 用框架
- Bootstrap
- modal
- 轮播
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>轮播示例</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col-md-12">-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpg" alt="...">
<div class="carousel-caption">
世情薄，人情恶，雨送黄昏花易落。
</div>
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
<div class="carousel-caption">
晓风干，泪痕残，欲笺心情，独语斜阑， 难 难 难。
</div>
</div> <div class="item">
<img src="img/banner_3.jpg" alt="...">
<div class="carousel-caption">
人成各，今非昨。病魂常似秋千索。
</div>
</div>
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--</div>-->
<!--</div>-->
<!--</div>--> <script src="../jquery-3.2.1.js"></script>
<script src="../bootstrap-3.3.7/js/bootstrap.min.js"></script> </body>
</html>
轮播示列
二、自定义Bootstrap组件，
- 找到自定义那一页
- 勾选我用到的组件
- 拉到最后面，点击下载 三、常用插件 - Sweet Alert - jQuery lazyload
- 懒加载图片
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图标示例</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="toastr/toastr.min.css">
</head>
<body> <button class="btn btn-lg btn-primary"><i class="fa fa-plug" aria-hidden="true"></i>微信</button> <span class="fa-stack fa-lg">
<i class="fa fa-circle-o fa-stack-1x"></i>
<i class="fa fa-wechat fa-stack-2x"></i>
</span> <script src="jquery-3.2.1.js"></script>
<script src="toastr/toastr.min.js"></script> <script>
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": false,
"positionClass": "toast-top-left",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}; toastr.info("Flatlab is an Awesome dashboard build with BS3 ", "Toastr Notification")
</script>
</body>
</html>
懒加载图片
- Font Awesome
- 字体图标 - Toastr
- 通知栏的插件
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图标示例</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="toastr/toastr.min.css">
</head>
<body> <button class="btn btn-lg btn-primary"><i class="fa fa-plug" aria-hidden="true"></i>微信</button> <span class="fa-stack fa-lg">
<i class="fa fa-circle-o fa-stack-1x"></i>
<i class="fa fa-wechat fa-stack-2x"></i>
</span> <script src="jquery-3.2.1.js"></script>
<script src="toastr/toastr.min.js"></script> <script>
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": false,
"positionClass": "toast-top-left",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}; toastr.info("Flatlab is an Awesome dashboard build with BS3 ", "Toastr Notification")
</script>
</body>
</html>
图片示列
使用：
基本上都是基于jQuery
1. 先导入插件的CSS文件
2. 导入jQuery
3. 导入插件的JS文件
## 常用jQuery插件 - [Font Awesome](http://fontawesome.io/)
- [jQuery lazy load](https://github.com/tuupola/jquery_lazyload)
- [SweetAlert](https://github.com/t4t5/sweetalert)/[SweetAlert2](https://github.com/limonte/sweetalert2)
- [Toastr](http://codeseven.github.io/toastr/)
常用jQuery插件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>offcanvas示例</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<style>
body{
overflow-x: hidden;
}
@media screen and (max-width: 760px) {
#r1 {
position: relative;
right: 0;
/*transition: all .25s ease-out;*/
} #r1 .sidebar {
right: -50%;
} #r1.active {
right: 50%;
} .sidebar {
position: absolute;
width: 50%;
top: 0;
}
} </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" id="r1">
<div class="col-md-9 col-sm-9 col-cs-9">
<p class="visible-xs pull-right">
<button class="btn btn-xs btn-primary" id="toggle-sidebar">切换</button>
</p>
<!-- 巨幕组件-->
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div> <!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
<!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
<!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
<!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
<!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
<!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
<!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
<!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
<!--分块的内容 -->
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>类好啊</h2>
<p>Donec i|d 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>
<button class="btn btn-default">查看详情>></button>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 sidebar">
<!-- 列表组 组件-->
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div> <script src="jquery-3.2.1.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
Boostarp-响应式的更多相关文章
- 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 网站就必须用响应式布局吗？MVC视图展现模式之移动布局
本文先引入给读者一个自己研究的机会,下次深入说明一下: 废话不多说,直接上图 新建一个mvc的项目 在视图里面添加一个移动端视图 正常访问一下 Bootstrap自带的响应式的方式(页面代码并没有改变 ...
- 响应式图片菜单式轮播，兼容手机，平板，PC
昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- iOS开发--Swift RAC响应式编程初探
时间不是很充足, 先少说点, RAC的好处是响应式编程, 不需要自己去设置代理委托, target, 而是主要以信息流(signal), block为主, 看到这里激动吧, 它可以帮你监听你的事件, ...
- JuCheap V2.0响应式后台管理系统模板正式发布beta版本
JuCheap V1.* 查看地址: http://blog.csdn.net/allenwdj/article/details/49155339 经过半年的努力,JuCheap后台通用响应式管理后台 ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- 响应式web设计总结
简单来说响应式是针对不同的屏幕的大小,比如电脑电脑.Pad设备上,屏幕比较宽的,就可以一行放多个Div.到了手机上,或者Pad竖着拿的的时候,一行就只放1到2个Div就差不多了.这样在移动设备上,无论 ...
随机推荐
- EasyNVR摄像机无插件直播安装使用错误原因解析
背景需求 EasyNVR(www.easynvr.com)摄像机无插件直播流媒体服务器对于互联网的视频直播还是有着一定的贡献的.为了方便用户的体验使用,我们也在互联网上放置了对应的试用版本,并且也会随 ...
- 【Windows下DLL查找顺序 】
一.写作初衷 在Windows下单个DLL可能存在多个不同的版本,若不特别指定DLL的绝对路径或使用其他手段指定,在应用程序加载DLL时可能会查找到错误的版本,进而引出各种莫名其妙的问题.本文主要考虑 ...
- js HTML DOM TableRow 对象(innerHTML)
TableRow 对象 TableRow 对象代表一个 HTML 表格行. 在 HTML 文档中 <tr> 标签每出现一次,一个 TableRow 对象就会被创建. TableRow 对象 ...
- coursera 《现代操作系统》 -- 第五周 同步机制（1）
临界区块(Critical section)指的是一个访问共用资源(例如:共用设备或是共用存储器)的程序片段,而这些共用资源有无法同时被多个线程访问的特性.(不是字面意思的一个区域,是程序片段的集合) ...
- 为什么要提倡"Design Pattern"呢？ 开闭原则 系统设计时，注意对扩展开放，对修改闭合。
[亲身经历] 无规矩不成方圆 设计模式 - 搜狗百科 https://baike.sogou.com/v123729.htm?fromTitle=设计模式 为什么要提倡"Design Pat ...
- iOS 静态库的制作
按照公司的想法 要开发一款SDK,于是就抽空学习一下静态枯的制作过程. 在IOS中有静态库和动态库的区分,下面我们就来详细介绍一下. 一.静态库和动态库的详细介绍. 我们平时的工程中或多或少都要引入第 ...
- Django分发控制器urls--白话聊Django系列
开始前,先上一张图,让理解Django内部的处理流程,从图中我们可以知道Django内部使用MTV架构,那今天讲的第一个部分就是控制器,在Tornado框架中叫做路由系统,负责把url映射到相应的处理 ...
- 数据库之MySQL（四）
数据库中的范式: 第一范式(1NF): 数据表中的每一列(字段),必须是不可拆分的最小单元,也就是确保每一列的原子性. 例如: userInfo: '山东省烟台市 1318162008' 依照第一范式 ...
- c# 泛型（Generic）
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 泛型 { ...
- Oracle表约束
约束的概述: 约束是在表中定义的用于维护数据库完整性的一些规则 (1).主键约束 不能为空也不能重复 在一个表中只能定义一个主键约束 Oracle会在主键上建立一个唯一索引,可以指定唯一索引的存储位置 ...