html - Bootstrap Tab 格式推荐 CDN-6ren

html - Bootstrap Tab 格式推荐 CDN

转载作者：行者123 更新时间：2023-11-28 01:24:15

我对 bootstrap.min.css 和选项卡有疑问。当我使用时:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

页面的格式是我想要的，但是当我切换标签时，其他标签的内容不显示(当我切换回第一个时，它显示):

选择“菜单 1”:

当我使用时:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />

格式不好:

但是显示其他选项卡的内容:

请问是否有一个 bootstrap CSS CDN 可以同时处理良好的格式和标签？

这是完整的 html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Camp</title>
        <meta http-equiv=Content-Type content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="description" content="A Scout award tracking application">
        <meta name="author" content="Glyndwr (Wirrin) Bartlett">

        <!-- JQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!-- Validate -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

        <!-- Bootstrap -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

        <!-- Bootstrap Date Picker-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>    

        <!-- Le styles -->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />

            <style type="text/css">

              body {
                padding-top: 40px;
                padding-bottom: 40px;
                background-color: #f5f5f5;
              }

              .form-signin {
                max-width: 300px;
                padding: 19px 29px 29px;
                margin: 0 auto 20px;
                background-color: #fff;
                border: 1px solid #e5e5e5;
                -webkit-border-radius: 5px;
                   -moz-border-radius: 5px;
                        border-radius: 5px;
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                        box-shadow: 0 1px 2px rgba(0,0,0,.05);
              }
              .form-signin .form-signin-heading,
              .form-signin .checkbox {
                margin-bottom: 10px;
                text-align: center;
              }

              .myheader {
                display:flex;
                text-align: center;
              }
              .myimg {
                width: 130px;
                height: auto;
              }
              .pull-right {
                text-align: right;
              }

              /* Tooltip container */

            /* Tooltip text */
            .tooltiptext {
                visibility: hidden;
                width: 120px;
                background-color: #555;
                color: #fff;
                text-align: center;
                padding: 5px 0;
                border-radius: 6px;

                /* Position the tooltip text */
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                margin-left: -60px;

                /* Fade in tooltip */
                opacity: 0;
                transition: opacity 1s;
            }

            .error {
              color: red;
            }

            .req {
              color: red;
            }

            </style>
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- Fav and touch icons -->

    </head>

<body>
    <div id="campDisplay"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');"> 

        <div id="includedContent"></div>

        <form data-toggle="validator" role="form" id="showCampForm">
              <div class="container-fluid shadow">
                  <div class="jumbotron col-lg-12 col-md-12 col-sm-12 col-xs-12">

                      <h3>Camp</h3>

                      <div class="container-fluid">
                          <!-- Nav tabs -->
                          <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                              <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
                            </li>
                          </ul>

                          <!-- Tab panes -->
                          <div class="tab-content col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div id="home" class="container tab-pane active col-lg-12 col-md-12 col-sm-12 col-xs-12"><br>

                                <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">

                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                                <div class="form-group">
                                                    <label class="control-label control-label-left col-lg-5 col-md-5 col-sm-5 col-xs-5" for="startDate">Start Date<span class="req"> *</span></label>
                                                    <div class="input-group date" id="datepicker1">
                                                        <input type="text" class="form-control" id="startDate" name="startDate" placeholder="Start Date">
                                                        <span class="input-group-addon">
                                                            <span class="glyphicon glyphicon-calendar"></span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                                <div class="form-group">
                                                    <label class="control-label control-label-left col-lg-5 col-md-5 col-sm-5 col-xs-5" for="startDate">End Date<span class="req"> *</span></label>
                                                    <div class='input-group date' id='datepicker2'>
                                                        <input type="text" class="form-control" id="endDate" name="endDate" placeholder="End Date">
                                                        <span class="input-group-addon">
                                                            <span class="glyphicon glyphicon-calendar"></span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="location">Location of Camp:<span class="req"> *</span></label>
                                            <input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="location" name="location" placeholder="Location of Camp">
                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="details">Details of Camp:<span class="req"> *</span></label>
                                            <input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="details" name="details" placeholder="Details of Camp">
                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="nights">Nights in Camp:<span class="req"> *</span></label>
                                            <input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="nights" name="nights" placeholder="Nights in Camp">
                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="building">Nights in a building:<span class="req"> *</span></label>
                                            <input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="building" name="building" placeholder="Nights in a building">
                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="canvas">Nights under canvas:<span class="req"> *</span></label>
                                            <input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="canvas" name="canvas" placeholder="Nights under canvas">
                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="actualKM">Kilometres Travelled:<span class="req"> *</span></label>
                                            <input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="actualKM" name="actualKM" placeholder="Kilometres Travelled">
                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="offset">Offset:<span class="req"> *</span></label>
                                            <input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="offset" name="offset" placeholder="Offset">
                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="outcome">Outcome:</label>
                                            <input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="outcome" name="outcome" placeholder="Outcome">
                                        </div>

                                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <button id="update" class="btn btn-large btn-primary" >Update</button>
                                            <button id="clear" class="btn btn-large btn-primary" >Clear</button>
                                            <button id="delete" class="btn btn-large btn-primary" >Delete</button>
                                        </div>

                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                        <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="outcome">Photograph:</label>
                                        <input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8" type="file" id="photo" name="photo" placeholder="Photograph">
                                        <img src="..." alt="..." class="img-thumbnail">
                                    </div>

                                </div>

                            </div>
                            <div id="menu1" class="container tab-pane fade"><br>

                              <h3>Menu 1</h3>
                              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                            </div>
                            <div id="menu2" class="container tab-pane fade"><br>
                              <h3>Menu 2</h3>
                              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                            </div>
                          </div>

                      </div>
                  </div>
              </div>
        </form>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

    <script src="js/camp.js"></script>
</body>
</html>

最佳答案

使用下面的引用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

对于表单输入，使用“表单组”，它会在表单控件周围留出间距。

关于html - Bootstrap Tab 格式推荐 CDN，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51335739/

文章推荐： html - Ionic App 中模态的 ionic 滑动框问题

文章推荐： html - 如何在 jQuery DataTables 中使用外部搜索框

文章推荐： javascript - 如何使用某些动态类获取输入的最后一个值？

cdn - 如何使用语义UI CDN？
如何使用 CDN 将语义 UI 包含到 HTML 页面？ CDN链接为https://cdnjs.com/libraries/semantic-ui ，但是怎么使用呢？最佳答案您只需复制要用于语义
cdn - 谷歌云 CDN、存储和容器引擎问题与后端服务
我有一个我似乎无法解决的特定用例。典型的 gcloud 设置: K8S集群一个 gcloud 存储桶 gcloud 负载均衡器我设法获得了我的域 https://cdn.foobar.com/u
cdn - 使用内容分发网络 (CDN) 的优点和缺点是什么？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
cdn - Windows Azure CDN 中的更新文件
我有 blob 存储和 CDN 端点，用于存储我的静态内容。现在我想更新 app.js 文件，因为它被修改了，但是当我将此文件写入 blob 时，CDN 仍然给我旧的 app.js 文件。如何更新我
cdn - 通用组件/文件的 CDN 列表
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
cdn - 如何强制清除或失效 Azure CDN 内容？
出于性能原因，我希望通过 Azure CDN 提供很少更改的内容。但是，当内容确实发生变化时，更新的数据立即可用很重要。理想情况下，我可以设置一个长 TTL，然后在我更新内容时主动告诉 CDN 使内容
cdn - Requirejs 的顺序不适用于优先级配置和 CDN 依赖项
以下main.js代码不遵守优先级顺序(有时underscore.js在backbone.js需要时不会加载它): require({ baseUrl:'/scripts', prio
azure-cdn - Azure CDN 端点名称可以重复使用吗？
为什么我不能重用以前删除的端点的名称？例如，如果我创建一个名为“acme-cdn1”的端点，将其删除，然后尝试创建一个具有相同名称的新端点，我会收到以下消息:“错误，该端点名称已经存在。”是否有必要删
jQuery Mobile CDN 与本地 CDN
我不确定我是否使用 CDN 还是本地。本地是否意味着jquery资源需要安装在智能手机上，以便离线应用程序成为可能？最佳答案在这种情况下，本地意味着您自己托管文件(作为网站的一部分)，而不是依赖
cdn - 为什么建议从 CDN 加载 jQuery 或任何其他库？
一种不言自明的问题:为什么建议从 CDN 加载 jQuery 或任何其他库？最佳答案 CDN 将比您的服务器更快。服务器具有最大连接数。浏览器将同时请求的数量限制在单个域中。将您的库卸载到 CDN
cdn - CDN 的 Amazon CloudFront 替代方案？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
cdn - Google AMP 缓存是免费的 CDN 服务吗？
我知道 Google AMP 缓存会缓存网站的有效 AMP 页面和资源文件，并通过 .cdn.ampproject.org/提供它们。我做了一些测试，它对我的网站运行良好。我在一家受欢迎的网站工
cdn - 是否有任何 CDN 允许重写请求 URI，以便客户端路由与浏览器刷新配合得很好？
我有一个用静态 html/js/css 编写的 HTML5 应用程序(它实际上是用 Dart 编写的，但会编译成 javascript)。我通过 CDN 提供应用程序文件，REST api 托管在一个
php - 直接访问 CDN 域时从 CDN 重定向到主网站？
我不太确定如何防止谷歌将我的 CDN 域与我的主域名混合编入索引。我想在直接访问 CDN 域时通过 .htaccess 重定向到主域。事实: 两个域都指向文件系统中的同一个位置。两者共享相同的 r
google-cdn - 如何测试 Google AMP 项目的 CDN？
引自此处:https://www.ampproject.org/docs/get_started/about-amp.html AMP is a way to build web pages for
azure - Microsoft Azure CDN 是真正的 CDN 还是完全是别的东西？
我刚刚尝试设置 Azure CDN 帐户，到目前为止(现在已经持续了四个小时)我还无法让它返回除 400 和 404 错误之外的任何内容。如果这是一个真正的 CDN，我需要做的就是将 CDN 指向我
cdn - 通过 CDN 为 protected Assets 提供服务
我们希望提供来自少数可用 AWS 区域的大量视频文件。目标受众来自全局多个地点。不保证连接速度。因此，绝对需要 CDN(最好是 CloudFront)。视频需要受到保护，因此只有在用户经过身份验证和
cdn - 是否有托管 Google Code Pretify 的内容分发网络 (CDN)？
有没有content delivery network (CDN)正在托管google-code-prettify ？我正在 TypePad 上建立一个博客如果可能的话，希望利用 CDN。最佳答案
cdn - 将 CDN 与 ember-cli 结合使用
在我的应用程序中，使用 ember-cli 开发，我还需要一些外部资源，例如 bootstrap；现在我通过 Brocfile 导入它: app.import('bower_components/bo
cdn - 有没有像 960GS 这样的 CSS 框架的 CDN？
我想知道是否有像 960GS 这样的 CSS 框架的 CDN。因为我认为很多人都在使用它。最佳答案我还没有尝试过 cachedcommons.org，但他们有一个 960 的链接，听起来像你所要求

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap Tab 格式推荐 CDN