Question

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          <style>
          @media screen and (min-width:500px)
          {
             .col-xs-4
                 {
                    text-align:center;
                 }
          }


            @media screen and (min-width:700px)
          {
             .col-xs-4
                 {
                    text-align:center;
                    width:100%;
                 }
          }



           .col-xs-4{
            text-align:center;
           }
           div .col-xs-4:hover{

           }
           .btn-primary{
            width:100%;
           }
          </style>

        </head>
        <body>

        <div class="container-fluid">
          <h1>Hello World!</h1>
          <p>Resize the browser window to see the effect.</p>
          <div id="">
            <div class="col-xs-4"  style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#doctorVisit"; class="btn btn-primary">Doctor Visit</button></div>
            <div id="doctorVisit" class="collapse">
          <table class="table"; width:500px; height:300px; >
            <thead>
              <tr>
                <th>Sr. No.</th>
                <th>Visited with</th>
                <th>Time</th>
                <th>edit</th>
              </tr>
            </thead>
            <tbody>
              <tr class="success">
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
                <td>Doe</td>
              </tr>
              <tr class="danger">
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
                <td>Doe</td>
              </tr>
              <tr class="info">
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
                <td>Doe</td>
              </tr>
            </tbody>
          </table>
        </div>
            <div class="col-xs-4"  style="background-color:lavender;"><button type="submit"; id="pharmacyVisitBtn" data-toggle="collapse"; data-target="#pharmacyVisit"; class="btn btn-primary">Pharmacy Visit</button></div>
            <div id="pharmacyVisit" class="collapse">
          <table class="table"; width:500px; height:300px; >
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
                <th>edit</th>
              </tr>
            </thead>
            <tbody>
              <tr class="success">
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
                <td>Doe</td>
              </tr>
              <tr class="danger">
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
                <td>Doe</td>
              </tr>
              <tr class="info">
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
                <td>Doe</td>
              </tr>
            </tbody>
          </table>
        </div>
         <div class="col-xs-4"  style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#stockistVisit"; class="btn btn-primary">Stockist Visit</button></div>
            <div id="stockistVisit" class="collapse">
          <table class="table"; width:500px; height:300px; >
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
                <th>edit</th>
              </tr>
            </thead>
            <tbody>
              <tr class="success">
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
                <td>Doe</td>
              </tr>
              <tr class="danger">
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
                <td>Doe</td>
              </tr>
              <tr class="info">
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
                <td>Doe</td>
              </tr>
            </tbody>
          </table>
        </div>
          </div>
        </div>

        <script>
        function show()
        {
         alert ("hey");

        }
        </script>



        </body>
        </html>

请使用服务器运行上述内容。参考上面的代码。

Exaplaination：我希望在屏幕尺寸较小时将'data-target'更改为id为＃stockistVisit的div。我能用CSS做到吗？

如果我不能使用CSS，我可以使用javascript吗？

我也使用angularjs。可以用它来完成吗？

Answer 1

您无法使用媒体查询更改数据属性，但您可以使用JavaScript更改它（jQuery示例如下）。

$(window).resize(function() {
    if ($(this).width() < 500) $('target-here').data('blue', 1);
    else $('target-here').data('blue', 2);
});

.width()以像素为单位返回窗口宽度。使用一些简单的条件语句，您可以根据当前宽度将数据属性更改为不同的值。

使用CSS（第一个首选项）或javascript（secnd首选项）更改引导程序中的数据目标

1 个答案: