twitter-bootstrap-3 相关问题

Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用

如何以编程方式打开 Bootstrap 下拉菜单

当我单击另一个下拉列表中的项目时，我试图打开 Bootstrap 下拉列表。这个想法是从第一个下拉列表中选择一个城市 - 然后脚本将自动打开第二个下拉列表，其中包含...

javascript twitter-bootstrap twitter-bootstrap-3

回答 21 投票 0

引导程序根据设备更改图像

我想在不同的设备中显示不同的图像（不是背景图像）。是否可以使用 bootstrap 3.x 进行如下操作？对于大屏幕对于

twitter-bootstrap-3

回答 5 投票 0

容器 div 隐藏的引导日期选择器

我有一个生日输入文本，我使用 Bootstrap datepicker v4。表格位于容器内。如图所示，日期选择器日历被“”边框隐藏我有一个生日输入文本，我使用 Bootstrap datepicker v4。表格位于<div class="media">容器内。如图所示，日期选择器日历被“媒体”div 的边框隐藏，我无法用 z-index 解决这个问题，它不起作用。当我对媒体和选项卡内容这两个类使用 overflow: visible 时，字段失去了宽度并且显示布局发生了变化（参见第二张图）。 <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> <div class="tab-wrap"> <div class="media"> <div class="parrent pull-left"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><?= lang('BASIC_INFO'); ?></a></li> <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02"><?= lang('PUBLIC_PROFILE'); ?></a></li> <li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><?= lang('INTERESTS'); ?></a></li> <li class=""><a href="#tab4" data-toggle="tab" class="tehnical"><?= lang('FOTOS'); ?></a></li> </ul> </div> <div class="parrent media-body"> <div class="tab-content"> <div class="tab-pane fade active in" id="tab1"> <div class="media"> <div class="media-body"> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' id='bdate' name='bdate' class="form-control" value="<?= $userProfile ? $userProfile['bdate'] : '' ?>"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> 起诉后的结果overflow: visible; 在父容器（例如 overflow: hidden;）上查找 .media，并查看是否可以覆盖它或将其删除（如果已设置）（overflow: visible; 将是覆盖）。我只是猜测，因为我不知道你的完整 CSS 是什么样子，但另一种可能性可能是你尝试应用的 z-index 被覆盖，因为你使用的规则不如 Bootstrap CSS 中的规则具体。检查浏览器开发人员工具中应用的样式，以验证您提供的 z-index 是否优先。你可以试试这个 $('selector').datetimepicker().on('dp.show',function(){ $('.media').css({'overflow':'visible'}); }).on('dp.hide',function(){ $('.media').css({'overflow':'hidden'}); }) 按照@trungbadao的回答，即使日期时间选择器有更新，我们也需要将溢出设置为隐藏，因此他的答案可以这样更新： $('selector').datetimepicker().on('dp.show',function(){ $('.media').css({'overflow':'visible'}); }).on('dp.hide',function(){ $('.media').css({'overflow':'hidden'}); }).on('dp.change',function(){ $('.media').css({'overflow':'hidden'}); }) 经过 4 小时的搜索和尝试，这对我有用，我有一个祖先，它的位置相对溢出 x 隐藏，所以我将其直接父 .date 位置设为静态，并固定了实际的日期时间选择器位置。 .date{ position: static; } .bootstrap-datetimepicker-widget{ position:fixed } $(".date").datetimepicker({ locale: "{{ LANGUAGE_CODE }}-ca", keepOpen: false, format: "YYYY-MM-DD HH:mm", });

css twitter-bootstrap-3 bootstrap-datepicker eonasdan-datetimepicker

回答 4 投票 0

引导按钮尺寸不起作用？

以下是三种不同的按钮尺寸：批准以下是三种不同的按钮尺寸： <div class="btn-group btn-small"> <button class="btn btn-small btn-success" href="#" type="button">Approve</button> <button class="btn btn-small btn-danger" href="#" type="button">Deny</button> </div> <div class="btn-group"> <a class="btn btn-mini btn-success" href="#">Approve</a> <a class="btn btn-mini btn-danger" href="#">Deny</a> </div> <div class="btn-group"> <a class="btn btn-success" href="#">Approve</a> <a class="btn btn-danger" href="#">Deny</a> </div> 所有这三个结果都是这样的：为什么 btn、btn-success、btn-danger 和 btn-group 都可以工作，但 btn-mini/small/etc 却不能？ Bootstrap 将其按钮的名称从 2.x ➡ 更改为 3.x 版本对比 | 2.x | 3.x | 4.x | |------------|---------|---------| | .btn-large | .btn-lg | .btn-lg | | .btn-small | .btn-sm | .btn-sm | | .btn-mini | .btn-xs | - | Bootstrap 3 演示因此您更新后的代码应如下所示： <div class="btn-group"> <a class="btn btn-xs btn-success" href="#">Approve</a> <a class="btn btn-xs btn-danger" href="#">Deny</a> </div> <br> <div class="btn-group"> <a class="btn btn-sm btn-success" href="#">Approve</a> <a class="btn btn-sm btn-danger" href="#">Deny</a> </div> <br> <div class="btn-group"> <a class="btn btn-success" href="#">Approve</a> <a class="btn btn-danger" href="#">Deny</a> </div> jsFiddle中的演示将产生以下结果：各种版本的文档引导按钮 2.x 引导按钮3.x 引导按钮 4.x 迁移指南2➡3 迁移指南 3 ➡ 4 （如果有人来到这里想知道为什么 btn-xs 或 btn-group-xs 在 >= 4.0 中不起作用）将日志从 bootstrap 3.0 更改为 4.0：完全删除了 .btn-xs 类，因为 .btn-sm 比例很大比 v3 小。 ... 由于删除了 .btn-xs，所以完全删除了 .btn-group-xs 类。来源如果您使用3.0版本，则必须更改课程 http://jsfiddle.net/WrQNh/1/ <div class="btn-group btn-small"> <button class="btn btn-xs btn-success" href="#" type="button">Approve</button> <button class="btn btn-xs btn-danger" href="#" type="button">Deny</button> </div> <br> <div class="btn-group"> <a class="btn btn-sm btn-success" href="#">Approve</a> <a class="btn btn-sm btn-danger" href="#">Deny</a> </div> <br> <div class="btn-group"> <a class="btn btn-success" href="#">Approve</a> <a class="btn btn-danger" href="#">Deny</a> </div> 还要确保如果 bootstrap.css 被我们自己定制的 *.css 文件覆盖，那么您将 .btn-sm... 逻辑添加到您的定制 *.css 文件中。事实证明，这就是我的案例的问题。

twitter-bootstrap twitter-bootstrap-3

回答 4 投票 0

如何在动态元素上绑定引导工具提示

使用Bootstrap工具提示时，我们需要编写这样的代码才能具有工具提示功能： $(".showtooltip").tooltip(); 但问题是，每次新的 c 时，我们都需要重新运行该代码...

jquery twitter-bootstrap-3 tooltip

回答 7 投票 0

从文件夹中提取所有图像并创建 Bootstrap 轮播/幻灯片

我被这段代码困住了，我试图将所有图像拉入文件夹并将它们放入列表或div中，以创建Bootstrap Carousel。我被这段代码困住了，我试图将所有图像拉入文件夹并将它们放入列表或 div 中，以创建 Bootstrap Carousel。 <div id="spa_gallery" class="carousel slide" data-ride="carousel">   <div class="carousel-inner"> <?php $dirname = "spa_gallery/"; $images = glob($dirname."*.jpg"); foreach($images as $image) { $imagelist.= '<li class="item"><a href=""><img src="'.$image.'" /></a> </li>'; } ?>  <a class="carousel-control left" href="#spa_gallery" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#spa_gallery" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> 之前的代码在哪里： <div class="carousel-inner"> <div class="item active"> <img src="spa_gallery/01.jpg" alt="First Slide"> </div> <div class="item"> <img src="spa_gallery/02.jpg" alt="Second Slide"> </div> <div class="item"> <img src="spa_gallery/03.jpg" alt="Third Slide"> </div> <div class="item"> <img src="spa_gallery/04.jpg" alt="Fourth Slide"> </div> <div class="item"> <img src="spa_gallery/05.jpg" alt="Fifth Slide"> </div> </div> 尝试使用 <?php $dirname = "spa_gallery/"; $images = glob($dirname."*.jpg"); foreach($images as $image) { ?> <div class="item"><img src="<?php echo $image; ?>" /></div> <?php } 或 <?php $dirname = "spa_gallery/"; $images = glob($dirname."*.jpg"); foreach($images as $image) { $imagelist.= '<div class="item"><img src="'.$image.'" /></div>'; } echo $imagelist; //<<<<< ?> 对我来说，我使用了类似下一个代码的东西 $dir_imgs = "spa_gallery"; $files_imgs = scandir($dir_imgs); foreach ($files_imgs as $key_imgs => $value_imgs){ $php_imgs = explode(".", $value_imgs); $php_imgs = end($php_imgs); if ($php_imgs == "jpg"){ ?> <div class="item"><img src="<?php echo $dir_imgs.'/'.$value_imgs; ?>" /></div> <?php } } 将 class active 添加到 img $class_active = 0; // before foreach <div class="item <?php echo (($class_active == 0)? 'active' : '') ?>"> 然后 $class_active = 1; 所以你的代码将是 <?php $class_active = true; $dirname = "spa_gallery/"; $images = glob($dirname."*.jpg"); foreach($images as $image) { ?> <div class="item <?php if($class_active == true){ echo 'active' ; $class_active = false} ?>"><img src="<?php echo $dirname.$image; ?>" /></div> <?php }

