twitter-bootstrap-3 相关问题

引导开关将类别更改为状态

如果状态更改为 true 或 false，如何动态更改某些引导开关 CSS 类？事实上，如果可能的话，添加一个新类也可能会解决我的问题。有没有简单的...

通过 Bootstrap 自定义更改按钮上的悬停颜色

我正在尝试以悬停使按钮颜色变浅而不是颜色变深的方式设计按钮的样式。我尝试了引导程序自定义页面（http://getbootstrap.com/customize/），它...

Angular 4 风格父级和路由器插座

假设我们有以下代码： ... 假设我们有以下代码： <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9"> <router-outlet></router-outlet> </div> </div> </div> 当 router-outlet 获取的组件是 myComponent 时，我想为 <div class="col-sm-8 col-md-9"> 提供彩色背景。这样做的目的是我希望背景颜色占据列的所有宽度。 有人有窍门吗？ 您可以通过以下方式完成这项工作： [style.background-color]="getBackgroundColor()" 在你的component.ts中： constructor(private router: Router) { } ngOnInit() { this.router.events.subscribe((route: any) => this.route= route); } getBackgroundColor() { if (this.url) { if (this.route.url === '/yourRoute'{ return 'white' } else { return '#6772e5' } } else { return '#6772e5' } } 有几种方法可以做到这一点。如果您希望父组件在某个子组件处于活动状态时更改样式，则需要一些编码才能解决。 方法一：共享服务 您需要创建一个共享服务来控制父组件订阅的状态。 “emitChange”方法将更改状态“fillColorSubject”，该状态作为可观察的“fillColor”返回以进行订阅。 填充颜色服务.ts： import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class FillColorService { private fillColorSubject = new Subject<boolean>(); fillColor = this.fillColorSubject.asObservable(); emitChange(fill : boolean) { this.fillColorSubject.next(fill); } } 子组件将在初始化和销毁时向服务发出更改。 my.component.ts： import { Component, OnInit, OnDestroy } from '@angular/core'; import { FillColorService } from 'fill-color-service'; @Component( { templateUrl: 'my.component.html' } ) export class myComponent implements OnInit, OnDestroy { constructor ( private _fillColorService: FillColorService ) { } ngOnInit() { this._fillColorService.emitChange(true); } ngOnDestroy() { this._fillColorService.emitChange(false); } } 现在父组件需要订阅该服务。当状态改变时，一个开关（fillColumn）将改变列状态。 parent.component.ts: import { Component } from '@angular/core'; import { FillColorService } from 'fill-color-service'; @Component( { templateUrl: 'parent.component.html' } ) export class parentComponent { fillColumn : boolean; constructor ( private _fillColorService: FillColorService ) { _fillColorService.fillColor .subscribe( fill => { this.fillColumn = fill; }); } } 您的模板需要能够通过条件类反映更改。 parent.component.html: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9" [ngClass]="{ 'fill': fillColumn }"> <app-component></app-component> </div> </div> </div> 方法2：从Child发出事件 此方法不起作用，因为它不允许绑定。您需要为此定义自己的选择器。除了通过直接事件绑定之外，此方法与共享服务的思路相同。 首先，父类有一个方法（fillColor），可以触发该方法来改变开关（fillColumn）。 parent.component.ts: import { Component } from '@angular/core'; @Component( { templateUrl: 'parent.component.html' } ) export class parentComponent { fillColumn : boolean; fillColor( fill : boolean = false ) { this.fillColumn = fill; } } 然后，子 myComponent 需要发出一个带有布尔值的事件 (fillParentColor) 来触发父组件的更改。 my.component.ts： import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core'; @Component( { selector: 'app-component', templateUrl: 'my.component.html' } ) export class myComponent implements OnInit, OnDestroy { @Output() fillParentColor = new EventEmitter<boolean>(); ngOnInit() { this.fillParentColor.emit(true); } ngOnDestroy() { this.fillParentColor.emit(false); } } 最后，您的模板需要能够在发出子事件时触发父组件事件。当 myComponent 的“fillParentColor”事件被触发时，parentComponent 的“fillColor”事件将被触发，并带有一个布尔参数。您还需要根据“fillColumn”开关将条件类（填充）添加到您的列中。 parent.component.html: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9" [ngClass]="{ 'fill': fillColumn }"> <app-component (fillParentColor)="fillColor($event)"></app-component> </div> </div> </div> 简答 使用： ：主机{背景：矢车菊蓝色； } 作为托管组件的 CSS，用于更改路由器插座的背景。 长答案：Angular CSS 伪选择器/修饰符 您可以使用 :host 修饰符影响托管组件。如果您想更改路由器出口样式，请将 css 添加到将托管的组件中。

