twitter-bootstrap 相关问题

这是我的产品仪表板.html 这是我的产品仪表板.html <nav #nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-categories-tab" data-bs-toggle="tab" data-bs-target="#nav-categories" type="button" role="tab" aria-controls="nav-categories" aria-selected="true" (click)="showCategories()" [ngClass]="{ 'active':activeTab==='categories'}">Categories</button> <button class="nav-link" id="nav-product-lists-tab" data-bs-toggle="tab" data-bs-target="#nav-product-lists" type="button" role="tab" aria-controls="nav-product-lists" aria-selected="false"(click)="showProducts()" [ngClass]="{ 'active':activeTab==='products'}">Products</button> <button class="nav-link" id="nav-product-details-tab" data-bs-toggle="tab" data-bs-target="#nav-product-details" type="button" role="tab" aria-controls="nav-product-details" aria-selected="false" (click)="showProductDetails()" [ngClass]="{ 'active':activeTab==='product-details'}">Product Details</button> </div> </nav> 这是我的产品仪表板组件 export class ProductsDashboardComponent { activeTab = 'categories'; constructor(private router:Router, private route: ActivatedRoute){} showCategories(){ this.router.navigate(['categories'],{relativeTo: this.route}) } showProducts(){ this.router.navigate(['products'],{relativeTo: this.route}) } showProductDetails(){ this.activeTab = 'product-details'; this.router.navigate(['product-details'],{relativeTo: this.route}) } } 现在，当我单击“产品详细信息”选项卡时，前一个选项卡（“产品”选项卡）也显示为活动状态，如下所示。那么，如何使其他选项卡类处于非活动状态。产品.html <div class="container"> <div class="list row ms-3"> <div class="col-md-12"> @if(hidden){ <p-table [value]="products" styleClass="p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th>Name</th> <th>Image</th> <th>Category</th> <th>Price</th> <th>Actions</th> </tr> </ng-template> <ng-template pTemplate="body" let-product> <tr> <td>{{product.title}}</td> <td><img [src]="product.image" [alt]="product.title" width="100" class="shadow-4" /></td> <td>{{product.category}}</td> <td>{{product.price | currency:'USD'}}</td> <td><a class="btn btn-outline-primary" (click)="getProductDetailsById(product,'product-details')">View</a></td> <td><a class="btn btn-info" (click)="getProductById(product)">Edit</a></td> <td><button class="btn btn-danger" (click)="deleteProduct(product)"> Delete</button></td> </tr> </ng-template> <ng-template pTemplate="summary"> <div class="flex align-items-center justify-content-between"> In total there are {{products ? products.length : 0 }} products. </div> </ng-template> </p-table> </div> </div> </div> 产品组成 getProductDetailsById(product: Products,name:string){ this.productService.get(product.id) .subscribe( data => { this.currentProduct=data; this.currentIndex = data["id"], this.parent.activeTab = name; this.router.navigate(['products-dashboard/product-details/',this.currentIndex]) }) } 现在，如果我单击查看按钮，那么它应该导航到产品详细信息选项卡产品详情.html <div class="container"> <div class="row ms-3"> <div class="card" style="width: 18rem;"> <img src={{currentProduct.image}} class="card-img-top" alt={{currentProduct.title}}> <div class="card-body"> <h5 class="card-title">{{currentProduct.title}}</h5> <h3 class="card-title">{{currentProduct.price | currency:'USD'}}</h3> <p class="card-text">{{currentProduct.description}}</p> </div> </div> </div> </div> 产品详细信息组件 import { Component, Inject, Input, OnInit, ViewChild } from '@angular/core'; import {ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { Products } from '../models/products.model'; import {ProductService } from '../services/products.service'; import { ProductsDashboardComponent } from '../products-dashboard/products-dashboard.component'; import { filter } from 'rxjs'; @Component({ selector: 'app-product-details', standalone: true, imports: [FormsModule, CommonModule,ReactiveFormsModule, RouterLink], providers:[ProductService], templateUrl: './product-details.component.html', styleUrl: './product-details.component.css' }) export class ProductDetailsComponent implements OnInit{ @Input() currentProduct: Products = { title: '', image: '', category:'', price: '' }; nav:any; message = ''; activeTab = 'categories'; constructor( private router:Router, private route: ActivatedRoute, private productService: ProductService, @Inject(ProductsDashboardComponent) private parent: ProductsDashboardComponent) {} ngOnInit(): void { this.message = ''; this.router.events.pipe( filter(event => event instanceof NavigationEnd) ).subscribe(() => { this.parent.activeTab = this.route?.snapshot?.firstChild?.routeConfig?.path || ''; }) this.getProduct(this.route.snapshot.params["id"]); } getProduct(id: string): void { this.productService.get(id) .subscribe({ next: (data) => { this.currentProduct = data; console.log(data); this.currentProduct.id = data["id"] this.currentProduct.title = data["title"] this.currentProduct.category = data["category"] this.currentProduct.image = data["image"] this.currentProduct.price = data["price"] this.currentProduct.description = data["description"] }, error: (e) => console.error(e) }); } } 现在产品显示在同一个选项卡中 app.routes.ts export const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, // redirect to `first-component` { path: 'home', component: HomeComponent}, { path: 'hooks', component: HooksComponent}, { path: 'dashboard', component: DashboardComponent}, { path: 'products-dashboard', component: ProductsDashboardComponent, children:[ {path: 'categories', component: CategoriesComponent}, {path: 'products', component: ProductsComponent}, {path: 'product-details', component: ProductDetailsComponent}, {path: "product-details/:id", component: ProductDetailsComponent }, ] }, { path: '**', component: PagenotfoundComponent }, // Wildcard route for a 404 page ]; 以下是我所做的更改。首先进行导航，我们位于products，需要前往product-details，因此我们后退一步../到达product-dashboard，然后导航至product-details 代码 getProductDetailsById(product: any, name: string) { this.productService.get(product.id).subscribe((data: any) => { this.router.navigate( [ '../product-details', // we need to navigate one step back and then inside product details! data['id'], ], { relativeTo: this.activateRoute, } ); }); } 其次，我们只需要在父级上监听选项卡选择product-dashboard我们可以从product-details中删除代码我添加了路由器参数订阅，因为它是动态的，即使组件没有被破坏，它也会显示正确的值！代码 this.subscription.add( this.route.params.subscribe((params: Params) => { this.getProduct(+params['id']); // we get id as string, so we convert to number }) ); 无论我们在哪里进行订阅，我们都需要将其添加到订阅中并在 ngOnDestroy 上取消订阅，这将防止应用程序中出现内存泄漏！我希望这能解决您的问题！产品html <div class="container"> <div class="list row ms-3"> <div class="col-md-12"> @if(!hidden){ <p-table [value]="products" styleClass="p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th>Name</th> <th>Image</th> <th>Category</th> <th>Price</th> <th>Actions</th> </tr> </ng-template> <ng-template pTemplate="body" let-product> <tr> <td>{{ product.title }}</td> <td> <img [src]="product.image" [alt]="product.title" width="100" class="shadow-4" /> </td> <td>{{ product.category }}</td> <td>{{ product.price | currency: 'USD' }}</td> <td> <a class="btn btn-outline-primary" (click)="getProductDetailsById(product, 'product-details')" >View</a > </td> <td> <a class="btn btn-info" (click)="getProductById(product)">Edit</a> </td> <td> <button class="btn btn-danger" (click)="deleteProduct(product)"> Delete </button> </td> </tr> </ng-template> <ng-template pTemplate="summary"> <div class="flex align-items-center justify-content-between"> In total there are {{ products ? products.length : 0 }} products. </div> </ng-template> </p-table> } </div> </div> </div> 产品TS import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { RouterModule, Router, ActivatedRoute } from '@angular/router'; import { TableModule } from 'primeng/table'; import { of, Subscription } from 'rxjs'; import { ProductService } from '../product.service'; @Component({ selector: 'app-products', templateUrl: './products.component.html', styleUrls: ['./products.component.css'], imports: [RouterModule, TableModule, CommonModule], standalone: true, }) export class ProductsComponent implements OnInit { subscription: Subscription = new Subscription(); hidden = false; get products() { return this.productService.products; } constructor( private router: Router, private productService: ProductService, private activateRoute: ActivatedRoute ) {} ngOnInit() {} getProductDetailsById(product: any, name: string) { this.subscription.add( this.productService.get(product.id).subscribe((data: any) => { this.router.navigate( [ '../product-details', // we need to navigate one step back and then inside product details! data['id'], ], { relativeTo: this.activateRoute, } ); }) ); } getProductById(e: any) {} deleteProduct(e: any) {} ngOnDestroy() { this.subscription.unsubscribe(); } } 产品详情html <div class="container"> <div class="row ms-3"> <div class="card" style="width: 18rem;"> <img src="{{ currentProduct.image }}" class="card-img-top" alt="{{ currentProduct.title }}" /> <div class="card-body"> <h5 class="card-title">{{ currentProduct.title }}</h5> <h3 class="card-title">{{ currentProduct.price | currency: 'USD' }}</h3> <p class="card-text">{{ currentProduct.description }}</p> </div> </div> </div> </div> 产品详情 import { CommonModule } from '@angular/common'; import { Component, Inject, Input, OnInit } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ActivatedRoute, RouterLink, NavigationEnd, Router, Params, } from '@angular/router'; import { filter, Subscription } from 'rxjs'; import { ProductService } from '../product.service'; @Component({ selector: 'app-product-details', templateUrl: './product-details.component.html', styleUrls: ['./product-details.component.css'], imports: [FormsModule, CommonModule, ReactiveFormsModule, RouterLink], standalone: true, }) export class ProductDetailsComponent { subscription: Subscription = new Subscription(); @Input() currentProduct: any = { title: '', image: '', category: '', price: '', }; nav: any; message = ''; constructor( private router: Router, private route: ActivatedRoute, private productService: ProductService ) {} ngOnInit(): void { this.message = ''; this.subscription.add( this.route.params.subscribe((params: Params) => { this.getProduct(+params['id']); // we get id as string, so we convert to number }) ); } getProduct(id: number): void { this.subscription.add( this.productService.get(id).subscribe({ next: (data: any) => { this.currentProduct = data; this.currentProduct.id = data['id']; this.currentProduct.title = data['title']; this.currentProduct.category = data['category']; this.currentProduct.image = data['image']; this.currentProduct.price = data['price']; this.currentProduct.description = data['description']; }, error: (e: any) => console.error(e), }) ); } ngOnDestroy() { this.subscription.unsubscribe(); } } 产品仪表板 html <nav #nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link" id="nav-categories-tab" data-bs-toggle="tab" data-bs-target="#nav-categories" type="button" role="tab" aria-controls="nav-categories" aria-selected="true" (click)="showCategories()" [ngClass]="{ 'active':activeTab==='categories'}">Categories</button> <button class="nav-link" id="nav-product-lists-tab" data-bs-toggle="tab" data-bs-target="#nav-product-lists" type="button" role="tab" aria-controls="nav-product-lists" aria-selected="false" (click)="showProducts()" [ngClass]="{ 'active':activeTab==='products'}">Products</button> <button class="nav-link" id="nav-product-details-tab" data-bs-toggle="tab" data-bs-target="#nav-product-details" type="button" role="tab" aria-controls="nav-product-details" aria-selected="false" (click)="showProductDetails()" [ngClass]="{ 'active':activeTab==='product-details'}">Product Details</button> </div> <router-outlet/> </nav> 产品仪表板 ts import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, provideRouter, Router, RouterModule, NavigationEnd, Routes, } from '@angular/router'; import { filter } from 'rxjs/operators'; import { ProductService } from '../product.service'; @Component({ selector: 'app-products-dashboard', templateUrl: './products-dashboard.component.html', styleUrls: ['./products-dashboard.component.css'], imports: [CommonModule, RouterModule], providers: [ProductService], standalone: true, }) export class ProductsDashboardComponent { activeTab = 'categories'; constructor(private router: Router, private route: ActivatedRoute) { this.router.events .pipe(filter((event) => event instanceof NavigationEnd)) .subscribe(() => { this.activeTab = this.route?.snapshot?.firstChild?.routeConfig?.path?.split('/')[0] || ''; }); } showCategories() { this.router.navigate(['categories'], { relativeTo: this.route }); } showProducts() { this.router.navigate(['products'], { relativeTo: this.route }); } showProductDetails() { this.router.navigate(['product-details'], { relativeTo: this.route }); } } 堆栈闪电战

