标签: bootstrap-5

日期选择器引导程序 5

我已从 bootstrap4 切换到 bootstrap5，但我正在努力使用日期选择器。如果有人做过这方面的工作，请帮忙。我也添加了日期选择器插件，但它仍然不起作用。

日期选择器图标也不起作用。

$(function() {
  $('#datetimepicker1').datetimepicker();
});

Run Code Online (Sandbox Code Playgroud)

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5Oom 
    GNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <!-- Datepicker -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
    datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
  <!-- CDN JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <!-- Separate Popper and Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  <!-- datepicker -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
    datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha512- 
    GDey37RZAxFkpFeJorEUwNoIbkTwsyC736KNSYucu1WJWFK9qTdzYub8ATxktr6Dwke7nbFai
    oypzbDOQykoRg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <title>Date Picker</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class='col-sm-6'>
        <div …

Run Code Online (Sandbox Code Playgroud)

datepicker bootstrap-5

Nik*_*era

2023 10-12

18
推荐指数

1
解决办法

15万
查看次数

如何在 Bootstrap 5 中创建超大屏幕？

在 Bootstrap 5 中，jumbotron 组件被移除，取而代之的是实用程序类，如用于背景颜色的 .bg-light 和用于控制填充的 .p-* 类。我是新手，有人可以举例说明如何做到这一点吗？

twitter-bootstrap bootstrap-5

Dja*_*now

lucky-day

17
推荐指数

3
解决办法

3万
查看次数

Angular 应用程序中的 Bootstrap 5

自版本 5 以来，Bootstrap框架已删除jQuery作为要求。

我想知道这个变化对 Angular 应用程序有何影响？

我们可以使用 Angular 中提供的所有 Bootstrap 功能（例如下拉菜单）吗？

我知道 Angular 不应该与 JQuery 结合使用 - 在 Bootstrap 的早期版本中，如果我们想使用所有 Bootstrap 功能，建议导入 JQuery，但这很糟糕。

但 Bootstrap 5 不再依赖 JQuery，因此在我的 Angular 应用程序中使用它是否安全？

至于现在我不想使用像 ng-bootstrap 这样的 bootstrap 替代品，这就是为什么我问在 Angular 中使用 Bootstrap 5是否可以并且安全？

javascript jquery twitter-bootstrap angular bootstrap-5

Roc*_*582

lucky-day

17
推荐指数

3
解决办法

4万
查看次数

增加引导程序复选框的大小

我正在使用官方引导程序文档中的代码创建一个简单的复选框：

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>

Run Code Online (Sandbox Code Playgroud)

我想知道如何使复选框比当前大？我曾尝试编辑 csscustomCheck并更改高度和宽度属性，但这不会增加框的大小。

javascript css bootstrap-4 bootstrap-5

作者

2020 10-26

16
推荐指数

6
解决办法

2万
查看次数

如何在 Bootstrap 5 中使用 JavaScript 初始化 toast？

我无法初始化 Bootstrap 5 Toast。

初始化 toast 的按钮：

<button type="button" class="btn btn-primary" id="toastbtn">Initialize toast</button>

Run Code Online (Sandbox Code Playgroud)

我的 JavaScript：

document.getElementById("toastbtn").onclick = function() {
        var toastElList = [].slice.call(document.querySelectorAll('.toast'))
        var toastList = toastElList.map(function(toastEl) {
          return new bootstrap.Toast(toastEl, option)
        })
      };

Run Code Online (Sandbox Code Playgroud)

JSfiddle：https ://jsfiddle.net/5e1t3scp/

这是文档。

JavaScript 取自 Bootstrap 的网站。我尝试了很多次，但无法初始化它。我究竟做错了什么？提前致谢！

javascript toast bootstrap-5

ran*_*ude

lucky-day

15
推荐指数

3
解决办法

1万
查看次数

如何在 Bootstrap 5 中将导航项目向右对齐？

我从https://www.codeply.com/go/qhaBrcWp3v复制了导航栏 HTML 代码

