脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 带关闭按钮

BootStrap实现带关闭按钮功能

 更新时间：2017年02月15日 11:26:22   投稿：mrr  
这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下

说明

通过使用一个象征关闭的图标，可以让模态框和警告框消失

示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
   <title>Bootstrap 101 Template</title>
   <!-- Bootstrap -->
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
  </head>
  <body>
  <div class="container">
  <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   </div>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

输出

以上所述是小编给大家介绍的BootStrap实现带关闭按钮功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 微信小程序canvas实现手写签名

    微信小程序canvas实现手写签名

    这篇文章主要为大家详细介绍了微信小程序canvas实现手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 关于JSONP跨域请求原理的深入解析

    关于JSONP跨域请求原理的深入解析

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题,这篇文章主要给大家介绍了关于JSONP跨域请求原理的相关资料,需要的朋友可以参考下
    2022-01-01
  • 如何确保JavaScript的执行顺序 之实战篇

    如何确保JavaScript的执行顺序 之实战篇

    我曾在文章《如何在多个页面使用同一个HTML片段 - 续》的最后提到JavaScript顺序执行的特性。虽然现代浏览器可以并行的下载JavaScript（部分浏览器），但考虑到JavaScript的依赖关系，他们的执行依然是按照引入顺序进行的。
    2011-03-03
  • 取键盘键位ASCII码的网页

    取键盘键位ASCII码的网页

    取键盘键位ASCII码的网页...
    2007-07-07
  • JS中如何判断传过来的JSON数据中是否存在某字段

    JS中如何判断传过来的JSON数据中是否存在某字段

    这篇文章主要介绍了JS中如何判断传过来的JSON数据中是否存在某字段,需要的朋友可以参考下
    2014-08-08
  • uni-app表单组件(form表单)用法举例

    uni-app表单组件(form表单)用法举例

    平时我们经常会使用到表单,下面这篇文章主要给大家介绍了关于uni-app表单组件(form表单)的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JS提交form表单实例分析

    JS提交form表单实例分析

    这篇文章主要介绍了JS提交form表单的方法,结合实例形式简单分析了页面加载时提交表单及通过链接提交表单的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • 支付宝小程序tabbar底部导航

    支付宝小程序tabbar底部导航

    这篇文章主要为大家详细介绍了支付宝小程序重写tabbar底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript 浮点数运算 精度问题

    JavaScript 浮点数运算 精度问题

    JavaScript小数在做四则运算时，精度会丢失，这会在项目中引起诸多不便，先请看下面脚本。
    2009-10-10
  • 加随机数引入脚本不让浏览器读取缓存

    加随机数引入脚本不让浏览器读取缓存

    不让浏览器读取缓存，故采用家随机数方式引入脚本的方式，此法适用于及时刷新不读缓存的情况
    2014-09-09

最新评论