天道酬勤,学无止境

在 Twitter Bootstrap 主题之间切换?(Switching between Twitter Bootstrap Themes?)

问题

我正在为一个基于 Twitter Bootstrap 的客户端开发一个项目。 他希望用户可以选择不同的配色方案。 例如,有一个红色配色方案和一个蓝色配色方案,用户可以通过顶部的菜单进行更改。

是否有任何 jQuery 插件(或其他任何插件)可以做到这一点? 它真正需要做的就是加载一个不同的 CSS 文件,我想你会怎么做?

回答1

使用 Kickstrap。 您基本上可以从任何地方安装主题,制作您自己的主题,包括来自 Bootswatch 的主题,它使用 Less.js 客户端每次都轻松地重新编译您的更改。

回答2

好吧,既然你想加载不同的主题......

您可以使用 jQuery 加载不同的样式表

<html>
    <head>
        <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    </head>
    <body>
    ...
</html>

这可能是按钮单击或触发的其他事件。 因此,您要做的只是在页面 DOM 的 head 部分插入一个新元素。 这可以在几行 jQuery 中完成:

$(document).ready(function () {
    $("a").click(function () {
        $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
    });
});

我希望这能解决它...

回答3

我在 IE11、Chrome、Firefox 上对此进行了测试,并且可以正常工作:

1.

<link id="theBoostrapTheme" type = "text/css" rel = "stylesheet" href = "Content/bootstrap-theme.min.css"/>

2.

<a role="menuitem" tabindex="-1" href="javaScript:void(0);" onclick="changeCurrentTheme('_Cerulean')">Cerulean</a>
  1. 代码:

     function changeCurrentTheme(theNewThemeName) { $("#theBoostrapTheme").attr("href", "Content/bootstrap-theme.min" + theNewThemeName + ".css"); }

在这种情况下,原始主题文件以外的主题文件命名如下: bootstrap-theme.min_ …. .css bootstrap-theme.min_ …. .css 。 例如: bootstrap-theme.min_Cerulean.css

回答4

更改样式的 href 本身不会做任何事情。 浏览器已经加载了您的 CSS,更改 HREF 不会导致他再次读取新文件。

阅读这个问题的答案,它可能对你有帮助。

