bootstrap4简单使用和入门02-bootstrap的js组件简单使用

最新推荐文章于 2024-04-28 21:18:55 发布
最新推荐文章于 2024-04-28 21:18:55 发布
阅读量489 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/reblue520/article/details/80553389
版权

自带默认的css和js弹框控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modal</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>

<!-- css自带弹窗处理 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  弹窗1
</button>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

自己使用jquery控制弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modal</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>

<!-- css自带弹窗处理 -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  弹窗1
</button> -->
<!-- js控制弹窗 -->
<button id="myModal" class="btn btn-info">弹窗2</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    $('#myModal').on('click', function () {
      $('#exampleModal').modal('show');
    })
</script>

</body>
</html>

 

reblue520
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap.bundle.min.js
04-04
bootstrap.bundle.min.js,python django-bootstrap-4.6.2 版本的JS文件
bootstrap-vue-treeview：用于Bootstrap和Vue.js 2.0+的treeview组件
02-05
和Treeview组件 在线演示 产品特点 拖放节点 上下文菜单 安装 npm install --save bootstrap-vue-treeview 入门 Webpack 如果使用Webpack捆绑器（推荐），则可以导入组件并在本地注册： import { bTreeView } from...
django报错"GET /static/plugins/bootstrap/css/bootstrap.css HTTP/1.1" 404 1718，
junxieshiguan的博客
08-18 7967
然后引用的Bootstrap一直不出来，页面中的静态资源无法加载， 报这个错的原因，是因为配置setting时候没有配置好。 后面在seeting里面添加下面这段就好了 STATICFILES_DIRS = (  os.path.join(BASE_DIR, "static"),  )  ...
JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
最新发布
2401_84434442的博客
04-28 435
以上三种树形组件，各有千秋，可以根据需求选用不同的组件。还是那句话，没有最好，只有最合适，如果园友们有什么更好用的树形组件，不妨推荐下，不胜感激。之前那篇被指有问题，在此重新发下。如果觉得本文对你有帮助，请帮忙推荐吧，博主会继续努力。在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
Bootstrap的初入门
gx01013的博客
08-19 1410
Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。
BootStrap4-1
weixin_59938047的博客
08-24 1593
1.BootStrap简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。 Sass--CSS扩展语言 Mixin--包含一段合法Sass代码，类似于C语言
bootstrap和bootstrap.bundle区别
qq_40308101的博客
07-04 4443
bootstrap.bundle.js包含了popper.js这个框架，当我们在项目中引入bootstrap.bundle.min.js而不是bootstrap.min.js时，就不需要在前面引入popper.js。只在前面引入jquery.min.js就行popper.min.js 用于设置弹窗、提示、下拉菜单，是第三方插件 等于...
bootstrap-map-js:轻量级JSCSS扩展，可使用Bootstrap和ArcGIS构建出色的地图绘制应用程序
05-02
轻量级扩展，用于使用和构建响应式Web映射应用程序。 地图会随着屏幕尺寸的变化自动调整大小并更新，或者可以将其设置为固定大小。 弹出窗口将保留在屏幕视图内，并设置其样式以匹配Bootstrap。 可以使用Dojo和...
Python Flask Web开发入门之Bootstrap介绍使用和Flask-Nav快速导航栏 共10页.pdf
06-05
Python Flask Web开发入门之Bootstrap介绍使用和Flask-Nav快速导航栏 Bootstrap 是当前最受欢迎的前端框架之一，来自 Twitter，Python 中同样可以使用 Bootstrap。Bootstrap 提供了大量的前端组件，能够快速构建...
meteor-blaze-bs4:适用于Meteor Blaze的通用Bootstrap 4组件库
05-06
流星火焰引导程序4组件适用于Meteor Blaze的通用Bootstrap 4组件库。 见 请注意，我们的状态为WIP，这意味着“初步开发正在进行中，但尚未有适合公众的稳定，可用的发行版。” 但是，已经有试用最新状态的版本发布了...
bootstrap-4-boilerplate：基本Bootstrap 4入门模板
01-31
"bootstrap-4-boilerplate" 是一个基于Bootstrap 4.4.1的基础入门模板，特别的是，这个模板集成了 Gulp 4+工作流，使得前端开发更为高效。 Gulp 是一个自动化任务管理器，通过编写简单的JavaScript任务脚本，可以...
bootstrap.bundle.min.js.map
04-12
浏览器报错找不到这个的可以下载这个
django bootstrap4,bootstrap.bundle.min.js经常访问失败，解决方案
weixin_46774426的博客
04-04 522
下载bootstrap.bundle.min.js文件，放到项目static文件夹修改bootstrap4.py 对应的bootstrap.bundle.min.js的地址为，http://项目域名/static/bootstrap.bundle.min.js。找到bootstrap4安装路径，lib/python3.9/site-packages/bootstrap4、
Spring Boot基础学习笔记09
M_1725046289的博客
05-19 225
一、Spring Boot支持的视图技术 Spring Boot框架为简化项目的整体开发，对一些常用的视图技术实现了整合支持，并主要推荐整合模板引擎技术来实现前端页面的动态化内容。 Spring Boot可整合的模板引擎技术 FreeMarker Groory Thymeleaf Mustache 二、Thymeleaf基本语法 相关语法 ，请学习《thymeleaf_3.0.5_中文参考手册.pdf》 提取码：fqpu 1、Thymeleaf常用标签 2、Thymeleaf主要语法 3、Thymelea
bootstrap简单使用
weixin_46427348的博客
05-13 1695
1.官网下载 bootstrap中文官网 下载完成后解压 一般我们使用导入这个文件夹即可
bootstrap4-部分总结
m0_63300737的博客
11-21 623
轮播 <!--指示符--> <div id=“” class=”carousel slide” data-ride=”carousel” > <ul class=”carousel-indicators”> <li data-target=”” data-slide-to=”” class=”active”></li> </ul> <!--图片--> <div class=”carousel-inner”&g
js bootstrap框架如何下载和使用 (详解)
黄大仙
08-12 3179
框架,顾名思义就是一套架构,他会基于自身的特点向用户提供一套较为完整的解决方案. 框架的控制权在框架本身, 使用者要按照框架的某种规范进行开发. 插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小 前端常用的框架有Bootstrap, Vue, Angular, React等. 既能开发PC端, 也能开发移动端. 前端常用的移动端插件有swiper, superslide, iscroll等 框架: 大而全,一整套解决方案 插件: 小而转移, 某个功能的解决方案 bootstrap框架使用方法:
bootstrap.min.css和bootstrap.min.js以及bootstrap.bundle.min.js下载，jquery各版本下载
热门推荐
# 的博客
03-16 2万+
网上查了下这三个没法直接找到（同理jquery等，都可以去引用地址直接全选复制过来） bootstrap.min.css bootstrap.min.js bootstrap.bundle.min.js 其实直接访问 https://www.bootstrapcdn.com/ ,复制网站，新建一个同名css/js文件（比如利用pycharm新建javascript文件），在ctrl+a全选中网页内...
使用Bootstrap的popover组件，引入文件出错
shaw_sisi的博客
12-21 430
错误情况：在bootstrap.min.js前引入bootstrap.bundle.min.js 由于bootstarps是使用JavaScript开发的，依赖类使jQuery框架以及popoper.js等插件， 所以在引入bootstarps.js之前要先引入jQuery.slim.min.js和popoper.js， 又因为只有部分组件依赖popoer.js，当不需要这些组件时，不需要引入popoper.js 直接引入jquery.js与bootstrap.js即可 目前 bootstrap.bun
Bootstrap入门精要：掌握响应式布局和JavaScript组件
接下来，读者将探索 Bootstrap 提供的各种JavaScript组件和插件。最后，读者将学习如何自定义 Bootstrap，编译和构建 Bootstrap 代码，并使用不同的扩展来创建更高级的网站。 Bootstrap 是一个流行的前端框架，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值