首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

BootStrap基础知识

hide.bs.toast 调用 hide 方法,此事件会立即触发。 hidden.bs.toast 隐藏了一个吐司元素,会触发此事件。...支持 Page Visibility API 浏览器网页对用户不可见,轮播将避免滑动(例如浏览器分页不是启用状态、浏览器视窗最小化时等)。...事件类型 说明 slide.bs.carousel 调用 slide 方法,此事件会立即触发。 slid.bs.carousel 轮播完成切换后,此事件就被触发。... collapse 类用于指定一个折叠元素点击按钮后会在隐藏与显示之间切换。...内联表单需要在 元素上添加 .form-inline 类 所有内联表单元素都是左对齐 荧幕宽度 小于 576px 为垂直堆叠,如果荧幕宽度 大于等于 576px 表单元素才会显示同一个水平线上

23610
您找到你想要的搜索结果了吗?
是的
没有找到

Jump Start Bootstrap 第4章

我们将会看到如何添加下拉菜单到导航栏、切换按钮状态、点击按钮漂亮警告信息会在显示一段时间后消失等等功能。...点链接击,激活链接元素下拉效果。...当你点击按钮,你会看到一个类似于插图效果样式;再次单击,它返回到原来样式,如图所示。data-toggle=”button”实现了这个切换功能。 ?...show属性用于通过JavaScript切换模式可见性。设置为true,模式对话框将自动显示,不需要单击任何句柄元素。...元素,可以作为一个modal handle元素,可以包含一个包含链接属性href。Bootstrap模式对话框有一个选项,单击该句柄,将该链接加载到它modal-body元素

28.3K40

ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

其中菜单元素设置tabindex=-1,这样做是为了防止元素成为tab次序一部分。 模态框(modal.js) 模态框以弹出框形式可以为用户提供信息亦或者在此之中完成表单提交功能。...Bootstrap模态框本质上有3部分组成:模态框头、体和一组放置于底部按钮。你可以模态框Body添加任何标准HTML标记,包括Text或者嵌入Youtube视频。...,需要创建一个父元素并设置class为tab-content,div容器为每一个Tab内容创建div元素,并设置class为tab-pane和标识Id,通过添加active来激活哪一个...为了使用手风琴组件,需要对Panel Heading设置data-toggle="collapse"和点击它展开容器(Div)Id,具体如下所示: ...你可以许多网站上看到这种组件,要使用它也是非常方便: 将Carousel组件被包含在一个class为carousel以及data-ride为"carousel"元素

5.1K60

python测试开发django-188.Bootstrap折叠(Collapse)插件

可以直接引用 bootstrap.js 或压缩版 bootstrap.min.js 折叠(Collapse) 以使用带有属性链接href或带有属性按钮data-target。...可折叠元素实际显示之前(即在事件发生之前)返回给调用者。shown.bs.collapse .collapse(‘hide’) 隐藏可折叠元素。...可折叠元素实际被隐藏之前(即在事件发生之前)返回给调用者。hidden.bs.collapse Bootstrap 折叠类公开了一些用于挂钩折叠功能事件。...事件类型 描述 show.bs.collapse show调用实例方法立即触发此事件。 shown.bs.collapse 折叠元素对用户可见触发此事件(将等待 CSS 转换完成)。...hide.bs.collapse hide调用该方法立即触发此事件。 hidden.bs.collapse 对用户隐藏折叠元素时会触发此事件(将等待 CSS 转换完成)。

2.9K50

AJAX控件UpdatePanel使用详解

Accordion 控件具有保持其选中状态功能,页面发生提交过程后,Accordion 保留其提交前选中页面。...如果将 AutoSize 属性设置为 None 它将可能造成页面上其它元素跟随 Accordion 尺寸变化产生向上或者向下移动。...开发,我们可以在这里将每一个 AccordionPane 标题默认 Css 样式设置与此,另外还可以为每一个 AccordionPane 单独指定其 Css 样式。...开发,我们可以在这里将每一个 AccordionPane 标题默认 Css 样式设置与此,另外还可以为每一个 AccordionPane 单独指定其 Css 样式。...Panes - AccordionPane 集合表示 HeaderTemplate - 采用数据绑定方式标题模板 ContentTemplate - 采用数据绑定方式内容模板 DataSource