如果页面的重新加载没问题,您可能应该在服务器上而不是通过 javascript 使用一些定义要使用的配色方案的会话值来完成。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Twitter Bootstrap:删除/切换类似复选框的按钮组的活动状态(Twitter Bootstrap: Remove/Toggle the active state of checkbox-like button group)
    问题 使用twitters Bootstrap,我创建了一个具有单选框行为的按钮组,以使用户可以在不同状态之间进行选择。 这可以按预期的方式工作。 我用下面的示例安排了一个jsFiddle:http://jsfiddle.net/jpxWj/ 我尝试过(并且想要)的是,当我第二次单击活动按钮时,可以删除按下状态。 我尝试使用jQuerys removeClass removeClass()从btn类中删除active类,但是它不起作用。 (我也尝试使用.on()删除,但这只会使活动始终处于隐藏/删除状态) 回答1 我认为,这是一个未知的事件现象。 你可以在这里读更多关于它的内容。 编辑: 简单地说,简单的.removeClass不起作用的原因是因为有多个侦听器在侦听同一事件。 因此,在触发click事件时,普通的.removeClass会删除该类,但是Twitter Bootstrap处理程序将再次添加该类! 为了防止在您之后执行任何其他处理程序,可以执行e.stopPropagation 。 但是,这不会停止附加到与您相同的元素的处理程序,它只会停止那些在树上更远的处理程序。 要完全确保在您之后没有其他处理程序被执行,可以使用event.stopImmediatePropagation()。 回答2 Bootstrap 3更新: $('body').on('click', '
  • 什么是Bootstrap?(What is Bootstrap?)
    问题 这里有很多与Bootstrap相关的问题。 我看到很多人在使用它。 因此我尝试对其进行研究,并找到了Bootstrap官方网站,但之后只有一个下载部分和几句话。 没有什么可以解释它的作用是什么...我只是了解它是一个前端帮助器。 我试图通过Google搜索找到一些东西,但没有发现任何具体问题。 我发现的一切都与计算机科学定义有关。 因此,我的问题是: Bootstrap到底是什么? 它的作用是什么,它如何帮助前端开发? 我还想解释一些细节。 回答1 它是HTML,CSS和JavaScript开源框架(最初由Twitter创建),您可以将其用作创建网站或Web应用程序的基础。 更多信息和下载链接入门例子主题 Bootply-Bootstrap编辑器和生成器 更新 官方引导网站已更新,并包含清晰的定义。 “ Bootstrap是最流行的HTML,CSS和JS框架,用于在网络上开发响应式,移动优先项目。” “由@mdo和@fat结合世界上所有的爱进行设计和建造。” 回答2 Bootstrap是Twitter团队开发的开源Javascript框架。 它是HTML,CSS和Javascript代码的组合,旨在帮助构建用户界面组件。 Bootstrap还被编程为同时支持HTML5和CSS3。 也称为前端框架。 Bootstrap是用于创建网站和Web应用程序的免费工具集合。
  • Twitter Bootstrap-在行之间添加顶部空间(Twitter Bootstrap - add top space between rows)
    问题 如何使用Twitter Bootstrap框架向class="row"元素添加边距顶部? 回答1 在Twitter引导程序中编辑或覆盖行是一个坏主意,因为这是页面支架的核心部分,并且您将需要没有上边距的行。 要解决此问题,请创建一个新类“ top-buffer”,添加所需的标准边距。 .top-buffer { margin-top:20px; } 然后在需要上边距的行div上使用它。 <div class="row top-buffer"> ... 回答2 好的,只是为了让您知道发生了什么,我使用了一些新的类,如上面的Acyra所述: .top5 { margin-top:5px; } .top7 { margin-top:7px; } .top10 { margin-top:10px; } .top15 { margin-top:15px; } .top17 { margin-top:17px; } .top30 { margin-top:30px; } 每当我想做<div class="row top7"></div> 为了获得更好的响应速度,您可以添加margin-top:7%而不是5px ,例如:D 回答3 引导程序3 如果需要在引导程序中分隔行,则可以简单地使用.form-group 。 这会在行的底部增加15px的边距。 对于您的情况,要获得最高利¶
  • Twitter Bootstrap中的数据切换属性(The data-toggle attributes in Twitter Bootstrap)
    问题 data-toggle属性在Twitter Bootstrap中有什么作用? 我在Bootstrap API中找不到答案。 在链接之前,我也看到了类似的问题。 但这对我没有多大帮助。 回答1 它是一个Bootstrap数据属性,可自动将元素连接到其所属的小部件类型。 Data- *是html5规范的一部分,而data-toggle特定于Bootstrap。 一些例子: data-toggle="modal" data-toggle="collapse" data-toggle="dropdown" data-toggle="tab" 浏览Bootstrap JavaScript文档并搜索数据切换,您将在代码示例中看到它。 一个工作示例: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel=
  • Switching between Twitter Bootstrap Themes?
    I'm working on a project for a client built on Twitter Bootstrap. He wants to have different colour schemes that the user can select from. For example have a Red Colour Scheme and a Blue Colour Scheme that the user can change through a menu up the top. Is there any plugins for jQuery (or anything else for that matter) that will do this? All it really has to do is load a different CSS file I suppose, how would you go about doing this?
  • 使用 Primefaces (JSF) 的 Twitter Bootstrap(Twitter Bootstrap with Primefaces (JSF))
    问题 我正在尝试将 Primefaces 3.2(也许它通常与 JSF 相关)与 Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap) 一起使用。 我在 starter-example (http://twitter.github.com/bootstrap/examples/starter-template.html) 中添加了一个下拉菜单,在<h:head>包含以下脚本: <script src="/resources/js/bootstrap.js"></script> <script src="/resources/js/jquery-1.7.2.js"></script> <script src="/resources/js/bootstrap-dropdown.js"></script> 这在 JSF 页面上工作正常,但如果我添加一个简单的p:dataTable <p:dataTable var="i" value="#{testBean.list}"> <p:column> <f:facet name="header"><h:outputText value="Item"/></f:facet> <h:outputText value="#{i}"/> </p:column> </p
  • 将 Twitter Bootstrap 与 Wordpress 结合使用(Using Twitter Bootstrap together with Wordpress)
    问题 如何将 Wordpress 与 Twitter Bootstrap 一起使用? 我知道如何设置 Wordpress 页面并且我已经使用过 Bootstrap,但现在我想第一次将这两个一起使用。 对于我的 Wordpress 项目,我通常只安装 Wordpress 并从头开始创建一个新主题。 对于我的 Bootstrap 项目,我总是使用 Initializr 来构建模板。 现在使用谷歌我发现了各种“引导程序主题”和插件,我需要其中之一吗? 我想用我自己的颜色等自定义引导程序外观,使用 LESS,这就是我问的原因。 我只是无法理解这两者将如何协同工作,而且我还没有找到任何好的资源。 回答1 有几种方法可以解决这个问题,但这是我一直在做的…… 复制您最喜欢的起点主题下载完整的引导程序存储库(更少和所有内容)并将其弹出到您的主题文件夹中。 在 bootstrap 文件夹中创建一个名为“css”的文件夹,并将其设置为输出编译后的“bootstrap.css”文件的位置。 然后在主题根目录中,打开“styles.css”,更改主题名称等,就像创建新主题一样,删除所有样式并仅添加一行代码@import url("bootstrap/css/bootstrap.css"); 您现在应该可以从“wp-admin”的“外观”菜单中选择这个新主题。 它显然看起来很可怕,但是一旦您将一些主题类
  • Twitter引导程序崩溃:更改切换按钮的显示(Twitter bootstrap collapse: change display of toggle button)
    问题 我正在使用Twitter Bootstrap创建可折叠的文本部分。 当按下+按钮时,这些部分将展开。 我的html代码如下: <div class="row-fluid summary"> <div class="span11"> <h2>MyHeading</h2> </div> <div class="span1"> <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button> </div> </div> <div class="row-fluid summary"> <div id="intro" class="collapse"> Here comes the text... </div> </div> 有没有一种方法可以更改按钮的显示-展开该部分后-而不是+ (当再次折叠时又更改为+ )? 附加信息:我希望有一个简单的基于twitter-bootstrap / css / html的解决方案来解决我的问题。 到目前为止,所有响应都使用JavaScript或PHP。 因此,我想添加有关我的开发环境的更多信息:我想在基于SilverStripe的(版本3.0.5)网站中使用此解决方案
  • twitter bootstrap导航栏固定顶部重叠站点(twitter bootstrap navbar fixed top overlapping site)
    问题 我在网站上使用引导程序,并且导航栏固定顶部出现问题。 当我只使用常规导航栏时,一切都很好。 但是,当我尝试将其切换到导航栏固定顶部时,该网站上的所有其他内容都会向上移动,就像导航栏不存在并且导航栏与之重叠一样。 这基本上是我的布局方式: .navbar.navbar-fixed-top .navbar-inner .container .container .row //yield content 我试图完全复制引导程序示例,但仅在使用navbar fixed top时仍然存在此问题。 我究竟做错了什么? 回答1 您的答案在文档中是正确的: 需要身体填充除非您在<body>的顶部添加padding ,否则固定的导航栏将覆盖您的其他内容。 试用您自己的值或使用下面的代码段。 提示:默认情况下,导航栏的高度为50px。 body { padding-top: 70px; } 确保在核心Bootstrap CSS之后添加此名称。 并在Bootstrap 4文档中... 固定的导航栏使用位置:固定,这意味着它们是从DOM的正常流程中拉出的,并且可能需要自定义CSS(例如上的padding-top)以防止与其他元素重叠。 回答2 正如其他人所说,在身体上添加填充顶部效果很好。 但是,当您将屏幕变窄(到手机宽度)时,导航栏和机身之间会出现间隙。 同样,拥挤的导航栏可以包装到多行栏
  • 在Twitter Bootstrap 2.0.4中更改导航栏颜色(Change navbar color in twitter bootstrap 2.0.4)
    问题 想知道是否有人知道如何在bootstrap v2.0.4中更改导航栏颜色 我尝试了这种解决方案,它似乎不起作用:Twitter Bootstrap中的导航栏颜色 还有其他解决方案吗? 我已经尝试了自定义的引导程序包,但是到目前为止,我可以进行这样的切换。 代码: .navbar-inner { background-color: #2c2c2c; /* fallback color, place your own */ /* Gradients for modern browsers, replace as you see fit */ background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333
  • Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分(Twitter Bootstrap button click to toggle expand/collapse text section above button)
    问题 我最近来到了引导程序,我正在扩展英雄示例。 我想将以下行为添加到我的页面: 单击按钮(即带有选择器“.row .btn”的元素)时,我希望能够在按钮上方的文本部分展开/折叠之间切换。 这是 HTML 的样子: <html> <head> <title>Test Page</title> <!-- Le styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } </style> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-fixed-top"> </div> <div class="container"> <div class="hero-unit"> <h1>Hello, world!</h1> <p>Blah, blah.</p> <p><a class="btn btn-primary btn-large">Learn more »</a></p> </div> <!--
  • Twitter Bootstrap响应式-仅在桌面上显示表列(Twitter Bootstrap Responsive - Show Table Column only on Desktop)
    问题 我正在使用DataTables.net + Twitter Bootstrap和响应式布局,我正在尝试使用“ visible-desktop”类隐藏表的某些列,即仅以大尺寸显示列,但似乎无法正常工作,隐藏得很好,但是如果我调整窗口大小以达到桌面宽度,隐藏的列开始显示堆叠,这似乎是CSS显示类问题,因为它继承了父类的显示类型: .visible-desktop { display: inherit!important; } 如果我操纵它 .visible-desktop { display: table-cell!important; } 运作良好...是否有解决方法? 还是我必须编写自己的类来隐藏表列? 回答1 版本4 编辑:Bootstrap 4删除了hidden和visible类,请参阅此答案以获取更新的示例和/或相关的官方迁移指南。 **下面的Bootstrap 3的旧答案** 版本3 可用类.visible和.hidden 。 使用一个或多个可用类的组合在视口断点之间切换内容。 在此处的“引导程序”部分中,http://getbootstrap.com/css/#sensitive-utilities-classes 回答2 我终于发现存在一种替代方法: visible-desktop 经过 hidden-phone hidden-tablet 希望能帮助到某人!
  • Twitter Bootstrap 3导航栏折叠-将宽度设置为折叠(Twitter Bootstrap 3 navbar-collapse - set width to collapse)
    问题 我将Twitter Bootsrap 3与navbar-collapse :http://bootply.com/91119 当您减小页面的宽度时,菜单会分为两行,然后折叠。 我没有拆分为两行,但想要崩溃。 我该怎么办? 回答1 您可以减少导航栏折叠的位置。 选项1 从Bootstrap文档(http://getbootstrap.com/components/#navbar) 根据导航栏中的内容,您可能需要更改导航栏在折叠和水平模式之间切换的点。 自定义@ grid-float-breakpoint变量或添加自己的媒体查询。 选项2 如果您不想构建自定义的Bootstrap,则可以使用CSS媒体查询。 例如,此处将断点设置为1280像素: @media (max-width: 1280px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav {
  • 如何在 twitter bootstrap 中将默认背景颜色白色更改为其他颜色(How to change the default background color white to something else in twitter bootstrap)
    问题 我正在构建一个 Web 应用程序,其中使用 css 将默认颜色设置为海军蓝。 但是当我在页面中添加 twitter bootstrap css 时,我没有找到我的海军蓝色,而是找到了 twitter bootstrap 提供的白色背景色。 我的查询是我应该在引导程序中更改 css 的哪个部分来更改我的页面背景。 回答1 您可以通过添加自己的规则来覆盖 Bootstraps 默认 CSS。 <style type="text/css"> body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */ </style> 回答2 您必须通过更具体一点来覆盖引导程序默认值。 试试这个黑色背景: html body { background-color: rgba(0,0,0,1.00); } 回答3 我不建议更改实际的引导 CSS 文件。 如果您不想使用 Jako 的第一个解决方案,您可以使用其中一个可用的 Bootstrap 主题生成器(Bootstrap 主题生成器)创建自定义引导程序样式表。 这样你就可以使用 1 个样式表和所有默认的 Bootstrap CSS
  • 如何在webapp或yo angular上更新和包括Twitter Bootstrap 3?(How to update and include Twitter Bootstrap 3 on webapp or yo angular?)
    问题 我使用了webapp或Angular创建了一个新项目,并且我收到的Bootstrap include版本是2.3.2,但是我想使用最新版本的Bootstrap。 我如何使用命令提示符更新Bootstrap软件包,然后在创建新的webapp或更新角度时更新,选择包括Twitter Bootstrap是最新版本? 回答1 Yeoman的webapp和angular生成器使用Bootstrap的Sass,它基于Twitter Bootstrap的2.3.2构建。 在运行yo webapp或yo angular ,您可以通过运行以下命令来添加Bootstrap 3.0。 $ bower install --save bootstrap 这将为您下载Bootstrap 3.0。 回答2 @micjamking答案确实是一个很好的提示,但是由于使用Yeoman,事情应该更容易些,我为您省去了一些搜索工作: yo angular angular-在此处说“否”引导-否则它将下载2.x版本bower install --save bootstrap npm install --save-dev grunt-bower-install 编辑Gruntfile.js-插入标记的行: // ... } catch (e) {} grunt.loadNpmTasks('grunt-bower
  • Twitter Bootstrap可滚动表行和固定标题(Twitter Bootstrap scrollable table rows and fixed header [closed])
    问题 关闭。 这个问题需要调试细节。 它当前不接受答案。 想改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 5年前关闭。 改善这个问题 有谁知道如何制作一个带有固定标题行和可滚动正文行的表? 如果这很重要,我正在使用Twitter引导程序。 这是我要创建的示例: http://www.siteexperts.com/tips/html/ts04/page1.asp 我见过的所有示例都将其分为两个单独的表。 想知道是否有人有一个更优雅的解决方案。 Twitter引导程序还会根据内容自动调整列的大小,这是我想将其保存在一个表中的另一个原因 回答1 只需堆叠两个引导表; 一个用于列,另一个用于内容。 没有插件,只有纯引导程序(那不是bs,哈哈!) <table id="tableHeader" class="table" style="table-layout:fixed"> <thead> <tr> <th>Col1</th> ... </tr> </thead> </table> <div style="overflow-y:auto;"> <table id="tableData" class="table table-condensed" style="table-layout:fixed"> <tbody> <tr> <td>data</td>
  • Twitter Bootstrap定制最佳实践(Twitter Bootstrap Customization Best Practices [closed])
    问题 关门了。 这个问题是基于意见的。 它当前不接受答案。 想要改善这个问题吗? 更新问题,以便通过编辑此帖子以事实和引用的形式回答。 7年前关闭。 改善这个问题 我正在使用LESS使用Bootstrap 2.0.3。 我想对其进行广泛的自定义,但是我希望避免在任何可能的情况下都对源进行更改,因为对库的更改非常频繁。 我是LESS的新手,所以我不知道它的编译完全如何。 使用LESS或基于LESS的框架有哪些最佳实践? 回答1 我的解决方案与jstam相似,但是在可能的情况下,我避免对源文件进行更改。 鉴于引导程序的更改将很频繁,因此我希望能够通过将我的修改保存在单独的文件中来获取最新的源代码并进行最小的更改。 当然,这并不是完全防弹的方法。 将bootstrap.less和variables.less复制到父目录。 将bootstrap.less重命名为theme.less或任何您想要的名称。 您的目录目录结构应如下所示: /Website theme.less variables.less /Bootstrap ... 更新theme.less中的所有引用以指向bootstrap子目录。 确保从父目录而不是从引导目录引用您的variables.less,如下所示: ... // CSS Reset @import "bootstrap/reset.less"; // Core
  • 在 Twitter Bootstrap 上切换复选框(Toggle checkbox on Twitter Bootstrap)
    问题 我用 Twitter Bootstrap 创建了一组复选框。 现在我想做一个“全选”或“取消全选”按钮。 我怎么能用 JS 函数做到这一点? Twitter Bootstrap 文档说使用 $().button('toggle') 但它不起作用。 这是我的代码片段: <div class="control-group"> <div class="controls"> <div class="input"> <div class="btn-group"> <label class="btn btn-toggle" for="colors-1-toggle-0"> <input type="checkbox" id="colors-1-toggle-0" name="colors-1[]" value="color_c" />C </label> <label class="btn btn-toggle" for="colors-1-toggle-1"> <input type="checkbox" id="colors-1-toggle-1" name="colors-1[]" value="color_m" />M </label> <label class="btn btn-toggle" for="colors-1-toggle-2"> <input type=
  • Twitter Bootstrap 手风琴和按钮下拉溢出问题(Twitter Bootstrap Accordion and button dropdown overflow issue)
    问题 我正在将 Bootstrap 用于我网站的一部分。 我将手风琴与下拉按钮混合在一起。 当按钮位于底部时,问题就出现了,因为 .accordion-body 溢出设置为隐藏,下拉菜单被隐藏。 您可以在此处查看 jsfiddle:http://jsfiddle.net/DBQU7/6/ 所以我做了你所期望的,试图做overflow-y:visible 。 但是随后您可以在此处看到结果,它不起作用:(您可能还会注意到下拉列表在 div 内,它在 div 内创建了一个滚动条,而不仅仅是显示。 http://jsfiddle.net/DBQU7/5/ 我看到了这个类似的问题:Twiiter Bootstrap (Button Dropdown) + Div Fixed 但它并没有解决我上面提到的问题。 所以问题是,我怎样才能让下拉菜单正常显示。 谢谢。 到目前为止我发现的唯一解决方案(我很高兴被证明是错误的)是添加一个 CSS 属性,使溢出在打开时可见,然后通过 JS 脚本使其在可见和隐藏之间切换......不理想,但到目前为止没有更好的。 -- 编辑 -- 它实际上效果不佳,似乎不是一个可行的解决方案。 回答1 创见 你非常接近你的解决方案。 就是这个: .accordion-body.in { overflow:visible; } .in类在打开时添加,因此仅在打开时设置可见性。
  • 修改Twitter Bootstrap导航栏(Modify twitter bootstrap navbar)
    问题 我一直在尝试修改twitter bootstrap导航栏,此刻所有链接都向左对齐,而我真正想要的是将它们置于中央。 在另一篇文章中,我读到您使用了这个 .tabs, .pills { margin: 0 auto; padding: 0; width: 100px; } 但这对我没有用 我需要在CSS中进行什么更改才能实现此目的,我了解我将修改后的CSS放入了引导程序并覆盖了。 任何帮助表示赞赏 这是我的标记 布局/应用 <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand">Newbridges</a> <% if user_signed_in? %> <div class="nav-collapse"> <ul class="nav "> <%= render