如何使用bootstrap4修复开关按钮？
Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发者快速构建响应式网页。在Bootstrap 4中，修复开关按钮可以通过以下步骤实现：
- 引入Bootstrap的CSS和JS文件。在HTML文件的
<head>标签中添加以下代码：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">在<body>标签的末尾添加以下代码：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>- 创建一个开关按钮的HTML结构。可以使用
<input>标签和<label>标签来创建一个开关按钮，如下所示：
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch">
<label class="custom-control-label" for="switch">开关按钮</label>
</div>- 添加必要的CSS类。在
<input>标签上添加custom-control-input类，将<label>标签的for属性设置为<input>标签的id值，并添加custom-control-label类。 - 样式修饰。可以根据需要对开关按钮进行样式修饰。例如，可以使用
custom-control-input类来设置开关按钮的大小、颜色等。
完成以上步骤后，就可以使用Bootstrap 4修复开关按钮了。开关按钮可以用于各种场景，例如控制开关状态、切换功能等。
腾讯云提供了云计算相关的产品和服务，其中与前端开发相关的产品包括云服务器、云存储、云函数等。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
我想在我的页面中创建一个切换开关。
我正在使用bootstrap4。
我找不到相关的解决办法。
我看起来像：
有人能指引我吗？
浏览 14提问于2020-12-31得票数 1
回答已采纳
基本上，我们可以通过单击切换按钮来关闭/打开切换按钮。如何通过单击其他按钮(打开切换后生成的按钮)来关闭切换：
可悲的是，我只能通过单击按钮来隐藏按钮，而不能通过使用当前代码来隐藏按钮.
浏览 1提问于2021-11-16得票数 1
回答已采纳
尝试使用几个指南安装bootstrap4 for yii2 basic模板。看上去不像你想的那样。
我所做的：
1) cmd：composer create-project --prefer-dist yiisoft/yii2-app-basic // install yii2
结果: yii2 basic模板使用bootstrap3工作
( cd yii2-app-basic //转到yii2文件夹
2.2) cmd：composer require --prefer-dist yiisoft/yii2-bootstrap4 // install bootstrap4 for yii2
2.
浏览 12提问于2020-01-16得票数 3
回答已采纳
1回答
在react中实现bootstrap让我很痛苦。我在一开始设置了bootstrap4，但是我得到了一个糟糕的布局，然后使用了react-bootstrap，我得到了同样的问题。卡片主体、标题和按钮出现在图像本身的enter image description here上 import React from 'react';
import { Card, Button } from 'react-bootstrap';
const WorkCard = () => {
return (
<div>
浏览 19提问于2020-01-28得票数 1
我看了这个论坛上的其他例子，但都没有起作用。该脚本在独立的Bootstrap4文件中运行良好，但在WordPress中则完全不起作用。使用"Understrap“子主题。这是一个在移动视图中显示的按钮，用于关闭/打开平移。
jQuery(document).ready(function($) {
$('#SearchArea').on('show.bs.collapse', function() {
$('#closeButton').html('Open');
})
浏览 32提问于2020-02-05得票数 1
我正在用php和bootstrap4创建一个网站，我包含了一个通用导航栏，并用<?php include 'filename.php'?>命名它。我如何在每个页面上显示活动链接，例如，如果它在index.html上，主页按钮或链接将突出显示。
浏览 14提问于2019-03-19得票数 0
回答已采纳
这个问题在这里已经有答案了 ： 如何在div块中居中(水平和垂直)文本？ (27个答案) Bootstrap 4中的垂直对齐中心 (15个答案) 3天前就关门了。 我正在尝试得到3个按钮与bootstrap4的一个大的在左边，和两个小的一个在另一个在另一个在右边，并正在与btn-组这样做。我希望左边的大按钮占据整个列(即其他两个按钮顶部的高度之和)，并使所有按钮的文本居中，如下所示： +-------+-------+
| | 2 |
| 1 +-------+
| | 3 |
+-------+-------+ 如果我使用按钮，它工作得很
浏览 33提问于2021-02-27得票数 -2
回答已采纳
1回答
您好，我需要帮助，我有一个问题，在chrome的bootstrap4卡。它在ie11上可以正常工作，但在chrome上就不行了。请参考下图。 IE11布局 ? chrome布局 ?
浏览 20提问于2020-01-07得票数 2
回答已采纳
1回答
我使用这个简单的Bootstrap4模式：
我用这个标签显示了这个模式：
<a href="#" data-toggle="modal" data-target="#exampleModal">
模态显示正确。
Modal有两个按钮(取消和保存更改)。我如何启动保存按钮来做一些事情，然后关闭模式？
浏览 1提问于2018-05-11得票数 0
我正在学习Angular的全栈web开发和web部署的新手。我无法猜测这个npm错误背后的原因！在窗口命令行上为以下package.json文件运行"npn start“时显示代码ELIFECYCLE；。我被困在这里，在谷歌上没有太多的帮助，或者我无法搜索正确的答案，因为缺乏适当的关键字所需的搜索答案。 {
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante
浏览 45提问于2020-03-26得票数 0
8回答
{
"name": "confusion",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
浏览 1提问于2018-09-24得票数 2
回答已采纳
在这个示例中，我可以更改按钮选择Files到这个添加文件加上符号吗？我可以只使用这个k-按钮类和Bootstrap4类吗？
https://blueimp.github.io/jQuery-File-Upload/
https://dojo.telerik.com/@mcdevittnccn/ujOHacoM
浏览 4提问于2022-07-20得票数 0
回答已采纳
我正在尝试样式折叠，切换它点击，并期望有一个切换类时，崩溃是显示的。但是bootstrap4中的实际逻辑，例如：
`<button data-toggle="collapse">Button</button> <div class="collapse">Collapse Content</div>`
首先单击，折叠将显示，按钮类名不会更改。
再次单击，一个新的类名collapsed添加到按钮切换。
再次单击，类名collapsed将从按钮切换中删除。
当显示整理内容时，如何将样式按钮
浏览 0提问于2018-05-22得票数 0
回答已采纳
我需要帮助来填充像这个网站的模式文本，在这里的例子： 当我在URL -> ?tamu=stackoverflow中添加文本时 https://kristyaputri.digital-bali.com/?tamu=stackoverflow 模式将与stackoverflow文本一起显示。 对于其他示例，URL中的文本为bootstrap4 https://kristyaputri.digital-bali.com/?tamu=bootstrap4 模式将与bootstrap4文本一起显示。 如何制作这样的网站？我看到了视图的源代码，但没有得到任何线索。 谢谢。
浏览 29提问于2021-05-10得票数 0
我有三个思科2960 G开关，我从一个工作环境。他们三个都遇到了同样的问题，所以我很难相信他们都失败了。
问题是：
当我插入电源时，所有的端口灯都会闪烁一次，而系统、RPS、STAT、DUPLX和速度灯就会亮一秒钟。然后所有的灯都关了，除了保持绿色的系统灯。串行控制台上从来没有出现过任何东西。按住模式按钮，同时应用电源没有任何作用。
我真的有三个开关同时死掉了吗？
浏览 0提问于2014-06-23得票数 6
回答已采纳
我想使用一个按钮来切换类container和container-fluid (用于更改布局的宽度)。使用JavaScript / jQuery很容易，但是，只有在Bootstrap4中才有可能。也许是折叠组件？
谢谢。
浏览 0提问于2020-02-24得票数 1
在IntelliJ中是否有热键或简单的方法来替换if-else if语句？我不希望手动将if-else if语句转换为开关。我希望能够突出显示if-else if语句，并按组合键或使用菜单按钮。
浏览 13提问于2015-02-01得票数 44
回答已采纳
我使用的是bootstrap4的gijgo datepicker，下面的代码运行良好： <div id="myDatePicker" class="form-group" style="display: none;">
<label asp-for="Test.Date" class="control-label">Date</label>
<input id="datepicker" width="276"/>
浏览 12提问于2019-10-09得票数 0
回答已采纳
我在谷歌上找到了如何在responsive 中将Bootstrap3标签页转换为accordion，但我使用的是Bootstrap4，我不知道如何将它转换为Bootstrap4标签页到accordion。请帮帮我。
谢谢!
浏览 0提问于2017-12-16得票数 22
1回答
我想创建一个Bootstrap4模式，如下所示：。
但是，我不想在单击按钮时打开模式，而是希望在单击一些文本时打开模式(可能使用a标记)。我该怎么做？
浏览 0提问于2021-03-03得票数 0
我安装了bootstrap4
$ pip install django-bootstrap4
它正在此目录中安装。
C:\Users\trade\techpit-match-env\Lib\site-packages
Django似乎在看这个目录
C:\Users\trade\Anaconda3\lib\site-packages\django
当我将'bootstrap4‘放入INSTALLED_APPS = ('bootstrap4')变量，然后运行
$ python manage.py runserver
我知道这个错误
C:\Users\trade\techpi
浏览 8提问于2019-12-10得票数 4
回答已采纳
我正在尝试对齐标题部分中定义的标题和按钮，这些标题和按钮都是在主体部分中定义的，它们对齐了网页的中心。是否有任何简单的方法将按钮和标题放在一起，垂直对齐在Flask应用程序中的网页中心？
如何在Bootstrap4 ??中将页眉和按钮对齐到页面的中心
{% extends 'base.html' %}
{% block head %}
<h1 align="center"> Please Select A Option </h1>
{% endblock %}
{% block body %}
<form
浏览 3提问于2019-11-20得票数 3
1回答
我正在学习CakePHP 3.7.7，并尝试将其配置为使用Bootstra4。
安装了bootstrap4插件，遵循
在src/Template/Layout/default.ctp中添加CDN链接，如描述的
在src/View/AppView.php中添加：
$this->loadHelper('Html')；$this->loadHelper('Form')；$this->loadHelper('Flash')；
使用以下命令进行烘焙：bin/cake bake all -t LilHermit/Bootst
浏览 0提问于2019-05-06得票数 0
1回答
我有一个应用程序，我试图将它包含在wordpress页面中，我将index.php文件的包含传递给它，所有内容都会显示出来，但是当它查找JQuery和Bootstrap文件时，这些文件的样式都没有被检测到。样式文件与索引文件位于同一个文件夹中，我传递它们如下(它们只是示例)：
<link rel="stylesheet" href="include/bootstrap4/css/bootstrap-select.min.css">
<link rel="stylesheet" href="include/
浏览 1提问于2022-03-03得票数 0
数据采集库: gijgo
根据用户选择的选项是下拉菜单，我试图更改数据报考库的minDate输入。下拉菜单的选项如下：
<select class='form-control mr-2' id='idType' name='idType' placeholder='Select' required>
<option>UserID</option>
<option>UID</option>
<option>All Records</option
浏览 3提问于2020-03-16得票数 0
回答已采纳
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap3 &bootstrap4 in same html file</title>
</head>
<body>
<div class="bootstrap3">
some code here which require bootstrap3 css files
浏览 2提问于2018-03-19得票数 6
1回答
我在用Bootstrap4。
按钮出现在页脚组件中。
在PC上查看没有问题，但在智能手机上查看时，当我按下按钮时，按钮就会保持按下。
在按下按钮后，如何将显示更改为正常，就像在PC上一样？
app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
footer.component.html
<button (click)="prevPage()" type
浏览 2提问于2020-05-11得票数 2
1回答
我似乎无法得到正确的方式来设置在ons-开关中的“选中”属性。这是为了让我可以设置用户配置页面与预先选中的复选框。
Docs:这是一个检查开关，但是我如何使用角度控制器中的变量来设置这个开关呢？
例如，如果ons-开关具有像我可以做的那样的语法：
我似乎不能像文档中所需要的那样，在没有角值的情况下设置属性"checked“。我也无法访问这个变量，因为它是一个配置数组的一部分。
代码示例：
主计长：
var categInfo = [{Interest:'Classic', isChecked:true}, {Interest:'New', isCheck
浏览 3提问于2015-06-01得票数 4
回答已采纳
1回答
我有一个表，其中一些列包含非常短的数据。示例：
我希望这样的列更小，但是columnDefs不能工作：
<div class="table-responsive">
<table id="my_table" class="table table-hover">
...
</table>
</div>
以下是我的jquery：
let table = $('#' + table_id).DataTable({
"scrollX":
浏览 0提问于2020-04-03得票数 0
回答已采纳
我正在尝试使用bootstrap_datepicker_plus，为此我需要bootstrap4。我已经安装好了。当我运行pipenv run pip freeze时，我看到： django-bootstrap==0.2.4
django-bootstrap-datepicker-plus==3.0.5
django-bootstrap4==2.3.1
django-compressor==2.4
django-jquery==3.1.0 我在settings.py中有： INSTALLED_APPS = [
"bootstrap4",
"bootstrap_date
浏览 57提问于2020-12-17得票数 0
回答已采纳
我正在使用WIX 3.7。我有一个基于BryanJ源代码的自定义托管引导程序：
安装程序工作正常，但我想在添加/删除程序中检测按下的按钮。我的意思是用户是否想要修复或更改已安装的应用程序。目前，我只是打开一个窗口，里面有可能的选项(用于卸载和更改)。
谢谢
浏览 0提问于2013-06-26得票数 1
回答已采纳
1回答
Leaflet阻止窗口滚动
、、、、
我正在创建一个网站在某种视差设计和一些部分，我需要地图作为背景。我希望地图对鼠标滚轮滚动不敏感，但我想保持+-按钮的缩放控制。但我的解决方案仍然不起作用-一旦我滚动到地图并点击它，我就不能再滚动离开它了。下面是我当前设置的问题： https://jsfiddle.net/Drozi/x7jg4we6/47/ If you try to scroll down to the map, click on the map, you cant scroll back after that. 我试着从头开始做一把小提琴，然后就成功了。不幸的是，相同的设置(我在这里肯定遗漏了一些东西)在整个网页中不起作
浏览 146提问于2021-01-11得票数 0
我正在尝试在使用Angular CLI构建的Angular应用程序中使用Bootstrap4工具提示。
Bootstrap4 alpha文档指出，我需要运行此命令才能启用工具提示：
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
因此，我在app.component.ts中添加了一个ngAfterViewInit()函数来完成此操作：
ngAfterViewInit() {
$('[data-toggle="tooltip"]').tooltip(
浏览 5提问于2017-12-04得票数 3
回答已采纳
我有一个旧的数据库，我想把它转换成Firebird 2.5。在包含blob文本字段的表上还原数据时出现问题，该表中有一个众所周知的问题:gbak:ERROR:格式错误的字符串gbak:检测到的无效数据
执行的步骤：
gfix -user SYSDBA -password masterkey f:\dbb.db -shut -force 0
gfix -v -full -user SYSDBA -password masterkey f:\dbb.db
gbak -v -t -g -ig -user SYSDBA -Y F:\backup.log -password "mas
浏览 4提问于2012-11-27得票数 1
回答已采纳
2回答
我最近买了一个戴尔XPS 13和Ubuntu16.10与团结。我遇到了一个问题，任何窗口都是最大化的、最小化的，然后恢复的(再次最大化)会导致鼠标从指针的实际位置向上或向下偏移。
无论使用“显示桌面”按钮、热角“显示桌面”还是使用窗口的“最小化”按钮，都会发生这种情况。在alt选项卡到后台应用程序时不会发生这种情况，除非将该应用程序最小化。
这似乎影响到所有应用程序(火狐、雷鸟、终端等)，但只影响到被最小化的应用程序(这意味着，除非我最小化所有最大化的窗口，否则不是同时发生)。
要纠正这个问题，我必须再次单击“最大化”按钮来恢复窗口(所以没有最小化，也没有全屏)，然后最大化以再次最大化。或者完
浏览 0提问于2016-10-08得票数 0
回答已采纳
我使用的是typo3 8，我想从bootstrap3迁移到bootstrap4。
还有没有人有bootstrap4导航栏的可用打字稿？
提前感谢
浏览 12提问于2019-08-04得票数 0
回答已采纳
我有以下几把小提琴： https://jsfiddle.net/b3x6ou4k/ 当我将CSS链接从Bootstrap3更改为Bootstrap4(使用https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css作为CSS)时，圆形按钮变为方形。 为什么圆形按钮的CSS： .btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line
浏览 8提问于2019-09-25得票数 0
在bootstrap4中如何让MSWORD型多列文本流动 例如在单词中我们有： ? 在bootstrap4中，下面的代码将抓取一个两列网格 例如： <div class="row">
<div class="col-6">
...... some text
</div>
<div class="col-6">
...... text
</div>
</div> 但在这里，我必须手动将文本拆分为两列 怎样才能更自动地关闭它
浏览 24提问于2021-01-28得票数 0
回答已采纳
我遇到了奇怪的bug，不知道为什么会这样。
我有UIScrollView，里面有12个视图。它们中的大多数都包含UISwitch按钮和标签。视图的大小是动态的(取决于label.text的长度)。除了底部的两个视图之外，一切都可以正常工作和显示。它们确实得到了显示，按照预期进行了初始化。然而，它们中的UISwitches不起作用，点击或触摸它们不会做任何事情。它们都不例外(它们都是复制粘贴)。我已经仔细检查过IBOutlets了，他们都很好。我怀疑scrollView出了什么问题。也许超过了某个点它就不再接收输入了？即使我可以向上和向下滚动，一切都会像预期的那样显示出来。
你知道该检查什么吗？
浏览 0提问于2012-11-26得票数 4
回答已采纳
2回答
充当单选按钮的自定义div
、、、、
我在一个网站上工作，在实现一个div (有产品名称，价格和图片)时遇到了麻烦，它的行为就像一个单选按钮(类似于这个https://www.harrys.com/en/us/signup/products)。 任何类型的解决方案都将不胜感激，我目前使用的是bootstrap4 & JQuery/Javascript
浏览 25提问于2019-01-22得票数 2
回答已采纳
1回答
我跟踪，以帮助我添加应用程序内的采购。它工作得很好，除了现在我正在尝试添加另一个非消耗的IAP。我定义了我的第二个产品ID并为“购买”按钮创建了一个方法，但是我不确定我是否必须为这个额外的项目创建另一个SKProductsRequest，或者我是否使用相同的一个，等等。
这是我的完整密码。
#define kRemoveAdsProductIdentifier @"099"
#define kDoubleEarningRateProductIdentifer @"199"
- (void)removeAds{
NSLog(@"User requ
浏览 5提问于2014-09-16得票数 0
回答已采纳
1回答
我已经创建了从其中加载模板的静态目录。 {% load static %} 我得到这个错误的原因是 django.template.exceptions.TemplateSyntaxError: Could not parse the remainder: '/bootstrap4/popper.js'' from 'styles/bootstrap4/popper.js'' Hare是我加载bootstarp的方式。 <script src="{% static 'js/jquery-3.2.1.min.js'
浏览 93提问于2020-07-01得票数 0
回答已采纳
一个bootstrap4站点，一个包含两个div的图库，一个包含按钮，另一个包含照片。单击某个按钮将显示带有某种标签类型的照片。我猜这个过滤函数隐藏在某个js文件中，我不想去碰它。有没有可能只是给按钮点击添加额外的功能？我想添加ID/锚到照片div，然后当按钮单击，使其向下滚动到照片区域。新的onclick函数会覆盖原有的onclick函数吗？
浏览 20提问于2019-06-14得票数 0
回答已采纳
我正在使用xamarin中的三选按钮组件，但我不知道一种更改按钮颜色的方法。字体和阴影等可以改变，但我想改变灰色。
有人能提供一些关于如何做到这一点的见解吗？
浏览 0提问于2018-01-09得票数 0
1回答
我想将单选按钮转换为启动/关闭按钮。我知道如何在复选框中这样做：
<input checked data-toggle="toggle" type="checkbox">
我试了一下单选按钮，用收音机代替了复选框的类型，却得到了一个普通的单选按钮。
我所说的开关是：
浏览 4提问于2015-03-23得票数 1
回答已采纳
我正在使用Bootstrap 4下拉选项。
我想为左上角的下拉菜单添加一个向上箭头。
在Bootstrap 3中，我们在按钮上有一个插入符号标记，所以我们可以将箭头添加到下拉菜单中。
但是在Bootstrap4中，我们没有插入符号标记，使用dropdown-toggle类只添加了插入符号。
如何将箭头添加到此处的下拉菜单？
我添加了Bootstrap 3示例链接：
Bootstrap 4中也需要相同的功能。
浏览 2提问于2018-10-03得票数 4
我正在使用bootstrap4，并尝试使用SASS更改一些按钮的颜色。在我的自定义SCSS文件中，我有以下内容...
@import "node_modules/bootstrap/scss/bootstrap";
$theme-colors: (
"primary": red
);
编译后，它可以正常工作。现在我想用同样的方法修改主键的禁用状态。
我正在努力寻找任何例子。谁能给我指一条路？
浏览 0提问于2020-11-01得票数 0
如何像我们在Java中一样，在Kotlin中实现OnClickListener接口，并处理类似于开关情况的in？例如，我有两个按钮，在单击每个按钮时，我必须调用一个函数。
浏览 2提问于2018-02-03得票数 2
回答已采纳
欢迎您，亲爱的读者！
似乎Bootstrap4不再使用CSS类.in{...}了。
这会影响到blueimp文件上传，因为在按下Add files按钮后，将不会显示要上传的文件列表。
我做错了什么吗？-或者这个类可以被添加到blueimp文件上传框架/应用程序中吗？
谨致问候!
浏览 8提问于2017-02-15得票数 8
我想从我的C++应用程序--为其他应用程序运行修复--以编程方式执行当我手动为Windows->Control Panel->Program中的程序选择修复选项时会发生什么。
对于remove选项，我只需搜索注册表：
KEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall
(在64位机器上的HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Windows\CurrentVersion\Uninstall )
而不是使用Uninstal
浏览 0提问于2013-10-16得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
