项目上要用这个东西,搞些来还真是有些麻烦,最主要对CSS不熟。
1.bootstrap modal
这个用起来还是比较方便的,比openWindow什么。。。
<html lang="en"> <head> <meta charset="utf-8"> <title>IN</title> <link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div id="example" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>This is a Modal Heading</h3> </div> <div class="modal-body"> <h4>Text in a modal</h4> <p>You can add some text here.</p> </div> <div class="modal-footer"> <a href="#" class="btn btn-success">Call to action</a> <a href="#" class="btn" data-dismiss="modal">Close</a> </div> </div> </div> </div> <p> <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a> </p> <script src="js/jquery/jquery-1.11.1.min.js"></script> <script src="js/bootstrap/js/bootstrap.min.js"></script> </body> </html>
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-
之后,例如data-backdrop=""
。
2.bootstrap tooltip/popover这两个还是差不多的
都需要初始化。
先来初始化
一个个的来也行,一起来也行。我注释掉的是一个一个来的
<script type="text/javascript"> $(function() { $('.container').tooltip({ selector : "[data-toggle=tooltip]", container : "body" }) $('.container').popover({ selector : "[data-toggle=popover]", container : "body" }) // $("#a2").popover(); // $("#a1").popover(); // $('#a3').tooltip(); }) </script>
来整个的吧
<html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap Modals Example</title> <meta name="description" content="Creating Modal Window with Bootstrap"> <link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery/jquery-1.11.1.min.js"></script> <script src="js/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function() { $('.container').tooltip({ selector : "[data-toggle=tooltip]", container : "body" }) $('.container').popover({ selector : "[data-toggle=popover]", container : "body" }) // $("#a2").popover(); // $("#a1").popover(); // $('#a3').tooltip(); }) </script> </head> <body> <div class="container"> <input id="a1" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?" value="123" /> <button id="a2" type="button" class="btn btn-default" data-title="test" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right</button> <div class="btn-group"> <button type="button" id="a3" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> </div> </div> </body> </html>
相关推荐
FlatLab是通用的bootstrap管理后台模板,使用扁平化设计理念。干净的后台元素内容位置,容易定制和...FlatLab可用于所有类型的web应用程序管理面板中,项目管理系统,管理仪表板应用程序的后端,CMS, CRM、商业网站后台等。
Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。 用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...
SlimBootstrap, 使用 Slim Pimple Twig 和NotORM的基本PHP应用程序的Bootstrap SlimBootstrap使用 Slim 。Pimple 。Twig 和NotORM的基本PHP应用程序的Bootstrap将 config/config.php.example 复制到 config/config....
一个功能强大的桌面应用程序,用于使用Bootstrap框架创建响应式网站。 Bootstrap Studio是一款功能强大的桌面应用程序,用于设计和制作网站原型。 它带有大量内置组件,您可以将其拖放以组装响应式网页。该应用程序...
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 ...
Bootstrap3是一个基于HTML、CSS和JavaScript的开源框架,可以帮助开发者快速构建响应式网站和Web应用程序。 《前端开发框架bootstrap3教程》将介绍Bootstrap3的基本概念和使用方法,包括网格系统、表单、导航、按钮...
网络应用程序引导程序先决条件节点吞咽$ npm install --g gulp鲍尔$ npm install -g bower建造第一步:安装前端库$ bower install 第二步:安装工具链$ npm install 第三步:生成初始编译文件$ gulp 第 4 步:开始...
基于EF+MVC+Bootstrap的通用管理系统。 Framework 业务无关的底层通用机制及功能 Model基类:提供数据传输和底层的最基本的基类及接口 DAL底层:基于EF code first,提供Repository泛型方法及写历史日志 Untility:...
易聊 具有node.js和bootstrap终端样式的基本聊天应用程序。 测验
第2章Bootstrap介绍 默认菜单 含有下拉列表和搜索框的菜单 按钮 警告框 主题 小结 第3章Knockout.js介绍 安装Knockout.js 基本示例 何为MVVM? 创建ViewModel 小结 第4章数据库应用 Entity Framework...
AngularMaterial是一个很棒的UI组件库,但是没有一些重要的功能,例如布局系统,CSS重置和一些CSS实用程序。 幸运的是,我们可以非常轻松地从Bootstrap 4中集成这些功能。 这可能是构建Angular应用程序的良好起点。...
待办事项 使用 Vue.js 和 Bootstrap 制作的基本待办事项应用程序 :calendar:
bootstrap-4-cdn-template 使用Bootstrap 4引导您的应用程序的基本模板。包含Bootstrap CSS&,JS,jQuery,Popper.js。
个人学习Bootstrap组件的一些记录,也算个人笔记,基本上也把代码打了一遍。当然这比冰山一角都还小,但是会使个人在应用css上有所提高,也会使页面美化一些。现在我还是初学阶段,如果有错误,还请大家多多指教。...
现代学习课程管理系统Web应用程序的精美管理后台用户界面Bootstrap 4模版。包含LMS应用程序可能需要的所有网站页面的示例,涵盖了任何学习应用程序中最重要的角色,学生和讲师。 学生申请页面示例 所有课程目录 面向...
bootstrap应用设计思路基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。 CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素...
带有 requirejs、jquery、grunt、flight、sass、bower 和 bootstrap 的基本 web 应用程序 快速启动 $ npm install $ grunt $ node server 在浏览器中打开 执照 麻省理工学院许可证 (MIT) 版权所有 (c) 2013 ...
-基本的Bootstrap主页模板。 -多功能网站模板。 一个免费的Bootstrap管理模板。 -滚动导航模板。 -在线商店主页模板。 -在线商店商品模板。 -Bootstrap边栏模板。 -一个简单的企业Bootstrap模板。 -入门组合模板。...