`
clxy
  • 浏览: 80018 次
社区版块
存档分类
最新评论

Bootstrap笔记(四)

阅读更多

★:Tooltip

这个纯粹出于自己的需要。在form提交时要对各个控件进行有效验证,验证结果里的那些错误信息,希望能够用Tooltip来显示在控件的旁边。默认的黑底白字显得很别扭,不大合适。

由于Bootstrap本身没有开放这个接口,实现起来甚是麻烦。网上查下来,动态改颜色的,替换html模板的,改源码的...五花八门。最终选择了修改Bootstrap源代码的方式。因为我觉得这才是“应该的”模样,哈。

1. 修改Bootstrap的源码。在tooltip的applyPlacement方法中如下位置添加

...
$tip.offset(offset).addClass(placement).addClass('in');
// 添加css。@see http://stackoverflow.com/questions/12170357/
if (this.options.cssClass) {
	$tip.addClass(this.options.cssClass);
}
...


2. 调用示例

field.tooltip({
	...
	cssClass : 'error',
	...
}).tooltip('show');


3. error的css请参考前面的内容。
效果图

 
日文是因为在调试国际化。

Bootstrap笔记(三) Bootstrap笔记(五)

 

 

  • 大小: 62.8 KB
分享到:
评论

相关推荐

    bootstrap笔记

    bootstrap笔记Bootstrap 移动设备优先。 所有列默认都是左浮动 为确保适当的绘制和触屏缩放,加入下面的meta标签

    李炎恢Bootstrap讲义笔记

    这个“李炎恢Bootstrap讲义笔记”很可能包含了李炎恢老师关于Bootstrap的深入讲解和实践指导,帮助学习者掌握这一强大的工具。 Bootstrap的核心特性包括一套丰富的预定义的CSS样式、JavaScript组件和字体图标,这些...

    bootstrap学习笔记

    ### Bootstrap 学习笔记知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常流行的前端开发框架,它基于HTML、CSS及JavaScript构建,旨在帮助开发者快速搭建响应式的网站和应用。通过预定义的样式和布局,...

    Bootstrap笔记特殊场景代码编写可复制

    bootstrap,Bootstrap笔记,Bootstrap笔记特殊场景代码编写可复制,感兴趣的同学可以下载研究

    李炎恢Bootstrap讲义pdf笔记

    Bootstrap是世界上最受欢迎的前端开发框架之一,由Twitter的开发者创建并开源。这个框架极大地简化了网页设计和响应式布局的工作,让开发者能够快速构建美观且跨设备兼容的网站。李炎恢老师的Bootstrap讲义深入浅出...

    bootstrap学习笔记-html5

    这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料,非常适合初学者入门。接下来,我们将深入探讨这两个重要主题。 HTML5(超文本标记语言第五版)是网页开发的...

    bootstrap 教程,带笔记

    Bootstrap是一个流行的前端框架,它为开发者提供了一套简洁、直观和强大的工具,以便于快速和容易地开发网页。它利用HTML、CSS和JavaScript编写,特别强调移动设备优先的设计,适用于需要响应式设计的项目。...

    bootstrap笔记(每一个知识点都有单独的示例)非常全

    这个“bootstrap笔记”压缩包包含了全面的学习资料,每个知识点都配以独立的示例,使得学习过程更加直观和易懂。以下是Bootstrap框架的一些核心知识点: 1. **栅格系统**:Bootstrap的栅格系统是页面布局的基础,它...

    bootstrap 笔记2.docx

    ### Bootstrap 笔记知识点梳理 #### 一、Bootstrap 概述 - **定义与来源**:Bootstrap 是由 Twitter 公司的两位工程师 Mark Otto 和 Jacob Thornton 开发的一款免费开源前端框架。它基于 HTML、CSS、JavaScript,...

    bootstrap笔记总结

    Bootstrap 笔记总结 Bootstrap 是一个流行的前端框架,用于快速构建响应式的 web 应用程序。下面是 Bootstrap 相关的知识点总结: Base CSS * Bootstrap 提供了一个基本的 CSS 框架,使得开发者可以快速构建响应...

    李炎恢bootstrap 讲义笔记代码全套

    李炎恢bootstrap 讲义笔记代码全套,李炎恢 bootstrap 讲义 代码

    李炎恢Bootstrap讲义笔记解压.zip

    根据提供的文件信息,“李炎恢Bootstrap讲义笔记解压.zip”这一资料主要涉及的是Bootstrap框架的相关内容,由李炎恢老师讲解。考虑到该文件被标记为“讲义笔记”,我们可以推测这是一份针对Bootstrap框架的教学材料...

    bootstrap一些笔记

    在提供的代码片段中,我们可以看到Bootstrap的一些核心组件的使用,包括导航栏(navbar)、按钮(button)、下拉菜单(dropdown)和提示控件(tooltip)。 1. **导航栏(Navbar)**:Bootstrap的导航栏是一个强大的...

    bootstrap课堂笔记代码

    这个“bootstrap课堂笔记代码”压缩包显然包含了有关如何使用Bootstrap学习响应式网页设计的资料,非常适合初学者。 响应式布局是现代网页设计的核心概念,它允许网站在不同设备(如桌面、平板电脑和手机)上自动...

    Bootstrap笔记[收集].pdf

    Bootstrap预设了四个屏幕尺寸阈值:超小屏幕(小于768px)、小屏幕(大于等于768px)、中等屏幕(大于等于992px)和大屏幕(大于等于1200px)。你可以使用`.col-xs-*`, `.col-sm-*`, `.col-md-*`, `.col-lg-*`类来...

Global site tag (gtag.js) - Google Analytics