twitter-bootstrap 相关问题

我需要使用 jQuery 获取活动选项卡的 id 值

我这里有一个代码： A级 我这里有一个代码： <ul class="nav nav-pills nav-justified" id="pills-COD"> <li class="active"><a data-toggle="tab" href="#a">Class A</a></li> <li><a data-toggle="tab" href="#b">Class B</a></li> <li ><a data-toggle="tab" href="#c">Class C</a></li> <li><a data-toggle="tab" href="#d">Class D</a></li> </ul> <div class="tab-content"> <div id="a" class="tab-pane fade in active"> <h3>HOME</h3> <p>Some content.</p> </div> <div id="b" class="tab-pane fade"> <h3>Menu 1</h3> <p>Some content in menu 1.</p> </div> <div id="c" class="tab-pane fade"> <h3>Menu 2</h3> <p>Some content in menu 2.</p> </div> </div> 每当使用 id 单击药丸时，我需要获取活动选项卡的 jQuery。 例如，每当单击 "a"、li 时，我需要获取值 "Class A"。 我在堆栈溢出中发现了其他研究，但是 .tabs() 在 jQuery 中对我不起作用。其他解决方案也显示 href 值，但我需要活动选项卡的标记 id。 单击锚点时，您需要获取不带 href 的 # 属性，如下所示： $(this).attr("href").replace("#", "") attr("href") 从单击的锚点获取 href 值。和 replace，将 # 替换为空字符串。 这是一个片段： $("ul.nav-pills > li > a").click(function() { console.log( $(this).attr("href").replace("#", "") ) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav nav-pills nav-justified" id="pills-COD"> <li class="active"><a data-toggle="tab" href="#a">Class A</a></li> <li><a data-toggle="tab" href="#b">Class B</a></li> <li><a data-toggle="tab" href="#c">Class C</a></li> <li><a data-toggle="tab" href="#d">Class D</a></li> </ul> <div class="tab-content"> <div id="a" class="tab-pane fade in active"> <h3>HOME</h3><p>Some content.</p> </div> <div id="b" class="tab-pane fade"> <h3>Menu 1</h3> <p>Some content in menu 1.</p> </div> <div id="c" class="tab-pane fade"> <h3>Menu 2</h3> <p>Some content in menu 2.</p> </div> </div> 如果你想通过列表找到它，你可以这样做： var $activeLi = $('#pills-COD li.active'); var activeId = $activeLi.children('a').attr('href').substr(1); 或者，查看选项卡： var $activeTab = $('.tab-content .tab-pane.active'); var activeId = $activeTab.attr('id'); 我遇到了同样的问题，无法访问单击的nav-item的值，然后我尝试了下面的代码，它起作用了。 导航选项卡的 Html： <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" role="tab" href="#info-time-sheets"> <span class="d-none d-sm-block">@L("Info")</span> </a> </li> <li class="nav-item" id="tab-non-processed" > <a class="nav-link" data-bs-toggle="tab" role="tab" href="#non-processed"> <span class="d-none d-sm-block">@L("Non processed ")</span> </a> </li> <li class="nav-item" id="tab-previous-time-sheets"> <a class="nav-link" data-bs-toggle="tab" role="tab" href="#previous-time-sheets"> <span class="d-none d-sm-block">@L("Previous Timesheets")</span> </a> </li> </ul> 我使用 e.currentTarget.id 作为 id $('.nav-tabs li').on('click', (e) => { if ((e.currentTarget.id === "tab-non-processed") || (e.currentTarget.id === "tab-previous-time-sheets")) { $("#generate-documents").show(); $("#preview-timesheet").show(); } else { $("#generate-documents").hide(); $("#preview-timesheet").hide(); } });

Bootstrap 3：导航栏形式的输入组占据整个宽度

