大家好:
請問bootstrap有沒有這樣的功能
附圖
若滑鼠點到綠色框框，他的圖片就會現是在紅色大框框內
找了很久都找不到，像請教一下大家，謝謝
已邀請的邦友 {{ invite_list.length }}/5
這應該不是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>
謝謝大家，我懂了
本來想說學了bootstrap就想甚麼東西都套套看..哈哈...
這樣我知道有些東西還是只能javascript寫的
大大好:
想在請教一下
<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);
但他只會原圖變大阿.....
紅框的圖還是沒變大，位甚麼呢?
要再詢問的話，另開主題吧～
我會這樣寫啦
<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
是有類似的功能....
在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>
iThome鐵人賽
看影片追技術