bootstrap学习之三—插件

【bootstrap学习之三—插件】的更多相关文章

bootstrap学习之三—插件

一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现modal,给外层的div赋予类.modal,.fade,内嵌两个div,分别赋予类.modal-dialog和.modal-content. .modal-content所在div中包含若干div,如.modal_header;.modal_body以及.modal_footer等二.下拉菜单(dropdo…

bootstrap学习笔记插件概述

Bootstrap插件概览在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也可以学习Bootstrap的js插件.利用Bootstrap数据api(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 站点引用bootstrap插件的方式有两种: 单独引用:使用Bootstrap的个别的*.js文件.一些插件和css组件依赖于其他插件.如果…

bootstrap学习——javascript插件篇

飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1. 引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞是选择的后者,原因:引入bootstrap.min.js文件并不大. 2. 先看模态框的效果,然后查看怎样使用动态实例. 用法非常easy: <1>直接复制动态实例的代码(当然要起码知道涉及到的一些类的作用,如.fade 类作用是弹出动画效果) <2>在你要点击的元素上加入:da…

Bootstrap学习js插件篇之滚动监听

1.滚动监听案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <div class="navbar-header"> <button clas…

Bootstrap学习js插件篇之标签页

简单的标签页代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a>…

Bootstrap学习js插件篇之提示框

案例受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬停到下面的链接上就可以看到工具提示了: 代码段: <script type="text/javascript"> $(function() { $('.tooltip-demo').tooltip({ selector: "[data-toggle=tooltip]&…

Bootstrap学习js插件篇之下拉菜单

案例通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" c…

Bootstrap学习 - JavaScript插件

模态框 <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="meLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content&q…

bootstrap学习笔记--bootstrap安装环境

Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Dow…

Bootstrap学习笔记系列1-------Bootstrap网格系统

Bootstrap网格系统学习笔记 [TOC] 简单网格先上代码再解释 <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8">  <link href="http://cdn.static.runoob.com/libs/bootstra…