小编rin*_*aff的帖子

点击后如何在Bootstrap 3中自动制作按钮？

要复制我的问题,使用一些按钮创建一个页面,为它们提供适当的引导类(并包括引导程序):

<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">

加载页面并单击其中一个按钮.它会变得凹陷并突出显示,直到您单击页面上的其他位置(使用FF29和chrome35beta).

单击并取消选中时检查输入元素不会显示附加的任何其他类以及从中删除的其他类.

这是一个让抑郁的Bootstrap按钮的例子:http://jsfiddle.net/52VtD/5166/

我很确定这是我需要修改的代码,但由于某种原因,我无法让IE中的渐变消失.我希望他们完全消失!

.carousel-control {
text-shadow: none;
opacity: 1;
filter: alpha(opacity=100)
}
.carousel-control.left {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0001)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.5) 0), color-stop(rgba(0,0,0,0.0001) 100%));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)
}
.carousel-control.right {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.0001)), to(rgba(0,0,0,0.5)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.0001) 0), color-stop(rgba(0,0,0,0.5) 100%));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)
} …

在bootstrap中我希望在彼此之下有两个导航栏.我的想法:Navbar 1有一个品牌:主菜单.Navbar 2(navbar1下方)有一个名为:子菜单的品牌.

当用户在他的移动电话上查看该站点时,他/她看到两个可折叠的导航栏.用户现在可以选择要打开的导航栏.菜单或子菜单.

我刚刚在bootstrap网站上复制了标准代码:http://getbootstrap.com/components/#navbar

奇怪的是.当我让我的浏览器变小.出现两个折叠的导航栏."主菜单"和"子菜单".当我点击主菜单后面的按钮时,会出现主菜单.就像它应该的那样.但是当我按下子菜单(uncollapse)按钮时.MAIN-MENU再次打开.不是子菜单.

我刚刚使用了bootstrap网站上的标准导航栏代码粘贴在每个人下面的链接并更改了品牌名称.这是bootply:http://bootply.com/101690 在手机上测试它,看看导航栏中发生了什么.

我想垂直对齐一个锚元素内的图像,如下所示:

<ul class="thumbnails">
    <li class="span2"> 
        <a href="#" class="thumbnail">
           <img src="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">
        </a>
    </li>
</ul>

我看了很多帖子,但没有一个对我有用.我也使用Bootstrap缩略图类,我不知道这是否相关,这是它不起作用的原因.

我已经读过我可以设置行高,但有些不对劲.

请看一个简单的plunker.

http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8

更新: 我更新了plunker.文本垂直对齐工作正常,但它仍然不适用于图像.

我想在Dart编辑器中设置一个带有黑色背景的视觉主题,但总会有某些文字显示为蓝色,这使得它难以阅读.例如,HTML文档中的引用文本显示为蓝色.所以,在下面的文字中:

meta charset ="utf-8"

"utf-8"为蓝色(包括引号).我试图通过创建自己的主题,并通过编辑dart\plugins\com.google.dart.tools.deploy_0.2.9.r16323\themes中的XML文件来解决这个问题,但无济于事.

有什么建议？

Bootstrap 2似乎可以正常使用以下代码处理幻灯片事件(请参阅此问题):

$('#myCarousel').bind('slide', function (e) {
    console.log('slide event!');
});

但是,我不能在Bootstrap 3中使用相同的东西(参见这个小提琴).谁知道为什么？

我使用Boot Strap 3作为我的新响应式布局.对于我的主页,我有背景图片.请根据屏幕分辨率建议如何使用不同的背景图像.我不能使用响应类.请使用以下网址查看布局.

http://idea66.com/mobile/screenshot.png

如果我为不同的屏幕类型创建这个结构,我们如何使用Boot Strap 3.0调用它们

谢谢你莫妮卡

我意识到这里已经回答了类似的问题,但很多答案都是使用宝石或直接修改Bootstrap的文件.虽然这些是有效的配置,但我想增加我在这个领域的知识集(链轮,Rails管道,一般的前端开发),并希望了解为什么这不起作用,底层问题是什么.

Ruby 2.0.0-p353,Rails 4.0.2,Bootstrap 3.0.3,Nginx 1.4.4,Passenger 4.0.33

我从他们的站点下载了最新的Bootstrap zip,执行了此处的所有操作,将这些文件直接包含到我的应用程序中,并且能够让我的开发环境中的glyphicons完全按预期显示.但是,当我部署到生产环境时,glyphicons在Chrome中显示为正方形.我将glyphicons文件的各个文件扩展名添加到生产预编译中,并验证它们是否显示在我的public/assets文件夹中.js/css文件和glyphicon文件之间的唯一区别是glyphicon文件旁边没有gzip压缩文件.

production.rb:

config.assets.precompile = ['*.js', '*.css', '*.eot', '*.svg', '*.ttf', '*.woff']

我知道Rails在开发和生产之间加载资产的方式不同,但为什么不在生产中看到或理解glyphicon资产呢？有没有办法用我当前的配置解决这个问题,或者我是否需要更改我包含这些资产的方式以允许我修复此错误？

此外,在开发和生产中,每次渲染使用glyphicon的页面时,我都会收到以下错误,但图标仍会显示.这有关系吗？

• ActionController :: RoutingError(没有路由匹配[GET]"/fonts/glyphicons-halflings-regular.woff")
• ActionController :: RoutingError(没有路由匹配[GET]"/fonts/glyphicons-halflings-regular.ttf")
• ActionController :: RoutingError(没有路由匹配[GET]"/fonts/glyphicons-halflings-regular.svg")

我在我的app rails =]中使用bootstrap

但我有一个无聊的问题.我希望导航栏中的按钮保持在中心位置.

但我不能这样做.我正在测试一些选项,如果我输入一个输入文本,按钮保持正确,但如果我删除此输入文本,按钮会保持错误,它们会保持在导航栏的顶部.

Ps:我正在学英语,对不起错误

![] []

![] []

我的代码:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <a class="brand">
    <%= link_to(image_tag("logo-scaled.png", :size => "27x37"), root_path)  %>
  </a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">

  </ul>
  <form class="navbar-form navbar-left">
    <div class="form-group">
      <input type="text" class="form-control">
    </div>
  <a href="/hr_curriculum_interns/new"><btn class="btn btn-primary btn-sm"><b><%= t('labels.new_intern')%></b></btn></a>
  <a href="/hr_curriculum_systems_analysts/new"><btn class="btn btn-primary …

我在我的一个网站上实现了bootstrap-wysihtml5编辑器.它在台式机,iPad和iPhone上无处不在,但在Android设备上根本不显示.我使用Chrome浏览器进行了检查

任何人都可以让我知道那里错了什么.

更新:从其默认网站http://www.w3masters.nl/bootstrap-wysihtml5/检查'bootstrap-wysihtml5'时,发现它也无法在Android设备上运行(在Chrome和其他Android浏览器上检查).