Questions tagged «twitter-bootstrap»

我刚刚开始使用Twitter Bootstrap，这是一个问题。 我正在创建自定义<header>块，并且希望将其底角弄圆。 是否有任何“正确”的方式通过使用预定义的类来做到这一点，或者我必须手动指定它，例如： border-radius: 10px; // and all that cross-browser trumpery 现在，我正在使用css样式。也许最好使用less该问题？

78 twitter-bootstrap  less  css 

当我第一次在Bootstrap中看到警报时，我以为它们的行为将像模式窗口一样，下拉或淡入，然后在关闭时淡出。但是似乎它们总是可见的。我想我可以让他们坐在我的应用程序上方的一层中并设法显示它们，但我想知道该功能是否内置？ 谢谢！ 编辑，到目前为止我所拥有的： <div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0"> <a class="close" href="#">×</a> <p><strong>Well done!</strong> You successfully read this alert message.</p> </div>

78 jquery  css  alerts  twitter-bootstrap 

<form class="form-asd" role="form"> <h2 class="form-signin-heading">login</h2><hr /> <label class="control-label" for="username">Username</label> <input class="form-control" type="email" required="" placeholder="username"data-error="enter valid username"></input> <label class="control-label" for="username">password</label> <input class="form-control" type="password" required=" " placeholder="Password"></input> <label class="checkbox"></label> <button class="btn btn-lg btn-primary " type="submit">submit</button> </form> 我们该如何更改require字段“请填写此字段”以“请输入用户名”的默认弹出消息

78 html  css  twitter-bootstrap 

content:使用:before伪元素时，是否可以将HTML嵌入到CSS元素中？ 我想在这样的用例中使用Font Awesome（或Glyphicon）： h1:before { content: "X"; padding-right: 10px; padding-left: 10px; color: @orangeLight; } 哪里X是这样的<i class="icon-cut"></i>。 我当然可以在HTML中手动执行此操作，但我确实想:before在这种情况下使用。 同样，有什么方法可以<i>用作列表项目符号吗？这可行，但是对于多行项目符号项目却无法正常工作： <ul class="icons"> <li><i class="icon-ok"></i> Lists</li> <li><i class="icon-ok"></i> Buttons</li> <li><i class="icon-ok"></i> Button groups</li> <li><i class="icon-ok"></i> Navigation</li> <li><i class="icon-ok"></i> Prepended form inputs</li> </ul>

77 css  twitter-bootstrap  font-awesome 

我想知道是否有人可以解释如何在引导程序中获得7个相等的列？我想做一个日历。这段代码似乎可以做到5： div class="row"> <div class="col-md-2 col-md-offset-1"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> </div> 我的主要内容有以下课程，所以我希望将7列放在其中： Col-lg-12 谁能解释这是否可能，或者我是否必须坚持偶数？

77 html  css  twitter-bootstrap  twitter-bootstrap-3 

是否有任何CSS类或属性为pointer:cursor在引导4专为按钮或链接？ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-success">Sample Button</button> 运行代码段隐藏结果展开摘要

77 html  css  twitter-bootstrap  bootstrap-4 

无论是否具有顶级导航，站点的页脚都会很粘。Bootstrap具有可轻松创建固定页脚的功能，但没有用于创建粘性页脚的功能-两者之间存在很大差异。 对这个问题进行谷歌搜索将发现，即使不是成千上万的开发人员也有相同的问题，但是没有好的答案。 具有讽刺意味的是，Bootstrap文档页面本身在引导样式和固定的顶部导航栏旁边都有一个粘性页脚。这都是自定义CSS，而不是框架的一部分。因此，显而易见的方法是采用和重构其自定义样式，因为它显然在Bootstrap框架中发挥良好的作用，但这似乎比原本要痛苦的多。 请参阅此插件，以获取带有Bootstrap顶部导航栏和不良的，不粘脚的页脚的示例页面。 问题： （感谢Softlayer-用于图形） 所需解决方案： 当然，页脚也应该具有响应性，并且跨浏览器友好。

76 css  twitter-bootstrap  twitter-bootstrap-3  sticky-footer 

如您所知，Bootstrap RC 1在这里，我一直在阅读有关这个​​新框架中所有新的令人敬畏的功能的信息。但是，猜猜是什么，Typehead不在文档中。有人知道这是出于任何原因吗？ 我在谷歌搜索时发现了这些示例，并且在这篇文章中我读到它们更改了Typehead Bootstrap。因此，我必须手动添加它还是在Bootstrap 3捆绑包中添加它？ 有人知道吗？

