Tag: twitter bootstrap 3
未能安装twitter bootstrap node.js依赖关系（在Ubuntu上）
我已经从官方网站下载了Bootstrap 3.1.1源文件，当试图在bootstrap/目录下运行npm install时，出现错误，这是在从站点执行bootstrap安装程序的指导下进行的。 我在Ubuntu 14.04平台上使用npm 1.3.10从发行版库安装，并且可以成功运行npm install -g grunt-cli 。 但是，当我试图从bootstrap目录中sudo npm install时，发现一串成功的GET消息，然后终止此错误： npm http 304 https://registry.npmjs.org/proto-list > phantomjs@1.9.7-4 install /home/cboettig/Documents/code/thirdparty/bootstrap/node_modules/grunt-contrib-qunit/node_modules/grunt-lib-phantomjs/node_modules/phantomjs > node install.js npm WARN This failure might be due to the use of legacy binary "node" npm WARN For further explanations, please read /usr/share/doc/nodejs/README.Debian npm ERR! weird error 1 npm ERR! not ok […]
如何访问模态视图中的对象
我有一个游戏里面的canvas标签。 当我点击一个游戏实体时，我想打开一个模式，并在视图中，能够访问被点击的对象的属性。 这是我点击游戏实体时调用的函数： function pause(player) { $('myModal').modal(); } 以下是模态渲染的视图： #myModal.modal.fade(tabindex='-1', role='dialog', aria labelledby='myModalLabel', aria-hidden='true') .modal-dialog .modal-content .modal-header button.close(type='button', data-dismiss='modal', aria-label='Close') span(aria-hidden='true') × h4#myModalLabel.modal-title .modal-body h5 Object Properties ul.list-group -// List all properties of the player object here form .form-group label.control-label(for='script-text') Text: input#script-text.form-control(type='text') .modal-footer button.btn.btn-primary.pull-left(type='button') Submit button.btn.btn-default(type='button', data-dismiss='modal') Cancel 如何从视图中访问player对象？ 我确信有一个简单的答案，但我似乎无法弄清楚。
使用gulp / gulp-watch-less自动编译较less文件的bootstrap不会重新生成css
我已经安装了nodejs和gulp来使用gulp-watch-less模块自动编译bootstrap less文件（v 3.3.5）。 一切正常工作期望一件事：我必须停止并开始吞咽重新生成bootstrap.css 。 有关信息，Gulp正在检测包含在bootstrap.less中的.less文件被修改，我有以下消息： [23:14:40] Starting 'default'… [23:14:42] Finished 'default' after 2.04 s [23:16:42] LESS saw variable-overrides.less was changed [23:16:42] LESS saw variable-overrides.less was changed [23:16:42] LESS saw bootstrap.less was changed:by:import [23:16:42] LESS saw bootstrap.less was changed:by:import 但是，当我打开bootstrap.css文件，我看不到变化，直到我停下来，再次开始吞咽。 这里是我的gulpfile.js的内容： var gulp = require('gulp'); var watchLess = require('gulp-watch-less'); var less = require('gulp-less'); gulp.task('default', function […]
删除引导3默认样式
对于最近的网站，客户有5种不同的品牌造型的颜色。 所以为了跟踪更less的文件（我们使用节点编译为一个最终的css文件）中的所有内容，我将颜色定义为更less的variables，并使用.button-variant（）混合来生成样式。 例如 @color-cta-light: #df134d; @color-cta-dark: #860c2f; @color-cta-background: #fcf7fa; .btn-cta { .button-variant(#ffffff, @color-cta-light, @color-cta-dark); } 这工作正常。 不过，我也是使用面板来完成的，现在我已经结束了一个11,000行的css文件。 这是很长的，因为我们需要大多数默认的Bootstrap样式（如.btn样式）以及我的自定义样式。 我想知道的是（并保持它只是简单地使用button作为例子）是否有一个很好的简单的方法来删除在CSS属于默认的引导button样式，即btn成功，btn警告，等等，简单，我的意思是自动的。 我们使用节点lessc模块来编译较less的文件（使用grunt watcher），所以我想象一下在编译之后需要发生什么。 或者，我应该只是修改默认引导混合，什么也不做，并使用我自己的自定义混合？ 我觉得这样可以工作，但是这意味着每一个新版本的Bootstrap（当前3.1）都花费额外的时间来确保自定义的mixin是最新的。 我希望最终是一个单一的样式表，从button.less默认button样式没有未使用的CSS额外的重载。 有我的理解，这是不可能的，但我希望有一些工具，我不知道这将有助于我的情况。
如何在我的节点项目（本地）中包含较less的引导版本？
我正在尝试学习一些关于节点的知识。 我已经成功地build立了一个节点的静态web服务器，我想要引导去。 我只想用我的节点项目。 我想我应该这样做，但不知道有没有更好的办法？ 1）下载所有.less引导文件并将其安装到我的/ css文件夹中2）使用grunt编译我所有的.css文件，然后链接到css文件。 我有两个问题 1）这个过程会工作吗？ 2）有没有更好的工作方式，如果这不起作用？
捕获网页图像的一些问题，node-webshot
我有一个web应用程序，用express框架在node.js中编写，在前端用Twitter Boostrap 3编写，我使用这个模块node-webshot为了保存页面的状态为png格式，当用户注销从我的网站，稍后显示给用户一个缩略图，他的最后一页的状态。 这个模块，工作真的很好，但我正在试验一些问题，例如： 在本地主机环境（OSX 10.9）上： 当我把我的应用程序放在我的Digital Ocean VPS（GNU / Linux – > CentOS 6.5）上时。 正如你所看到的，是两个不同的问题，第一个不能得到字形，第二个是失败，字符编码也许？ 这是我的代码保存图像的一部分，并完美，除了这两个问题。 var options = { quality : 50, }; webshot(refererURL, './public/assets/img/lastScreen.png', options, function(err) { if(err) console.log('Error: some in screenshoot' , err); res.render('select_sys'); }); 在模块文档中，说这适用于幻像JS，有一些想法？ 提前致谢。
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 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 […]
