小编Bas*_*sen的帖子

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

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

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

编译Twitter的Bootstrap 2.3.2时.少于2我发现以下错误:

NameError: #grid > .core > .span is undefined in /home/bootstrap-2.3.2/less/navbar.less on line 199, column 3:
198 .navbar-fixed-bottom .container {
199   #grid > .core > .span(@gridColumns);
200 }

我怎样才能解决这个问题？

Bootstrap v4删除了.btn-group-justified该类,请参阅https://github.com/twbs/bootstrap/issues/17631

如何证明按钮的合理性:

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

我正在尝试使用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的错误？

我正在尝试编译bootstrap 3.我将repo克隆到我的本地.我在bootstrap目录中运行make.

aaas-imac:bootstrap aaa$ make



Building Bootstrap...
--------------------------------------------------
Running JSHint on JavaScript...             ? Done
Compiling LESS with Recess...               ? Done
Prepping documentation assets...            ? Done
Compiling and minifying JavaScript...       ? Done
--------------------------------------------------
Success!

Thanks for using Bootstrap,
<3 @mdo and @fat

aaas-imac:bootstrap aaa$ 

我没有在任何地方看到编译过的文档？

我正在使用新更新的 Bootstrap 3 RC1进行项目.

新的Bootstrap 3可能有新功能,与之前的版本有很大不同.我想出了大部分的变化,但我无法解决:

当菜单有很多项目时,它会在Ipad和其他平板电脑中断,因为它不会像在移动设备上自动折叠一样崩溃(这很好)

我想知道我如何"强迫"ipads像移动设备一样行动并显示折叠菜单或更好 - 如果菜单有很多项目并且在某些屏幕上,如何折叠菜单

这是我的实时项目的截图:

- 大屏幕菜单 -

- Ipad Landscape菜单 -

- Ipad Portrait菜单 -

- 手机菜单 -

我只是想让ipad像手机一样.请注意,对于内容而非菜单,肖像的确就像移动一样.

有什么建议？谢谢

我正在使用codeigniter框架,我正在使用bootstrap typeahead,一切都很好但我的问题是当我把它放在bootstrap模式中bootstrap typeahead将无法正常工作.有人能帮我吗？请.这是我的代码

<a data-target="ajaxify" data-toggle="modal" href="<?php echo base_url()?>task/add_task" class="no-u quick-task">
    <h4>Task</h4>
    <span>This is a simple description</span>
 </a>

在我的add_task控制器中,我调用了视图task_view.php和task.js,但似乎typeahead在bootstrap模式中不起作用.

这是task.js的内容

$(document).ready(function(){
$("#assign_to").typeahead({
    source: [{value: 'Charlie'}, {value: 'Gudbergur'}]              
});
});

这是task_view.php的内容:只是一个示例.

<div id="ajaxx" class="modal hide fade">
<div class="modal-header">
  <a class="close" data-dismiss="modal">&times;</a>
  <!--Your title here -->
  <h3>Modal Heading</h3>

</div>
<div class="modal-body">
<form><input type="text" name="assign_to" id="assign_to" /></form>
</div>
<div class="modal-footer">
  <!--Your dont change the attributes only the value here -->
  <a href="#" id="n0" class="btn n0" data-dismiss="modal">Close</a>
  <a href="#" id="y1" class="btn btn-primary y1" data-submit="modal">Save</a> …

所以Bootstrap 3刚刚问世.我更喜欢Bootstrap 2,但我目前正在使用Jasny的文件上传扩展.有没有办法挑选该功能并将其与Bootstrap 3一起使用？

在引导程序中,您可以.collapse使用按钮切换元素,就像我在代码中所做的那样.我是Bootstrap的新手并且了解我们正在使用data-toggle选择属性并data-target选择元素.但是有没有什么方法/语法/选项可以选择多个元素和属性data-target="#demo + #demo1 + #demo2"？

    <button type="button" class="btn btn-primary dropdown-toggle btn-sm" 
data-toggle="collapse" data-target="#demo">
    <div id="demo" class="collapse in">Demo</div>
    <div id="demo1" class="collapse in">Demo1</div>
    <div id="demo2" class="collapse in">Demo2</div>

我试图转移到新的boostrap 3网格,我面临一些困难.

1. 如何将网格堆叠在480px以下但不在480px和768px之间？
2. 在768px以上,第一个填充左边的填充和最后一个填充在容器外面,但是在768px以下,填充在容器内部,因此外观不同,因为内容不再与可能在上面的容器对齐.
3. 当网格堆栈填充保留但对我来说它应该为0.

欢迎任何帮助我使用下面的代码与bootstrap 3 RC1

    <div class="container" style="background-color: purple;">
container

</div>

<div class="container">
    <div class="row">
        <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
    </div>
</div>