bootstrap-4 相关问题

Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。

这是默认下拉单选无复选框无按钮列表代码（在WebAPP.NET框架中）：这是默认下拉单选无复选框无按钮列表代码（在WebAPP.NET框架中）： <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ODWConnectionString_Live %>" SelectCommand="SELECT DISTINCT ISNULL(NULLIF(CZF_ODW, 'NA'), 'Other') AS CZF_ODW FROM dbo.WebAppTestView;"></asp:SqlDataSource> <td class="required" align="right" style="text-align: right;"> <span class="catchment">Catchment Zone:</span> </td> <td> <asp:DropDownList ID="ddlField1" runat="server" CssClass="textfield" Width="200px" OnSelectedIndexChanged="ddlField1_SelectedIndexChanged" style="width: 182px; margin: 9px;" DataSourceID="SqlDataSource3" DataTextField="CZF_ODW" DataValueField="CZF_ODW" AppendDataBoundItems="true"> <asp:ListItem Value="All"></asp:ListItem> </asp:DropDownList> </td> </td> 需要将上面的下拉列表代码转换为带按钮的多选复选框下拉列表。好吧，如果可能的话，使用列表框可以进行多项选择，但当然会占用更多的屏幕空间。 asp.net 中没有内置的多选组合框（DropDownList）。因此，您可以采用第三方库。一个相当常见的选择是名为 select2 的 jQuery 插件。下一个问题是 select2 加载项无法与 asp.net DropDownList 很好地配合，但如果您放入 HTML“select”元素，它确实可以正常工作。事实证明 DropDownList 无论如何都是基于 HTML select 元素的。事实上，如果您使用 runat="server" 标记选择，那么您的功能与下拉列表非常相似。唯一缺少的功能是 autopostback="true"。而且你没有注意到你是否需要这种能力。让我们构建一个示例，并假设我们需要组合框的自动回发。为此，我们添加 JavaScript onchange 事件（客户端），然后只需单击表单上的按钮即可。该按钮（最终）应该用 style="display:none" 隐藏。因此，我们的标记如下所示： <div style="float: left"> <h4>Select Multiple Cites</h4> <select id="DropDownList1" runat="server" clientidmode="static" datatextfield="City" multiple="true" style="width: 500px" onchange="mychange()"> </select> <script> function mychange() { $('#Button1').click() } </script> </div> <div style="float: left; margin-left: 35px; margin-top: 40px"> <asp:Button ID="Button1" runat="server" Text="Show Hotels" ClientIDMode="Static" CssClass="btn" OnClick="Button1_Click" /> </div> <div style="clear: both; height: 20px"></div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table" Width="40%"> <Columns> <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:BoundField DataField="HotelName" HeaderText="HotelName" /> <asp:BoundField DataField="City" HeaderText="City" /> <asp:BoundField DataField="Description" HeaderText="Description" /> </Columns> </asp:GridView> <script> $(document).ready(function () { console.log("on page load select2 combo box setup") $('#DropDownList1').select2() }); </script> 我们背后的代码是这样的： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then LoadData() End If End Sub Sub LoadData() Dim rstHotels As DataTable rstHotels = MyRst("SELECT City FROM tblHotels WHERE City is not null GROUP BY City") DropDownList1.DataSource = rstHotels DropDownList1.DataBind() End Sub Protected Sub Button1_Click(sender As Object, e As EventArgs) LoadGrid() End Sub Sub LoadGrid() Dim strSQL As String = "SELECT * FROM tblHotelsA" Dim strWhere As String = "" Dim cmdSQL As New SqlCommand() Dim ParamCount As Integer = 0 Dim sP As String = "" For Each MyPick As ListItem In DropDownList1.Items Debug.Print($"Item = {MyPick.Text} selected = {MyPick.Selected}") If MyPick.Selected Then If strWhere <> "" Then strWhere &= "," ParamCount += 1 sP = $"@P{ParamCount}" strWhere &= sP cmdSQL.Parameters.Add($"@P{ParamCount}", SqlDbType.NVarChar).Value = MyPick.Text End If Next If strWhere <> "" Then strSQL &= $" WHERE City IN ({strWhere}) " End If strSQL &= " ORDER BY HotelName" cmdSQL.CommandText = strSQL Dim dt As DataTable = MyRstP(cmdSQL) GridView1.DataSource = dt GridView1.DataBind() End Sub 请注意，在上面，我们仍然使用 SQL 参数，因此代码不会受到潜在的 SQL 注入的影响。当然，如果您不需要也不希望自动回发，那么您可以删除按钮以及附加到 select 元素的 onchange JavaScript 代码。

