引导程序选项卡中的 Google 地图 - 特定代码 - IT屋-程序员软件开发技术分享社区
首页 其他开发 引导程序选项卡中的 Google 地图 - 特定代码
引导程序选项卡中的 Google 地图 - 特定代码
[英] Google map in a bootstrap tab - specific code
本文介绍了引导程序选项卡中的 Google 地图 - 特定代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用引导程序选项卡时，地图无法正确加载.解决方案是在单击特定选项卡时调整地图大小.我一直在愚弄这个太久了.我使用了我在堆栈上找到的其他解决方案，但我不知道为什么它仍然不起作用.
这是我所有的代码.我为草率道歉.完成项目后，我通常会回去修饰它.
<html lang="zh-cn"><头><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 name="description" content=""><meta name="author" content=""><link rel="icon" href="../../favicon.ico"><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|Oswald|Titillium Web|Roboto"><title>Bootstrap 的启动模板</title><!-- Bootstrap 核心 CSS --><link href="../../dist/css/bootstrap.min.css" rel="stylesheet"><!-- 此模板的自定义样式--><link href="starter-template.css" rel="stylesheet"><script src="../../assets/js/ie-emulation-modes-warning.js"></script><!-- 用于 HTML5 元素和媒体查询的 IE8 支持的 HTML5 shim 和 Respond.js --><!--[如果是 IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><script src="https://maps.googleapis.com/maps/api/js"></script><脚本>函数初始化(){var mapCanvas = document.getElementById('map');var myLatLng = {lat: 64.8370761, lng: -147.697845};var mapOptions = {中心:myLatLng，缩放:16，mapTypeId: google.maps.MapTypeId.ROADMAP}var map = new google.maps.Map(mapCanvas, mapOptions)var 标记 = 新的 google.maps.Marker({位置:myLatLng，地图:地图，书名:《纳尔逊的摄影》});}$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {初始化();});<身体><nav class="navbardos navbar-inverse navbar-fixed-top"><div class="容器"><div class="navbar-header"><a class="navbar-brand" href="#"><img src="/images/titlegraphic.jpg" class="logo"></a> <ul class="nav navbar-navdos"><li><a class="number">(907)452-3116</a></li><li><a>606 Bentley Drive |费尔班克斯，AK</a></li>
</nav><nav class="navbar navbar-inverse navbar-fixed-top"><div class="容器"><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
<div id="navbar" class="collapse navbar-collapse"><ul class="nav nav-pills"><li class="active"><a data-toggle="pill" href="#home">Home</a></li><li><a data-toggle="pill" href="#about">关于</a></li><li><a data-toggle="pill" href="#services">服务</a></li><li><a data-toggle="pill" href="#portfolio">Portfolio</a></li><li><a data-toggle="pill" href="#contact">联系方式</a></li></div><!--/.nav-collapse -->
</nav><div class="tab-content"><div id="home" class="tab-pane淡入活动"><div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- 指标--><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img class="first-slide" src="/images/10x10reflect-lg.jpg" alt="第一张幻灯片"><div class="容器"><div class="carousel-caption"><h1>音乐制作工作室</h1><p></p><p><a class="btn btn-lg btn-primary" href="#" role="button">了解详情</a></p>
<div class="item"><img class="第二张幻灯片" src="/images/11830247_10207115344978900_1142161344_n.jpg" alt="第二张幻灯片"><div class="容器"><div class="carousel-caption"><h1>Beat Gallery</h1><p></p><p><a class="btn btn-lg btn-primary" href="#" role="button">听着</a></p>
<div class="item"><img class="third-slide" src="/images/TMPstudio.jpg" alt="第三张幻灯片" style="width: 600px;"><div class="容器"><div class="carousel-caption"><h1>工作室服务</h1><p></p><p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</a></p>
<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">上一个</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">下一步</span></a></div><!--/.carousel -->
<div id="about" class="tab-pane淡入淡出"><img src="images/entry.jpg" id="AboutPic1"><h1></h1><p id="铅">使用此文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个基本的 HTML 文档.</p>
<div id="services" class="tab-pane淡出"><h1>操我</h1><p class="lead">使用此文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个主要是准系统的 HTML 文档.</p>
<div id="portfolio" class="tab-pane淡出"><h1>操我</h1><p class="lead">使用此文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个主要是准系统的 HTML 文档.</p>
<div id="contact" class="tab-pane淡入淡出"><div id="地图"></div><div id="联系内容"><h1>我们期待<br>收到您的来信！</h1><br><h2 style="text-decoration: underline">电话号码:</h2><h2>907-452-3116</h2><br><h2 style="text-decoration: underline">电子邮件:</h2><h2>电子邮件</h2><br><h2 style="text-decoration: underline">地址:</h2><h2>尼尔森的专业摄影<br>地址
</div><!--/.container --><!-- Bootstrap 核心 JavaScript==================================================--><!-- 放置在文档的末尾，以便页面加载更快--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="../../dist/js/bootstrap.min.js"></script><!-- 针对 Surface/桌面 Windows 8 错误的 IE10 视口破解 --><script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</html>CSS:
body {填充顶部:50px；背景色:#777}h1, h2, h3 {边距顶部:0；底边距:0；}.starter-template {填充:40px 15px；文本对齐:居中；}.navbar.navbar-inverse.navbar-fixed-top {位置:绝对；背景颜色:#336699；边框:0px；高度:51px；边距顶部:120px；}/*.nav.nav-药丸{}*/.nav.nav-pills li a{白颜色;字体系列:Roboto、Titillium Web、Arial、Verdana、sans-serif；padding-left: 76px;右填充:76px；字体大小:22px；边距顶部:0px；}.nav-pills li a:hover{颜色:灰色；}.navbardos.navbar-inverse.navbar-fixed-top {位置:绝对；背景颜色:黑色；边框:0px；高度:120px；}.nav.navbar-navdos{浮动:对；字体大小:13px；边距顶部:30px；右边距:24px；宽度:200px；}.nav.navbar-navdos li a{填充:0px;白颜色;}.nav.navbar-navdos li a:hover{背景颜色:黑色；}.数字 {字体大小:30px；}.标识 {宽度:400px；左边距:-130px；}#家{边距顶部:100px；位置:绝对；}#关于{边距顶部:150px；宽度:100%}#服务{边距顶部:150px；位置:绝对；}#文件夹{边距顶部:150px；位置:绝对；}#接触{字体系列:Titillium Web、Arial、Verdana、sans-serif；颜色:#E8E8E8；}#联系内容{位置:绝对；向左飘浮;边距顶部:176px；左边距:100px；}#地图 {左边距:650px；边距顶部:180px；位置:绝对；浮动:对；宽度:550px；高度:400px；}/* 轮播基类 */.carousel {左边距:30px；高度:500px；宽度:100%；底边距:60px；边距顶部:20px；}/* 既然定位了图片，我们就需要帮一下标题 */.carousel-caption {高度:500px；}.btn.btn-lg.btn-primary {背景色:#FF9900；}.btn.btn-lg.btn-primary:悬停{背景颜色:#B22400；}/* 由于 img 元素的定位而声明高度 */.carousel .item {高度:800px；背景色:#777；}.carousel-inner >.item >图像{位置:固定；顶部:0；左:0；最小宽度:100%；高度:800px；}.carousel-control.right, .carousel-control.left {背景图像:无；边距顶部:200px；}
解决方案
更新 :您需要将 data-toggle="pill" 更改为 data-toggle="tab"，请参阅更新的示例代码段(2 和 3).
您可以尝试简单地使用:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {初始化();});初始化.
参见工作示例代码段.
function initialize() {var mapCanvas = document.getElementById('map');var myLatLng = {纬度:64.8370761，液化天然气:-147.697845};var mapOptions = {中心:myLatLng，缩放:16，mapTypeId: google.maps.MapTypeId.ROADMAP}var map = new google.maps.Map(mapCanvas, mapOptions)var 标记 = 新的 google.maps.Marker({位置:myLatLng，地图:地图，书名:《纳尔逊的摄影》});}$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {初始化();});
html,身体 {高度:100%；边距:0；填充:0；}#地图 {最大宽度:550px；高度:400px；}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://maps.googleapis.com/maps/api/js?"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="容器"><div class="navbar"><ul class="nav nav-pills"><li class="active"><a data-toggle="tab" href="#home">Home</a><li><a data-toggle="tab" href="#about">关于</a><li><a data-toggle="tab" href="#services">服务</a><li><a data-toggle="tab" href="#portfolio">投资组合</a><li><a data-toggle="tab" href="#contact">联系方式</a><div class="tab-content"><div id="home" class="tab-pane淡入活动"><div class="alert alert-info">家
<div id="about" class="tab-pane淡入淡出"><div class="alert alert-info">关于
<div id="services" class="tab-pane淡出"><div class="alert alert-info">服务
<div id="portfolio" class="tab-pane淡出"><div class="alert alert-info">文件夹
<div id="contact" class="tab-pane淡入淡出"><div class="alert alert-info">地图
<div id="地图"></div>
更新代码:示例 2
函数初始化() {var mapCanvas = document.getElementById('map');var myLatLng = {纬度:64.8370761，液化天然气:-147.697845};var mapOptions = {中心:myLatLng，缩放:16，mapTypeId: google.maps.MapTypeId.ROADMAP}var map = new google.maps.Map(mapCanvas, mapOptions)var 标记 = 新的 google.maps.Marker({位置:myLatLng，地图:地图，书名:《纳尔逊的摄影》});}$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {初始化();});
body {填充顶部:50px；背景色:#777}h1,h2,h3{边距顶部:0；底边距:0；}.starter-template {填充:40px 15px；文本对齐:居中；}.navbar.navbar-inverse.navbar-fixed-top {位置:绝对；背景颜色:#336699；边框:0px；高度:51px；边距顶部:120px；}/*.nav.nav-药丸{}*/.nav.nav-pills li a {白颜色;字体系列:Roboto、Titillium Web、Arial、Verdana、sans-serif；padding-left: 76px;右填充:76px；字体大小:22px；边距顶部:0px；}.nav-pills li a:hover {颜色:灰色；}.navbardos.navbar-inverse.navbar-fixed-top {位置:绝对；背景颜色:黑色；边框:0px；高度:120px；}.nav.navbar-navdos {浮动:对；字体大小:13px；边距顶部:30px；右边距:24px；宽度:200px；}.nav.navbar-navdos li a {填充:0px；白颜色;}.nav.navbar-navdos li a:hover {背景颜色:黑色；}.数字 {字体大小:30px；}.标识 {宽度:400px；左边距:-130px；}#家 {边距顶部:100px；位置:绝对；}#关于 {边距顶部:150px；宽度:100%}#服务 {边距顶部:150px；位置:绝对；}#文件夹 {边距顶部:150px；位置:绝对；}#接触 {字体系列:Titillium Web、Arial、Verdana、sans-serif；颜色:#E8E8E8；}#联系内容{位置:绝对；向左飘浮;边距顶部:176px；左边距:100px；}#地图 {左边距:650px；边距顶部:180px；位置:绝对；浮动:对；宽度:550px；高度:400px；}/* 轮播基类 */.carousel {左边距:30px；高度:500px；宽度:100%；底边距:60px；边距顶部:20px；}/* 既然定位了图片，我们就需要帮一下标题 */.carousel-caption {高度:500px；}.btn.btn-lg.btn-primary {背景色:#FF9900；}.btn.btn-lg.btn-primary:悬停{背景颜色:#B22400；}/* 由于 img 元素的定位而声明高度 */.carousel .item {高度:800px；背景色:#777；}.carousel-inner >.item >图像{位置:固定；顶部:0；左:0；最小宽度:100%；高度:800px；}.carousel-control.right,.carousel-control.left {背景图像:无；边距顶部:200px；}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://maps.googleapis.com/maps/api/js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbardos navbar-inverse navbar-fixed-top"><div class="容器"><div class="navbar-header"><a class="navbar-brand" href="#"><img src="/images/titlegraphic.jpg" class="logo"></a><ul class="nav navbar-navdos"><li><a class="number">(907)452-3116</a><li><a>606 Bentley Drive |费尔班克斯，AK
</nav><nav class="navbar navbar-inverse navbar-fixed-top"><div class="容器"><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
<div id="navbar" class="collapse navbar-collapse"><ul class="nav nav-pills"><li class="active"><a data-toggle="tab" href="#home">Home</a><li><a data-toggle="tab" href="#about">关于</a><li><a data-toggle="tab" href="#services">服务</a><li><a data-toggle="tab" href="#portfolio">投资组合</a><li><a data-toggle="tab" href="#contact">联系方式</a>
<!--/.nav-collapse -->
</nav><div class="tab-content"><div id="home" class="tab-pane淡入活动"><div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- 指标--><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img class="first-slide" src="/images/10x10reflect-lg.jpg" alt="第一张幻灯片"><div class="容器"><div class="carousel-caption"><h1>音乐制作工作室</h1><p></p><p><a class="btn btn-lg btn-primary" href="#" role="button">了解详情</a></p>
<div class="item"><img class="第二张幻灯片" src="/images/11830247_10207115344978900_1142161344_n.jpg" alt="第二张幻灯片"><div class="容器"><div class="carousel-caption"><h1>Beat Gallery</h1><p></p><p><a class="btn btn-lg btn-primary" href="#" role="button">听着</a></p>
<div class="item"><img class="third-slide" src="/images/TMPstudio.jpg" alt="第三张幻灯片" style="width: 600px;"><div class="容器"><div class="carousel-caption"><h1>工作室服务</h1><p></p><p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</a></p>
<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">上一个</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">下一步</span></a>
<!--/.carousel -->
<div id="about" class="tab-pane淡入淡出"><img src="images/entry.jpg" id="AboutPic1"><h1></h1><p id="铅">使用本文档作为快速启动任何新项目的一种方式.<br>你得到的只是这个文本和一个主要是准系统的 HTML 文档.</p>
<div id="services" class="tab-pane淡出"><h1>操我</h1><p class="lead">使用本文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个基本的 HTML 文档.</p>
<div id="portfolio" class="tab-pane淡出"><h1>操我</h1><p class="lead">使用本文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个基本的 HTML 文档.</p>
<div id="contact" class="tab-pane淡入淡出"><div id="地图"></div><div id="联系内容"><h1>我们期待<br>收到您的来信！</h1><br><h2 style="text-decoration: underline">电话号码:</h2><h2>907-452-3116</h2><br><h2 style="text-decoration: underline">电子邮件:</h2><h2>电子邮件</h2><br><h2 style="text-decoration: underline">地址:</h2><h2>尼尔森的专业摄影<br>地址
示例 3
function initialize() {var mapCanvas = document.getElementById('map');var myLatLng = {纬度:64.8370761，液化天然气:-147.697845};var mapOptions = {中心:myLatLng，缩放:16，mapTypeId: google.maps.MapTypeId.ROADMAP}var map = new google.maps.Map(mapCanvas, mapOptions)var 标记 = 新的 google.maps.Marker({位置:myLatLng，地图:地图，书名:《纳尔逊的摄影》});}$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {初始化();});
html,身体 {高度:100%；边距:0；填充:0；}#地图 {高度:500px；宽度:100%；}.navbar.navbar-top,.navbar.navbar-bottom {底边距:0；}@media(最小宽度:768px){.navbar.navbar-bottom .navbar-nav {显示:表；宽度:100%；}.navbar.navbar-bottom .navbar-nav >李{显示:表格单元格；浮动:无；}.navbar.navbar-bottom .navbar-nav >立>一种 {文本对齐:居中；}.navbar .navbar-brand {填充顶部:0;}.navbar .navbar-brand img {高度:100px；宽度:200px；边距:-24px；}.navbar-top {填充顶部:30px；填充底部:30px；}.navbar-top，.navbar-bottom {边界:无；}}.旋转木马，.物品，.积极的，.carousel-内{高度:100%；}/* 轮播基类 */.carousel {高度:500px；宽度:100%；}/* 既然定位了图片，我们就需要帮一下标题 */.carousel .carousel-caption {高度:500px；}.carousel .btn.btn-lg.btn-primary {背景色:#FF9900；}.carousel .btn.btn-lg.btn-primary:悬停{背景颜色:#B22400；}/* 由于 img 元素的定位而声明高度 */.carousel .carousel-inner >.item >图像{位置:固定；顶部:0；左:0；最小宽度:100%；高度:100%；}.carousel .carousel-caption {位置:绝对；最高:33.33%；}.carousel .carousel-control.right,.carousel .carousel-control.left {背景图像:无；}.联系内容{位置:绝对；顶部:160px；左:0；填充:65px 15px 15px；白颜色;背景:rgba(0, 0, 0, 0.25);高度:500px；}.contact-content h2 {边距:0；字体大小:22px；行高:35px；}.contact-content h2:nth-child(even) {文字装饰:下划线；}@media(最大宽度:767px){.carousel {高度:300px；}.carousel-caption {前10名％;}#地图 {高度:300px；}.联系内容{顶部:145px；左:0；填充:30px 15px 15px；背景:rgba(0, 0, 0, 0.55);宽度:100%；高度:300px；}.contact-content h1 {边距:0；字体大小:18px；}.contact-content h2 {字体大小:16px；行高:30px；}}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://maps.googleapis.com/maps/api/js"></script><nav class="navbar navbar-inverse navbar-static-top navbar-top"><div class="容器"><div class="navbar-header"><a class="navbar-brand hidden-xs" href="#"><img src="http://placehold.it/200x100/f00"></a><ul class="nav navbar-nav navbar-right"><li><a href="#">+!(907)-452-3116<li><a href="#">606 Bentley Drive |费尔班克斯，AK
</nav><nav class="navbar navbar-inverse navbar-static-top navbar-bottom"><div class="容器"><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand visible-xs" href="#">BRAND</a>
<div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a data-toggle="tab" href="#home">Home</a><li><a data-toggle="tab" href="#about">关于</a><li><a data-toggle="tab" href="#services">服务</a><li><a data-toggle="tab" href="#portfolio">投资组合</a><li><a data-toggle="tab" href="#contact">联系方式</a>
<!--/.nav-collapse -->
</nav><div class="tab-content"><div id="home" class="tab-pane淡入活动"><div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- 指标--><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img class="第一张幻灯片" src="http://placehold.it/2500x1000/ff0" alt="第一张幻灯片"><div class="carousel-caption"><h1>音乐制作工作室</h1><p><a class="btn btn-lg btn-primary" href="#" role="button">了解详情</a></p>
<div class="item"><img class="第二张幻灯片" src="http://placehold.it/2500x1000/000" alt="第二张幻灯片"><div class="carousel-caption"><h1>Beat Gallery</h1><p><a class="btn btn-lg btn-primary" href="#" role="button">听着</a></p>
<div class="item"><img class="第三张幻灯片" src="http://placehold.it/2500x1000/444" alt="第三张幻灯片"><div class="carousel-caption"><h1>工作室服务</h1><p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</a></p>
<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">以前的</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">下一步</span></a>
<!--/.carousel -->
<div id="about" class="tab-pane淡入淡出"><img src="http://placehold.it/400x400/f00" id="AboutPic1"><p id="铅">使用本文档作为快速启动任何新项目的一种方式.<br>你得到的只是这个文本和一个主要是准系统的 HTML 文档.</p>
<div id="services" class="tab-pane淡出"><h1>操我</h1><p class="lead">使用本文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个基本的 HTML 文档.</p>
<div id="portfolio" class="tab-pane淡出"><h1>操我</h1><p class="lead">使用本文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个基本的 HTML 文档.</p>
<div id="contact" class="tab-pane淡入淡出"><div id="地图"></div><div class="contact-content"><h1>我们期待<br>收到您的来信！</h1><h2>电话号码:</h2><h2>907-452-3116</h2><h2>电子邮件:</h2><h2>电子邮件</h2><h2>地址:</h2><h2>尼尔森的专业摄影<br>阿拉斯加州费尔班克斯 99701
The map doesn't load properly when using bootstrap tabs. The solution is to resize the map upon clicking the specific tab. I have been fooling with this for way too long. I have used other solutions I found on stack but I have no idea why its still not working.
Here is all of my code. I apologize for the sloppiness. I usually go back and pretty it up when I have finished the project.
<!DOCTYPE html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|Oswald|Titillium Web|Roboto ">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 64.8370761, lng: -147.697845};
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Nelson's Photography"
});
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
initialize();
});
</script>
</head>
<body>
<nav class="navbardos navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="/images/titlegraphic.jpg" class="logo"></a>
</div>
<ul class="nav navbar-navdos">
<li><a class="number">(907)452-3116</a></li>
<li><a>606 Bentley Drive | Fairbanks, AK</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#about">About</a></li>
<li><a data-toggle="pill" href="#services">Services</a></li>
<li><a data-toggle="pill" href="#portfolio">Portfolio</a></li>
<li><a data-toggle="pill" href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="/images/10x10reflect-lg.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Music Production Studio</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="/images/11830247_10207115344978900_1142161344_n.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Beat Gallery</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Listen</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="/images/TMPstudio.jpg" alt="Third slide" style="width: 600px;">
<div class="container">
<div class="carousel-caption">
<h1>Studio Services</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</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><!-- /.carousel -->
</div>
<div id="about" class="tab-pane fade">
<img src="images/entry.jpg" id="AboutPic1">
<h1></h1>
<p id="lead">
Use this document as a way to quickly start any new project.<br>
All you get is this text and a mostly barebones HTML document.
</p>
</div>
<div id="services" class="tab-pane fade">
<h1>FUCK me</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div id="portfolio" class="tab-pane fade">
<h1>FUCK me</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div id="contact" class="tab-pane fade">
<div id="map"></div>
<div id="contact-content">
<h1>We're looking forward to<br>
hearing from you!</h1><br>
<h2 style="text-decoration: underline">Phone Number:</h2>
<h2>907-452-3116</h2><br>
<h2 style="text-decoration: underline">Email:</h2>
<h2>email</h2><br>
<h2 style="text-decoration: underline">Address:</h2>
<h2>
Nelson's Professional Photography<br>
address<br>
Fairbanks, Alaska 99701<br>
</h2>
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
CSS:
body {
padding-top: 50px;
background-color: #777
}
h1, h2, h3 {
margin-top: 0;
margin-bottom: 0;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
.navbar.navbar-inverse.navbar-fixed-top {
position: absolute;
background-color: #336699;
border: 0px;
height: 51px;
margin-top: 120px;
}
/*.nav.nav-pills{
}*/
.nav.nav-pills li a{
color: white;
font-family: Roboto, Titillium Web, Arial, Verdana, sans-serif;
padding-left: 76px;
padding-right: 76px;
font-size: 22px;
margin-top: 0px;
}
.nav-pills li a:hover{
color: grey;
}
.navbardos.navbar-inverse.navbar-fixed-top {
position: absolute;
background-color: black;
border: 0px;
height: 120px;
}
.nav.navbar-navdos{
float: right;
font-size: 13px;
margin-top: 30px;
margin-right: 24px;
width: 200px;
}
.nav.navbar-navdos li a{
padding:0px;
color: white;
}
.nav.navbar-navdos li a:hover{
background-color: black;
}
.number {
font-size: 30px;
}
.logo {
width: 400px;
margin-left: -130px;
}
#home{
margin-top: 100px;
position: absolute;
}
#about{
margin-top: 150px;
width:100%
}
#services{
margin-top: 150px;
position: absolute;
}
#portfolio{
margin-top: 150px;
position: absolute;
}
#contact{
font-family: Titillium Web, Arial, Verdana, sans-serif;
color: #E8E8E8;
}
#contact-content{
position: absolute;
float: left;
margin-top: 176px;
margin-left: 100px;
}
#map {
margin-left: 650px;
margin-top: 180px;
position: absolute;
float: right;
width: 550px;
height: 400px;
}
/* Carousel base class */
.carousel {
margin-left: 30px;
height: 500px;
width: 100%;
margin-bottom: 60px;
margin-top: 20px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
height: 500px;
}
.btn.btn-lg.btn-primary {
background-color: #FF9900 ;
}
.btn.btn-lg.btn-primary:hover {
background-color: #B22400 ;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 800px;
background-color: #777;
}
.carousel-inner > .item > img {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
height: 800px;
}
.carousel-control.right, .carousel-control.left {
background-image:none;
margin-top: 200px;
}
解决方案
Update : You need to change data-toggle="pill" to data-toggle="tab", see the updated example Snippets (2 and 3).
You can try simply using:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
initialize();
});
to initialize.
See working example Snippet.
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {
lat: 64.8370761,
lng: -147.697845
};
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Nelson's Photography"
});
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
initialize();
});
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
max-width: 550px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#home">Home</a>
</li>
<li><a data-toggle="tab" href="#about">About</a>
</li>
<li><a data-toggle="tab" href="#services">Services</a>
</li>
<li><a data-toggle="tab" href="#portfolio">Portfolio</a>
</li>
<li><a data-toggle="tab" href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="alert alert-info">
Home
</div>
</div>
<div id="about" class="tab-pane fade">
<div class="alert alert-info">
About
</div>
</div>
<div id="services" class="tab-pane fade">
<div class="alert alert-info">
Services
</div>
</div>
<div id="portfolio" class="tab-pane fade">
<div class="alert alert-info">
Portfolio
</div>
</div>
<div id="contact" class="tab-pane fade">
<div class="alert alert-info">
Map
</div>
<div id="map"></div>
</div>
</div>
</div>
Updated Code: Example 2
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {
lat: 64.8370761,
lng: -147.697845
};
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Nelson's Photography"
});
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
initialize();
});
body {
padding-top: 50px;
background-color: #777
}
h1,
h2,
h3 {
margin-top: 0;
margin-bottom: 0;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
.navbar.navbar-inverse.navbar-fixed-top {
position: absolute;
background-color: #336699;
border: 0px;
height: 51px;
margin-top: 120px;
}
/*.nav.nav-pills{
}*/
.nav.nav-pills li a {
color: white;
font-family: Roboto, Titillium Web, Arial, Verdana, sans-serif;
padding-left: 76px;
padding-right: 76px;
font-size: 22px;
margin-top: 0px;
}
.nav-pills li a:hover {
color: grey;
}
.navbardos.navbar-inverse.navbar-fixed-top {
position: absolute;
background-color: black;
border: 0px;
height: 120px;
}
.nav.navbar-navdos {
float: right;
font-size: 13px;
margin-top: 30px;
margin-right: 24px;
width: 200px;
}
.nav.navbar-navdos li a {
padding: 0px;
color: white;
}
.nav.navbar-navdos li a:hover {
background-color: black;
}
.number {
font-size: 30px;
}
.logo {
width: 400px;
margin-left: -130px;
}
#home {
margin-top: 100px;
position: absolute;
}
#about {
margin-top: 150px;
width: 100%
}
#services {
margin-top: 150px;
position: absolute;
}
#portfolio {
margin-top: 150px;
position: absolute;
}
#contact {
font-family: Titillium Web, Arial, Verdana, sans-serif;
color: #E8E8E8;
}
#contact-content {
position: absolute;
float: left;
margin-top: 176px;
margin-left: 100px;
}
#map {
margin-left: 650px;
margin-top: 180px;
position: absolute;
float: right;
width: 550px;
height: 400px;
}
/* Carousel base class */
.carousel {
margin-left: 30px;
height: 500px;
width: 100%;
margin-bottom: 60px;
margin-top: 20px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
height: 500px;
}
.btn.btn-lg.btn-primary {
background-color: #FF9900;
}
.btn.btn-lg.btn-primary:hover {
background-color: #B22400;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 800px;
background-color: #777;
}
.carousel-inner > .item > img {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
height: 800px;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbardos navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="/images/titlegraphic.jpg" class="logo">
</a>
</div>
<ul class="nav navbar-navdos">
<li><a class="number">(907)452-3116</a>
</li>
<li><a>606 Bentley Drive | Fairbanks, AK</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#home">Home</a>
</li>
<li><a data-toggle="tab" href="#about">About</a>
</li>
<li><a data-toggle="tab" href="#services">Services</a>
</li>
<li><a data-toggle="tab" href="#portfolio">Portfolio</a>
</li>
<li><a data-toggle="tab" href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="/images/10x10reflect-lg.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Music Production Studio</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="/images/11830247_10207115344978900_1142161344_n.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Beat Gallery</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Listen</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="/images/TMPstudio.jpg" alt="Third slide" style="width: 600px;">
<div class="container">
<div class="carousel-caption">
<h1>Studio Services</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</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>
<!-- /.carousel -->
</div>
<div id="about" class="tab-pane fade">
<img src="images/entry.jpg" id="AboutPic1">
<h1></h1>
<p id="lead">
Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.
</p>
</div>
<div id="services" class="tab-pane fade">
<h1>FUCK me</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
<div id="portfolio" class="tab-pane fade">
<h1>FUCK me</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
<div id="contact" class="tab-pane fade">
<div id="map"></div>
<div id="contact-content">
<h1>We're looking forward to<br>
hearing from you!</h1>
<br>
<h2 style="text-decoration: underline">Phone Number:</h2>
<h2>907-452-3116</h2>
<br>
<h2 style="text-decoration: underline">Email:</h2>
<h2>email</h2>
<br>
<h2 style="text-decoration: underline">Address:</h2>
<h2>
Nelson's Professional Photography<br>
address<br>
Fairbanks, Alaska 99701<br>
</h2>
</div>
</div>
</div>
<!-- /.container -->
Example 3
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {
lat: 64.8370761,
lng: -147.697845
};
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Nelson's Photography"
});
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
initialize();
});
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
.navbar.navbar-top,
.navbar.navbar-bottom {
margin-bottom: 0;
}
@media (min-width: 768px) {
.navbar.navbar-bottom .navbar-nav {
display: table;
width: 100%;
}
.navbar.navbar-bottom .navbar-nav > li {
display: table-cell;
float: none;
}
.navbar.navbar-bottom .navbar-nav > li > a {
text-align: center;
}
.navbar .navbar-brand {
padding-top: 0;
}
.navbar .navbar-brand img {
height: 100px;
width: 200px;
margin: -24px;
}
.navbar-top {
padding-top: 30px;
padding-bottom: 30px;
}
.navbar-top,
.navbar-bottom {
border: none;
}
}
.carousel,
.item,
.active,
.carousel-inner {
height: 100%;
}
/* Carousel base class */
.carousel {
height: 500px;
width: 100%;
}
/* Since positioning the image, we need to help out the caption */
.carousel .carousel-caption {
height: 500px;
}
.carousel .btn.btn-lg.btn-primary {
background-color: #FF9900;
}
.carousel .btn.btn-lg.btn-primary:hover {
background-color: #B22400;
}
/* Declare heights because of positioning of img element */
.carousel .carousel-inner > .item > img {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
.carousel .carousel-caption {
position: absolute;
top: 33.33%;
}
.carousel .carousel-control.right,
.carousel .carousel-control.left {
background-image: none;
}
.contact-content {
position: absolute;
top: 160px;
left: 0;
padding: 65px 15px 15px;
color: white;
background: rgba(0, 0, 0, 0.25);
height: 500px;
}
.contact-content h2 {
margin: 0;
font-size: 22px;
line-height: 35px;
}
.contact-content h2:nth-child(even) {
text-decoration: underline;
}
@media (max-width: 767px) {
.carousel {
height: 300px;
}
.carousel-caption {
top: 10%;
}
#map {
height: 300px;
}
.contact-content {
top: 145px;
left: 0;
padding: 30px 15px 15px;
background: rgba(0, 0, 0, 0.55);
width: 100%;
height: 300px;
}
.contact-content h1 {
margin: 0;
font-size: 18px;
}
.contact-content h2 {
font-size: 16px;
line-height: 30px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<nav class="navbar navbar-inverse navbar-static-top navbar-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand hidden-xs" href="#">
<img src="http://placehold.it/200x100/f00">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">+! (907)-452-3116</a>
</li>
<li><a href="#">606 Bentley Drive | Fairbanks, AK</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-static-top navbar-bottom">
<div class="container">
<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 visible-xs" href="#">BRAND</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#home">Home</a>
</li>
<li><a data-toggle="tab" href="#about">About</a>
</li>
<li><a data-toggle="tab" href="#services">Services</a>
</li>
<li><a data-toggle="tab" href="#portfolio">Portfolio</a>
</li>
<li><a data-toggle="tab" href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://placehold.it/2500x1000/ff0" alt="First slide">
<div class="carousel-caption">
<h1>Music Production Studio</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a>
</p>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://placehold.it/2500x1000/000" alt="Second slide">
<div class="carousel-caption">
<h1>Beat Gallery</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Listen</a>
</p>
</div>
</div>
<div class="item">
<img class="third-slide" src="http://placehold.it/2500x1000/444" alt="Third slide">
<div class="carousel-caption">
<h1>Studio Services</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</a>
</p>
</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>
<!-- /.carousel -->
</div>
<div id="about" class="tab-pane fade">
<img src="http://placehold.it/400x400/f00" id="AboutPic1">
<p id="lead">
Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.
</p>
</div>
<div id="services" class="tab-pane fade">
<h1>FUCK me</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
<div id="portfolio" class="tab-pane fade">
<h1>FUCK me</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
<div id="contact" class="tab-pane fade">
<div id="map"></div>
<div class="contact-content">
<h1>We're looking forward to<br>
hearing from you!</h1>
<h2>Phone Number:</h2>
<h2>907-452-3116</h2>
<h2>Email:</h2>
<h2>email</h2>
<h2>Address:</h2>
<h2>Nelson's Professional Photography<br>
Fairbanks, Alaska 99701<br>
</h2>
</div>
</div>
</div>
这篇关于引导程序选项卡中的 Google 地图 - 特定代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
