Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
如果放置在外部样式表（包括引导程序）中，超链接 CSS 不起作用，但放置在同一页面内时可以正常工作
超链接的css样式颜色：黑色；当它放置在外部样式表中时不起作用。 示例1（css也写在html页面内） 超链接的 css 样式color: black;放置在外部样式表中时不起作用。 示例1（css也写在html页面内） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <a href="#"> For Question </a> </body> <style> a { color: black; text-decoration: none; } a:hover { color: green; transition: 1s; } </style> </html> 这工作得很好，没有任何问题。但是 示例 2（在外部文件中编写的 CSS 并包含在 html 中的链接标记中 示例_2.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./Example_2.css"> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <a href="#"> For Question </a> </body> <style> </style> </html> 示例_2.css a { color: black; text-decoration: none; } a:hover { color: green; transition: 1s; } 附加控制台中显示的信息。 我需要解决这个问题，为超链接提供默认颜色，而不需要 css 中的 !important 属性。因为如果我使用 !important 它将影响页面内的所有超链接。那么我将无法再在同一页面内自定义具有特殊颜色的Hperlinks。 例如： <a href="#" class="default"> Text Here 1 </a>我需要这个具有默认样式的超链接和<a href="#" class="special"> Text Here 2 </a>这个具有特殊样式的超链接。 同时为所有默认的超链接提供类名将使代码更加复杂。 任何人都可以找出问题并帮助我吗？ 这可能是由于第二个示例中加载 CSS 文件的顺序造成的。 Bootstrap CSS 在您的自定义样式表之后加载，并且可以覆盖其内容。尝试在 Bootstrap 样式表之后加载自定义样式表，如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="./Example_2.css"> </head> <body> <a href="#"> For Question </a> </body> <style> </style> </html>
我想知道我的嵌套行加起来是否可以超过 12 行？这样的工作方式有错吗？ 我尝试过，它似乎对我来说效果很好，但我想确保我做得正确。 对于前任...
我想全面改变轮播中的那些指标 我尝试了下面的代码和许多其他代码，但没有一个有效。只是在圆角处做了一些改变。 .carousel-indicators li { 边框-
我试图完全创建一个像 https://almaty-athletics.kz/ 这样的网站，现在我被困在这个轮播中。我不明白如何使其具有平滑的幻灯片效果。 我希望能有平滑的滑动效果...
如何使用浮动标签降低输入高度？我尝试输入尺寸，但没有成功。 如何通过浮动标签降低输入高度？我尝试输入尺寸，但没有成功。 <Col xs={5} md={2}> <FloatingLabel size="sm" controlId="floatingInput" label="Cod do Produto" className="mb-2 " style={{ fontSize: '14px' }} > <Form.Control type={"text"} size="sm" value={InputCodigo} name={"Data"} onChange={(e) => setInputCodigo(e.target.value)} autoComplete={'off'} placeholder={"Cod do Produto"} /> </FloatingLabel> </Col> 您可能需要一些自定义CSS，为了保持一致性，它们可能应该全局应用。像这样的事情应该做。它将输入高度从 58px 减少到 42px。 .form-floating>.form-control, .form-floating>.form-control-plaintext { padding: 0rem 0.75rem; } .form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select { height: calc(2.5rem + 2px); line-height: 1; } .form-floating>label { padding: 0.5rem 0.75rem; } 仅供参考，我为这个解决方案所做的就是检查官方演示并使用样式，直到我让它工作。 不要忘记在每个属性的最后添加 !important 以覆盖 Bootstrap 属性： .form-floating>.form-control, .form-floating>.form-control-plaintext { padding: 0rem 0.75rem !important; } .form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select { height: calc(2.5rem + 2px) !important; line-height: 1 !important; } .form-floating>label { padding: 0.5rem 0.75rem !important; } 你所需要的只是这一段CSS代码 .form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select { height: calc(1rem + 2px) !important; }
如何将 Bootstrap 4 导航选项卡与手风琴 show.bs 和 hide.bs 功能一起使用？
有没有一种方法，如果我单击 Maintab 2 的按钮将激活 Maintab 2 内容并显示可折叠组项目 #2 的手风琴内容。我也将在...
这个 Codepen 可以工作，但我不确定这是相同的表类型。 这是小提琴。 #买家{ 边框折叠：分开； 边框间距：0 0px； } tr { 背景：粉色； /* 由通讯添加...
cPanel 托管的 Node.js 应用程序的进程数很高，并且还在增加
我的共享 Web 主机上运行着一个 Node.js 应用程序。 cPanel 显示 67/100 个进程和 7 个入口进程。 问题是，该网站目前除了让用户看到它之外没有做任何事情......
如何添加任何视频作为 html bootstrap 中不透明度降低的部分的背景？
`您好！我是第一次编写自己的网站，我已经成功创建了一个网站，使其更具吸引力，我想制作一些部分背景作为自动调整的视频背景...
L形状图像 我正在尝试第一次创建面对这个问题，我尝试了不同的方法但没有成功，使用 chatGPT 但没有得到我想要的确切答案。 .card-custom { 位置：相对； ...
我有一个问题，因为我制作了导航栏，它是粘顶的，并且有一些下拉菜单（每个下拉菜单中都有许多按钮）。因此，如果设备的高度太小，则会被裁剪，我可以得到...
我已经开始将网络编程作为一个项目来学习，但我一直很难让我的链接在导航栏上显示为活动状态。我确实从寻找类似的问题开始......
我不确定有多少人经历过这个问题，因为我无法真正找到有关它的问题，但我注意到 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中添加这样的类...