标签: twitter-bootstrap-2

如何在Play框架2.x中使用Twitter Bootstrap 2

我知道现在玩!发布有一个Bootstrap 1.4的帮手.如果我想使用当前版本的Bootstrap,我该怎么办?

playframework twitter-bootstrap playframework-2.0 twitter-bootstrap-2

28
推荐指数
2
解决办法
3万
查看次数

如何使表格列成为最小宽度

这是模板数据文件:https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

我正在尝试使表格的10列中的8列仅根据文本,根据填充和列标题,准确地占据它们所需的最小宽度.

在示例图像中,我希望除了第4列和第9列之外的所有列都占用最小宽度.从技术上讲,有9个列标题,最后一个有一个2的colspan.最后一个标题是span3.我希望百分比列占用所需的最小宽度,让进度条或通过/查看/失败按钮占用其余部分.

第4列设置为用省略号替换溢出的文本.

示例图片: 示例图片

html css twitter-bootstrap-2

28
推荐指数
1
解决办法
4万
查看次数

如何使用Bootstrap滚动间谍?

我不能让滚动间谍与垂直导航一起正常工作.您可以在下面找到我使用的代码.出于某种原因,只有"两个"变得活跃.

谁知道出了什么问题呢?

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Twitter Bootstrap Scroll Spy Playground</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span3">
            <ul class="navbar nav nav-list affix">
              <li class="active"><a href="#one">One</a></li>
              <li><a href="#two">Two</a></li>
            </ul>
        </div>
        <div class="span1" data-spy="scroll">
            <section id="one">
            <h1>One</h1>
            <h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2>
            </section>
            <section id="two">
            <h1>Two</h1>
           <h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf …
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap twitter-bootstrap-2

26
推荐指数
2
解决办法
8万
查看次数

Twitter Bootstrap 2.0是否内置了对齐表格内容的内容?

通过设置"align"属性很容易对齐表,但是通过css对齐表有点hacky.是否内置支持在Twitter Bootstrap 2.0中对齐表格?

css twitter-bootstrap twitter-bootstrap-2

23
推荐指数
2
解决办法
2万
查看次数

如何在Twitter Bootstrap的popover插件中禁用标题?

我正在使用popover来显示不需要标题的图像.如果您没有设置"标题",它仍会显示标题所在的区域.你怎么完全关闭它?

跟进:我希望答复者能够保持他们的观点,但我将最终的实施作为单独的答案发布在下面.

popover twitter-bootstrap twitter-bootstrap-2

23
推荐指数
3
解决办法
2万
查看次数

bootstrap.css和bootstrap-combined.min.css有什么区别?

我正在使用bootstrap.css,我发现还有另一个名为bootstrap-combined.min.css的 css文件,风格有什么不同吗?是否需要包含两个css文件?哪个更优选?

css twitter-bootstrap-2

21
推荐指数
1
解决办法
2万
查看次数

如何将Twitter引导模式分为两部分

在此输入图像描述

我有以下HTML

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <table>
            <tbody>
                <tr>
                    <td>
                        <div class="span2 fileupload fileupload-new pull-left" data-provides="fileupload">
                            <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
                            <div> <span class="btn btn-file"><span class="fileupload-new">Select image</span>
                                <span
                                class="fileupload-exists">Change</span>
                                    <input type="file" />
                                    </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>

                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="progress">
                            <div class="bar" style="width: 60%;"></div>
                        </div>
                        <button class="btn btn-mini" type="button">Upload</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap twitter-bootstrap-2

18
推荐指数
3
解决办法
4万
查看次数

Twitter引导程序2.3.2 popover在悬停时保持打开状态

我有一个底部导向的弹出窗口,我想比默认的弹出窗口更宽容,一旦鼠标离开触发器就会消失.

$('#example').popover({
  html: true,
  trigger: 'hover',
  container: '#example',
  placement: 'bottom',
  content: function () {
      return '<div class="box">here is some content</div>';
  }
});
Run Code Online (Sandbox Code Playgroud)

只要鼠标悬停在触发器或弹出窗口内容上,我就可以保持打开状态,但这对用户来说很难,因为他们必须将鼠标从触发元素移动到箭头到内容而不离开这些区域为了与popover互动.考虑两种解决方案,两种解决方案都不起

1)延迟选项应该这样做.添加 delay: {hide: 500} 到popover调用会在鼠标离开后离开popover,但在它消失之前重新进入触发器elem或popover不会告诉bootstrap保持popover打开,因此在初始超时结束时消失.

2)加宽箭头的包含元素,使鼠标从触发元素到触发元素和弹出窗口之间的背景弹出工作(鼠标永远不会离开触发器/元素).除箭头之外的以下工作是使用重叠的CSS边框绘制的,因此背景不透明:http://jsfiddle.net/HAZS8/

.popover.bottom .arrow {
    left: 0%;
    padding-left:50%;
    padding-right:50%;
}
Run Code Online (Sandbox Code Playgroud)

解决方法是使用jquery硬连接mouseover和mouseleave事件,或者用图像替换重叠边框箭头.更好的修复?

javascript css popover twitter-bootstrap twitter-bootstrap-2

18
推荐指数
2
解决办法
1万
查看次数

Bootstrap 2.3 CSS响应左侧有一个空白区域

我正在创建一个网站(我在这里是个菜鸟).我正在研究设计的功能部分,我稍后会有人做图形.

目前,当它进入响应式(移动视图)时,它在右侧留下了2px的边距,可以在移动浏览器上移动(并且可滚动).我不能为我的生活摆脱那个.

如果我打开overflow-x:hidden,那么它确实变得不可滚动但仍然可以移动.

我希望这个额外的空间消失.我没有看到它被定义为任何css中的填充.

使用Bootstrap 2.3

css twitter-bootstrap twitter-bootstrap-2

18
推荐指数
1
解决办法
2万
查看次数

在Twitter Bootstrap 2.3.2中是否有导航栏的下拉类?

拉右左拉类来对齐块元素.我想知道是否有相应的拉杆拉杆可用于导航栏?

<header id="navbar" role="banner" class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <a class="logo pull-left" href="/" title="Home">
        <img src="logo.png" alt="Home">
      </a>

      <div class="nav-collapse collapse">
        <nav role="navigation">
          <ul class="menu nav">
            <li>...</li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>
Run Code Online (Sandbox Code Playgroud)

目标是将菜单(ul.nav)对齐到导航栏的底部.

在此输入图像描述

css twitter-bootstrap twitter-bootstrap-2

13
推荐指数
1
解决办法
3万
查看次数