data-toggle

bootstrap-js(5)工具提示tooltip

由 帅比萌擦擦* 提交于 2020-03-22 12:36:15
实例 当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。 <!DOCTYPE HTML> <html> <head> <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" > <script src="/scripts/jquery.min.js"></script> <script src="/scripts/bootstrap.min.js"></script> </head> <body> <h4>工具提示（Tooltip）插件 - 锚</h4> 这是一个 <a href="javascript:void(0);" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip"> 默认的 Tooltip </a>. 这是一个 <a href="javascript:void(0);" class="tooltip-test" data-toggle="tooltip" data-placement=

BootStrap--tooltip

由 人走茶凉 提交于 2020-03-22 12:35:28
提示框 　　提示框的基本使用方式为： <span data-toggle="tooltip" data-original-title="this is alert content">test message</span> 　　data-original-title可以直接写为title,仍然能正常使用，源码中优先查找前者，前者不存在就会查找title 　　提示框不提供HTML触发方式只能通过JS来进行触发： $("[data-toggle='tooltip']").tooltip(); 　　提示框的关键属性为data-original-title="content",该属性就是我们要提示的信息，如果不存在该属性则回去检索title属性，title的属性值同样可以用来显示 　　由于提示框只能通过JS来进行触发，而且data-toggle在BootStrap中就是一个说明功能的属性，所以通常提示框的元素上都会设置data-toggle="tooltip"，这只是为了可以选中这个DOM节点，也可以设置为class="xx" 　　提示信息默认是在元素上边显示的我们可以通过属性data-placement来进行更改,它有五个值分别为top、bottom、left、right、auto,如果设置为data-placement="auto"则选择适当的位置显示提示信息 　

Bootstrap4速成笔记五 Listgroup,Modal,Nav,NavBar

由 醉酒当歌 提交于 2020-02-27 04:22:04
目录 Listgroup列表群组组件 Modal对话框组件 Nav导航与NavBar导航栏组件 Listgroup列表群组组件 使用list-group可以创建一个列表群组 使用方法：可以使用无序列表或者div进行设置，在这里使用的是div+a的设置，如需要使用无序列表可以直接看下面的源码 首先在外面套一个类为"list-group"，然后在内部使用a标签设置每个列表的内容，每个a标签都要设置类为"list-group-item"设置成列表项 如果想要设置悬停的hover效果，可以在每个列表项的类中加入"list-group-item-action" < div class = " component demo " > < div class = " list-group " > < a href = " # " class = " list-group-item list-group-item-action " > HTML </ a > < a href = " # " class = " list-group-item list-group-item-action " > CSS </ a > < a href = " # " class = " list-group-item list-group-item-action " > JS </ a > </ div > </

Bootstrap--下拉菜单.dropdown

由 故事扮演 提交于 2020-02-07 04:37:16
下拉菜单.dropdown .dropdown <下拉菜单触发器button+下拉菜单ul> .dropdown　　　　包裹层 .dropdown-toggle 　　 下拉菜单触发器 　　　　data-toggle="dropdown 自定义属性 可以与js关联起来 .dropdown-menu 　　下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a

4.11、Bootstrap V4自学之路-----组件---导航

由 孤街醉人 提交于 2019-12-16 19:11:39
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 关于易用性 如果你使用导航来制作一个导航栏，请确保向 <ul> 的逻辑父元素添加了 role="navigation" 或者给整个导航条包裹一个 <nav> 元素。不要在 <ul> 的本身上面添加这个role，因为这将阻止它被使用辅助技术的用户声明为一个真正的列表。 基础导航 通过扩展基础的 .nav 组件，实现你自己的导航样式。所有的Bootstrap的导航组件都建立在这个基础上。包含禁用状态，但是 不包含激活状态 。 <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Another link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> 伪代码附上：（看结构） 《ul class="nav"》 --| 《li class=

前端知识之 bootstrap

