-
Bootstrap 中下拉菜单修改成鼠标悬停直接显示 <font color=r
所属栏目:[安全] 日期:2020-12-18 热度:77
最近公司做网页用到Bootstrap的菜单功能,要实现鼠标悬停显示二级菜单,于是就研究了一下,大概有两种方法。 第一种方法:修改样式表 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css: 代码如下: li:hover .dropdown-me[详细]
-
JS组件Bootstrap dropdown组件扩展hover事件
所属栏目:[安全] 日期:2020-12-18 热度:108
bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的。细心者可以发现,下拉框出现时,其父级会有一个open的cl[详细]
-
JS组件Bootstrap ContextMenu右键菜单使用方法
所属栏目:[安全] 日期:2020-12-18 热度:129
今天来总结下bootstrap的一个小组件的应用。好了,不说废话,进入正题吧。 一、ContextMenu介绍 一个需求:表格行调序,支持多选调序,并且可以不连续多[详细]
-
基于Bootstrap实现Material Design风格表单插件 附源码下载
所属栏目:[安全] 日期:2020-12-18 热度:158
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效。 使用方法 使用该Material Design风格表单需要在页面中引入jquery,bo[详细]
-
解决JS组件bootstrap table分页实现过程中遇到的问题
所属栏目:[安全] 日期:2020-12-18 热度:75
本文为大家分享了bootstrap-table 分页的问题,供大家参考,具体内容如下 问题1 :服务器端取不到form值,querystring没有问题,但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax。 1可以用读流文件解决。2 如果想用request.form 方式[详细]
-
Bootstrap每天必学之导航组件
所属栏目:[安全] 日期:2020-12-18 热度:181
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形导航是通过.nav-tabs样式来实现的,在制作标签形导航时需要在原导航类名为.nav的容器上追加类[详细]
-
Bootstrap每天必学之响应式导航、轮播图
所属栏目:[安全] 日期:2020-12-18 热度:93
本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分。 基本导航组件+响应式: 资讯 案例 关于 后一节我们要在导航条的下方做一张轮播图,自动播放最新的重要动态。 $('#myCarousel').carousel({ //设置自动播放/2 秒[详细]
-
Bootstrap项目实战之首页内容介绍(全)
所属栏目:[安全] 日期:2020-12-18 热度:141
本节课第一节我们轮播图的下方,设计一个内容介绍,内容介绍分两部分,本次为上半部分。 一.首页内容介绍 a href="#myCarousel" data-slide="prev" class="carousel-control left" span class="glyphicon glyphicon-chevron-left" a href="#myCarousel" dat[详细]
-
Bootstrap项目实战之子栏目资讯内容
所属栏目:[安全] 日期:2020-12-18 热度:147
本文我们制作一下子栏目资讯内容,供大家参考,具体内容如下 谷歌浏览器解析的顺序调整,需要全部加载后执行 注:对于 Firefox 浏览器,可以按 Ctrl+Shift+M,调整移动端尺寸。子栏目标题 资讯 企业内训的最新动态、资源等... 栏目 CSS 资讯内容 广电总局发[详细]
-
Bootstrap每天必学之附加导航(Affix)插件
所属栏目:[安全] 日期:2020-12-18 热度:174
附加导航(Affix)插件允许某个 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 会锁定在某个位置,不会随着页面其他部分一起滚动。如果您想要单独引用该插[详细]
-
Bootstrap每天必学之轮播(Carousel)插件
所属栏目:[安全] 日期:2020-12-18 热度:191
Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,正如 Bootstrap 插件[详细]
-
Bootstrap每天必学之折叠(Collapse)插件
所属栏目:[安全] 日期:2020-12-18 热度:78
折叠(Collapse)插件 可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项。如果您想要单独引用该插件的功能,那么您需要引用 collapse.js,或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.j[详细]
-
详解Bootstrap插件
所属栏目:[安全] 日期:2020-12-18 热度:90
在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Boo[详细]
-
第五章之BootStrap 栅格系统
所属栏目:[安全] 日期:2020-12-18 热度:109
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 学习要点: 1.移动设备优先2.布局容器3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式、[详细]
-
第四章之BootStrap表单与图片
所属栏目:[安全] 日期:2020-12-18 热度:73
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 学习要点: 1.表单2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各种丰富的[详细]
-
第三章之Bootstrap 表格与按钮功能
所属栏目:[安全] 日期:2020-12-18 热度:133
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各种丰富的[详细]
-
第二章之Bootstrap 页面排版样式
所属栏目:[安全] 日期:2020-12-18 热度:79
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题、页面主体、对齐[详细]
-
第一章之初识Bootstrap
所属栏目:[安全] 日期:2020-12-18 热度:183
学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boostrap 历史、特点、用途,以及为什么选择 Boostrap 来开发我们的 Web 项目。 一.Bootstrap 概述 Bootstrap 是由 Twitter 公[详细]
-
Bootstrap每天必学之按钮(Button)插件
所属栏目:[安全] 日期:2020-12-18 热度:136
按钮(Button)在 Bootstrap 按钮 一章中介绍过。通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。 如果您想要单独引用该插件的功能,那么您需要引用 button.js。或者,正如 一章中所提到,您可以[详细]
-
Bootstrap每天必学之弹出框(Popover)插件
所属栏目:[安全] 日期:2020-12-18 热度:69
Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠[详细]
-
Bootstrap每天必学之警告框插件
所属栏目:[安全] 日期:2020-12-18 热度:169
警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。 如果您想要单独引用该插件的功能,那么您需要引用 alert.js。或者,正如 一章中所提到,您可以引用[详细]
-
Bootstrap按钮组件详解
所属栏目:[安全] 日期:2020-12-18 热度:62
按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。 结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中。 按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.[详细]
-
Bootstrap每天必学之标签页(Tab)插件
所属栏目:[安全] 日期:2020-12-18 热度:202
标签页(Tab)通过结合一些 data 属性,您可以轻松地创建一个标签页界面。 "如果您想要单独引用该插件的功能,那么您需要引用 tab.js。或者,正如 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。" 一、用法 您可以通过以下两种方式启[详细]
-
Bootstrap网格系统详解
所属栏目:[安全] 日期:2020-12-18 热度:81
bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。bootstrap框架的网格系统工作原理: 1、数据行(.row)必须包含在容器(.container)中,以便其赋予合适的对齐方式和内距(padding)[详细]
-
Bootstrap每天必学之工具提示(Tooltip)插件
所属栏目:[安全] 日期:2020-12-18 热度:148
当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用。工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。[详细]