bootstrap 功能詢問

bootstrap

神威 2018-06-27 16:01:49 ‧ 2039 瀏覽

分享至

大家好:
請問bootstrap有沒有這樣的功能
附圖
若滑鼠點到綠色框框，他的圖片就會現是在紅色大框框內
找了很久都找不到，像請教一下大家，謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-06-27 16:04:30

最佳解答

這應該不是bootstrap的用途，而是javascript的

用jQuery示範如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>  
</head>
<body>
  1 <div class="imgs" style="border:1px solid green; width:100px; height:100px;"><img width="100" src="https://goo.gl/DBU4zT"/></div>
  2 <div class="imgs" style="border:1px solid green; width:100px; height:100px;"><img width="100" src="https://goo.gl/wWGqSa"/></div>
  3 <div class="imgs" style="border:1px solid green; width:100px; height:100px;"><img width="100" src="https://goo.gl/wtP6E5"/></div>  
  show
  <div class="show-img" style="border:1px solid red;width:100px; height:100px">    
  </div>
</body>
</html>
<script>
  $(".imgs").click(function(){   
    $('.show-img').html($(this).html());
  });  
</script>

回應 3
分享
檢舉

神威 iT邦研究生 4 級 ‧ 2018-06-28 08:31:33 檢舉

謝謝大家，我懂了
本來想說學了bootstrap就想甚麼東西都套套看..哈哈...
這樣我知道有些東西還是只能javascript寫的

神威 iT邦研究生 4 級 ‧ 2018-06-28 14:56:30 檢舉

大大好:
想在請教一下

 <style>
         #img1{
           width: 200px;
           height: 150px;
          }
 </style> 
<body>
  
      <div class="imgs"><img id="img1" src="../pic/about01.jpg"/></div>
   <div class="imgs" ><img id="img1" src="../pic/about02.jpg"/></div>
   <div class="imgs" ><img id="img1" src="../pic/about03.jpg"/></div> 
    <br><br>
  <div class="show-img"  style="width:600px; height:450px">   
  </div>
</body>
</html>
<script>
      
  $(".imgs").click(function(){
         $('.show-img').html($(this).html());
          $('#img1').width(600);
          $('#img1').height(450);
  }); 
   </script>

以上是我的程式碼，我希望點綠色框框時，圖跑到紅色框框會變大
我用了

 $('#img1').width(600);
 $('#img1').height(450);

但他只會原圖變大阿.....
紅框的圖還是沒變大，位甚麼呢?

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-06-29 09:32:55 檢舉

要再詢問的話，另開主題吧～

登入發表回應

froce

iT邦大師 1 級 ‧ 2018-06-27 16:17:26

我會這樣寫啦

<div id="pic_picker">
    <div>
        <img src="A.pic">
    </div>
    <div>
        <img src="B.pic">
    </div>
</div>
<div id="display">
    <img>
</div>

<script>
    $('#pic_picker>div').click(function(){
        var src = $(this).find('img').attr('src');
        $('#display').find('img').attr('src', src);
    });
</script>

換一下css，弄好看一點
https://jsbin.com/nequmuveze/1/edit?html,output

回應 3
分享
檢舉

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-06-27 16:25:01 檢舉

$('#display').attr('src') = src; 這個錯了吧～
替換url的作法也怪怪的，一開始給個沒有url 的img?

froce iT邦大師 1 級 ‧ 2018-06-27 16:29:06 檢舉

沒有url的img是可以的，他不會顯示，動態給attr也是可以的，這些我實際有用過。
只是懶得找圖在jsbin測試而已。
不過還真的語法寫錯。
下面這樣才對。
$('#display').find('img').attr('src', src);

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-06-27 16:35:51 檢舉

對啦，只是display是div, 不是img~

登入發表回應

Homura

iT邦高手 1 級 ‧ 2018-06-27 16:24:40

是有類似的功能....
在List-group的javascript-behavior
https://getbootstrap.com/docs/4.1/components/list-group/#javascript-behavior

他也是能套圖片...
隨便寫個範例

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <title> test</title> 
    </head>
    <body>      
        <style>
        .list-group-item{
            width: 200px;
        }
        </style>
        <div class="row">
            <div class="col-2">
                <div class="list-group" id="list-tab" role="tablist">
                    <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">
                        <img width="30" height="40" src="https://ithelp.ithome.com.tw/storage/image/logo.svg">
                    </a>
                    <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">
                        <img width="30" height="40" src="https://ithelp.ithome.com.tw/storage/image/ironman9thsidebar.png">
                    </a>
                    <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">
                        <img width="30" height="40" src="https://ithelp.ithome.com.tw/storage/image/profile.jpg">
                    </a>
                    <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
                </div>
            </div>
            <div class="col-8">
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                        <img src="https://ithelp.ithome.com.tw/storage/image/logo.svg">
                    </div>
                    <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
                        <img  width="90" height="120"  src="https://ithelp.ithome.com.tw/storage/image/ironman9thsidebar.png">
                    </div>
                    <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
                        <img src="https://ithelp.ithome.com.tw/storage/image/profile.jpg">
                    </div>
                    <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">10</div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    </body>
</html>