这就是 bootstrap 的导航栏形式的样子。 默认 HTML 为： 这就是 bootstrap 的导航栏形式的样子。 默认 HTML 为： <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search for awesome stuff"> </div> <button type="submit" class="btn btn-default">Search</button> </form> 但我想将输入和按钮像 input-group 一样连接在一起。然而，当我尝试将输入和按钮包裹在 input-group 周围时，它最终占据了整个宽度： HTML： <form class="navbar-form navbar-left" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for awesome stuff"> <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span> </div> </form> 我已经阅读了一些解决方案，但我想避免使用黑客，例如style: "width: 200px;" 有什么解决办法吗？非常感谢。 我想了一个最小的方法来解决这个问题，而不需要修改 Bootstrap 文档中使用的导航栏表单的默认结构。 将课程 navbar-input-group 添加到表单 <form class="navbar-form navbar-left navbar-input-group" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search for awesome stuff"> </div> <button type="submit" class="btn btn-default">Search</button> </form> CSS（如有必要，放入媒体查询中）： .navbar-input-group { font-size: 0px; /*removes whitespace between button and input*/ } .navbar-input-group input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .navbar-input-group .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; } 或 SCSS（保持响应能力完整）： @import "bootstrap-variables"; .navbar-input-group { @media (min-width: $screen-sm) { font-size: 0px; /*removes whitespace between button and input*/ input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; } } @media (max-width: $screen-xs-max) { margin-top:0px; margin-bottom:0px; .btn { width:100%; } } } 结果： 为了清楚起见，我的目标是 CSS 中的后代元素。这不是定位 CSS 元素的最有效方法。如果您喜欢这个答案，请考虑为输入和按钮提供唯一的类名，并在 CSS 中不使用任何后代选择器来定位它们（请阅读：http://csswizardry.com/2011/09/writing-efficient-css-selectors/ ) 您的解决方案占据整个宽度这一事实是一件好事。现在使用嵌套的行和列来定义您实际希望搜索栏占用多少空间。 <div class="row"> <div class="col-md-3"> <form class="navbar-form navbar-left" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for awesome stuff"> <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span> </div> </form> </div> </div> 编辑：我没有注意到OP要求解决方案而无需在CSS中手动设置宽度。不过，如果您不介意最大宽度，我认为这是一个不错的选择。它仅设置高分辨率的最大宽度，因此您可以在平板电脑和移动设备上保持正常行为。 1) 在 div.input-group 上添加 navbar-searchbox: <form class="navbar-form navbar-left" role="search"> <div class="input-group navbar-searchbox"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="submit" class="btn btn-default">Search</button> </div> </div> </form> 2）将其放入您的 .lass 文件中。 @media (min-width: @screen-sm-min) { .navbar-searchbox { max-width: 250px; } } 3）在房间里跳来跳去高喊胜利！ 不需要使用行，是的，这就是您需要的所有 CSS。刚有用，试试吧。 我更喜欢将表单元素视为正常元素，只是使用此 CSS 规则修复其外观： .navbar-form .input-group { display: inline-block; width: auto; vertical-align: middle; .form-control, .input-group-btn { float: left; } }

引导表单不会使用图像按钮提交

我用Bootstrap制作了一个表单。有一个用于提交表单的图像按钮，但是当我单击它时，没有任何反应。 我用 Bootstrap 制作了一个表单。有一个用于提交表单的图像按钮，但是当我单击它时，没有任何反应。 <form name="input" action="index.php" method="post" class="form-horizontal"> <div class="input-group"> <span class="input-group-addon">@</span> <input name="coins" type="text" class="form-control" placeholder="Quanity" > </div><br> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" name="usd" placeholder="USD" > </div><br> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" name="paypal" placeholder="PayPal Address" > </div><br> <div class="input-group"> <input type="image" src="/img/ppbutton.png" name="submit" alt="PayPal - The safer, easier way to pay online!"> </div><br> </form> 您的提交按钮需要是一个按钮/提交并使用 CSS 进行样式设置： <style> div.submitter input { /*you will need to adjust your stylesheet so it looks the way you want.*/ width: 100px; height: 40px; background-image: url(/img/ppbutton.png); background-repeat: no-repeat; border: 1px solid; } </style> <!-- REPLACE IN YOUR FORM --> <div class="submitter"><input type="submit" name="submit" alt="PayPal - The safer, easier way to pay online!" /></div> 它提交表单，但以图像的 x 和 y 坐标的形式发送值。 例如： <input type="submit" name="submit" alt="PayPal - The safer, easier way to pay online!" /> 对于这个输入 DOM 对象，它将发送 submit.x=[some integer] 和 submit.y=[some interger] 这是我用过的： <button class="btn btn-default" type="submit" name="delete" value="delete"> <img src="/delete.png" width="20" /> </button> 尝试添加 this.form.submit ，如下所示： <input type="image" onclick="this.form.submit()" src="/img/ppbutton.png" name="submit" alt="PayPal - The safer, easier way to pay online!"> 将其放入 html 表单中对我有用。

CSS 动画未到达最后一个元素

我正在设计一个场景，其中我有 n 个团队成员个人资料卡，该卡从右向左移动。但目前在我的情况下，动画最多有 5 张卡，然后动画变得

boostrap-select错误：未捕获类型错误：无法读取属性“3”

Boostrap 选择实时搜索在输入框快照时出现错误 和 javascript 控制台错误日志 bootstrap-select.js：199未捕获类型错误：无法读取未定义的属性“3” ...

