Tag: twitter bootstrap
Bootstrap 4将数据传递给远程模式
我正在使用NodeJs和Express。 我需要将数据库中的一些数据（MongoDB）传递到Bootstrap 4中的远程模式。我知道Bootstrap在v4中删除了“remote”选项，但是我需要在不同的文件中有不同的内容。 现在，我可以从数据库发送数据，用远程内容打开模式，但是这个远程内容还没有收到来自数据库的数据。 这是我的代码： 触发button： <a id="btn1" data-remote="myContent.ejs" data-foo="<%=some.data1%>" data-fighter="<%=some.data2%>" data-toggle="modal" data-target="#Modal1">Click me!</a> 模式（在同一个文件中）： <div class="modal fade" id="Modal1" role="dialog"> <div class="modal-dialog"> <!– Modal content–> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4>My Modal</h4> </div> <div class="modal-body" id="modalR"> <!–REMOTE CONTENT GOES HERE–> <script type="text/javascript" charset="utf-8"></script> </div> <div class="modal-footer"> <div class="form-group col-md-offset-9"> <button type="submit" class="btn […]
如何在nodejs中使用pug-bootstrap模块？
我在一个nodejs项目中安装了pug -bootstrap模块。 我正在尝试从导航栏创build一个菜单。 我做了这些文件： layout.pug： include /node_modules/pug-bootstrap/_bootstrap.pug index.pug： extends layout block head +navbar("menu") +nav_item("#", undefined, true) string test block body h1= title p Welcome to #{title} _bootstrap.pug包含bootstrap css文件： https ：//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css。 但是它没有加载到网页上。 有人知道为什么？ 以及如何解决这个问题？ 任何帮助将不胜感激。
在Angular 2 cli项目中集成bootstrap
面对将Bootstrap与angular色2 cli集成的问题。 我是新的angular2 CLI请指导我，纠正我，如果我正在做我的步骤错了。 提前致谢。 步骤如下： 1. npm install bootstrap @ next –save 2.修改.angular-cli.json文件 这是我修改的： "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.scss" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ], 用ng服务重新启动应用程序 发生错误如下： 在多脚本加载器中出现错误！./〜/ jquery / dist / jquery.js script-loader！./〜/ tether / dist / tether.js script-loader！./〜/ bootstrap / dist / js / bootstrap.js找不到模块：Error：无法parsing'/ Users / sagarbhanushali / projectangularcliyoutube / myProject […]
使用带有makefile的节点使用LESS编译Bootstrap
我已阅读Bootstrap指令，但无法获取文件进行编译。 有一个更详细的教程或任何人都可以把我的权利，谢谢。 我打开一个terminal，然后进入 npm install less 这似乎安装文件，然后我改变目录到我的Bootstrap目录的根目录并进入 make 我得到以下错误： `make` is not recognised as an internal or external command
Node.js Express / less-middleware＆Bootstrap 3
我最近开始学习Node.js，我试图设置一个使用less-middleware的快速安装，并且希望使用Bootstrap 3 less文件。 我看了一下，但只能findBootstrap 2的教程。 这是我的代码到目前为止： /** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require('http'); var path = require('path'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.json()); app.use(express.urlencoded()); app.use(express.methodOverride()); app.use(express.cookieParser('your secret […]
删除引导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）有没有更好的工作方式，如果这不起作用？
在express.js上使用holder.js与express web框架一起工作
我使用快速Web框架和玉模板分析器使用node.js。 我遵循引导示例，并与holder.js有问题。 我已经把holder.js脚本放入静态文件（公共目录），在app.js中有以下内容： app.use(express.static(path.join(__dirname, 'public'))); 我想用以下代码在玉石模板中显示一些图像： img(data-src='/holder.js/500×500/auto') 它不起作用。 我通过浏览器检查，我能够正确地看到holder.js文件，但添加任何参数导致主页面显示。 我怀疑静态文件处理程序认为没有持有人/ 500×500 /汽车这样的文件，并redirect到主页面。 我该如何解决这个问题？
无法在导航栏中看到标签文字
即时通讯在JADE中使用下面的代码，我没有看到导航栏中的标签文本，这里可能是什么问题，我尝试玩没有成功的缩进我猜我缺less一些basic.please协助 html head title= title link(rel="stylesheet", href="bootstrap.min.css") link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css') script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') body div nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation') .container .navbar-header button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1') span.sronly span.icon-bar span.icon-bar span.icon-bar #bs-example-navbar-collapse-1.collapse.navbar-collapse ul.nav.navbar-nav li a(href='/recipes/bbq') Tab1 li a(href='/recipes/bbq') Tab2 div.container block content 这里是js小提琴http://jsfiddle.net/jo1nnrp4/3/ 这是视图，我想在导航栏中看到tab1＆tab2，并将到达文本放在灰色区域，我该怎么做？ 更新 html head title= title link(rel="stylesheet", href="bootstrap.min.css") link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css') script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') body div nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation') .container .navbar-header button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1') span.sronly span.icon-bar span.icon-bar span.icon-bar […]
meteor – 模板助手参数（空格键）
我需要一些关于如何解决我的问题的想法。 我有一个表格下面的HTML模板。 它显示了5行，并在每行的末尾（在最后的TD）有一个button，触发引导模式（popup窗口）。 我正在使用spacebars {{#each}}遍历所有的游标，但问题是与模式。 它只显示第一行的数据，每行logging相同的数据。 这是因为模式的ID对于每个logging都是相同的（它是第一个， #subsPopup ）。 我需要以某种方式为每行传递不同的ID，如#subsPopup{{var}} 。 任何想法我怎么能做到这一点？ <!– subscribers table –> <table class="table table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Created</th> <th>Modified</th> <th>Mailing lists</th> </tr> </thead> <tbody> {{#each subsList}} <tr> <td>{{firstName}}</td> <td>{{lastName}}</td> <td>{{email}}</td> <td>{{createdDate}}</td> <td>{{modifiedDate}}</td> <!– Trigger the modal (popup window) with a button –> <td> <button type="button" class="btn btn-primary btn-xs" […]
