相关疑难解决方法(0)

我将如何修改CSS以更改Twitter Bootstrap中导航栏的颜色？

我正在使用新的Twitter Bootstrap创建一个站点.该网站看起来很好,适用于IE8以外的所有必需浏览器.

在IE8中,它似乎是显示移动版本的元素,但在我的桌面的整个屏幕上延伸.我相信我遇到的问题是Twitter引导程序首先是移动的.所以出于某种原因IE8正在寻找这个选项.

我还注意到container该类似乎没有按预期提取max-width CSS属性.谁能看到我做错了什么？

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul …

我正在将我的Bootstrap主题从v2.3.2迁移到v3.0.0,我注意到的一件事是由于bootstrap.css中的以下样式,很多维度的计算方式不同.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

谁能解释为什么Bootstrap将所有元素的盒子大小都切换到边框？我怀疑它与基于百分比的新网格系统有关,但上面的选择器显然不仅适用于网格元素.

似乎有点激进imho :-)

有人愿意提供一些见解吗？

看起来像新版本3.0我必须设置图像的类名称,col-lg-4 col-sm-4 col-4如果图像是具有相同类名的div的一部分,以使图像响应所有断点.

在版本2中,图像CSS属性默认继承父级的div属性.

它是否正确？

Twitter的Bootstrap 3按钮颜色有限.默认情况下,将有5 7种颜色(默认主要,错误,警告,信息,成功和链接)请参阅:

每个按钮都有3个状态(默认,活动和禁用)

如何添加更多颜色或创建自定义按钮？Twitter的Bootstrap 2.x:Styling twitter bootstrap按钮已经回答了这个问题.Bootstrap 3不向后兼容.less和css文件中会有很多变化.对IE7的支持将被取消.TB3首先是移动设备.标记代码也会改变.

我正在尝试使用Twitter Typeahead和Bootstrap 3 RC1,因为Bootstrap在版本3上删除了自己的typeahead插件.

我在表单上使用以下HTML:

<div class="well">  
<form>
    <fieldset>
        <div class="form-group">
            <label for="query">Search:</label>
            <input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">              
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </fieldset>
</form>
</div>

在不添加Typeahead的情况下,搜索输入字段显示如下:

然后我添加了Typeahead,如下所示:

<script>
    $('#query').typeahead({        
        local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
    });
</script>

场地变小了,里面有一个白色的矩形.

我做错了什么,或者只是Typeahead或Bootstrap 3 RC1的错误？

我正在开发一个刚开始的Rails项目.我们想使用twitter bootstrap作为我们样式的基础,一开始我们只是直接在HTML代码上使用bootstrap的类名,就像bootstrap的文档中所示,但在阅读以下帖子之后:

在可维护的CSS中学到的经验教训

请停止在HTML中嵌入Bootstrap类

很明显为什么这不适合使用bootstrap,所以经过一些更多的阅读:

从HTML中分离CSS

smacss

除此之外,似乎使用sass @extend是避免使用bootstrap的类名的正确方法,所以不要这样做:

<button type="submit" class="btn">Search</button>

我们会这样做:

<button type="submit" class="button">Search</button>

我们的sass代码看起来像这样:

.button {
   @extend ".btn";
}

这种方法的问题,除了每次我们扩展引导类只是为了使用不同名称时将添加的一堆额外选择器,在引导程序使用这样的选择器的情况下:

.form-search .input-append .btn, .form-search .form-input-append .btn {
  border-radius: 0 14px 14px 0;
} 

该按钮将无法获得正确的样式,因为sass不会将相同的规则应用于我们的自定义类名称,我的意思是,sass 不会这样做:

.form-search .input-append .btn, .form-search .input-append .button, 
.form-search .form-input-append .btn, .form-search .form-input-append .button {
  border-radius: 0 14px 14px 0;
} 

所以我想知道,这是避免将bootstrap的类名嵌入HTML的正确方法,如果是这样,我该如何处理这个问题(经常发生)？如果没有,那么使用自定义类名称但仍然从引导程序获取样式的更好方法是什么.

我非常感谢你对此的看法.请记住,我只是在学习整体网页设计(css,sass,less,html,js等).

如果你想让升级路径尽可能轻松,你会如何使用bootstrap 2.3.2编写新的应用程序？

例如,我知道span-并且col-类正在消失,所以我会为每个具有该定义的mixin的类创建一个自定义的较少的类,或者使用我的模板语言创建一个宏来输出类名而不是使用它直.

另外,是否有bootstrap 3迁移指南？我找不到一个.

那么,您将采取哪些步骤来简化升级？

我一直在使用Bootstrap和Font Awesome一段时间没有任何问题.似乎当我改为Bootstrap 3时,字体真棒图标不再出现在IE10和Firefox中.但它在Chrome和Safari中运行良好.

我在RC1/RC2中做的项目中有相同的图标,但仍然可以正常工作.谁知道发生了什么？

使用来自http://www.addthis.com/的默认代码和Twitter的Bootstrap 3时,计数器的右边框丢失了:

我已经开发了一个使用Asp.Net Mvc 4和bootstrap 3 for UI的应用程序,一切都在谷歌Chrome和Mozilla Firefox上正常运行但引导程序3不支持IE 7和IE 8.

如何处理bootstrap 3以使其支持IE 7和IE 8？