asp.net 上按钮事件中的引导警报

如何编写代码，当我单击asp.net上的按钮时，会出现引导程序或消息框的警报消息？ protected void ButtonLogin_Click（对象发送者，EventArgs e） { //

引导水平滚动

我使用以下 HTML 代码： 1 2 我使用以下 HTML 代码： <div id="list"> <div class="row"> <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div class="col-md-3">3</div> <div class="col-md-3">n-times</div> </div> </div> 所以，我需要在页面底部滚动并水平显示一行无限列。 我该怎么做？ 所以，我尝试为 width 容器设置固定 list 并设置了 overflow-x: auto 连续超过 12 个列单元是可以的。它会导致列换行，但您可以使用 Flexbox 覆盖换行。 Bootstrap 4使用flexbox和实用程序类来获得水平滚动布局.. <div class="container-fluid"> <div class="row flex-row flex-nowrap"> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> </div> </div> Bootstrap 4 演示： http://codeply.com/go/GoFQqQAFhN 另请参阅：Bootstrap 中水平滚动的卡片列表 对于 Bootstrap 3，可以使用一些 Flexbox 的 CSS 来完成。 . row > .col-xs-3 { display:flex; flex: 0 0 25%; max-width: 25% } .flex-nowrap { -webkit-flex-wrap: nowrap!important; -ms-flex-wrap: nowrap!important; flex-wrap: nowrap!important; } .flex-row { display:flex; -webkit-box-orient: horizontal!important; -webkit-box-direction: normal!important; -webkit-flex-direction: row!important; -ms-flex-direction: row!important; flex-direction: row!important; } Bootstrap 3 演示：http://codeply.com/go/P13J3LuBIM 另一种方式： CSS： #list .row {white-space:nowrap;} #list .row > div {display:inline-block;float:none;} 水平滚动的Js： window.addEventListener('mousewheel', function(e){ e.preventDefault(); var step = -100; if (e.wheelDelta < 0) { step *= -1; } var newPos = window.pageXOffset + step; $('body').scrollLeft(newPos); }) Bootply：https://www.bootply.com/pbenard/usmX12rxgP Carol 解决方案的 bootstrap 5 变体是 <div class="row overflow-x-auto flex-nowrap"> <!-- your cols here --> </div>

AJAX刷新后获取Bootstrap表的数据

我需要在刷新从 AJAX 请求获取数据的表后立即从 Bootstrap 表获取数据。 table.bootstrapTable('刷新'); var data = table.bootstrapTable('getData'); ...

在 Bootstrap 导航栏中居中品牌徽标

我正在尝试实现 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码： 我正在尝试实现 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码： <div class="navbar navbar-fixed-top navbar-default"> <div class="navbar-inner"> <div class="container"> <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" style="margin: 0; float: none;" href="#"> <img src="/Content/themes/next/images/logo.png" /></a> <div class="nav-collapse"> <ul class="nav"> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> </ul> </div> <ul class="nav pull-right"> <li> <a href="#"> <div class="nextCog"></div> </a> </li> </ul> <span class="navbar-text pull-right">superpup1 </span> </div> </div> </div> 它制作了一个漂亮的导航栏： 但是，我希望徽标（绿色）始终保留在中间。我将此样式添加到具有“品牌”类别的标签中： <a class="brand" style="margin: 0; float: none; text-align:center" href="#"> <img src="/Content/themes/next/images/logo.png" /> </a> 它部分解决了问题：徽标位于中间，但它将其余的导航栏元素向下推： 这是我想消除的不良影响。你能提出一个解决方案吗？也许从一开始就将徽标居中的方法是错误的？ 试试这个： .navbar { position: relative; } .brand { position: absolute; left: 50%; margin-left: -50px !important; /* 50% of your logo width */ display: block; } 将徽标居中 50% 并减去徽标宽度的一半，这样在放大和缩小时就不会出现问题。 参见小提琴 最简单的方法是css变换： .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } 演示：http://codepen.io/candid/pen/dGPZvR 这种方式也适用于徽标的动态大小背景图像，并允许我们利用文本隐藏类： CSS： .navbar-brand { background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat; transform: translateX(-50%); left: 50%; position: absolute; width: 200px; /* no height needed ... image will resize automagically */ } HTML： <a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text </a> 我们也可以使用 Flexbox。然而，使用这种方法我们必须将 navbar-brand 移到 navbar-header 之外。这种方式很棒，因为我们现在可以并排显示图像和文本： .brand-centered { display: flex; justify-content: center; position: absolute; width: 100%; left: 0; top: 0; } .navbar-brand { display: flex; align-items: center; } 演示：http://codepen.io/candid/pen/yeLZax 要仅在移动设备上实现这些结果，只需将上述 css 包装在媒体查询中： @media (max-width: 768px) { } Bootstrap 5（2022 年更新） 在 Bootstrap 5 中，mx-auto 或 flexbox justify-content-center 仍然可以用于将品牌和其他元素居中。 https://codeply.com/p/UKfeHAJQQC Bootstrap 4（2018 年更新） 在Bootstrap 4中，mx-auto或flexbox可用于将品牌和其他元素居中。有关说明，请参阅如何在 Bootstrap 中居中定位导航栏内容。 Bootstrap 3（原始答案） 看看这个例子是否有帮助：https://codeply.com/p/G71Uruhqwy 品牌以..为中心 .navbar-brand { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; } 您的标记适用于 Bootstrap 2，而不是 3。不再有 navbar-inner。 编辑 - 另一种方法是使用 transform: translateX(-50%); .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } https://codeply.com/p/3kkmEHtVGH 另请参阅： 引导导航栏左对齐、居中或右对齐项目 老问题，但仅供后代使用。 我发现最简单的方法是将图像作为导航栏品牌的背景图像。只需确保输入自定义宽度即可。 .navbar-brand { margin-left: auto; margin-right: auto; width: 150px; background-image: url('logo.png'); } <style> .navbar-brand { margin: auto; } </style> <!--HTML--> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="logo goes here" width="100" height="100" class="logo" alt="" loading="lazy"> </a> </nav> 徽标真正居中且链接合理的解决方案。 导航的最大推荐链接数为 6，具体取决于每个链接中单词的长度。 如果您有 5 个链接，请插入一个空链接并使用以下样式设置： class="hidden-xs" style="visibility: hidden;" 这样链接的数量总是偶数。 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <style> .navbar-nav > li { float: none; vertical-align: bottom; } #site-logo { position: relative; vertical-align: bottom; bottom: -35px; } #site-logo a { margin-top: -53px; } </style> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Nav</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav nav-justified navbar-nav center-block"> <li class="active"><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li> <li><a href="#">Fourth Link</a></li> <li><a href="#">Fifth Link</a></li> <li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 要查看结果，请单击 run snippet，然后单击 full page 小提琴 由于它是一个 Flexbox（可能是由于 justify-content:space-between BT4 css 属性。），如果您添加第三个元素（名称和按钮的同级元素），它会自然地将代码中的第二个元素居中。 我只是在 a 之后添加 <span>login</span> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-sm navbar-light bg-light mt-5"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <span>login</span> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> 就我而言，徽标的高度很重要，因为它设置了标题的高度。 所以一个简单的技巧就是放两个标志。一个隐藏的将设置标题最小高度，这样徽标就不会被裁剪。另一个处于绝对位置，如Brian Willis 的回答。 JSFiddle HTML： <header class="bg-primary"> <nav class="navbar"> <p>Left-content</p> <a class="navbar-brand bg-secondary" href="/"> <img src="" alt="My-logo"> </a> <!-- The hidden logo set the header minimal height so the logo isn’t croped --> <img class="logo-hidden" src="" alt="My-logo"> <p>Some-right-content-that-is-a-bit-too-large</p> </nav> </header> CSS： .navbar-brand { transform: translateX(-50%); position: absolute; left: 50%; } .logo-hidden { visibility: hidden; } img { font-size: 4rem; }

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

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

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

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

容器 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", });

引导按钮尺寸不起作用？

以下是三种不同的按钮尺寸： 批准 以下是三种不同的按钮尺寸： <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 文件中。事实证明，这就是我的案例的问题。

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

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

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

我被这段代码困住了，我试图将所有图像拉入文件夹并将它们放入列表或div中，以创建Bootstrap Carousel。 我被这段代码困住了，我试图将所有图像拉入文件夹并将它们放入列表或 div 中，以创建 Bootstrap Carousel。 <div id="spa_gallery" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <!-- Wrapper for carousel items --> <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>'; } ?> <!-- Carousel controls --> <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 }

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

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

如何通过 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>

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

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

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

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

多次使用的引导模式

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

引导下拉菜单位置不正确

当我将引导下拉列表放置在使用 CSS“text-align: center”将下拉列表居中的 div 中时，下拉菜单出现在下拉列表的原始非居中位置。下拉菜单

如何在 Bootstrap 3 中将导航栏居中？

我无法在 Bootstrap 3 中将导航栏居中，因为我不知道如何在 Bootstrap 中编辑 CSS。我在本地下载了Bootstrap，所以我不知道是否需要编辑