angular twitter-bootstrap bootstrap-5 primeng bootstrap-tabs

回答 1 投票 0

bootstrap 3 手风琴折叠在 iPhone 上不起作用

这些“手风琴子菜单”适用于 Chrome 和 Firefox，但不适用于 iPhone。我建立了一个网站，其中在较小的屏幕上包含“offcanvas”导航菜单。用户点击“热狗但是...

javascript jquery ios css twitter-bootstrap

回答 9 投票 0

如何使用 Bootstrap 5 设置对角线背景样式？

使用 Bootstrap 5 和 (s)css 时如何创建对角样式背景（如下面的屏幕截图所示）？理想情况下，可以与记录的其他 Bootstrap 后台实用程序很好地配合使用...

html css twitter-bootstrap sass bootstrap-5

回答 1 投票 0

Bootstrap 模式对话框中的 Google 地图自动完成结果

我在 Twitter Bootstrap 模式对话框中有一个 Google 地图自动完成输入字段，但不显示自动完成结果。但是，如果我按向下箭头键，它会选择下一个

javascript html css google-maps-api-3 twitter-bootstrap

回答 11 投票 0

我的标题标签内的 html 菜单未正确悬停在角度上，请指导我

下面是我在 Angular 应用程序中使用的 CSS，菜单没有悬停在角度组件中的所有控件上 CSS 导航{ 背景颜色：#4D678D； } 导航 ul { ...

html css twitter-bootstrap bootstrap-4 angular-ui-bootstrap

回答 1 投票 0

用于自定义形状的 CSS 并在该形状下方添加图像

感谢您提前的帮助。我正在尝试对下图的设计进行编码。为此，我使用了之前和之后来创建形状。但是当我尝试将点图案图像放置在 d 中时......

html css twitter-bootstrap

回答 1 投票 0

将 bootstrap 导入 nextjs - 文档未定义

我正在尝试将 Bootstrap 5.3.2（不是 React-Bootstrap）导入到使用新 App Router 的 NextJS 14.1.0 项目中。我想以编程方式使用各个 BS 组件（而不是通过数据-

javascript reactjs twitter-bootstrap next.js bootstrap-5

回答 1 投票 0

Boostrap 卡 - 问题之间的空间！！我需要每个“eventoCard”之间都有一个空格

我一直在使用 Bootstrap 5，并且以前做过类似的东西；在每个“eventoCard”上，我需要在它们之间留出间距或空间；发生的事情是我显示了 4 个不同的...

css laravel twitter-bootstrap bootstrap-5

回答 1 投票 0

我正在尝试使用 bootstrap、js、jquery、自定义 css 和 php 与 mariadb 构建一个网站，但我无法让 js 正常工作

到目前为止，我的网站非常基本，一个用引导程序制作的前端和一个工作登录名，并在我的数据库上注册用户，到目前为止一切都很顺利，直到我开始尝试添加

javascript php html jquery twitter-bootstrap

回答 1 投票 0

无法在移动视图中显示内容

我已将灯箱添加到网页，但内容未显示在移动视图中。我是一名开发人员，也是设计新手。 http://www.kahui.org/user/boardmember

html twitter-bootstrap css responsive-design

回答 1 投票 0

“源映射错误：类型错误：尝试获取资源时出现网络错误。”在本地页面

我有一个 HTML 表单，我想使用 Bootstrap 样式对其进行格式化。只有样式，没有 Javascript（还）。我在本地运行它，而不是在任何服务器上，因为它还不需要服务器。

html css twitter-bootstrap

回答 1 投票 0

引导菜单下拉菜单在嵌入 header.html 文件的页面上不起作用

我创建了一个项目，在所有页面（包括index.html等）上嵌入了jQuery通用header.html文件我在其中添加了 Bootstrap。现在，header.html 中的下拉菜单工作正常；但没有...

jquery html twitter-bootstrap drop-down-menu

回答 2 投票 0

Bootstrap 响应式 iframe 无法调整大小

我正在使用bootstrap框架开发一个响应式网页，我想放置一个响应式iframe。 bootstrap 文档说我可以使用响应式 16x9 宽高比 iframe 我正在使用bootstrap框架开发一个响应式网页，我想放置一个响应式iframe。引导文档说我可以使用响应式 16x9 宽高比 iframe <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="…"></iframe> </div> CSS（包含在 bootstrap.css 中）是 .embed-responsive { display: block; height: 0; overflow: hidden; position: relative; } .embed-responsive.embed-responsive-16by9 { padding-bottom: 56.25% } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object { border: 0 none; bottom: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } 结果是 iframe 的容器（具有“embed-responsive...”类的 div）是响应式的。这根据分辨率获取正确的宽度和高度。但是 iframe 溢出了，因为它没有调整大小。如何调整 iframe 的大小以完全填充 div？我也遇到这个问题了。我找到了一个有点黑客的解决方案。在 iframe 部分：width:100% 所以它应该看起来像： <iframe class="embed-responsive-item" src="…" width="100%"></iframe> 我必须为我的身高设置一个固定值，因为 iframe 源没有响应。希望有帮助。您可以使用 boostrap 来完成此任务，但这是一项非常简单的任务，您实际上不需要任何框架来帮助您完成此任务。查看响应式 Iframes；它不使用任何框架，并且是用本机 JavaScript 编写的。我希望客户可以在网站的任何位置添加嵌入式视频，而无需添加特殊的标记或容器。这个 jQuery 函数使页面上的所有 iframe 都能响应并处理视频，而无需更改任何 CSS。默认宽高比为 16:9，但如果您想使用 4:3 视频或添加您自己的宽高比，则可以更改宽高比（了解使用手机创建的垂直视频内容）。 https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8 引导5.3 Ratios 可以帮助您构建响应式 iframe 内容。使用比例助手来管理外部内容的宽高比，例如、<embed>、<video> 和 <object>。</p> <p>这将使您的内容具有响应能力，同时保持您设置的宽高比。</p> <p><em>来自 Bootstrap 的示例：</em></p> <pre><code><div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe> </div> </code></pre> <p>有关更多信息，请参阅 Bootstrap 文档：<a href="https://getbootstrap.com/docs/5.3/helpers/ratio/#about" rel="nofollow noreferrer">Bootstrap 5.3 Ratio 文档。</a></p> </answer> </body></html>

html css twitter-bootstrap iframe

回答 4 投票 0

引导选择选项验证不起作用

这是我的 HTML 和 JavaScript 代码这是我的 HTML 和 JavaScript 代码 <script src = "../js/jquery.min.js"></script> <script src="../js / formvalidation / bootstrapValidator.min.js"></script> <script type="text / javascript"> $(document).ready(function() { $('#staff_add').bootstrapValidator({ message: 'This value is not valid', fields: { vender: { validators: { notEmpty: { message: 'The Field is required' } } }, invoicenumber: { validators: { notEmpty: { message: 'The Field is required' } } }, } }); }); </script> <form id="staff_add" class="form-horizontal" action="#" method="post" autocomplete="off"> <select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required"> <option>--Select--</option> <option>001</option> <option>002</option> <option>003</option> </select> <input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required="" /> <button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button> </form> 选择框验证不起作用，文本框验证正常工作。我删除了选择框类 selectpicker 验证工作，但放置 selectpicker 类则不起作用您需要添加一个submitHandler $(document).ready(function() { $('#staff_add').bootstrapValidator({ message: 'This value is not valid', fields: { vender: { validators: { notEmpty: { message: 'The Field is required' } } }, invoicenumber: { validators: { notEmpty: { message: 'The Field is required' } } }, } submitHandler: function (validator, form, submitButton) { return false; } }); }); 您还需要为选项元素分配值属性将第一个选项值设置为空，否则它的值为--Select--，因此条件失败。 <option value="">--Select--</option> 已修改 <!DOCTYPE html> <html> <head> <title>BootstrapValidator demo</title> <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script> </head> <body> <div class="container"> <div class="row">  <section> <div class="col-lg-8 col-lg-offset-2"> <div class="page-header"> <h2>Sign up</h2> </div> <form id="staff_add" method="post" class="form-horizontal" action="target.php"> <select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required"> <option>--Select--</option> <option>001</option> <option>002</option> <option>003</option> </select> <br><br> <input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required=""/> <br><br> <button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button> </form> </div> </section>  </div> </div> <script> $(document).ready(function() { $('#staff_add').bootstrapValidator({ message: 'This value is not valid', fields: { vender: { validators: { notEmpty: { message: 'The Field is required' } } }, invoicenumber: { validators: { notEmpty: { message: 'The Fieldsd is required' } } }, } }); }); </script> </body> </html> 要将选项设置为“作为验证答案无效”，您应该禁用它： <select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required"> <option disabled="disabled">--Select--</option> <option>001</option> <option>002</option> <option>003</option> #### Apply value="" it works.### <label>Role</label> <select class="form-control" id="roleId" required> <option value="">-Select-</option> <option value="1">Doctor</option> </select>

javascript jquery twitter-bootstrap

回答 4 投票 0

twitter-bootstrap 相关问题

最新问题