79550

BootStrap应用开发学习入门1

; 导航栏应用或网站作为导航页头响应式基础组件。...指定为 auto ,会动态调整提示工具。例如,如果 placement 是 “auto left”,提示工具将会尽可能显示左边,情况不允许情况下它才会显示右边。...指定为 auto ,会动态调整弹出框。例如,如果 placement 是 “auto left”,弹出框将会尽可能显示左边,情况不允许情况下它才会显示右边。...这与传统折叠面板(accordion行为类似 - 这依赖于 accordion-group 类 toggle boolean 默认值:true data-toggle 切换调用可折叠元素。....affix-bottom #指示元素最底端位置, 如果定义了底部偏移滚动到达该位置,应把 .affix 替换为 .affix-bottom #选项 offset number | function

44.7K21

带你走近AngularJS - 体验指令实例

模板使用ng-transclude 指令来声明对应显示内容。由于模板只有一个元素,所以没有设置其他选项。 代码中最有趣部分是link 方法。...声明controller 是必要,因为Accordion会包含子元素,子元素将检测父元素类型和controller 。 下一步需要定义手风琴选项卡指令。...scope 下 "title" 属性将会被实例所替代。 这个例子模板比较复杂。注意我们通过ng-transclude 指令来标记元素接收文本内容。...它功能并不复杂但是足以展示一些AngularJS重要知识点和技术细节:如何定义嵌套指令,如何生成唯一元素ID,如何使用jQuery操作DOM以及如何使用$watch 方法监听scope变量变化。...Google Maps 指令 下一个例子是创建Google地图指令: ? Google Maps 指令 我们创建指令之前,我们需要添加Google APIs 引用到页面: <!

2.4K50

前端开发者都应知道 jQuery 小技巧

新窗口打开外部链接 找到文本元素 切换可视与隐藏触发器 Ajax 调用错误处理 链式操作 回到顶部按钮 通过使用 jQuery animate 和 scrollTop 方法...Hover 上 Class 切换 如果用户鼠标悬停在页面上某个可点击元素,你想要改变这个元素视觉表现。...或许你只是想在用户点击某物展现一个元素,使用 fadeIn 和 slideDown 都很棒。...但如果想让该元素第一次点击显现,第二次点击消失,下面的代码可以很好地完成这个工作: // Fade $('.btn').click(function () { $('.element').fadeToggle...通过文本找到元素 通过使用 jQuery contains() 选择器,你可以找到某个元素文本。

2.3K30

BootStrap应用开发学习入门1

; 导航栏应用或网站作为导航页头响应式基础组件。...指定为 auto ,会动态调整提示工具。例如,如果 placement 是 “auto left”,提示工具将会尽可能显示左边,情况不允许情况下它才会显示右边。...指定为 auto ,会动态调整弹出框。例如,如果 placement 是 “auto left”,弹出框将会尽可能显示左边,情况不允许情况下它才会显示右边。...这与传统折叠面板(accordion行为类似 - 这依赖于 accordion-group 类 toggle boolean 默认值:true data-toggle 切换调用可折叠元素。....affix-bottom #指示元素最底端位置, 如果定义了底部偏移滚动到达该位置,应把 .affix 替换为 .affix-bottom #选项 offset number | function

44.2K20

干货 | Vue事件、过渡和制作index页面

” Vue事件 1 方法处理器 ● 可以用v-on指令监听DOM事件 ● 类似于内联表达式,事件处理器限制为一个语句 ● 一个ViewModel被销毁,所有的事件处理器都会自动被删除 ● 有时也需要在内联语句处理器访问原生... Vue过渡 通过Vue.js过渡系统,可以元素从DOM插入或移除自动应用过渡效果。...Vue.js会在适当时机为你触发CSS过渡或动画,你也可以提供相应JavaScript钩子函数在过渡过程执行自定义DOM操作。 1 使用过渡 目标元素上使用transition特性。...transition 特性可以与下面资源一起用: ● v-if ● v-show ● v-for(只插入和删除触发,使用vue-animated-list插件) ● 动态组件(is和切换组件) ●...$appendTo(el))触发 插入或删除带有过渡元素,Vue 将: 1.

1.7K50

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

本篇文章里,我们将一起学习下如何使用 CSS checkbox hack 技术纯手工撸一个响应式手风琴组件,这个组件完全基于CSS,没有JavaScript脚本,同时又基于窗口大小进行水平和垂直之间进行样式切换...如果您在 label 元素点击文本,就会触发此对应表单控件。就是说,当用户选择该标签,浏览器就会自动将焦点转到和标签相关表单控件上。这就是这个案例关键所在,让我们能在选项卡直接进行切换。...3、Checkbox Hack: 切换选项内容 这部分代码就如同变魔法一般,当我们点击每个标题选项卡就会显示对应相关内容,这里我们使用了 :checked 伪类,以及结合 CSS后续同胞选择器(~...最后定义一个可选外观样式(非必须样式,可选),每个单选按钮获取焦点,我们为lable标签定义outline属性,这个细节帮助我们增强组件可访问性。...5、处理内容有限情况 我们案例,每个选项卡内容都很多,看起来很漂亮。但是为了确保没有足够内容支撑,手风琴效果不走样,我们需要进行一些样式上特殊处理,效果如下图所示: ?

3.2K20

3分钟搭建一个网站?腾讯云Serverless开发体验

当然了,Serverless不是表示没有服务器,而表示您在使用 Serverless ,您无需关心底层资源,也无需登录服务器和优化服务器,只需关注最核心代码片段,即可跳过复杂、繁琐基本工作。...它大致执行流程如下图: ? 所以,Serverless其实本质上是云服务上帮你整合了云资源,你只需要编写最核心代码,比如一个请求过来如何处理和返回对应数据。...我们使用官方Flask模板,这个模板Flask环境相对更加完整,方便开发。 我们首先需要一个RSS解析框架,Python,有一个feedparser框架,能够解析RSS url。..."> ...最开始Python3 Web模板,在线依赖库貌似缺失了新版本feedparser和flask,导致我本地调试能够运行代码放到Serverless上各种不成功,但是错误信息却很难找。

1K40

3分钟搭建一个网站?腾讯云Serverless开发体验

当然了,Serverless不是表示没有服务器,而表示您在使用 Serverless ,您无需关心底层资源,也无需登录服务器和优化服务器,只需关注最核心代码片段,即可跳过复杂、繁琐基本工作。...它大致执行流程如下图: 所以,Serverless其实本质上是云服务上帮你整合了云资源,你只需要编写最核心代码,比如一个请求过来如何处理和返回对应数据。...我们使用官方Flask模板,这个模板Flask环境相对更加完整,方便开发。 我们首先需要一个RSS解析框架,Python,有一个feedparser框架,能够解析RSS url。..."> ...最开始Python3 Web模板,在线依赖库貌似缺失了新版本feedparser和flask,导致我本地调试能够运行代码放到Serverless上各种不成功,但是错误信息却很难找。

62320

作用域 CSS 回来了

你可以使用.title选择器,它只Card组件内工作,并使用另一个.title选择器,它只 Accordion 工作。...如果两个组件针对同一个元素(具有相同特异性),内部组件样式将覆盖外部组件样式。 它是如何工作?...你可以DevTools检查,看到每个范围是如何根据其最近接近性来覆盖另一个: 这里问题是,选择器特异性仍然是优先,所以如果外部范围以比内部更高特异性针对一个元素,外部范围样式将会应用。...这样,两个范围针对同一个元素,你可以控制哪一个优先。而不是总是让内部范围赢,你可以调整选择器特异性,使得更高特异性选择器优先,不管它属于哪个范围。...不同级联层上定义一个组件部分,这样它可以影响其包含范围,但仍然容易更高层次上覆盖。 嵌套颜色主题。 博客文章更容易地防止样式冲突。 容器查询—我们能通过混合和匹配来提出什么?

8010
领券