示例 6：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
    <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
    <a class="navbar-brand d-none d-lg-inline-block" href="#">
        Navbar 6
    </a>
    <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
        <img src="//placehold.it/40?text=LOGO" alt="logo">
    </a>
    <div class="w-100 text-right">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
    <ul class="navbar-nav ml-auto flex-nowrap">
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
        </li>
        <li class="nav-item"> …

Run Code Online (Sandbox Code Playgroud)

css alignment navbar bootstrap-5

CaR*_*aRL

2021 07-20

14
推荐指数

1
解决办法

1万
查看次数

导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用

我在尝试使用Bootstrap 5.Everything创建响应式菜单或下拉按钮时遇到问题。似乎一切正常。导航图标和下拉图标出现。但它不起作用。当我单击nav图标或dropdown按钮时，没有dropdown menu出现。

我想特别提一下，我也包含了该jquery文件。但它没有用。谁能告诉我这里发生了什么？

最后一件事，我在其他一些bootstrap类中遇到了严重的问题，比如mr-auto，ml-auto等等bootstrap 5。这种工作是否有任何错误或新类？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <a href="#" class="navbar-brand">DemoTech</a>
            <button
                class="navbar-toggler"
                data-toggle="collapse"
                data-target="#navbar"
            >
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse" id="navbar" navbar>
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                    <li class="nav-item"><a …

Run Code Online (Sandbox Code Playgroud)

html javascript css twitter-bootstrap bootstrap-5

Son*_*ary

2021 07-01

13
推荐指数

4
解决办法

1万
查看次数

Bootstrap 5 使用 Javascript 更新工具提示标题

在 Bootstrap 4 中，我使用以下示例代码来更新工具提示的标题（其中“statusIcon”是元素，在本例中是一个很棒的字体图标，但相同的原理也适用于按钮或其他任何内容：

$(statusIcon).attr('data-original-title', 'Check Error logs for details').tooltip();

Run Code Online (Sandbox Code Playgroud)

Razor 页面 html 元素：

<i class="fas fa-circle fa-lg" id="statusIcon:@item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>

Run Code Online (Sandbox Code Playgroud)

阅读 Bootrap 5 的手册，他们似乎没有告诉我们如何使用 Vanilla JS 实现这一点

到目前为止我在 Javascript 中尝试过的：

var statusIconId = 'statusIcon:' + pluginId + '';
var statusIcon = document.getElementById(statusIconId);    
document.getElementById(statusIconId).setAttribute("data-bs-original-title", 'Check Error logs for details');

Run Code Online (Sandbox Code Playgroud)

我在元素 Id 中使用变量，因为我正在使用 Razor 列表视图中的元素。

javascript bootstrap-5 asp.net-core-5.0

OJB*_*JB1

2021 01-24

13
推荐指数

3
解决办法

2万
查看次数

覆盖 Bootstrap 5 字段集样式

回到以前版本的 Bootstrap（以及普通 CSS），以下 HTML：

<fieldset>
  <legend>Test</legend>
    Welcome!
</fieldset>

Run Code Online (Sandbox Code Playgroud)

输出带有边框的字段集，图例位于其上方：

然而，当相同的 HTML 与 Bootstrap 5 一起使用时，输出如下所示：

如何覆盖 bootstrap CSS，以便字段集的边框再次可见，并带有其图例？

html css twitter-bootstrap bootstrap-5

Ser*_*ras

lucky-day

13
推荐指数

2
解决办法

1万
查看次数

Vuejs 3 和 Bootstrap 5 模态可重用组件以编程方式显示

尝试使用 vuejs 3 和可组合 API 创建一个基于 Bootstrap 5 的（半）可重用模态组件。设法让它部分工作，
给定（主要是标准 Bootstrap 5 模式，但基于“show”属性添加类，以及正文和页脚中的插槽）：

<script setup lang="ts">
defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "<<Title goes here>>",
  },
});
</script>

<template>
  <div class="modal fade" :class="{ show: show, 'd-block': show }"
    id="exampleModal" tabindex="-1" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <slot name="body" />
        </div>
        <div class="modal-footer">
          <slot name="footer" />
          <button type="button" class="btn …

Run Code Online (Sandbox Code Playgroud)

typescript vue-component vuejs3 bootstrap-5

OJa*_*Jay

2022 03-14

13
推荐指数

1
解决办法

2万
查看次数