最近在学bootStrap，在慕课网中有这么一个例子….感觉以后会用到这些代码。保存起来。


<!DOCTYPE html>
<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"><title>现代浏览器博物馆</title><link href="css/bootstrap.min.css" rel="stylesheet"><!--[if lt IE 9]><script src="js/html5shiv.js"></script><script src="js/respond.min.js"></script><![endif]--><style>body {padding-top: 50px;padding-bottom: 40px;color: #5a5a5a;}/* 轮播广告 */.carousel {height: 500px;margin-bottom: 60px;}.carousel .item {height: 500px;background-color: #000;}.carousel .item img {width: 100%;}.carousel-caption {z-index: 10;}.carousel-caption p {margin-bottom: 20px;font-size: 20px;line-height: 1.8;}/* 简介 */.summary {padding-right: 15px;padding-left: 15px;}.summary .col-md-4 {margin-bottom: 20px;text-align: center;}/* 特性 */.feature-divider {margin: 40px 0;}.feature {padding: 30px 0;}.feature-heading {font-size: 50px;color: #2a6496;}.feature-heading .text-muted {font-size: 28px;}/* 响应式布局 */@media (max-width: 768px) {.summary {padding-right: 3px;padding-left: 3px;}.carousel {height: 300px;margin-bottom: 30px;}.carousel .item {height: 300px;}.carousel img {min-height: 300px;}.carousel-caption p {font-size: 16px;line-height: 1.4;}.feature-heading {font-size: 34px;}.feature-heading .text-muted {font-size: 22px;}}@media (min-width: 992px) {.feature-heading {margin-top: 120px;}}</style></head><body>
<!-- 顶部导航 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav"><div class="container"><div class="navbar-header"><!--如果分辨率较小，那么这里就会出现--><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">现代浏览器博物馆</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#ad-carousel">综述</a></li><li><a href="#summary-container">简述</a></li><!--下拉框--><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li><li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li><li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li><li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li><li><a href="#feature-tab" data-tab="tab-ie">IE</a></li></ul></li><!--模态窗口--><li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li></ul></div></div>
</div><!-- 广告轮播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#ad-carousel" data-slide-to="0" class="active"></li><li data-target="#ad-carousel" data-slide-to="1"></li><li data-target="#ad-carousel" data-slide-to="2"></li><li data-target="#ad-carousel" data-slide-to="3"></li><li data-target="#ad-carousel" data-slide-to="4"></li></ol><div class="carousel-inner"><div class="item active"><img src="data:images/chrome-big.jpg" alt="1 slide"><div class="container"><div class="carousel-caption"><h1>Chrome</h1><p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p><p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"role="button" target="_blank">点我下载</a></p></div></div></div><div class="item"><img src="data:images/firefox-big.jpg" alt="2 slide"><div class="container"><div class="carousel-caption"><h1>Firefox</h1><p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p><p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"role="button">点我下载</a></p></div></div></div><div class="item"><img src="data:images/safari-big.jpg" alt="3 slide"><div class="container"><div class="carousel-caption"><h1>Safari</h1><p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p><p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"role="button">点我下载</a></p></div></div></div><div class="item"><img src="data:images/opera-big.jpg" alt="4 slide"><div class="container"><div class="carousel-caption"><h1>Opera</h1><p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p><p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"role="button">点我下载</a></p></div></div></div><div class="item"><img src="data:images/ie-big.jpg" alt="5 slide"><div class="container"><div class="carousel-caption"><h1>IE</h1><p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p><p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"role="button">点我下载</a></p></div></div></div></div><a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- 主要内容 -->
<div class="container summary"><!-- 简介 --><div class="row" id="summary-container"><div class="col-md-4"><img class="img-circle" src="data:images/chrome-logo-small.jpg" alt="chrome"><h2>Chrome</h2><p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p><p><a class="btn btn-default" href="#" role="button">点我下载</a></p></div><div class="col-md-4"><img class="img-circle" src="data:images/firefox-logo-small.jpg" alt="firefox"><h2>Firefox</h2><p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p><p><a class="btn btn-default" href="#" role="button">点我下载</a></p></div><div class="col-md-4"><img class="img-circle" src="data:images/safari-logo-small.jpg" alt="safari"><h2>Safari</h2><p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p><p><a class="btn btn-default" href="#" role="button">点我下载</a></p></div></div><!-- 特性 --><hr class="feature-divider"><ul class="nav nav-tabs" role="tablist" id="feature-tab"><li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li><li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li><li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li><li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li><li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li></ul><div class="tab-content"><div class="tab-pane active" id="tab-chrome"><div class="row feature"><div class="col-md-7"><h2 class="feature-heading">Google Chrome <span
                            class="text-muted">使用最广的浏览器</span></h2><p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p></div><div class="col-md-5"><img class="feature-image img-responsive" src="data:images/chrome-logo.jpg"alt="Chrome"></div></div></div><div class="tab-pane" id="tab-firefox"><div class="row feature"><div class="col-md-5"><img class="feature-image img-responsive" src="data:images/firefox-logo.jpg"alt="Firefox"></div><div class="col-md-7"><h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span></h2><p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p></div></div></div><div class="tab-pane" id="tab-safari"><div class="row feature"><div class="col-md-7"><h2 class="feature-heading">Safari <span class="text-muted">Mac用户首选</span></h2><p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p></div><div class="col-md-5"><img class="feature-image img-responsive" src="data:images/safari-logo.jpg"alt="Safari"></div></div></div><div class="tab-pane" id="tab-opera"><div class="row feature"><div class="col-md-5"><img class="feature-image img-responsive" src="data:images/opera-logo.jpg"alt="Opera"></div><div class="col-md-7"><h2 class="feature-heading">Opera <span class="text-muted">小众但易用</span></h2><p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p></div></div></div><div class="tab-pane" id="tab-ie"><div class="row feature"><div class="col-md-7"><h2 class="feature-heading">IE <span class="text-muted">你懂的</span></h2><p class="lead">Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows InternetExplorer(7，8，9，10版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p></div><div class="col-md-5"><img class="feature-image img-responsive" src="data:images/ie-logo.jpg"alt="IE"></div></div></div></div><!-- 关于 --><div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button><h4 class="modal-title" id="modal-label">关于</h4></div><div class="modal-body"><p>慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">了解了</button></div></div></div></div><!--角标--><footer><p class="pull-right"><a href="#top">回到顶部</a></p><p>&copy; 2014 慕课网 </p></footer></div><script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>/*触发点击事件*/$(function () {$('#ad-carousel').carousel();$('#menu-nav .navbar-collapse a').click(function (e) {var href = $(this).attr('href');var tabId = $(this).attr('data-tab');if ('#' !== href) {e.preventDefault();$(document).scrollTop($(href).offset().top - 70);if (tabId) {$('#feature-tab a[href=#' + tabId + ']').tab('show');}}});});
</script>
</body>
</html>

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>

bootStrap事例代码相关推荐

  1. 解决Bootstrap中代码不高亮问题

    背景:本人用node.js+bootstrap搭建的博客,可惜用marked解析markdown语法后,代码显示灰底黑字,样子很丑. 所以找到了这个方法,可以让代码高亮,虽然也不漂亮,但比原始状态稍好 ...

  2. bootstrap样式代码案例

    运行结果如下所示: 代码如下所示: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...

  3. Bootstrap的代码显示

    在有些专业的网站中,我们常需要显示代码,但是当我们软件在编译时,也会将我们需要展示的代码进行编译.在Bootstrap中为我们提供了两种方式显示代码: 第一种 :<code> 标签.如果您 ...

  4. 微信小程序lottiejs动画事例代码

    将代码直接导入到微信开发者工具即可使用. 素材和页面 lottie.js是lottiejs动画的主加载文件. 如果放在onload里面,切记要使用setTimeout延迟加载一下,因为这个时候 ,ca ...

  5. 鸿蒙os事例代码,鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的实例代码

    一.背景 在采用Java配合xml布局编写鸿蒙app页面的时候,发现sdk自带的Image组件并不能将图片设置成圆形,反复了翻阅了官方API手册(主要查阅了Compont和Image相关的API),起 ...

  6. java中同步嵌套引起的死锁事例代码

    /*目的:自己写一个由于同步嵌套引起的死锁!思路:多个线程在执行时,某一时刻,0-Thread绑定了LockA锁,1-Thread绑定了LockB锁!当0-Thread要去绑定LockB锁时 和 1- ...

  7. socket事例代码

    import java.net.DatagramPacket; import java.net.DatagramSocket; //服务端 public class SocketServer {pub ...

  8. 一个简单express+jade+mysql+bootstrap+nodejs的demo

    Nodejs迅速发展,目前最热的Nodejs构建框架非express莫属,在Github上有32k的star就可以证明.下面就以Nodejs为中心构建一个前后端都包含在内的简单demo吧. 不管开发什 ...

  9. BootStrap学习（2）

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

最新文章

  1. 德州仪器Q2净利7.79亿美元 营收32.7亿美元
  2. Spring MVC入门示例
  3. 剑指offer十:矩形覆盖
  4. 网站的Http请求转为Https请求
  5. 【教程】超详细的虚拟无线控制器安装教程
  6. 一文看尽 CVPR2022 最新 22 篇论文（附打包下载）
  7. WebService开发
  8. split python
  9. 删除链表的中间节点 Java实现_【链表问题】删除单链表的中间节点
  10. poj2376 区间贪心 挑战程序设计竞赛
  11. Laravel 5.1 源码阅读
  12. 详述 ISC BIND 服务器中的信息泄露漏洞
  13. HDU 4417 Super Mario 主席树
  14. git config 的CRUD，增删改查
  15. java string debug_java 中 string 对象
  16. yuv图片拼接 java_java利用ffmpeg把图片转成yuv格式
  17. Gym - 100886I 2015-2016 Petrozavodsk Winter Training Camp, Saratov SU Contest I - Archaeological Res
  18. 如何鉴别虚拟主机好坏
  19. SQLServer2008 SQLSERVER服务远程过程调用失败解决方案
  20. Java WEB练习

热门文章

  1. fseek 函数 详解
  2. ios13 无法传参_免费更新浪漫雅圆+Bauhaus优化适配iOS13
  3. 论文中涉及的格式排版问题
  4. 忽米网赋能长三角制造业成效突出助力企业数字化转型升级
  5. Linux的基本学习（十一）——磁盘配额 与 磁盘阵列
  6. 软件工程3 可行性分析
  7. 通过位置跟踪模型演示PID三个参数作用
  8. 转载：振动分析—频带
  9. 使用html2canvas实现录取通知书
  10. 百度小程序一键取号 · 解密取号