twitter-bootstrap-3 相关问题

Bootstrap 3是前端框架的第三代,允许更快速的Web开发,具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用

删除悬停框[关闭]

根据下面的代码,当我将鼠标悬停在每个链接上时,文本顶部会出现一个深蓝色框,从而模糊了链接文本。 我该如何解决这个问题,即不会出现深蓝色? A {

回答 0 投票 0

将文字颜色更改为白色

根据下面的代码,如何将文本颜色更改为白色?代码改编自这个问题。在标记的问题答案中,我不知道如何在拳头位置将颜色设置为蓝色...

回答 2 投票 0

URL 分行,不同的间距和适当的颜色

根据下面的代码,我怎样才能在新行中使用类似间距的 URL,如下面的屏幕截图所示? 请注意,我不是每天都做 HTML 编码,所以我相当外行......

回答 1 投票 0

TypeError: $ (...).bootstrapTable 不是函数

<pre><code>&lt;table id=&#34;selectCaseTable&#34; class=&#34;table table-bordered table-striped table-hover&#34;&gt; &lt;!-- table code... --&gt; &lt;/table&gt; &lt;!-- jQuery 3 --&gt; &lt;script src=&#34;/static/adminlet-2.4.10/bower_components/jquery/dist/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;!-- Bootstrap 3.3.7 --&gt; &lt;script src=&#34;/static/adminlet-2.4.10/bower_components/bootstrap/dist/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;!-- AdminLTE App --&gt; &lt;script src=&#34;/static/adminlet-2.4.10/dist/js/adminlte.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;/static/adminlet-2.4.10/bower_components/datatables.net/js/jquery.dataTables.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;/static/adminlet-2.4.10/bower_components/jquery-slimscroll/jquery.slimscroll.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;/static/adminlet-2.4.10/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;!-- FastClick --&gt; &lt;script src=&#34;/static/adminlet-2.4.10/bower_components/fastclick/lib/fastclick.js&#34;&gt;&lt;/script&gt; &lt;!-- AdminLTE for demo purposes --&gt; &lt;script src=&#34;/static/adminlet-2.4.10/dist/js/demo.js&#34;&gt;&lt;/script&gt; &lt;srcipt&gt; fuctions addSelectCase(){ ... $(&#34;#selectCaseTable&#34;).bootstrapTable(&#39;refresh&#39;); } &lt;/script&gt; </code></pre> <p>当我像下面那样打电话给<pre><code>bootstrapTable(&#34;refresh&#34;)</code></pre></p> <pre><code>$(&#34;#selectCaseTable&#34;).bootstrapTable(&#39;refresh&#39;); </code></pre> <p>我在控制台上看到错误</p> <blockquote> <p>TypeError: $(...).bootstrapTable 不是函数</p> </blockquote> </question> <answer tick="true" vote="4"> <p>你应该打电话给<pre><code>Datatable()</code></pre>而不是<pre><code>bootstrapTable()</code></pre>,如下面的代码所示:</p> <pre><code>var table = $(&#39;#example&#39;).DataTable(); table.ajax.reload(); </code></pre> <p>欲了解更多信息,请单击此处查看以前的<a href="https://stackoverflow.com/questions/12934144/how-to-reload-refresh-jquery-datatable">问题</a>.</p> </answer> <answer tick="false" vote="3"> <blockquote> <p>TypeError: $ (...).bootstrapTable 不是函数</p> </blockquote> <p>这个错误是在<pre><code>$(&#39;#example&#39;).DataTable();</code></pre>之后的初始<pre><code>bootstrapTable</code></pre>你必须包含</p> <pre><code>&lt;script src=&#34;https://unpkg.com/[email protected]/dist/bootstrap-table.min.js&#34;&gt;&lt;/script&gt; </code></pre> <p>之后调用<pre><code>$(&#39;#example&#39;).DataTable();</code></pre>函数。 </p> <p>对于任何未加载的脚本或函数来说,这是一个常见问题,但是您调用它然后客户端站点浏览器给出此错误。</p> <p><strong>谢谢</strong></p> </answer> <answer tick="false" vote="1"> <p>我只是在 jquery 相关文件之后添加了 bootstrap 相关文件(js 和 css),问题就消失了。</p> </answer> <answer tick="false" vote="0"> <p>你可以使用</p> <pre><code>$(&#39;button[name=&#34;refresh&#34;]&#39;).click() </code></pre> <p>只有你需要摆在你的桌子上</p> <pre><code>data-show-refresh=&#34;true&#34; </code></pre> </answer> <answer tick="false" vote="0"> <p>这对我有用:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>let table = $(&#39;#table&#39;).bootstrapTable({}); table.bootstrapTable(&#39;getData&#39;)</code></pre> </div> </div> <p></p> </answer> </body></html>

回答 0 投票 0

bootstrap 3 全宽图像和容器中的 div

我正在尝试将一些 div 设置为 width: 100% on Twitter Bootstrap 3(包括无填充或边距)。 JSfiddle:http://jsfiddle.net/rq9ycjcx/ HTML: 我正在尝试在 Twitter Bootstrap 3 上将一些 div 设置为width: 100%(包括无填充或边距)。 JSfiddle:http://jsfiddle.net/rq9ycjcx/ HTML: <div class="container"> <header> <div class="row"> <div class="col-md-2"> <img src="http://placehold.it/150x50"> </div> <div class="col-md-10">Menu</div> </div> <div class="row gray"> <div class="col-md-6"> <h1>Page Title</h1> </div> <div class="col-md-6"> <div class="breadcrumbs">Main page > page </div> </div> </div> <div class="row"> <div class="col-md-12"> <img src="http://placehold.it/350x150" /> </div> </div> </header> <footer> <div class="row"> <div class="col-md-12">Content</div> </div> <div class="row dark"> <div class="col-md-3">Footer 1</div> <div class="col-md-3">Footer 2</div> <div class="col-md-3">Footer 3</div> <div class="col-md-3">Footer 4</div> </div> </footer> </div> 获取图像的正确方法是什么http://placehold.it/350x150width: 100%,包括没有填充或边距? 页面标题和面包屑高度为80px. 如果我将窗口大小调整为较小的屏幕(例如移动设备),文本Main page > page 消失(它在某处但不在自己的行上)。 如何解决? 使用<div class="container-fluid">。根据 Bootstrap 文档:使用 .container-fluid 作为全宽容器,跨越视口的整个宽度。 container-fluid上有0个填充。 在您的代码中,您的 body 中似乎有 header 内容,并且在 div class="container" 和 header 之外还有一个 footer。这是不正确的,你的container/container-fluid应该在你的身体里面。同样对于您的标题,您应该使用<nav="nav navbar-nav">. 更新小提琴 按照上面的建议,你可以创建一个辅助类 .padding-0 { padding: 0; } 并将其应用于任何需要重置填充的 HTML 元素。所以在你的情况下,它看起来像这样: <div class="row"> <div class="col-md-12 padding-0"> <img src="http://placehold.it/350x150" /> </div> </div> 对于第二个问题,将height类的.gray设置为auto: @media () { .gray { height: auto; } } 注意:您也可以删除line-height: 80px,它是可选的:) http://jsfiddle.net/rq9ycjcx/8/ 在 Bootstrap 3 中没有“正确”的方法来做到这一点。这意味着您必须为确切的列重置填充。 您可以创建一个这样的类: .col-md-12.resetPadding { padding:0px } 关于 Main page > page 消失,我在我的浏览器上没有看到这个问题(在 Chrome 和 FF 上测试过),但是你有 line-height: 80px 并且正如你所说你的面包屑 div 有 height: 80px;,所以尽量减少 line-height 财产,看看它是如何运作的。 一个简单的方法是删除 <div class="col-md-12">...</div> 并直接在行标签内添加您的内容。行标签移除了左右间距,而 cold-md-12 本质上是添加了间距。 Bootstrap 3 文档说,对于单个全宽项目,您不需要任何标记,例如,只需将其包装在 <p> 标签中。然而,由于页面标记,这将显示 15px 的间距。因此,只需添加 row 标签并将您的内容直接放入其中,您将获得 100% 宽度的内容并符合 BS3 文档。

回答 4 投票 0

如何在 Bootstrap 3 中制作全高产品块

如何使此代码处于全高状态(cms 是 OpenCart 2.1 并且正在使用 Bootstrap 3)? 如何使这段代码处于全高状态(cms 是 OpenCart 2.1 并且使用的是 Bootstrap 3)? <div class="row equal"> <div class="product-layout product-grid col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="product-thumb"> <div class="image"></div> <div class="caption"></div> </div> </div> </div> CSS .row .equal { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .equal > [class*='col-'] { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .equal > [class*='col-'] > * { display: flex; flex-wrap: wrap; } CSS 不能使它全高 Currentl 看起来像这样

回答 0 投票 0

改变表格宽度bootstrap 4

我想在bootstrap 4中改变表格的宽度,如图所示,表格并没有使用所有页面的宽度,这是html中的代码。

回答 1 投票 1

如何调整bootstrap按钮的大小,而不需要侧滚动

我对CSS响应式布局非常陌生,需要帮助我构建导航条。我知道有许多其他类似的SO Q&As,但他们都没有给我想要的输出。我试过使用...

回答 1 投票 0

如何在HTML中获取按钮切换状态?

我使用Angular 7和Bootstrap 3.4。这是一个按钮切换器,这部分是语句的条件。

回答 1 投票 0

Bootstrap col-6 col-md-4在手机上不起作用。

嗨,第一次在这里发帖,所以要温柔点 :D 我正在做我的响应式设计,然后发生这种情况。这是我的代码。

回答 1 投票 0

Triger Ajax Ajax ActionLink from popover button [replicate] [重复]。

我有一个btn,当点击它的时候,它的弹出窗口有三个其他的btn,其中一个应该触发Ajax。其中一个应该触发Ajax。我使用data-html="true "来设置弹出式菜单中的btn。我在弹出式菜单中添加了一个onclick ...

回答 1 投票 0

在bootsrap的导航条和正文上增加一层,使其保持可滚动。

我的导航条是固定的,主体是可以滚动的。我想在导航条上加一层,不影响可滚动功能,但我的导航条是固定在顶部的。我怎么解决这个问题。下面是我的...

回答 1 投票 0

如何在表头滚动垂直文本?

我有一个简单的表格,在页眉有垂直的文字,像这样。FIDDLE HTML & CSS div.vertical { margin-left: -100px; position: absolute; width: 215px; transform: rotate(-90deg); ...

回答 2 投票 2

如何在Bootstrap 3中的xs视图中把navbar-default切换为navbar-inverse?

你能让我知道是否有办法切换navbar-default到navbar-inverse in xs View in Bootstrap 3吗? 如果有,你能让我知道怎么做吗?

回答 2 投票 0

Bootstrap-3:在不替换现有内容的情况下发出警报。

图片#1: Bootstrap Alert带.in类。图片#2:没有.in类的Bootstrap Alert(隐藏内容在下面)。在过去的三个小时里,我一直在尝试让警报完美地工作--......。

回答 1 投票 4

去除桌子和面板边缘之间的间隙

我一直在利用Bootstrap 3.2.0制作一个网站,我遇到了一个问题,就是在面板里面使用表格,我不知道该如何解决。以这段代码为例。

回答 2 投票 2

如果已经打开,切换后无法关闭模态。

我有两个模式,一个是注册模式,一个是登录模式。在每个模式中,我都有一个链接到另一个模式,就像这样。模态注册 ...

回答 1 投票 0

如何使用jquery动态添加折叠类到同一个类的多个div中?

我有一个页面有多个相同类的divs,我想为所有的divs动态添加collapse类。

回答 2 投票 0

Bootstrap para margin spacing

我刚刚开始使用bootstrap,我有一个问题,我无法解决,当我在代码中给我的部分留有余地的时候,第三部分就下来了,虽然我已经给了宽度为col-md-4,但我无法 ...

回答 1 投票 0

Bootstrap模式对话框tabindex="-1 "不可访问的表单元素。

我有一个bootstrap模态对话框,这个模态对话框有一个tabindex="-1 "属性,在这个模态对话框中的表单元素工作正常。我调用一个固定的其他DIV与有形式元素。但是这个...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.