Bootstrap工具提示框

    xiaoxiao2021-03-25  90

    Bootstrap工具提示框


    基本用法(data-toggle、data-placement)

    1.新建一个web项目ch25,把ch24中css、js文件等复制过来。

    2.打开ch25中的demo01.html,设置工具提示框的基本用法。

    <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>demo01</title>

    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>

    <script language="JavaScript" src="js/bootstrap.min.js"></script>

        <script language="JavaScript">

    //如果一篇文章里放很多提示的时候

    //只用声明式的话会导致页面性能存在问题。

         $(function () {

      $('[data-toggle="tooltip"]').tooltip();

    //选择这个按钮,给它加了一个tooltip()方法。

    });

        

        </script>

    </head>

    <body>

    <div style=" margin: 200px;">

    //容器内浏览器边界的距离是200像素

    <button type="button" class="btn btn-danger" title="向左显示" data-toggle="tooltip" data-placement="left">向左</button>

    //需要添加data-toggle和data-placement这两个属性。

    //data-placement是决定提示框的方向

    //当然加了这两个属性还是不起作用的,还要配合JavaScript一起来用,     

    <button type="button" class="btn btn-danger" title="向上显示" data-toggle="tooltip" data-placement="top">向上</button>

    </div>

    </body>

    3.运行效果


    Js用法

      $(“select”).tooltip()

      $(“select”).tooltip(‘show’)

      $(“select”).tooltip(‘hide’)

      $(“select”).tooltip(‘toggle’)

      $(“select”).tooltip(‘option’)

    1.复制demo01.html到新建的demo02.html中。

    2.js用法实例(当点击“显示”这个button的时,显示“向左显示”和“向右显示”的提示框。)

    <body>

    <div style=" margin: 200px;">

    <button type="button" class="btn btn-danger" title="向左显示"  data-toggle="tooltip" data-placement="left">向左</button>

    <button type="button" class="btn btn-danger" title="向上显示" data-toggle="tooltip" data-placement="top">向上</button>

    <br/>

    <button type="button" class="btn btn-danger" id="showbtn">显示</button>

    </div>

    </body>

    3.运行效果

    转载请注明原文地址: https://ju.6miu.com/read-40553.html

    最新回复(0)