twitter-bootstrap 相关问题

Bootstrap是一个前端框架,旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题,请使用“twitter-bootstrap-2”,“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。

当 Bootstrap 5 轮播项在轮播内变为活动状态时,如何使用内联 HTMX 标签触发补丁事件?

因此,每当 Bootstrap5 轮播中的项目成为活动项目时,我都会尝试使用指定的 id 触发 HTMX 补丁请求。 我知道可以通过一些额外的脚本来实现,但是

回答 1 投票 0

如何使一列占用尽可能多的空间而不干扰其他列

使用 Bootstrap v5.3,我希望第一列扩展到可能的最大尺寸,而其他列与该列中最宽的单元格一样宽。下面我画了一个例子: 当前

回答 1 投票 0

如何在 laravel 8 中安装 bootstrap

我可以在网上找到的所有信息都说你应该通过运行composer require laravel/ui 然后运行php artisan ui boostrap来安装bootstrap。然而,在 Laravel 8 中,laravel/ui 已被弃用。是...

回答 7 投票 0

如何在 HTML 中的同一行中有 2 种字体大小的文本?

我正在使用引导程序和基本 HTML 代码开发前端 HTML 页面。我需要打印特定产品的价格,比如 63 美元。 我希望它在同一行,但 $ 的大小需要较小......

回答 4 投票 0

将 Bootstrap 按钮设置为相同宽度

我有一个包含几个按钮的引导侧边栏。不幸的是,它看起来很丑,我希望每个按钮的大小相同。 这些按钮包含在侧边栏中并且将堆叠

回答 5 投票 0

dompdf:找不到图像或类型未知

这是我的代码, 我几乎尝试了所有在 PDF 上显示图像的方法,但仍然不起作用。 你能帮我解决这个问题吗? 我还将 DOMPDF_ENABLE_REMOTE 设置为 true,结果仍然相同...

回答 11 投票 0

如何制作一个行为类似于选择表单元素的下拉菜单和下拉切换类

我需要一个下拉菜单来更改按钮/切换的标签,就像 HTML 中的选择标签一样。我怎么做? 添加一些代码进行澄清,但不知道是否会有很大帮助。我知道...

回答 2 投票 0

eonasdan 日期选择器中的 autoClose 和 forceParse 选项是否有效?

我似乎不知道如何使用 parseForce 和 autoClose 以及 Eonasdan/bootstrap-datetimepicker 的选项。我正在使用版本 4.14.30,从文档来看,用法似乎是 $('.日期-

回答 4 投票 0

如何使搜索栏在单击页面中出现的字段之外时出现和消失?

正在向我的网页添加搜索栏,在较小的屏幕上,导航栏上有搜索图标,切换后它可以在导航栏正下方启用搜索栏可见性(主窗口中的第一个...

回答 1 投票 0

Adsense 顶部锚定广告与固定导航栏

如果我在网站上修复了导航栏,Adsense 会出现在顶部栏上,这是不正确的,如果我有相对位置,锚定广告会出现在其上方,如何修复?

回答 2 投票 0

首次加载时的砌体布局问题

我按照 Bootstrap 的文档将 Masonry-layout jQuery 与 Bootstrap 5 结合使用。我以前在 ACF 中继器领域使用过这个,没有任何问题。现在我在 ACF 画廊中使用它......

回答 4 投票 0

使选项卡在父组件的角度中处于活动状态

这是我的产品仪表板.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 }); } } 堆栈闪电战

回答 1 投票 0

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

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

回答 9 投票 0

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

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

回答 1 投票 0

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

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

回答 11 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

将 bootstrap 导入 nextjs - 文档未定义

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.