标签: twitter-bootstrap-3

我正在尝试使用Bootstrap 3中的Modal功能来显示我的Youtube视频.它有效,但我无法点击Youtube视频中的任何按钮.

对此有何帮助？

这是我的代码:

<div id="link">My video</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
    $('#link').click(function () {
        var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1';
        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', src);
    });

    $('#myModal button').click(function () {
        $('#myModal iframe').removeAttr('src');
    });
</script>

我的布局目前看起来像这样

在中间列中,我想在每个ServerDiv 之间添加一个小的边距.但是,如果我为CSS添加一个边距,它最终会换行并看起来像这样

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_7">
        <div>
            Server 7
        </div>
    </div>
</div>

和CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, …

如果我查看官方文档,我可以看到一个名为HTML的属性:

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

它说,"将html插入工具提示",但类型是布尔值.如何在Tooltip中使用复杂的html？

目前,Twitter Bootstrap 3具有以下响应断点:768px,992px和1200px,分别代表小型,中型和大型设备.

如何使用JavaScript检测这些断点？

我想用JavaScript听取屏幕更改时触发的所有相关事件.并且能够检测屏幕是用于小型,中型还是大型设备.

有没有做过的事情？你有什么建议？

我正在使用新的Twitter Bootstrap 3,我试图在顶部导航栏中放置如下(如下)的搜索框:

在Bootstrap 2中,它可以像这样完成:

<form class="form-search" method="get" id="s" action="/">
    <div class="input-append">
        <input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
        <button type="submit" class="add-on"><i class="icon-search"></i></button>
    </div>
</form>

但是我不知道如何在Bootstrap 3中生成相同的内容,因为已经发生了很大变化.

Bootstrap 3中导航栏搜索框表单的默认HTML是:

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

如何修改它以实现我的需要？

我正在测试Bootstrap响应性导航栏,我有一个演示网站.当我在桌面上调整浏览器大小时,一切正常,包括导航栏,它成为可折叠菜单,顶部有一个小图标,我可以单击该按钮查看更多菜单按钮.

但是当我从移动浏览器尝试它时(我在Android上尝试使用chrome和互联网浏览器),我没有看到响应式设计.我只能看到像网站这样的非常小的桌面版本.

谁能指出我做错了什么？

我正在努力创建一个适合我的容器区域的整个宽度的文本框.

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

当我执行上述操作时,正如我所料,这两个表单元素是内联的,但最多只占用几列.徘徊col-md-12在萤火虫的div上显示它占据了预期的全宽.它只是文本输入似乎没有填补.我甚至尝试添加一个内嵌宽度值,但它没有改变任何东西.我知道这应该很简单,现在感觉真的很蠢.

这是一个小提琴:http://jsfiddle.net/52VtD/4119/embedded/result/

编辑:

选择的答案在各方面都是彻底的,并提供了很好的帮助.这就是我最终使用的东西.但是我认为我的初始问题实际上是Visual Studio 2013中默认MVC5模板的问题.它包含在Site.css中:

input,
select,
textarea {
    max-width: 280px;
}

显然这阻止了文本输入的适当扩展......对未来的ASP.NET模板用户的公平警告......

我是一个bootstrap新手,我有一个100%宽的模板,我想用bootstrap编码.第一列从左角开始,我有一张谷歌地图,最右边是延伸.我以为我可以用container-fluid课堂做这件事,但这似乎不再可用了.我不知道如何使用bootstrap 3实现该布局.我正在使用来自themeforest的几何PSD模板,如果你想看到布局,请点击这里的链接:http://themeforest.net/item/geometry-design-for- 地理位置-社会- networkr/4752268

使用Twitter Bootstrap的最佳做法是什么,从CDN引用它或在我的服务器上制作本地副本？

由于Bootstrap不断发展,我担心如果我引用CDN,用户会随着时间的推移看到不同的网页,有些标签甚至可能会被破坏.什么是大多数人的选择？

新的bootstrap 3 ....在我的布局中,我有:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

我希望'元素2'不要在小于col-lg屏幕上对齐.因此,只有col-lg-6有效地使用类右拉...

我怎么能实现这个目标？

这是一个小提琴:http://jsfiddle.net/thibs/Y6WPz/

谢谢