Articles of twitter bootstrap 3

Bootstrap工具提示/popup窗口不能正常显示

我正在使用Angular 2来构build我的Web应用程序。 当我尝试在图像或button上放置工具提示或popup窗口时,我会看到默认的工具提示,而不是引导工具提示 。 我已经尝试了基本的W3Schools例子,并且做了所有的事情,但是它不起作用。 我相信我的问题在于bootstrap.js或jQuery的正确导入,但是像button等其他引导项目可以正常工作。 (我使用nodejs来安装必要的文件/依赖关系 – > npm install npm install bootstrap npm install jquery ) 的index.html <html> <head> <base href="/"><!–Without this tag, the browser may not be be able to load resources (images, css, scripts) when "deep linking" into the app. Bad things could happen when someone pastes an application link into […]

当点击一个表单提交button时,启动一个远程引导模式,然后远程模式内容显示表单数据?

我很难find一种方法来实现这一点。 我正在使用Node.js,Bootstrap 3,并表示 我想从一个表单页面开始。 当用户填写表单时,他们点击提交。 在这里,我想发射一个远程模式。 (从常规链接或button完成此操作无困难。) 这启动了一个职位。 那么我怎样才能启动远程模式,并将表单数据从post传递给它,这样一个带有答案的新的远程页面就可以显示在原始表单页面的模式窗口中。 这里是我有的代码: forms翡翠(cover-form.jade): html head meta(name="viewport" content="width=device-width, initial-scale=1.0") title= title link(href="/stylesheets/coverform_custom.css" rel="stylesheet") body .modal.fade(id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true") .modal-dialog.wide-modal .modal-content form.form-horizontal(id="coverform" name="coverform" method="post" action="") .LoginBox.LoginText fieldset.animated.fadeInUp // Form Name legend.LoginText &nbsp;Cover Strategy // Text input .form-group label.col-xs-4.control-label(for='symbol') Stock Ticker: .col-xs-5 input#symbol.form-control.input-xs(type='text', name='symbol', placeholder='example: AAPL', autofocus, required) span.help-block […]

我的导航菜单有问题。 我正在使用Bootstrap 3,JQuery 2.3.1,Jade,ExpressJS和Node.js

您好,我是翡翠模板Node.js全新的。 我正在尝试使用Express 4,JQuery,Bootstrap 3和Jade创build一个基本的入门级应用程序。 我正在尝试将navbar添加到我的layout.jade文件中。 它似乎添加了导航栏,但它不能正常工作。 当它崩溃时,我不能点击button切换链接列表。 此外,下拉链接也不起作用。 我在Google Chrome中检查时没有收到控制台错误。 下面我已经包含了我的layout.jade和我的index.jade文件。 layout.jade: doctype html html head title= title script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js') link(rel='stylesheet', href='/stylesheets/style.css') link(rel='stylesheet',href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css') script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js') body nav.navbar.navbar-default.navbar-fixed-top div.container div.navbar-header button(type='button', class='navbar-toggle collapsed', data-target='#bs-example-navbar-collapse-1') span.sr-only Toggle Navigation span.icon-bar span.icon-bar span.icon-bar a.navbar-brand(href='#') Brand div.collapse.navbar-collapse(id='bs-example-navbar-collapse-1') ul.nav.navbar-nav li a(href='#') Link block content index.jade: extends layout block content h1 #{8oo8s} p Welcome […]

Bootstrap没有按预期工作

我使用twitter引导node.js用户界面,下面的HTML是我得到后,我使用Jade我想要的是使用jumbotroon http://getbootstrap.com/examples/jumbotron/,并把标签1和2在在导航栏上的项目名称相同的行,并使用链接中的黑色,我已经尝试了很多东西,我在这里做错了什么? <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button> </div> <a class="navbar-brand" href="/#"> Node Rec </a> <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="/recipes/b1"> Tab1 </a> </li> <li> <a href="/recipes/b1"></a> </li> </ul> <div class="container"></div> <div class="jumbotron"></div> <h1> List Arrivals […]

在&扩展(.clearfix all)失败;`

我正在与一个现有(和工作)Symfony2项目的克隆。 它使用的是Bootstrap-2.2.2,所以我安装了Less来转储资产: sudo npm install less 它被安装,但是当我尝试转储资产时: php app/console assetic:dump –env=dev –no-debug 我得到这个错误: [Exception] parse error: failed at `&:extend(.clearfix all);` /home/user/server/project/app/../web/css/../vendor/bootstrap-2.3.1/less/mixins.less on l ine 643 我已经在GitHub仓库中发现了这个问题,并且已经升级到更新的版本: 我已经下载了web/目录中的3.1.1版本,并且在基本模板( base.html.twig )中: {% javascripts output='compiled/*' 'vendor/jquery-1.8.3.min.js' 'bootstrap-2.0.4/js/bootstrap.min.js' 'js/twitter.js' 'js/main.js' %} <script src="{{ asset_url }}" onerror="redconvive.onErrorEvent(this)"></script> {% endjavascripts %} {% block javascripts %}{% endblock %} 至: {% javascripts output='compiled/*' […]

无法使用Grunt编译Bootstrap 3 LESS主文件(bootstrap.less)?

我无法将“主” bootstrap.less编译为'<%= pkg.name %>.css' 。 我得到这个错误运行grunt less : Running "less:dist" (less) task >> ParseError: Syntax Error on line 643 in bower_components\bootstrap\less\mixins.less:643:25 >> padding-right: (@grid-gutter-width / 2); >> &:extend(.clearfix all); >> } Warning: Error compiling LESS. Use –force to continue. Aborted due to warnings. 我的configurationless任务是相当简单的: less: { options: { strictMath: true }, dist: { files: { […]

引导+玉的checkbox

伙计,我对翡翠和自举相当陌生。 创build一个简单的表单,其中有下拉和checkbox。 现在我的代码如下所示: form(role="search",action='/uri/blah' method='post').navbar-form.navbar-left .form-group input(type="name", name="bae", placeholder="bae", required).form-control select(id="type",name="type").form-control option(value="foo") foo option(value="bar") bar option(value="baz") baz input(type="text", name="X", placeholder="X", required).form-control input(type="checkbox", name="checkboxname", text="asdf").form-control p button(type="submit").btn.btn-default Submit 问题:1)checkbox名称,最新的标签是什么? 2.)如何使表单更dynamic? 也就是说,如果点击一个checkbox或select了一个下拉菜单,另一个会出现? 谢谢

meteor的帐户 – ui-bootstrap-3 {{loginButtons}}不显示

安装bootstrap-3和accounts-ui-bootstrap-3 ,当使用{{ loginButtons }}时, ui-accountslogin小部件不会出现。 取而代之的是find一个<div> ,但没有可见的小部件。 是否有额外的步骤缺less小部件显示? 添加Bootstrap 3包 mrt add bootstrap-3 mrt add accounts-ui-bootstrap-3 main.html中 <body> {{> header}} </body> <template name="header"> <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">My Bootstrap 3 App</a> </div> <div […]