Bootstrap 5 列不显示内联

我正在使用 Bootstrap 5 为音乐播放器创建一个 HTML 布局。播放器的一部分我想在其中显示有关歌曲中当前正在播放的模式的信息...

Bootstrap 脚手架在移动设备上显示效果不佳

我用 HTML/CSS 设计了我的网站并使用了最新的引导程序，网站看起来不错，但是当我在移动设备中打开这个网站时，它在移动设备上显示的字体非常小。 我的网站 我在做什么...

如何让bootstrap轮播居中

美好的一天，我使用 bootstrap 3 并尝试使我的 bootstrap 轮播位于中心。这是我到目前为止尝试过的脚本。 美好的一天，我使用 bootstrap 3 并尝试使我的 bootstrap 轮播位于中心。这是我到目前为止尝试过的脚本。 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .navbar.transparent.navbar-inverse .navbar-inner { border-width: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; background-color: rgba(0,0,0,0.0); background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00))); background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); } #Intro { display: inline-block; } #topnavbar { top: 20px; } .carousel { width:600px; height:400px; } .carousel-inner > .item > img { margin: 0 auto; } div.c-wrapper{ width: 100%; /* for example */ margin: auto; } .carousel-inner > .item > img, .carousel-inner > .item > a > img{ width: 100%; /* use this, or not */ margin: auto; } .container{ border: 1px; } </style> </head> <body> <div class="container" style="border:1px solid #cecece;"> <div id="Intro" class="col-md-offset-5"> LOGO </div> <nav id="topnavbar" class="navbar transparent"> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collection of nav links, forms, and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Product</a></li> <li><a href="#">Promo</a></li> <li><a href="#">Competition</a></li> <li><a href="#">Ladies Room</a></li> <li><a href="#">Need Help?</a></li> </ul> </div> </nav> <div class="c-wrapper"> <div id="myCarousel" class="carousel slide"> <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> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="https://dummyimage.com/600x400/000/fff"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> </div> </body> </html> 但是，我的脚本位于我的旋转木马上方，仍然位于屏幕左侧。然后我尝试用谷歌搜索，我找到了这个https://stackoverflow.com/questions/19582340/make-bootstraps-carousel-both-center-and-responsive但仍然没有帮助。有什么解决办法吗？预先感谢，抱歉我的英语不好 您只是缺少一行代码： .carousel { margin: 0 auto; } 轮播是一个 <div>，它是一个 块级元素，因此您可以通过将水平边距设置为 auto来将其居中。简写 margin: 0 auto 将顶部和底部边距设置为 0，同时将水平边距设置为 auto。 这是一个工作示例（运行代码片段后单击“完整页面”）： .navbar.transparent.navbar-inverse .navbar-inner { border-width: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; background-color: rgba(0, 0, 0, 0.0); background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0%, rgba(0, 0, 0, 0.00)), color-stop( 100%, rgba(0, 0, 0, 0.00))); background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%); } #Intro { display: inline-block; } #topnavbar { top: 20px; } .carousel { width: 600px; height: 400px; margin: 0 auto; } .carousel-inner>.item>img { margin: 0 auto; } div.c-wrapper { width: 100%; /* for example */ margin: auto; } .carousel-inner>.item>img, .carousel-inner>.item>a>img { width: 100%; /* use this, or not */ margin: auto; } .container { border: 1px; } <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="border:1px solid #cecece;"> <div id="Intro" class="col-md-offset-5"> LOGO </div> <nav id="topnavbar" class="navbar transparent"> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collection of nav links, forms, and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Product</a></li> <li><a href="#">Promo</a></li> <li><a href="#">Competition</a></li> <li><a href="#">Ladies Room</a></li> <li><a href="#">Need Help?</a></li> </ul> </div> </nav> <div class="c-wrapper"> <div id="myCarousel" class="carousel slide"> <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> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="https://dummyimage.com/600x400/000/fff"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> </div> </div> </body> </html> 希望这有帮助！ :) 我更改了 CSS 样式如下并为我工作，对此非常陌生，因此可能会导致一些我不知道的错误 和下面的按钮

Django 仅在表单验证通过后加载引导模式

我尝试弹出一个包含条款和条件的模式窗口，只有当用户接受条款和条件时，数据才会提交到数据库。我想在...之前验证用户输入

更改引导下拉插入符号指向方向

我想更改下拉插入符号的指向方向，因为它最初指向下方，因此我希望它最初指向正确的方向，并且当单击特定下拉菜单/链接时更改...

焦点上的导航链接颜色变化

