标签: bootswatch

我刚从Twitter开始使用Bootstrap,我想知道什么是"最佳实践"用于定制.我想开发一个系统,该系统将利用一个CSS模板的所有电源(引导或其他),彻底(容易地)修改的,是可持续的(即 - 当引导的下一个版本是从Twitter的我不要公布"我必须重新开始.

例如,我想在顶部导航中添加背景图像.看起来有三种方法可以解决这个问题:

1. 修改bootstrap.css中的.topbar类.我不是特别喜欢这个,因为我会有很多.topbar项目,我不一定要以同样的方式修改它们.
2. 使用我的背景图像创建新类并应用这两种样式(new和bootstrap到我的元素).这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中然后仅使用我的自定义类未处理的部分来避免这种冲突.同样,这需要比我认为必要的更多工作,虽然它很灵活,但是当Twitter发布下一部分时,它不允许我轻松更新bootstrap.css.
3. 使用.LESS中的变量来实现自定义.这似乎是一个很好的方法,但没有使用过.很少我担心在客户端编译css和代码可持续性.

虽然我使用的是Bootstrap,但这个问题可以推广到任何css模板.

提前感谢您的意见.

我即将创建一个新的ASP.Net MVC5 Web应用程序.我想在应用程序中使用bootswatch或wrapbootstrap中的主题,但无法找到有关如何执行此操作的一组说明.

我正在使用bootstrap作为我正在开发的网站的界面.我还计划将bootswatch主题集成到我的网站.我创建了一个包含bootswatch不同主题的下拉菜单.我的问题是当我点击下拉菜单中的一个主题时如何切换主题？

所以我有一个项目,我想改变BootStrap的主题.所以,我从BootSwatch中选择了主题,选择的主题是Lumen.现在在我的Bundle.Config文件中,我进行了以下更改.

  bundles.Add(new StyleBundle("~/Content/css").Include(
                      //"~/Content/bootstrap.css",
                      "~/Content/bootstrap-lumen.css",
                      "~/Content/superslides.css",
                      "~/Content/site.css"));
        }

现在,当我开始使用流明主题时,我得到错误(在开发工具中),如下所示:

PS:当我使用普通的BootStrap主题时,这不会发生.我调查了SO答案.但它讨论了如何进行IIS更改.但我的问题只发生在我使用LUMEN主题时.如何摆脱这个问题？

这是我第一次使用ASP.NET,我正在尝试使用Bootswatch主题但是当我尝试使用它时,页面顶部的导航栏变成了一个奇怪的下拉菜单.

难道我做错了什么？我刚用Bootswatch中的新bootstrap.css替换了当前的bootstrap.css.

我有一个运行Bootstrap的Ruby on Rails应用程序,我使用gem twitter-bootstrap-rails安装.

我现在想整合一个新的Bootswatch主题,但我无法弄清楚要做什么.

每个主题有四种可能的下载 - bootstrap.css文件,bootstrap.min.css文件,variables.less文件和bootswatch.less.我的问题是:我是否需要下载并将它们全部添加到我的~/app/assets/stylesheets文件夹中？或者我只需要其中的一部分？目前里面~/app/assets/stylesheets只有两个文件:application.css和boostrap_and_overrides.css.less.LESS真的把我扔到了这里,所以我完全不知道它是如何工作的以及我需要做些什么来添加这个设置添加新的css文件.任何帮助表示赞赏.

该网站的https://wrapbootstrap.com/主题是使用Twitter Bootstrap制作的.这些主题中的每一个都包括不同版本的Twitter Bootstrap以及其他各种库和版本(jquery,fontawesome等...)

如何将这些主题添加到现有的Rails应用程序中？步骤是什么？

如果我已经使用了不同版本的jquery,twitter bootstrap,fontawesome和其他版本(如Gemfile中所声明的那样),我对可能出现的冲突特别好奇.

谢谢

目前我有一个这样的输入表单:

<div class="editor-label">
            @Html.LabelFor(model => model.VenueID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.VenueID)
            @Html.ValidationMessageFor(model => model.VenueID)
        </div>

我想将其转换为使用以下引导代码:

<div class="form-group">
      <label for="inputVenueID" class="col-lg-2 control-label">Venue ID</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="inputVenueID" placeholder="VenueID">
      </div>
    </div>

我该怎么做,所以我仍然可以使用相同Razor的HTML.LabelFor/ EditorFor/ ValidationMessageetc 语法？

我正在使用Twitter的Bootstrap库的Bootswatch Cyborg主题.然而,Cyborg主题具有深色背景和浅色前景色,从Bootstrap默认值看为负面.图标集PNG采用浅色背景,不会显示在Cyborg主题中.是否为深色背景设置了相应的图标？我在Glyphicons的网站上找不到一个.是否有一个简单的技巧将图标变成负面颜色？

我试图在Twitter Bootstrap中获得一些效果,但我很挣扎,我确信它必须在之前完成.两者都非常相似所以我已经归结为一个问题.

我想要做的是让图标在列表和导航栏中工作.通过一些绘画快速说明我想要实现的每个效果:

名单

<div class="well span4">
   <ul class="nav nav-list">
       <li class="active"><a href="#">Value 1</a></li>
       <li><a href="#">Value 2</a></li>
       <li><a href="#">Value 3</a></li>
   </ul>
</div>

我曾尝试,包括<img>与<span>和<div>所有与class="close"但似乎没有正常工作,最近我能得到了让他们在下一行显示.

导航栏

<div class="navbar">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" href="#">NavBar</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="divider-vertical"></li>
                        <li class="active">
                            <img src="edit.png" width="16" height="16"/>
                            <a href="#">Nav 1</a>
                        </li>
                        <li>
                            <img src="play.png" width="16" height="16"/>                               
                            <a href="#">Nav 2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

我想要的是在导航栏项旁边显示两个图标(并在第一个导航栏项的活动区域内).与列表类似的问题,图像被推到这个时间之上.我已经对Nav2进行了拍照,以说明我想要实现的效果.

我已经尝试了<img>,<i>但我确实尝试过,但我相信这些都是神奇的,总是指向某种字形图标 - …