javascript php jquery twitter-bootstrap-3 bootstrap-carousel

回答 1 投票 0

集成CSS框架仅在指定的类或ID中工作

我有从头开始构建的网站，并且我指定的系统构建在 Bootstrap 或基础上。当我尝试将其集成到我的网站上时，我的所有网站都开始使用 Bootstrap 或基础风格。是不是...

twitter-bootstrap css twitter-bootstrap-3 zurb-foundation

回答 1 投票 0

如何通过 JavaScript 聚焦 bootstrap-select 元素

我在 Spring 中使用 Bootstrap Select Dropdown：我在 Spring 中使用 Bootstrap Select Dropdown： <form:select name="participant-picker" multiple="false" path="participants" cssClass="selectpicker" data-live-search="true" title="Teilnehmer..." data-width="100%"> <form:options items="${participants}" itemValue="enrolmentNumber" itemLabel="description" /> </form:select> 执行后： <select class="selectpicker" title="Teilnehmer..." name="participant-picker" data-width="100%" data-live-search="true"> <option value="1234687">Nachname121, Vorname122 (1234687)</option> <option value="1234688">Nachname122, Vorname123 (1234688)</option> </select> 请记住，Bootstrap 会动态为下拉列表和其他内容添加多个 div。现在我想动态地将焦点设置到这个选择元素上。这不起作用： $('select[name=participant-picker]').focus() 问题已解决：使用 Bootrap selectpicker 时，必须将焦点设置到 select 元素下方由 Bootstrap 本身生成的按钮元素，而不是 select 元素本身。只需分配一个 id 并使用该 id 作为焦点即可 <form:select id="one" name="participant-picker" multiple="false" path="participants" cssClass="selectpicker" data-live-search="true" title="Teilnehmer..." data-width="100%"> <form:options items="${participants}" itemValue="enrolmentNumber" itemLabel="description" /> </form:select> 然后使用 $('#one').focus() 您是否尝试添加引号？类似这样的事情： $('select[name="participant-picker"]').focus() 我已经遇到了一些麻烦。无需引号[name="participant-picker"]。可能您有多个名为 participant-picker 的元素。？在这种情况下，只会创建第一个元素并将焦点放在它上面。为每个元素添加特定的 id 和名称 participant-picker 例如 id="e1" 并尝试 $('#e1').focus() 如果名称末尾不同，也请尝试 [name^=participant-picker]，例如：a1,a2，这次尝试 [name^=a] 将找到 a1 and a2 ... an。也可以尝试一些这样的 $('[name=participant-picker]').each(function(){$(this).css('background-color','red');}); 查看元素选择器 $('[name=participant-picker]'). 已找到我已经尝试了这篇文章中的所有解决方案，但没有一个对我来说适用于引导程序。如果您只想让它专注于页面加载，最简单的方法是使用 autofocus 在这种情况下，它看起来像这样： <form:select name="participant-picker" multiple="false" path="participants" cssClass="selectpicker" data-live-search="true" title="Teilnehmer..." data-width="100%" autofocus> <form:options items="${participants}" itemValue="enrolmentNumber" itemLabel="description" /> </form:select>

javascript jquery spring-mvc twitter-bootstrap-3

回答 5 投票 0

Bootstrap - 如何定位特定的工具提示？

所以在我的页面上我有几个工具提示，但我希望每个工具提示的颜色都不同。我该怎么做呢？我想通过复杂的 CSS 路线是可能的，但我希望

twitter-bootstrap twitter-bootstrap-3

回答 2 投票 0

如何更改Bootstrap的全局默认字体大小？

Bootstrap 的全局默认字体大小为 14px，行高为 1.428。如何更改其默认全局设置？我需要更改所有多个条目中的 bootstrap.min.css 吗？

css twitter-bootstrap twitter-bootstrap-3 font-size

回答 9 投票 0

多次使用的引导模式

Bootstrap Modal - 它看起来非常漂亮和漂亮，我已经看到了很好的解决方案......但我需要帮助。以下任务：我即将使用 Bootstrap 3.0 作为电子商务模板。所以我会有很多“