Questions tagged «twitter-bootstrap-3»

Bootstrap 3是前端框架的第三代，可通过具有吸引力的外观和感觉来加快Web开发速度。与[twitter-bootstrap]标签一起使用

14
Bootstrap引发未捕获的错误：Bootstrap的JavaScript需要jQuery
关闭。这个问题需要调试细节。它当前不接受答案。 想改善这个问题吗？更新问题，使它成为Stack Overflow 的主题。 2年前关闭。 改善这个问题 我正在尝试使用Bootstrap为程序创建接口。我在<head>标签中添加了jQuery 1.11.0，并认为是这样，但是当我在浏览器中启动网页时，jQuery报告一个错误： Uncaught Error: Bootstrap's JavaScript requires jQuery 我尝试使用jQuery 1.9.0，尝试使用多个CDN上托管的副本，但是无法正常工作。有人可以指出我做错了吗？
11
Bootstrap右栏位于移动视图顶部
我有一个这样的引导页面： <div class="row"> <div class="col-md-6"> A </div> <div class="col-md-6"> B </div> </div> 好像： ----- |A|B| ----- 因此，如果我在移动设备上查看它，则列A位于顶部，但我希望列B位于顶部。这可能吗？我尝试了推拉，但没有成功。
10
Bootstrap 3断点和媒体查询
在Bootstrap 3媒体查询文档中，该文档显示： 我们在Less文件中使用以下媒体查询在网格系统中创建关键断点。 超小型设备（电话，小于768px）：无媒体查询，因为这是Bootstrap中的默认设置 小型设备（平板电脑，768像素及以上）： @media (min-width: @screen-sm-min) { ... } 中型设备（台式机，992px及以上）： @media (min-width: @screen-md-min) { ... } 大型设备（大型台式机，1200px及以上）： @media (min-width: @screen-lg-min) { ... } 难道我们应该能够使用@screen-sm，@screen-md以及@screen-lg在我们的媒体查询的名字呢？因为它对我不起作用。我必须先使用像素测量，@media (min-width: 768px) {...}然后才能使用。难道我做错了什么？ 另外，对于超小型设备的480px的引用是否是错字？那不应该说到767px吗？（因为已从文档中删除）
5
在Bootstrap 3的必填字段中添加星号
我的HTML有一个称为的类.required，该类分配给必填字段。 这是HTML： <form action="/accounts/register/" method="post" role="form" class="form-horizontal"> <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /> <div class="form-group required"> <label class="col-md-2 control-label">Username</label> <div class="col-md-4"> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" /> </div> </div> <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div> <div class="form-group required"><label class="col-md-2 …
5
在Twitter Bootstrap 3中使用col-lg-push和col-lg-pull进行列顺序操作
我现在正在阅读Twitter Bootstrap 3上的文档，并试图按照此页面上所示的顺序进行排序， 但遇到了麻烦。我不明白为什么这样的代码有效，也不知道如何正确指定设置。我要显示的是一个网格，它由长度5，另一个长度5和最后一个长度2网格组成。 所以我的是这样的： [5] [5] [2] 我要实现的是，在桌面上查看时会显示上面的布局，但是在移动设备上查看时，我想先显示第二个长度为5的对象，然后是第一个长度为5的对象，最后是长度为2的对象， 垂直。像这样： [5] (second) [5] (first) [2] 尽管我尝试遵循上述文档中介绍的步骤，但尽管在移动平台上，我还是获得了第一个5长度对象，而不是第二个，正如我所说的，它应该在顶部显示第二个5长度对象。换句话说，我得到了： [5] (first) [5] (second) [2] 那么如何正确地将第二个放在第一个之上呢？或者由于我使用相同长度的对象，列排序是否可以工作？ 这是我的代码供您参考： <div class='row'> <div class='col-lg-5 col-lg-push-5'></div> <div class='col-lg-5 col-lg-pull-5'></div> <div class='col-lg-2'></div> </div> 此外，文档没有阐明含义pull或push含义。那我想念什么吗？ 谢谢。
4
Bootstrap 3中的堆叠标签
我正在尝试使用Bootstrap 3中的Tab jQuery插件来实现左对齐的堆叠选项卡，其中选项卡垂直于选项卡内容的左侧而不是顶部呈现。当我尝试以下内容时； <ul class="nav nav-tabs nav-stacked"> <li><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade" id="tab1"> Tab 1 content </div> <div class="tab-pane fade" id="tab2"> Tab 2 content </div> <div class="tab-pane fade" id="tab3"> Tab 3 content </div> </div> 选项卡相互堆叠，但不能正确地显示为向左旋转，而只是将水平选项卡卡在彼此之上。标签内容已正确显示/隐藏在内容div中。 这在Bootstrap 2.x中使用tab-left和tab-right类进行了处理，但是在Bootstrap …
17
模态中的Bootstrap 3和Youtube
我正在尝试使用Bootstrap 3中的Modal功能来显示我的Youtube视频。它可以工作，但是我无法单击Youtube视频中的任何按钮。 有什么帮助吗？ 这是我的代码： <div id="link">My video</div> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <script> $('#link').click(function () { …
15
带有jQuery验证插件的Bootstrap
我正在尝试使用jQuery Validation Plugin将验证添加到我的表单中，但是在使用输入组时，该插件会在输入错误消息时出现问题。 $('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); 我的代码： http ：//jsfiddle.net/hTPY7/4/
17
Bootstrap 3上的输入宽度
再次更新：我通过选择最佳答案来结束这个问题，以防止人们在未真正理解问题的情况下添加答案。实际上，如果不使用网格或添加额外的CSS，就无法通过内置功能来实现。如果您要处理的help-block元素需要超出简短的输入，但它们是“内置”的，则网格将无法很好地工作。如果这是一个问题，我建议使用额外的CSS类，你可以在BS3讨论找到这里。现在BS4已经发布，可以使用包含的大小调整样式来进行管理，因此不再需要太长的时间了。感谢大家对这个流行的SO问题的良好投入。 更新：这个问题仍然悬而未决，因为它是关于BS中的内置功能来管理输入宽度而无需求助于网格（有时必须独立管理）。我已经使用自定义类来管理它，所以这不是基本CSS的方法。该任务在BS 功能讨论列表中，并且尚未解决。 原始问题： 有人想出一种在BS 3上管理输入宽度的方法吗？我目前正在使用一些自定义类来添加该功能，但是我可能错过了一些未记录的选项。 当前的文档说使用.col-lg-x，但是显然不起作用，因为它只能应用于容器div，这会导致各种布局/浮动问题。 这是一个小提琴。奇怪的是，在小提琴上，我什至无法调整表单组的大小。 http://jsfiddle.net/tX3ae/ <form role="form" class="row"> <div class="form-group col-lg-1"> <label for="code">Name</label> <input type="text" class="form-control"> </div> <div class="form-group col-lg-1 "> <label for="code">Email</label> <input type="text" class="form-control input-normal"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>
5
我可以在Twitter Bootstrap的工具提示中使用复杂的HTML吗？
如果查看官方文档，我会看到一个名为HTML的属性： Name | Type | default | Description ---------------------------------------------------------------------------- html | boolean | false | Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. 它说：“将html插入工具提示中”，但是类型是布尔值。如何在工具提示中使用复杂的html？
4
自适应网站在移动设备上缩小到全屏
我正在测试Bootstrap响应性导航栏，并且有一个演示网站。当我在桌面上调整浏览器的大小时，所有功能都可以正常使用，包括导航栏（可变为可折叠菜单），顶部带有一个小图标，单击该图标可以查看更多菜单按钮。 但是，当我通过移动浏览器进行尝试（我在chrome和Internet浏览器上进行了尝试）时，却没有看到响应式设计。我只能看到非常小的桌面版网站。 谁能指出我做错了什么？
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.