Tag: twitter bootstrap

使用JQuery启动Bootstrap选项卡

我有以下代码 <ul class="nav nav-tabs"> <li><a href="#aaa" data-toggle="tab">AAA</a></li> <li><a href="#bbb" data-toggle="tab">BBB</a></li> <li><a href="#ccc" data-toggle="tab">CCC</a></li> </ul> <div class="tab-content" id="tabs"> <div class="tab-pane" id="aaa">…Content…</div> <div class="tab-pane" id="bbb">…Content…</div> <div class="tab-pane" id="ccc">…Content…</div> </div> 和下面的脚本 $(document).ready(function(){ activaTab('aaa'); }); function activaTab(tab){ $('.tab-pane a[href="#' + tab + '"]').tab('show'); }; 在这种情况下,当页面准备就绪时,第二个选项卡将被激活,但是我总是在$('.tab-pane a[href="#' + tab + '"]').tab(); 任何人都可以帮我吗?

如何将twitter引导工具提示添加到图标

我会从twitter引导添加一个右图工具提示到一个图标元素。 代码是这样的: <h3>Sensors Permissions <i class="icon-info-sign"></i></h3> 我会,当光标在图标上,显示一个正确的工具提示与一些信息… 我能怎么做? 包含tooltip.js librery并在图标代码中添加元素是不够的? 我很困惑。 谢谢。

使用Bootstrap将button组放在标题的最右侧

我已经设置了一个button组在一个头(H1 / H2 / H3)的远端。 但是,我不知道如何使button在中间垂直浮动。 它只是停留在顶部。 我尝试使用margin-top但由于它是一个固定的值,它不会被dynamic地放在中间。 这是截图: 代码如下: <div class="container"> <section> <div class="page-header"> <h1 class="pull-left"> The header </h1> <div class="pull-right"> <div class="btn-group"> <button class="btn btn-primary"> Actions </button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another Action</a> </li> </ul> </div> </div> <div class="clearfix"></div> </div> […]

从点击结束时停止一个下拉菜单

我有一个button下拉(只有一个,不是所有的),在里面,我想有几个input字段,人们可以在里面input的东西没有下拉隐藏一旦你点击它(但它确实closures如果你点击它之外)。 我创build了一个jsfiddle: http : //jsfiddle.net/denislexic/8afrw/2/ 这里是代码,这是基本的: <div class="btn-group" style="margin-left:20px;"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Action <span class="caret"></span> </a> <ul class="dropdown-menu"> <!– dropdown menu links –> <li>Email<input type="text" place-holder="Type here" /></li> <li>Password<input type="text" place-holder="Type here" /></li> </ul> </div>​ 所以基本上,我希望它不会closures点击下拉(但closures点击的动作button或下拉之外)。 到目前为止,我最好的猜测是添加一个类,并尝试做一些JS,但我无法弄清楚。 谢谢你的帮助。

引导下拉不起作用

我无法让引导程序下拉菜单工作。 这是我的导航的HTML: <ul class='nav'> <li class='active'>Home</li> <li class='dropdown'> <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">asds</a></li> <li class="divider"></li> </ul> </li> <li>Payday loans</li> <li>About</li> <li>Contact</li> </ul> 这里是脚本: <script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script> <script> $(document).ready(function(){ $('.dropdown-toggle').dropdown() }); </script> 我究竟做错了什么? 感谢您的回答!

文本和图标在引导button中垂直alignment

我无法在引导框架下的button内垂直alignment字体超赞的图标和文本。 我已经尝试了很多东西,包括设置行高,但没有任何工作。 <button id="edit-listing-form-house_Continue" class="btn btn-large btn-primary" style="" value="" name="Continue" type="submit"> Continue <i class="icon-ok" style="font-size:40px;"></i> </button> http://jsfiddle.net/fPXFY/ 我怎样才能得到这个工作?

Bootstrap 3input附加升级

我升级到Bootstrap 3,但我不知道如何升级我的旧的input附加。 我有这样的事情: <div class="input-append"> <select> <option>hi</option> <option>hi2</option> </select> <span class="input-group-addon"></span> <input type="submit" class="btn" value="valami"> </div> 预览: http : //bootply.com/75910 在Bootstrap 3中,这是我能得到的最接近的 <div class="input-group"> <select class="form-control"> <option>hi</option> <option>hi2</option> </select> <span class="input-group-addon"></span> <input type="submit" class="form-control btn btn-default" value="valami"> </div> 预览: http : //bootply.com/75912 如果我删除这个跨度,它会变得完美,但它们是不同的。 任何想法如何正确地做到这一点?

使用Require.js从CDN加载Bootstrap

Bootstrap分布在CDN中 http://www.bootstrapcdn.com/ 是否有可能与Require.JS 2.x(shimmed或本机AMD)加载Bootstrap? 如何用Require.js直接从CDN URL加载Bootstrap或任何缩小的JS

Twitter引导程序和Angular.js之间的真实(或隐藏)区别

我刚刚比较了这两个前端框架,从我所知道的情况来看,他们似乎在为开发者提供HTML,CSS和JS前端方面做了完全相同的事情。 Boostrap:时尚,直观,function强大的前端框架,可以更快,更轻松地开发Web。 (超过53000人在GitHub上出演) Angular.js:AngularJS是dynamicnetworking应用程序的结构框架。 (12000在GitHub上出演) 评级意味着什么,但我只是想我会把它放在那里,以显示这不是我没有研究的一些'快速'的问题。 从我所了解的Angular到wikipedia,它的目标是将前端devise/ layout / ui从后端(数据库所在的位置),Web服务器以及业务逻辑发生的地方完全分开。 从我所了解的bootstrap(和它的JS)你可以达到这个完全相同的东西。 angular度网站提到: 其他框架通过抽象HTML,CSS和/或JavaScript或者提供操纵DOM的命令方式来处理HTML的缺点。 这些都不能解决HTML不是为dynamic视图devise的根本问题。 现在我不确定他们是否在骨干或者甚至是自举之类的东西上进行了攻击(如果你很容易冒犯了,那么忽略这个炮火评论),但是对于我来说,我不能确定什么是真实的和真实的2之间有差异。 也许有一些先进的信息关于DOM或JS或HTML的一些其他微小的/微小的方面/秒,使2不同,但我只是没有看到它。 PS。 没有SOF这样的问题存在,也没有任何博客谈论它(除非排名很低或者我错误地提问)。 我也发现有些人正在把引导到angular度的方面。 编辑:思考一下,我意识到bootstrap提供了不同的屏幕视图的大小选项,我不知道angular度是否。 如果不是,唯一的区别是什么?

dynamic创buildBootstrap CSS警报消息

我试图dynamic创build使用引导CSS的jQuery插件警报消息。 我想创build和销毁某些事件的警报(例如,AJAX成功/错误)。 以下是我的代码的非工作代码片段: var alertVisible = false; function fetchData() { function onDataReceived(stats) { if (alertVisible) { $(".alert-message").alert("close"); } alertVisible = false; // Do stuff with data… } function onError() { $(".alert-message").alert(); alertVisible = true; } $.ajax({ dataType: 'json', success: onDataReceived, error: onError, cache: false }); }; 这里是相应的HTML: <div class="row"> <div class="alert-message error fade in hide […]