Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速,移动优先的网站和Web应用程序。
我不确定有多少人经历过这个问题,因为我无法真正找到有关它的问题,但我注意到 Bootstrap 4 显示实用程序无法与 .collapse 类一起正常工作,而 .collapse 类曾经...
解释 我成功地使用“输入类型=日期”作为 Bootstrap 5.3 中的日期选择器来选择数据查看的日期。 我遇到的问题是:我必须单击它才能可见。 为了...
_Layout.cshtml: @if (HttpContextAccessor.HttpCo...
Bootstrap 进度条在 UpdatePanel 中不起作用 - ASP.NET
我正在尝试使用UpdatePanel(Ajaxtoolkit)中的引导进度条。我想通过 for 循环显示进度条的进度。以下是 ASP.NET 代码 我正在尝试使用UpdatePanel(Ajaxtoolkit)中的引导进度条。我想通过 for 循环显示进度条的进度。以下是 ASP.NET 代码 <div class="progress" style="width:80%;margin:auto;"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar" aria- valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> 以下是C#的代码 intProgressBarCurrentPercentage += intProgressBarPercentageIncrement; divProgressBar.Style.Add("width", intProgressBarCurrentPercentage.ToString("F1") + "%"); divProgressBar.Attributes.Add("aria-valuenow", intProgressBarCurrentPercentage.ToString("F1")); divProgressBar.InnerText = intProgressBarCurrentPercentage.ToString() + "%"; 问题在于,当将新值分配给进度条时,进度条不会增加进度。 我相信这是因为进度条位于 UpdatePanel 中,并且我不想将进度条移到 UpdatePanel 之外。 我尝试在 UpdatePanel 的触发部分添加进度条,但它不起作用。 此代码对我有用: 标记: <div class="progress" style="width: 30%; margin: auto;float:left"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar" > <a href="../App_Data/">../App_Data/</a> aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> <br /> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:Button ID="cmdIncrement" runat="server" Text="Increment" OnClick="cmdIncrement_Click" /> 背后代码: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) TextBox1.Text = "1"; setbar(0); } protected void cmdIncrement_Click(object sender, EventArgs e) { const decimal MyMax = 10; int Count = Convert.ToInt32(TextBox1.Text); Count++; TextBox1.Text = Count.ToString(); decimal MyPercent = Count / MyMax * 100; setbar(MyPercent); } void setbar(decimal MyPercent) { divProgressBar.Style.Add("width", MyPercent + "%"); divProgressBar.Attributes.Add("aria-valuenow", MyPercent.ToString()); divProgressBar.InnerText = MyPercent.ToString() + "%"; } 结果: 如果我使用更新面板,上面的方法也有效。 UpdatePanel(Ajax 工具包)。 不! Ajax 工具包 100% 独立,与更新面板的使用“没有任何关系”。 AjaxToolKit 是一个控件库,如“accordion”、“dialog”、“ajaxfileupload”等。 但是,在网页中使用更新面板来采用某些ajax功能与ajaxtoolkit无关,并且您可以在没有ajaxtoolkit的情况下自由使用更新面板,并且它们实际上彼此不相关。 我还应该指出,如果您将上面的示例放置在更新面板中,上面发布的示例代码也可以工作。 编辑:问题作者现在想要一个循环 请记住,要进行 Web 开发,您必须掌握页面生命周期的概念,即所谓的“往返”。 简单说明: 在代码运行期间,用户永远不会看到通过代码隐藏对浏览器“DOM”进行的更改。浏览器的副本位于服务器上,当您的代码更改浏览器(现在位于服务器上)时,最终用户只会看到浏览器等待/旋转。只有在所有代码运行之后,然后浏览器返回客户端,用户才能看到结果。 因此,页面生命周期(往返)如下所示: 你有这个: 注意您的页面类 - 代码隐藏不在服务器的内存中。 你没有这个: 而你甚至没有这个: 注意这里非常小心 - 网页位于客户端计算机上 - 它根本不存在于网络服务器端。 因此,当您单击按钮或进行回发时,您就开始了往返。 这个: 我们的网页被发送到服务器。你现在有了这个: 现在页面类的实例已创建,并且后面的代码开始运行。 您的后台代码可以修改控件(甚至控件可见或不可见),但页面不与用户交互 - 只有代码可以修改网页(用户看不到一项或多项更改)。 网页可能会发生一次或多次更改,但是当您更新文本框等内容时,用户还看不到这些更改。因此,如果您运行循环 1 到 10,并更新文本框,则文本框将更新为 1 到 10。但是,最终用户看不到任何内容,因为该网页(和代码)正在服务器上运行。 服务器上正在发生网页更改 - 客户端浏览器不再有该网页! 一旦所有代码运行完毕,页面才会返回客户端浏览器。 服务器端类实例和代码(和变量)已被丢弃 - 不存在!您的服务器端页面类已被处置 - 从内存中删除,并且后面的网页代码不再存在。 因此,页面返回到客户端,重新显示,加载 JavaScript,然后 JavaScript 开始运行。因此,即使是客户端页面现在也可以 100% 重新加载。 那么,现在已经掌握了上述关于回发和轮询类型(页面生命周期)的知识了吗? 好的,这意味着要显示网页的更改,页面必须进行往返。如果您使用更新面板,那么该更新面板必须进行往返! 这种循环的另一种方法是什么?您使用客户端 JavaScript 代码。 但是,让我们以上面现有的示例为例,当我们单击开始时,让我们循环 1 到 10,但请记住,我们需要往返才能显示浏览器更新! 因此,既然我们需要往返,那么最简单的方法就是在页面上放置一个计时器控件。 (这意味着我们不必学习和编写一些 JavaScript 代码)。 所以,我们也使用更新面板。 (请记住,更新面板仍然具有上述完整页面生命周期 - 即使页面加载每次都会触发并运行 - 即使使用更新面板)。 所以,现在我们有了这个标记: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div class="progress" style="width: 30%; margin: auto; float: left"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar"> <a href="../App_Data/">../App_Data/</a> aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="1000" OnTick="Timer1_Tick"> </asp:Timer> <br /> <br /> <asp:Button ID="cmdStart" runat="server" Text="Start" CssClass="btn" OnClick="cmdStart_Click" /> <asp:HiddenField ID="HMyCount" runat="server" /> </ContentTemplate> </asp:UpdatePanel> 这段代码: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) setbar(0); } protected void cmdStart_Click(object sender, EventArgs e) { HMyCount.Value = "0"; Timer1.Enabled = true; } protected void Timer1_Tick(object sender, EventArgs e) { const decimal MyMax = 10; int Counter = Convert.ToInt32(HMyCount.Value); Counter++; HMyCount.Value = Counter.ToString(); if (Counter > 10) { Timer1.Enabled = false; // stop our timer return; } decimal MyPercent = Counter / MyMax * 100; setbar(MyPercent); } void setbar(decimal MyPercent) { divProgressBar.Style.Add("width", MyPercent + "%"); divProgressBar.Attributes.Add("aria-valuenow", MyPercent.ToString()); divProgressBar.InnerText = MyPercent.ToString() + "%"; } 现在的结果是这样的: 我应该发布一个有效的 JavaScript 示例,因为我们可以 100% 客户端运行此代码,这意味着不需要回发,也不需要往返。
我的问题是,当我尝试在主页之后创建新部分或任何新内容时,它不会出现在新页面上,但仍显示在主页本身上。我已将项目上传到
我正在尝试创建一个移动输入框,其中手机号码和国家/地区代码由分隔符分隔,或者只是将国家/地区代码固定在字段中,但无法做到这一点。 像这样的东西: (http...
使用 Internet Explorer 双击复选框时出现问题
我想禁用 Internet Explorer 上的双击复选框。双击会导致功能错误(仅在 Internet Explorer 11 上)。 $('#editArchivesTable tbody').on('clic...
Bootstrap 4 包括宽度类别: W-25 W-50 W-75 W-100 我只想为某些断点及以上指定宽度;例如,“w-md-25”等。 是否可以在SCSS中添加这样的类...
jquery.dataTables.min.js:94未捕获的范围错误:超出最大调用堆栈大小
我使用 jquery ajax bootstrap dataTables,当我尝试下载超过 20k 条记录时,控制台日志中出现此错误“Uncaught RangeError:最大调用堆栈大小超出 jquery.dataTa...
我正在编写一个破折号表单来从用户那里获取密码。我想要一个图标,允许用户以纯文本而不是隐藏的方式查看他们的输入。为此,我创建了一个 InputGrou...
我正在声明一个带有标题的表格: ... 我正在声明一个带有标题的表格: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered"> <caption>Why does this display below contents?</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> 但是,即使 caption 元素是 table 的第一个子元素,当我使用 Bootstrap 类时,标题会显示在表格下方。 如何将其移动到桌子上方? 那是因为从版本 4 开始,Bootstrap 有了默认的标题 css 样式 - caption-side: bottom 当您更改caption-side: top;时,您的标题将显示在表格顶部。 更新 从版本5开始,您还可以使用<caption>将.caption-top放在桌子顶部: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered caption-top"> <caption>Caption displayed above contents</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>
动态创建树形视图下拉菜单 - $(this) 不适用于单击事件
我正在尝试动态创建此 bootstrap 4 下拉列表(请参阅@Gerhard Gotz 的回答)。 硬编码列表对我有用,但是,我正在尝试动态创建此列表,然后填充我...
带有 Bootstrap 主题的 Select2 不支持输入组类
我尝试将 select2 与输入组一起使用,但按钮始终位于 select2 控件之后的下一行。 如果删除 select2 类,它会按预期工作。 为什么选择2
CSS 按钮在 Mozilla Firefox 中无法内嵌显示
我的搜索按钮在 Mozilla Firefox 中显得不合适,我不知道为什么会这样。 我正在将 Bootstrap 4 与 Angular 2 结合使用 这是它在 Chrome 上的样子 这就是它
Bootstrap 行的边距(左侧和右侧)为 -15px。 据我了解,这主要有两个原因: .container 的内边距(左和右)为 15px col-* 的间距为 15px。 所以...
我正在尝试将我的导航栏项目与 Bootstrap 4 alpha 6 中的右侧对齐。 我希望一切都正确对齐,除了品牌/标题之外。 这就是我的代码的样子: 我正在尝试将我的导航栏项目在 Bootstrap 4 alpha 6 中向右对齐。 我希望所有内容都正确对齐,除了品牌/标题之外。 这就是我的代码的样子: <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Oliver</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav> 您可以将 .justify-content-end 添加到 .navbar-collapse 元素。我假设您还想将移动切换菜单项移至右侧。为此,请将 .align-items-end 添加到 .navbar-nav <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Oliver</a> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <div class="navbar-nav align-items-end"> <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav>
我想让我的背景图像在移动设备上响应。当我更改 css 代码中的某些属性时,会出现各种问题。要么图像变得响应,但它引入了白色......
我正在尝试将图像、标题、按钮放置在另一个图像之上。问题是,在小屏幕尺寸上,小图像不会调整大小,并且超出了保持图像背景。
Bootstrap 4:如何使下拉链接的头部在导航栏中可点击
我正在使用 Bootstrap 4,并且有一个带有下拉链接的菜单项。 除了可以使用下拉菜单来选择某些内容之外,我还想让菜单项的文本成为可点击的链接...
我正在使用 bootstrap 4 Alerts 来显示错误消息等,例如他们的演示: ... 我正在使用 bootstrap 4 Alerts 来显示错误消息等,例如他们的演示: <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> 我还使用 AJAX 调用来执行表单 POST。 我遇到的问题是,如果用户发帖,则会显示错误消息,但是如果用户单击关闭按钮并重新发帖,如果发生错误,因为他之前关闭了上一个错误,我无法取消隐藏带有 d-block 的警报容器,因为它根本不再存在于 DOM / Page 中。 DIV 元素被破坏了,或者至少,我在 Chrome 的开发者工具中看不到它。 我怎样才能解决这个问题,以便我的关闭按钮只是“隐藏”容器,而不是销毁它或它所做的任何事情?即使用户关闭后我也需要能够重新显示它。 干杯!帕特 最终用 data-dismiss="alert" 类型的解决方案替换 onClick="$('#idOfDiv').addClass('d-none');"... 为您的帮助干杯!帕特 您尝试过使用一些 jQuery 或 Javascript 吗? 也许在右上角添加一些“箭头”图标。 然后,将您的警报分为两部分:一部分是永久保留的细条,另一部分在单击时“切换” 将 data-dismiss="alert" 替换为 onclick="$(this).closest('.alert').hide()": <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" onclick="$(this).closest('.alert').hide();" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>