首页 > 其他分享 >bootstrap本地

bootstrap本地

时间:2023-06-30 09:11:21浏览次数:39  
标签:none 本地 color 0080ff bootstrap padding modal border

bootstrap4,把cdn换成本地的文件

<!DOCTYPE html>
<html lang="en">

<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">
    <!-- CSS -->
    <!-- CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery and JavaScript Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
        Launch static backdrop modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    是否确认推出系统
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light mr-3" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
        </div>
    </div>
</body>
<style>
    .modal.show .modal-dialog {
        height: 100vh;
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0 auto;
    }

    .btn-primary {
        background-color: #0080ff;
        border-color: #0080ff;
    }

    .modal-header {
        border-bottom: none;
    }

    .modal-footer {
        border-top: none;
    }

    .modal-body {
        padding-left: 2rem;
    }
</style>

</html>

 

标签:none,本地,color,0080ff,bootstrap,padding,modal,border
From: https://www.cnblogs.com/jqynr/p/17515703.html

相关文章

  • ABP - 本地事件总线
    1.事件总线在我们的一个应用中,经常会出现一个逻辑执行之后要跟随执行另一个逻辑的情况,例如一个用户创建了后续还需要发送邮件进行通知,或者需要初始化相应的权限等。面对这样的情况,我们当然可以顺序进行相应的逻辑代码的编写,但这样会导致各种业务逻辑全部集中耦合在一个类中,违背......
  • 龙蜥7.9配置yum本地源
    1、离线安装上传系统镜像到服务器本地回环挂载#离线安装上传龙镜像到服务器本地回环挂载mkdir/mnt/iso#创建挂载点目录mount-oloop/home/AnolisOS-7.9-GA-x86_64-dvd.iso/mnt/iso/#本地回环挂载2、修改/etc/yum.repos.d/AnolisOS-os.repovim/etc/yum.repos.d/Ano......
  • git修改本地分支及远程分支名
    1.修改本地分支名gitbranch-mold_branchnew_branch#本地分支重命名2.修改远程分支名方法一、gitpushorigin:old_branch#删除远程仓库中的旧分支//或gitpush--deleteoriginoldNamegitpush--set-upstreamoriginnew_branch#修改远程仓库中的分支为新名称,......
  • idea springboot本地打包配置
    cleanpackage-plrenren-admin-am-amd......
  • 从微信仓库下载一个项目到本地开发
    1. 从微信的远程仓库下载项目到本地登录微信代码管理 复制git地址,如上图红框的地址  ,执行 gitclone https://git.weixin.qq.com/wx_wx************************xxxx_mini_program.git ,克隆远程项目到本地,clone后面的地址就是远程仓库地址 2.开发工具配置用微信......
  • HTML——Bootstrapt库导入
    1.bootstrapt下载zip包https://v5.bootcss.com/2.安装nodejshttps://nodejs.cn/download/3. ......
  • adb-将安卓设备里的第三方应用安装包,保存到本地电脑
    1.首先,确保您已经在计算机上安装了适当的adb驱动程序,并将adb添加到系统路径中。2.连接您的安卓设备到计算机上,并确保已启用USB调试模式。3.打开命令提示符或终端窗口,并运行以下命令以确认设备是否成功连接:adbdevices如果设备已成功连接,则会显示设备的唯一标识符。4.现在......
  • Gitee通过本地git上传大于10M的文件教程
    Gitee通过网页端默认上传的文件需要小于10M,如上传10M-100M的文件需要通过本地git上传,此时需要使用git指令操作,步骤如下。首先创建一个文件夹,打开后右键使用gitbash功能分别进行简要步骤说明如下1-8,详细可见下图操作说明。1、gitinit初始化;2、gitremote绑定gitee仓库3、git......
  • Bootstrap介绍
    Bootstrap是一个流行的前端CSS框架,可以帮助开发人员快速构建响应式、移动设备优先的网站和应用程序。以下是Bootstrap的使用详细攻略:引入Bootstrap: 1、Bootstrap可以通过CDN或本地文件引入。如果通过CDN引入,只需在HTML文件中添加以下代码即可:<!--CSS文件--><l......
  • SAP UI5 本地注解文件词汇表内容引用的详细讲解
    本文解释SAPUI5本地注解xml文件里下列这个片段的语义:<edmx:ReferenceUri="../../catalogservice;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_UI',Version='0001',SAP__Origin='LOCAL')/$value"> <edmx:IncludeNamespace="......