javascript html css asp.net bootstrap-4

回答 1 投票 0

如何解决 Angular 项目中的 Tailwind 和 Bootstrap 冲突

我在同一个 Angular 项目中使用 Tailwind CSS 和 Bootstrap (ngx-bootstrap)。大多数情况下，他们相处得很好。然而，当涉及到内边距和边距时，他们就像兄弟姐妹一样战斗......

css user-interface bootstrap-4 tailwind-css

回答 4 投票 0

引导卡宽度相同

我希望我的卡片覆盖屏幕的宽度，但我的代码如下。尝试过卡组，但没有帮助。我希望我的卡片覆盖屏幕的宽度，但我的代码如下。尝试过card-deck，但没有帮助。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"> </head> <body> <div class="container p-3 bg-white rounded"> <div class="row"> <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">0-10</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">1-9</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">2-8</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">3-7</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> <div class="carousel-item "> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">4-6</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">5-5</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">6-4</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">7-3</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> 在 div 块中将 col-lg-3 更改为 col-lg-auto，以便它在屏幕上占据相同的宽度尝试使用 .card-columns 类，如下所示： <div class="card-columns"> <div id="card1" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 1 TITLE </h5> </div> <div class="card-body"> CARD 1 BODY </div> </div> <div id="card2" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 2 TITLE </h5> </div> <div class="card-body"> CARD 2 BODY </div> </div> </div> 并删除 row 和 col div，卡片列类负责剩下的

twitter-bootstrap bootstrap-4 column-width bootstrap-carousel bootstrap-cards

回答 2 投票 0

如何在 Bootstrap 轮播中启用每 10 秒自动滑动 2 个图像和一个视频？

我正在尝试创建一个图像和视频组合的滑块。我尝试使用引导程序来实现，但是我失败了。这是下面的代码我正在尝试创建一个图像和视频组合的滑块。我尝试使用引导程序来实现，但是我没有这样做。下面是代码 <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol>   <div class="carousel-inner" role="listbox">  <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div>   <div class="carousel-item"> <video src="./video/video1.mp4" autoplay poster="./images/boardwalk.jpg"></video> </div>   <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div>  </div> </div> 我需要三张幻灯片，其中两张是图像幻灯片，一张是视频幻灯片，每 15 秒更改一次。有没有办法使用jquery添加自定义幻灯片只需将 data-interval 属性添加到引导轮播中，即可每隔 x 秒自动滚动到下一张幻灯片。请注意，data-interval在milliseconds中计算您的值，因此如果您想每10秒后更改轮播幻灯片，则需要添加data-interval=10000。检查并运行以下代码片段，获取有关如何使用 data-interval 属性自动滑动轮播的实际示例： /* CSS */ html, body {margin: 0px; padding: 0px; width: 100%; height: 100%;} .wrapper { margin: 0 auto; width: 100%; } .carousel-item img {width: 100%; height: 200px;} .carousel-item video {width: 100%; height: 200px;}  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="wrapper"> <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000">  <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol>   <div class="carousel-inner" role="listbox">  <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div>   <div class="carousel-item"> <video controls> <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> </video> </div>   <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div>  </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 我真的很喜欢 http://kenwheeler.github.io/slick/ 的 jquery 滑块。我认为这会对你有很大帮助。我在下面为您制作了一个示例： //Initialize your slider in your script file $("#carousel-slider").slick({ arrows: false, infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1500, mobileFirst: true });  <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /> </head> <div id="carousel-slider"> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <div> <video style="width:100%; height:100%;" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" autoplay></video> </div> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> </div>  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> 您可以将“autoplaySpeed”更改为您想要更改的任何间隔。将 data-bs-ride="carousel" 放在包含 id="carousel-slider" 的 div 中，将 data-bs-interval="10000" 放在包含 class="carousel-item 的 div 中“

jquery html bootstrap-4 slider