由 心不动则不痛 提交于 2019-12-13 10:38:03
前端知识之 bootstrap 01. bootstrap的介绍和下载 01.1 介绍 Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。 注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。 使用Bootstrap的好处： Bootstrap简单灵活，可用于架构流行的用户界面，具有 友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。 01.2 下载 bootstap英文官方: https://getbootstrap.com/ bootstrap中文官网： http://www.bootcss.com/ 下载地址: http://v3.bootcss.com/getting-started/#download 注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码 和 sass项目，只需要下载生产环境的Bootstrap即可。 下载完成以后的目录如下： bootstrap/dist/ ├── css/ │ ├── bootstrap.css #

Bootstrap中的data属性

由 ぃ、小莉子 提交于 2019-12-05 17:34:57
Bootstrap中的data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式 标签的 class="xxx" 属性，主要是用来使用bootstrap的css样式，以及作为一个可识别对象对象的类名标识。 标签的 data-[xx]="yy" 属性，主要是用来使用和调用bootstrap的组件和插件，即使用bootstrap.js来实现一些交互效果。 Bootstrap 常见data属性 data-toggle data-toggle指以什么事件类型触发,常用的如下。 data-toggle="dropdown"//下拉菜单 data-toggle="model" //模态框事件 data-toggle="tooltip"//提示框事件 data-toggle="tab"//标签页 data-toggle="collapse"//折叠 data-toggle="popover"//弹出框 data-toggle="button"//按钮事件 一般事件会作用到一个标签对象，如果是其他标签对象，就需要使用data-target指事件的标签目标。所以data-loggle和data-target有时会结合一起使用。如下: <button class

bootstrap.js学习笔记

由 人走茶凉 提交于 2019-12-05 12:04:08
模态弹出框 Bootstrap框架中的模态弹出框，分别运用了“ modal ”、“ modal-dialog ”和“ modal-content ”样式，而弹出窗真正的内容都放置在“ modal-content ”中，其主要又包括三个部分： ☑ 弹出框头部 ，一般使用“ modal-header ”表示，主要包括标题和关闭按钮 ☑ 弹出框主体 ，一般使用“ modal-body ”表示，弹出框的主要内容 ☑ 弹出框脚部 ，一般使用“ modal-footer ”表示，主要放置操作按钮 <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal

bootstrap小结

由 ℡╲_俬逩灬. 提交于 2019-12-05 09:10:19
11月23日 天气：温和 心情：还好 心态： 没崩 （因为半天就可以回家了） 最近一周温习了bootstrap的种种，基本算是搞完了。 **附上今天随手做的小练习：** [机试题.zip][1] [1]: https://www.zhushuaiqi.xyz/usr/uploads/2019/11/866022028.zip 还有一个项目等着去做，所以先做一个简单些的bootstrap总结。具体如下： **叨叨半天了，正题：** ## 基础部分 ## 1.首先是引入，这个不用说了，link。 2.其次是 js 的引入，由于我上官网查找了一翻，发现 bt 的所有 js，插件等等都是基于 jQ 写的，所以注意引入不管什么插件都要先引入 jQ。 基于媒体查询 3.row 为行，col 为列，一个 row 中有 12 等份的 col，安排份数超过 12 行就换行。 默认居中 4.对应媒体查询： xs：超小屏幕（<768px）xs sm：小屏幕（>=768px<992px）sm md：中等屏幕（>=992px<1200px）md lg：大屏幕（>=1200px）lg 5.row col 等份不能加小数点（亲测）。 **6.样式因为是封装好的，调整源码需要翻几 w 甚至更多行代码（具体没看），所以我在测试阶段就赶紧试了样式微调，因为封装的虽多，但是毕竟多的不一定就是你想要的，然后发现！样式可控

Undefined attribute name (data-toggle)

由 匿名 (未验证) 提交于 2019-12-03 08:48:34
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am using Twitter bootstrap in JSP(Java Server Pages) in eclipse. I am trying to use twitter log in/signup form in navbar(navigation-bar), but it gives a warning Undefined attribute name (data-toggle) Following code gives warning data-toggle="dropdown" . 回答1: Eclipse does not recognize this attribute, but you can configure the HTML Validation preferences to ignore it. Under Preferences for HTML Files --> Validation there is an option to ignore specified attribute names. If you want you can enter a pattern here such as data-* . 回答2: This
订阅 data-toggle