Bootstrap学习(十一)
创始人
2024-03-12 20:34:46
0次

 模态框使用: 

tab标签页组件

 模态框使用:

 

有属性、方法、事件

 

 

 

  

 fade显示时的渐变动画可加可不加,role是屏幕辅助设备用的 aria-lable屏幕辅助设备用的

 

静态的模态框是不展示的,需要调用展示方法才能展示

 

 

 

 

 

 在中心内容放一个表单:

 

关闭按钮因为有:data-dismiss属性,可以关闭模态框

 可以修改按钮样式

 

 model-header下面的button的×号,有data-dismiss属性关闭模态框

 

 通过按钮触发显示模态框:

 

 

点击添加按钮:

 

其他方法: 

添加一个隐藏按钮:

 

 

 modal中既可以是js对象,还可以是方法

 

 

toggle:是符合属性展示和隐藏

 

 加上fade具有渐变效果:在显示的时候具有慢慢的跳出显示

 

 

 

 

事件用在: show  我们希望在模态框完全展示之后发起一个ajax请求,去查询某个数据,比如添加的时候有一个分类,这个分类来自后台,在模态框完全展示之后发一个异步请求,把异步请求的结果渲染到分类列表 

点击隐藏:

 

tab标签页组件

这个标签页有动态的展示:

 

可以删掉屏幕辅助的:

 

 

 

 

呈现动态的标签页选项卡需要加data-toggle属性,并把选项卡a连接与面选项卡面板联系起来,href对应下面选项卡面板的id 

 

 

 

 

 

 

 

 

 让默认选中:选项卡和面板都是默认选中

 

 

 

 

 

 

在选项卡面板里面:用户列表填充内容用,栅格系统布局:

 

 

 

切换选项卡 

 

 

 

 

 

 

 

 

 

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...