toggle笔记
<!DOCTYPE html>
<!-- saved from url=(0040)http://v3.bootcss.com/examples/carousel/ -->
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="./temp_files/ie-emulation-modes-warning.js"></script>
<!-- Custom styles for this template -->
<link href="http://v3.bootcss.com/examples/carousel/carousel.css" rel="stylesheet">
</head>
<body>
<!-- 1.导航条 -->
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<!-- logo部分 -->
<div class="navbar-header">
<!-- 移动端把导航条折叠起来 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<!-- 导航条列表 -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- ///////// -->
<!-- 2.图片轮播 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 中间小圆圈部分 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<!-- 三张图片部分 -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item active">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- 两边按钮部分 -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /////////// -->
<!-- 3.内容部分 -->
<div class="container marketing">
<!-- ====================================== -->
<!-- 标题部分，包含三个内容，一行分成相等的三列 -->
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- =============================== -->
<!-- 特色内容展示部分， -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="img/chrome.png" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider"> <!-- 分隔线 -->
<div class="row featurette">
<div class="col-md-7 col-md-push-5">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block" src="img/firefox.png" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider"> <!-- 分隔线 -->
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="img/safari.png" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider"> <!-- 分隔线 -->
<!-- =============================== -->
<!-- 底部部分 -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</div>
<!-- 引入js文件 -->
<script src="./temp_files/jquery.min.js"></script>
<script src="./temp_files/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="./temp_files/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./temp_files/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
toggle笔记的更多相关文章
- 【MySQL笔记】解除输入的安全模式，Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Queries and reconnect.
Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE tha ...
- ugui中toggle.isOn的属性笔记
准备知识 toggle:指unity3d引擎中UGUI的 toggle组件 (单选框) 本文使用lua语言描述 事件触发 使用unity的ugui,你如果细心观察会发现toggle在界面被关闭/隐藏( ...
- Unity3D学习笔记（二十）：Rect、Canvas、Toggle、Slider、ScrollBar
Rect Transform(锚点):图片中心的四个点,界面以雪花形式显示 当四个点在一起的时候组成锚点,当四个点分开的时候组成锚框(合则锚点,分则锚框) Anchors: ----Min x:控 ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- 《深入理解bootstrap》读书笔记：第4章 CSS组件（上）
bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...
- 《深入理解bootstrap》读书笔记：第一章 入门准备
一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 《锋利的jQruery》读书笔记
由于是一边看书一边练习,所以干把笔记写在html文档中.想看的同学可以复制到一个html文档中,结合浏览器查看.不得不说<锋利的jQuery>是本好书,建议好好看看.尊重知识产权,请购买正 ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
随机推荐
- SSH整合JBPM4.4
第一步:导入所需jar包: 所需的jar包(使用了hibernate annotation和struts2的convention-plugin,可能有多余的包,没做清理): 第二步:修改jbpm配置文 ...
- 解决win7系统远程桌面 server 2003 卡的问题
原因在于从vista开始,微软在TCP/IP协议栈里新加了一个叫做“Window Auto-Tuning”的功能.这个功能本身的目的是为了让操作系统根据网络的实时性能(比如响应时间)来动态调整网络上传 ...
- fastjson格式化bean的简易属性过滤器
fastjson的bean属性过滤器 有的时候,我们在接口开发时,一个完整的bean会包含很多属性,但是前端接口只需要其中的某几个属性时,应该在对json的返回要进行精简.下面直接看代码 packag ...
- Sql Server 常用方法、存储过程备用
常用方法 --字符串转换成数字 --CAST("1" AS int) --CONVERT(int,"1") --截取字符串 SUBSTRING(OccurreA ...
- html5shiv.js-让IE浏览器支持HTML5标准
兼容性IE8及以下IE版本 浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题. <!–[if IE]> ...
- [转]在VS2010 VC++项目中引用Lib静态库（以Openssl为例）
本文转自:http://kb.cnblogs.com/page/94467/ Openssl是个为网络通信提供安全及数据完整性的一种安全协议,囊括了主要的密码算法.常用的密钥和证书封装管理功能以及SS ...
- HTTP 笔记与总结（9）分块传输、持久链接 与 反向 ajax（comet / server push / 服务器推技术）
反向 ajax 又叫 comet / server push / 服务器推技术 应用范围:网页聊天服务器,例如新浪微博在线聊天.google mail 网页聊天 原理:一般而言,HTTP 协议的特点是 ...
- 【FFXV】中物理模拟的结构以及游戏业界的乐趣
11月2日是在日本兵库县神户会议中心召开的[SIGGRAPH ASIA 2015]的第一天,在游戏开发专门的研究会[R&D in the Video Game Industry]上,展开了[F ...
- SQL查询（一）
查询基础练习 练习一: <学生信息表>:students(学号,姓名,性别,出生年,省份,入学年份,班级) <学生选修信息表>:stucourses(学号,课程号,课程名称,分 ...
- 批处理快速创建wifi
为什么要用cmd这种古老的东西创建wifi呢,电脑管家.360安全卫士都有这种插件,一键开启关闭,多方便啊! 开始用的也是电脑管家的免费wifi插件,但是我越来越不能忍它极慢的启动关闭过程,每一次看着 ...