76 jquery  twitter-bootstrap  twitter-bootstrap-3 

JS： $(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button>', content : 'test' }) $('html').click(function() { $('#close').popover('hide'); }); }); HTML： <button type="button" id="example" class="btn btn-primary" ></button> 我写你的代码不显示您的弹出窗口。 有人遇到这个问题吗？

76 jquery  twitter-bootstrap  popover 

我正在使用bootstrap datepicker以及一行highchart。 我希望图表缩放时更新日期选择器日期。一旦该事件触发，我就会更新datepicker的值。这些值可以很好地更新，但是当单击日历时，弹出日历上的日期仍然是旧日期。 这是我的日期选择器： <div class="input-append date pull-right" id="dpStartDate" data-date="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" data-date-format="dd/mm/yyyy"> <input class="span2" id="startDateText" size="16" type="text" value="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" readonly=""> <span class="add-on"><i class="icon-th"></i></span> </div> 我尝试使用此代码更新值： $('#dpStartDate').attr('data-date', startDate); $('#startDateText').attr('value', startDate); 可以很好地更新日期，但不设置日历。 我还尝试触发onChange事件，该事件还会更新日期，但不会更新日历： $('#dpStartDate').trigger('changeDate', startDate); $('#dpStartDate').datepicker() .on('show', function (ev) { ev.stopPropagation(); }) .on('changeDate', function (ev, date) { var startDate = new Date(); if (date …

76 jquery  datepicker  twitter-bootstrap 

Bootstrap 4将flex-box用于其模态页脚。如果我需要两个按钮，一个在左边，一个在右边，如何使其正常工作？ 下面的代码尝试使用div.rowwith，col-sm-6但不起作用。 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button …

76 twitter-bootstrap  bootstrap-4  twitter-bootstrap-4 

我正在使用bootstrap 4文件浏览器。如果我使用自定义文件控件，则会一直看到“选择文件值”。 https://v4-alpha.getbootstrap.com/components/forms/#file-browser 选择文件后，我想更改选择文件的值。此值实际上隐藏在CSS中.custom-file-control:lang(en)::after，我不知道如何在javascript中访问和更改它。我可以这样获得所选文件的值： document.getElementById("exampleInputFile").value.split("\\").pop(); 我不需要改变 .custom-file-control:lang(en)::after { content: "Choose file..."; } 不知何故 链接：http：//codepen.io/Matoo125/pen/LWobNp

76 javascript  jquery  css  twitter-bootstrap  bootstrap-4 

我正在使用Twitter Bootstrap建立我的第一个网站，并尝试使用流畅的布局。我将容器设置为流畅的，现在其中的内容占据了整个页面的宽度，并在调整浏览器大小时进行调整。 我正在处理的设计的最大宽度约为950像素。 我已经检查了variables.less和responsive.less，以及Bootstrap文档；我不能完全弄清楚如何做到这一点。 我也尝试将以下内容添加到我的style.css： body { max-width: 950px; }

76 html  twitter-bootstrap  css 

如您在这里看到的，我有一个启动模态的按钮。设置按钮的href网址，该网址会由Bootstrap 3自动加载到模式中。事实是，此页面已加载到模式根中（如有关模式使用的bootstrap 3文档中所述）。我想将其加载到模态主体中。 有没有一种方法可以通过属性（不是javascript）做到这一点？或最自动的方法是什么？ PS：我记得在Bootstrap 2中，内容已加载到正文中，而不是根目录中。

76 ajax  twitter-bootstrap  twitter-bootstrap-3  modal-dialog 

我正在用HTML5和Bootstrap 4编写网站，并且试图将方形图像变成圆形。在Bootstrap 3中，可以轻松地实现此功能.img-circle，但现在似乎无法正常使用，也无法在线找到任何答案。Bootstrap是否放弃了img-circle类，还是我的代码搞砸了？ 它是这样的： <!-- Within a tab-content div --> <div class="col-xs-7"> <img src="img/gallery2.JPG" class="img-circle" alt="HelPic> </div> 希望有人可以帮助我:)

76 html  css  twitter-bootstrap  bootstrap-4