twitter-bootstrap-3 相关问题

假设我们有以下代码： ... 假设我们有以下代码： <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 添加到将托管的组件中。

javascript angular twitter-bootstrap-3

回答 3 投票 0

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

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

asp.net twitter-bootstrap-3 bootstrap-modal

回答 4 投票 0

引导水平滚动

我使用以下 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">  </div>

twitter-bootstrap css twitter-bootstrap-3 scroll

回答 3 投票 0

AJAX刷新后获取Bootstrap表的数据

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

jquery ajax twitter-bootstrap-3

回答 2 投票 0

在 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>  <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>  <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; }

css twitter-bootstrap-3 bootstrap-4

回答 8 投票 0

如何以编程方式打开 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

twitter-bootstrap-3 相关问题

最新问题