我正在使用最新版本的 bootstrap ，我想知道如何在聚焦或单击时更改下拉导航链接的背景颜色..目前默认背景颜色是蓝色，我...

使用按钮选择颜色而不是复选框开关

我尝试了各种方法来使用按钮而不是现有的复选框，但无法让它工作。我也尝试了 onClick 方法，但也失败了。 演示：https://jsfiddle.net/yxez4a2u/ HTML： <...

将输入复选框转换为 2 个单独的按钮

输入复选框在亮/暗模式之间切换。但是，我希望它作为 2 个独立的按钮。我该怎么办？ 演示：https://jsfiddle.net/ot1ecnxz/1 HTML： 输入复选框在亮/暗模式之间切换。但是，我希望它作为 2 个独立的按钮。我该怎么办？ 演示：https://jsfiddle.net/ot1ecnxz/1 HTML： <input type="checkbox" role="switch" id="flexSwitchCheckChecked" checked onclick="myFunction()" /> <hr /> <button type="button" data-bs-theme-value="light"> Light </button> <button type="button" data-bs-theme-value="dark"> Dark </button> <hr /> <p> This is a sample text </p> JS： function myFunction() { var element = document.body; element.dataset.bsTheme = element.dataset.bsTheme == "dark" ? "light" : "dark"; } 如果用 2 个专用按钮代码替换复选框来实现这一点应该是， HTML： <button type="button" data-bs-theme-value="light" onclick="setTheme('light')"> Light </button> <button type="button" data-bs-theme-value="dark" onclick="setTheme('dark')"> Dark </button> <hr /> <p> This is a sample text </p> Javascript： function setTheme(theme) { document.body.dataset.bsTheme = theme; } 您可以尝试以下方法： document.getElementById("lightButton").addEventListener("click", function() { toggleMode('light'); }); document.getElementById("darkButton").addEventListener("click", function() { toggleMode('dark'); }); function toggleMode(mode) { var element = document.body; element.dataset.bsTheme = mode; } <link id="themeLink" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <button type="button" data-bs-theme-value="light" id="lightButton"> Light </button> <button type="button" data-bs-theme-value="dark" id="darkButton"> Dark </button> <hr /> <p>This is a sample text</p>

Bootstrap 模态打开时无法获得模糊背景

我正在使用 Bootstrap 5.1.3，我想在使用 CSS background-filter 属性打开模态时模糊背景。 我尝试过的最简单的方法是： .modal-背景{ 背景过滤器：b...

Bootstrap 不适用于我的 ASP.NET MVC (C#)

我正在使用 Visual Studio 2019 并遵循 ASP.NET MVC 教程，其中从 bootswatch 下载 bootstrap.css 文件，然后将其放置在 MVC Web 应用程序的 Content 文件夹中...

SWOT分析盒设计

我正在尝试创建波纹管盒 我使用了下面的 HTM 代码 .noMargin { 边距：0 像素； } .bordertp { 顶部边框：1px 纯灰色； } .borderbtm { 底部边框：1px 纯灰色； } .borderright{

我的 Bootstrap 4 响应式列布局不起作用

所以我使用 Bootstrap 4 制作了一个非常简单的响应式网站布局，因此根据代码，当进入平板电脑模式时，即当视口宽度为 768px 时，列数应变为 4...

如何在移动设备上显示一列，在桌面上显示三列

我有以下html 我有以下html <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> <div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 0 col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> <div class="col-md-4 col-sm col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> </div> </div> 我试图在桌面上显示三列，在移动设备上显示一列。我怎样才能做到这一点？ div 必须具有响应能力。谢谢！我正在使用 bootstrap、html 和 CSS。 一种方法是使用媒体查询。如果特定条件为真，媒体查询用于应用一些 CSS 属性。 将 id （或唯一的类）添加到所有三个 col div 并将视口添加到 html 文件的 <head>，如下所示： <head> <meta name='viewport' content='width=device-width,initial-scale=1'/> <!-- Other meta tags ... --> </head> 并将此 css 属性添加到您的样式中： @media (max-width: 599px) {#col1, #col2 { display: none; }}

Angular Bootstrap 手风琴动画在制作过程中无法正常工作

我已经在 Angular 中的应用程序上安装了 Bootstrap，但由于某种原因，当我运行 ng build --configuration production 并将其打开到本地服务器时，当我在生产中时，bootstrap Accordion anima...

打开视频弹出窗口或单击视频上的播放按钮时暂停所有 html 卡的动画

我有两张卡，一张是包含视频的小卡，另一张是包含标题和说明的大卡。小卡嵌套在大卡内。我想要的是当我...