Bootstrap自带的那些常用插件

Bootstrap自带的那些常用插件。

模态框

模态框的HTML代码放置的位置

务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。

HTML代码:

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

注意:

  • 通过为模态框设置 .bs-example-modal-lg.bs-example-modal-sm来控制模态框的大小。
  • 通过 .fade类来控制模态框弹出时的动画效果(淡入淡出效果)。
  • 通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。

调用方式:

1.通过data属性

通过在一个触发弹出模态框的元素(例如:按钮)上添加 data-toggle="modal"属性,然后设置 data-target="#foo"属性或 href="#foo"属性,用来指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">显示模态框</button>

2.通过JS代码调用

$(‘#myModal‘).modal("show");  // 显示
$(‘#myModal‘).modal("hide")   // 隐藏

常用参数:

名称 可选值 默认值 描述
backdrop true/false/‘static‘ true false表示有没有遮罩层,‘static‘表示点击遮罩层不关闭模态框
keyboard true/false true 键盘上的 esc 键被按下时关闭模态框。
show true/false true 模态框初始化之后就立即显示出来。

方法:

$(‘#myModal‘).modal({
  keyboard: false
})

轮播图

HTML代码:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

可以在为图片添加介绍信息:

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

方法:

设置切换间隔为2秒,默认是5秒。

$(‘.carousel‘).carousel({
  interval: 2000
})

原文地址:https://www.cnblogs.com/yunwangjun-python-520/p/11116235.html

时间: 2024-10-10 06:56:39

Bootstrap自带的那些常用插件的相关文章

转:jQuery常用插件

原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome      上传时间:2014-06-15 Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能,使用方法很简单 $(document).ready(function() { $('#goods').cycle(); }); 博文地址:http://blog.csdn.net/itmyho

Visual Studio Code 常用插件整理

常用插件说明: 一.HTML Snippets 超级使用且初级的H5代码片段以及提示 二.HTML CSS Support  让HTML标签上写class智能提示当前项目所支持的样式 三.Debugger for Chrome  让vscode映射chrome的debug功能,静态页面都可以用vscode来打断点调试.配饰稍微复杂一点 四.jQuery Code Snippets jquery提示工具 五.Path Intellisense 自动路径补全.默认不带这个功能 六.Npm Intel

CDN公共库、前端开发常用插件一览表(VendorPluginLib)

=======================================================================================前端CDN公共库====================================================================================== 为什么使用前端CDN公共库: 使用前端CDN增加网页的并行载入速度,减少本地服务器的负担,节省流量.我们把静态资源放到自己的服务器上面固

VSCode 常用插件

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化.软件跨平台支持 Win.Mac 以及 Linux. VSC中文网:http://www.vscode.org/ vscode  作为一款逐渐火热的编辑器.它的特点免费.开源.多平台,以及集成git,代码调试,插件

编程工具的常用插件

Visual Studio Code 该编辑器也集成了所有一款现代编辑器所应该具备的特性,包括语法高亮(syntax high lighting),可定制的热键绑定(customizable keyboard bindings),括号匹配(bracket matching)以及代码片段收集(snippets).Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持. 该编辑器支持多种语言和文件格式的编写,截止2019年9月,已经支持了如下37种语言或文件:F#.HandleB

Notepad++前端开发常用插件介绍

Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Coding,一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件,是前端开发神器.它无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验.现在可以在Notepad++

Sublime Text3快捷键以及常用插件

工若善其事,必先利其器.做为一个web前端开发人员,必须有一个得心应手的编码工具,本人推荐Sublime Text3和WebStorm,但WebStorm太过智能和耗性能了对初学者来说弊大于利,所以我们聊聊Sublime Test sublime text值强大是因为他的插件,提到Sublime Text插件安装,就不得不提Package Control,装sublime text第一件事就是装Package Control,它是 Sublime Text 的包管理器,你用它可以轻松地找到你想要

Atom编辑器的安装及常用插件

一.atom安装: github安装链接:https://github.com/atom/atom Debian Linux (Ubuntu) Currently only a 64-bit version is available. Download atom-amd64.deb from the Atom releases page. Run sudo dpkg --install atom-amd64.deb on the downloaded package. Launch Atom u

eclipse常用插件

官方网站http://www.eclipse.org/downloads/index.php下载eclipse的最新版本 Eclipse 项目资源中心:http://www.ibm.com/developerworks/cn/opensource/top-projects/eclipse.html 常用插件下载地址:Lombo http://www.objectlearn.com/ TomcatPlugin http://www.sysdeo.com/eclipse/tomcatPlugin.h