回答 3 投票 0

Bootstrap 4.0 - 使用弹性列

您好，您能帮我在代码中设置列吗？我有这个代码：侧边菜单&l... 您好，您能帮我在代码中设置列吗？我有这个代码： <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div class="???"> <div>1 piece</div> <div>2 pieces piece</div> <div>1 piece</div> <div/> <div/> <div/> 这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。柱子比例1:2:1可调。代替 row，您可以使用 d-flex 作为 row 罐 wrap - 内容可以放在侧边栏下方。对于内容，如果你必须保留 html 结构，你可以使用这个： <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> 请参阅下面的演示 - 添加边框以供说明： html,body { height: 100%; } div { border: 1px solid; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid h-100"> <div class="d-flex h-100"> <div class="flex-column h-100">side menu</div> <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> </div> </div> 您可以通过 col 类使用以下解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side</div> <div class="col">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col">1 piece</div> </div> </div> 使用 w-* 类和 bootstrap flexbox 的另一种解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100 d-flex flex-nowrap align-items-stretch"> <div class="flex-column h-100">side</div> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 使用 Bootstrap v4 Flexbox： <div class="d-flex flex-row h-100"> <div class="d-flex justify-content-start">side menu</div> <div class="d-flex flex-row w-100"> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 看来你可以在没有flex-column的情况下实现这一点。列的比例由 flex-grow-1 类决定，具体取决于可用/需要的空间量。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div style="height: 175px;"> <div class="d-flex flex-grow-1 border border-primary m-1 h-100"> <div class="d-flex flex-grow-1 border border-secondary m-1"> <div class="border border-success m-1">  <div class="border border-warning m-1">1 piece</div> <div class="border border-info m-1">1 piece</div> <div class="border border-dark m-1">1 piece</div> </div>  <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1"> <div class="flex-grow-1 border border-warning m-1">1 piece</div> <div class="flex-grow-1 border border-info m-1">2 pieces piece</div> <div class="flex-grow-1 border border-dark m-1">1 piece</div> <div/> <div/> <div/> <div>

css twitter-bootstrap flexbox bootstrap-4 twitter-bootstrap-4

回答 4 投票 0

在引导表日期选择器中输入日期时，它会立即删除

我在引导表中有一列是日期。我在该列上使用了过滤器。我有两种选择日期的方法。单击日历并直观地选择日期。或者输入它...

javascript jquery bootstrap-4 bootstrap-table

回答 1 投票 0

我怎样才能让这个boostrap5.3下拉菜单居中并占据页面的所有宽度？

我需要将下拉菜单设置为没有内容的页面，占据页面的所有宽度。我还需要将菜单的所有“lorem”链接放在导航栏中的中央。我……

javascript html css bootstrap-4 bootstrap-5

回答 1 投票 0

是否可以将bootstrap类转换为纯css？

我可以将引导类转换为纯CSS吗？比如将 'class="container-sm' 转换为普通 css。我想知道 bootst 中包含“container-sm”类的 CSS...

javascript css reactjs bootstrap-4

回答 2 投票 0

Django Bootstrap 卡组如果 forloop 可整除

我正在尝试使用引导卡。但我有问题。当我添加要显示为卡片的新帖子时，我显示的帖子超过 5 个，它们开始挤压。我正在尝试使用 forloop 计数器来保持...

django for-loop bootstrap-4 counter

回答 2 投票 0

容器和容器流体

我想知道我们如何知道在哪里使用容器或容器液体以及使用容器和容器液体时应该做什么或避免什么？需要清楚地了解差异

javascript html bootstrap-4 responsive-design

回答 1 投票 0

如何使用html表格打印乘法表（代码是Javascript）？

这是我的代码，它工作得很好。我只是想通过使用 Html 表格来打印表格，并且还想在其上应用 bootstrap 来添加边框，乘法表以...

javascript html css html-table bootstrap-4

回答 3 投票 0

如何在页面加载时显示 Bootstrap toast？

我在索引中添加了一个查询字符串参数，目的是它可以显示错误等信息。尽管我正在努力让它在页面加载时显示。我正在使用 $('#toast')....

jquery bootstrap-4

回答 3 投票 0

将 Bootstrap 4 添加到 Slate V1 - 在 Chrome 开发者工具中获取两个索引

我是网络开发方面的新手。我以前做过一些开发，但不是关于Web的。我了解 CSS 是什么、Javascript 的作用以及基本 HTML 的基础知识。我已经

css bootstrap-4 shopify slate-shopify

回答 1 投票 0

Bootstrap 4 更改折叠中的图标

我使用bootstrap 4 alpha 6版本。在我的页面中，我有几个折叠块。我想在用户打开/关闭该块时更改图标。由于我有几个这样的块，我使用了类，但它不起作用。

javascript html twitter-bootstrap bootstrap-4 twitter-bootstrap-4

回答 1 投票 0

Bootstrap 5 justify-content 无法正常工作并且无法垂直居中内容

我有以下代码，我使用 bootstrap 5： ...

html css bootstrap-4 flexbox

回答 3 投票 0

Bootstrap Toast 不显示

我正在使用 bootstrap 和 javascript 开发一个 HTML 网站。我正在尝试使用引导网站中的以下代码添加吐司：我正在使用 bootstrap 和 javascript 开发一个 HTML 网站。我正在尝试使用引导程序网站中的以下代码添加吐司： <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 但是吐司并没有出现，如图所示。它只是在导航和轮播之间留下了间隙。我已经从引导网站导入了所有这些脚本： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 并将以下内容放入我的 javascript 文档中： $('.toast').toast(option) 但是，什么也没发生。我希望有人能帮助我:) 您需要输入有效的选项。我：eshow, hide or a callback function。请参阅 - https://getbootstrap.com/docs/4.2/components/toasts/。 $('.toast').toast('show'); <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 如果您不想自动关闭 Toast，请添加 data-autohide="false"。 $('.toast').toast('show') <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false"> <div class="toast-header"> <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"> <rect fill="#007aff" width="100%" height="100%" /></svg> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false"> <div class="toast-header"> <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"> <rect fill="#007aff" width="100%" height="100%" /></svg> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 文档准备好后，您需要启动“ $(".toast").toast('show'); 。 <script> $(document).ready(function() { $(".toast").toast('show'); }); </script> 首先，你需要将吐司固定在顶部或底部，具体取决于你想要的位置。 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast fixed-bottom m-5 ms-auto" data-bs-autohide="false"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <script> window.onload = (event) => { let myAlert = document.querySelector('.toast'); let bsAlert = new bootstrap.Toast(myAlert); setTimeout(function () { bsAlert.show(); }, 5000); }; </script> 我尝试了这个解决方案，但我收到一个 JS 错误“Uncaught ReferenceError: bootstrap is not Defined”，这似乎阻止了烤面包机的显示。我看到的唯一区别是我正在使用 bootstrap5，并且 bootstrap 似乎不再需要 JQuery，因此它不包含在基本模板中。渲染后我在基本模板中看到的是： <head> ... <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet"> ... </head> <body> ... <toaster html goes here> .... <script crossorigin="anonymous" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body 我不知道为什么 bootstrap 是未定义的，因为 JS 是明确链接的，但我是 bootstrap 的新手，所以可能做了其他错误。我正在使用 django-bootstrap5 应用程序，其他一切似乎都工作正常。可能想考虑使用这个库，它通过引导程序简化了 toast 的使用： https://github.com/zhiftyDK/bootstrap-toast

javascript jquery html css bootstrap-4

回答 5 投票 0

引导视频轮播播放按钮/左右指示器未出现

所以我试图制作一个包含 4 个视频的轮播，但遇到了一些问题，但不明白为什么。首先我只能通过屏幕底部中间的圆圈来切换视频，我不能...

html bootstrap-4 carousel

回答 3 投票 0

根据切换开关选择禁用 Bootstrap 中的输入？

阅读文档，我试图在 bootstrap 5 中找到一种方法，如果切换开关输入设置为“关闭”，则禁用其他输入字段？父元素是#member_form，开关是'toggles...

javascript jquery bootstrap-4 bootstrap-5

回答 1 投票 0

如何在 django 应用程序中获取复选框值

我正在尝试在简单的 django 应用程序中使用复选框控件。代码逻辑似乎没问题，但我得到一个空的水果列表（[无，无]）。我不知道为什么它不起作用，任何人都可以