标签: twitter-bootstrap

防止Bootstrap Modal在外部点击或按下escape时消失?

我正在使用Twitter Bootstrap模式作为向导窗口,并且希望在单击模态外部或按下escape时阻止用户关闭它.相反,我希望在用户按下完成按钮时关闭它.我怎么能实现这种情况?

html modal-dialog twitter-bootstrap

425
推荐指数
13
解决办法
46万
查看次数

引导程序中"col-md-4","col-xs-1","col-lg-2"中数字的含义

我对新Bootstrap中的网格系统感到困惑,尤其是这些类:

col-lg-*
col-md-*
col-xs-*
Run Code Online (Sandbox Code Playgroud)

(其中*代表一些数字).

任何人都可以解释以下内容:

  1. 这个数字是如何对齐网格的?
  2. 如何使用这些数字?
  3. 什么他们实际上代表什么呢?

css grid twitter-bootstrap twitter-bootstrap-3

419
推荐指数
5
解决办法
43万
查看次数

响应式图像对齐中心引导3

我使用Bootstrap 3进行目录.当在平板电脑上显示时,产品图像看起来很难看,因为它们的尺寸很小(500x500),浏览器的宽度为767像素.我想把图像放在屏幕的中央,但由于某种原因,我不能.谁将帮助解决问题?

在此输入图像描述

html css image alignment twitter-bootstrap

417
推荐指数
6
解决办法
82万
查看次数

关闭Bootstrap模态

我有一个我想要最初显示的引导模式对话框,然后当用户点击页面时,它会消失.我有以下内容:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>
Run Code Online (Sandbox Code Playgroud)

模态最初显示,但在模态外部单击时不会关闭.此外,内容区域不会显示为灰色..如何让模式最初显示,然后在用户点击区域外关闭?如何在演示中将背景变为灰色?

jquery modal-dialog twitter-bootstrap

412
推荐指数
16
解决办法
102万
查看次数

流体或固定网格系统,采用响应式设计,基于Twitter Bootstrap

我对twitter bootstrap网格中的各种选项以及它们如何组合起来感到困惑.

首先,你可以有一个普通的固定container,或者container-fluid.

然后,任何一个都可以包括普通row行或流体行row-fluid.也就是说,你可以拥有一个带有流体排的固定容器,或一个带有固定排的容器流体......

然后,您可以在其中包含"响应式"媒体查询.

我对这些事情如何相互作用感到困惑.但让我们从一个明显的例子开始.

示例页面本身,有一个固定网格流体网格的例子

但是,在我的浏览器中,在该示例页面本身上 - 两个网格的行为相同.也许是因为示例页面使用可选的响应式媒体查询?在两个网格示例中,如果我开始逐渐缩小我的浏览器窗口,则网格元素不会逐渐变窄 - 一旦达到某个(响应性)边界宽度,它们会捕捉到更小的尺寸,并再次在更大的边界宽度处.但是普通的"固定"示例和"流动"示例在这里表现完全相同 - 那么差异究竟是什么呢?

fixed-width fluid-layout responsive-design twitter-bootstrap

397
推荐指数
4
解决办法
17万
查看次数

禁用在bootstrap模态区域外单击以关闭模态

我正在制作一个引导程序网站,有几个Bootstrap'Modals'.我正在尝试自定义一些默认功能.

问题是这个; 您可以通过单击背景关闭模态.无论如何禁用此功能?仅限于特定模态?

Bootstrap模态页面

javascript css modal-dialog twitter-bootstrap

393
推荐指数
15
解决办法
57万
查看次数

带徽标的Bootstrap 3 Navbar

我想使用带有图像徽标而不是文本标记的Bootstrap 3默认导航栏.在不引起不同屏幕尺寸问题的情况下,这样做的正确方法是什么?我认为这是一个常见的要求,但我还没有看到一个好的代码示例.除了在所有屏幕尺寸上具有可接受的显示之外的关键要求是较小屏幕上的菜单可折叠性.

我试过把一个IMG标签放在带有navbar-brand类的A标签内,但这导致菜单在我的Android手机上无法正常运行.我也试过增加导航栏类的高度,但这更加困难了.

顺便说一句,我的徽标图像大于导航栏的高度.

css navbar twitter-bootstrap twitter-bootstrap-3

370
推荐指数
9
解决办法
80万
查看次数

Twitter Bootstrap 3:如何使用媒体查询?

我正在使用Bootstrap 3来构建响应式布局,我想根据屏幕大小调整一些字体大小.如何使用媒体查询来制作这种逻辑?

css3 media-queries twitter-bootstrap

366
推荐指数
12
解决办法
48万
查看次数

带有左,中或右对齐项目的Bootstrap NavBar

引导,什么是最平台友好的方式来创建一个导航栏,有徽标中的左边,在中心菜单项和标志B上的吧?

这是我到目前为止已经试过,它最终被对齐,使标志A是在左边,菜单项旁边的右边的左边和标志B中的标志.

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css navbar twitter-bootstrap bootstrap-4

364
推荐指数
9
解决办法
85万
查看次数

禁用/启用按钮和链接的最简单方法是什么(jQuery + Bootstrap)

有时我使用锚作为按钮,有时我只使用按钮.我想禁用特定的clicky-things,以便:

  • 他们看起来残疾
  • 他们不再被点击了

我怎样才能做到这一点?

html css jquery twitter-bootstrap

354
推荐指数
10
解决办法
61万
查看次数