Bootstrap ile resim içine buton ve link verme nasıl yapılır?

UNVDLykia · 25 Aralık 2020

Merhabalar arkadaşlar. Kendimi geliştirmek için bir site yapıyorum. Lakin yaparken başlıkta belirttiğim isteklerimi yapamadım. Destek olur musunuz?
İsteğim;
Aşağıda belirttiğim kısımlara bir buton eklemek ve kullanıcı o butona tıkladığında ilgili sayfaya gitmesi.
İkinci isteğim ise bir resime buton eklemeden üstüne geldiğinde opacity: 0.85 olan bir hover efekti çıkması ve tıklandığında ilgili sayfayı açması.

Aşağıya hazırlamış olduğum kodları paylaşıyorum. Yardımcı olabileceklere teşekkür ederim.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<title>deneme1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
<!-- aşağıda nav barın sitede çalışmasını sağlayan kodlar bulunmakta -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a.
class="navbar-brand" href="#">
MCOLLECTION.
</a>
<button.
class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span.
class="navbar-toggler-icon">
</span>
</button>
<div.
class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li.
class="nav-item dropdown">
<a.
class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Erkek Giyim.
</a>
<div.
class="dropdown-menu" aria-labelledby="navbarDropdown">
<a.
class="dropdown-item" href="#">
Üst Giyim.
</a>
<a.
class="dropdown-item" href="#">
Alt Giyim.
</a>
<div.
class="dropdown-divider">
</div>
<a.
class="dropdown-item" href="#">
Daha fazlasını mı arıyorsunuz?
</a>
</div>
</li>
<li.
class="nav-item dropdown">
<a.
class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Kadın Giyim.
</a>
<div.
class="dropdown-menu" aria-labelledby="navbarDropdown">
<a.
class="dropdown-item" href="#">
Üst Giyim.
</a>
<a.
class="dropdown-item" href="#">
Alt Giyim.
</a>
<div.
class="dropdown-divider">
</div>
<a.
class="dropdown-item" href="#">
Daha fazlasını mı arıyorsunuz?
</a>
</div>
</li>
<li.
class="nav-item dropdown">
<a.
class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Genç Giyim.
</a>
<div.
class="dropdown-menu" aria-labelledby="navbarDropdown">
<a.
class="dropdown-item" href="#">
Üst Giyim.
</a>
<a.
class="dropdown-item" href="#">
Alt Giyim.
</a>
<div.
class="dropdown-divider">
</div>
<a.
class="dropdown-item" href="#">
Daha fazlasını mı arıyorsunuz?
</a>
</div>
</li>
<li.
class="nav-item dropdown">
<a.
class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Çocuk Giyim.
</a>
<div.
class="dropdown-menu" aria-labelledby="navbarDropdown">
<a.
class="dropdown-item" href="#">
Üst Giyim.
</a>
<a.
class="dropdown-item" href="#">
Alt Giyim.
</a>
<div.
class="dropdown-divider">
</div>
<a.
class="dropdown-item" href="#">
Daha fazlasını mı arıyorsunuz?
</a>
</div>
</li>
<li.
class="nav-item">
<a.
class="nav-link" href="#">
Fırsatlar.
</a>
</li>
</ul>
<form.
class="form-inline my-2 my-lg-0">
<input.
class="form-control mr-sm-2" type="Moda Mcollectıon'da!" placeholder="Moda Mcollectıon'da!" aria-label="Moda Mcollectıon'da!">
<button.
class="btn btn-outline-success my-2 my-sm-0" type="submit">
Ara.
</button>
</form>
</div>
</nav>

<!-- aşağıda nav barın altında bulunan sliderın kodları bulunmakta-->

<div id=container>

<header>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>

<div class="carousel-inner">

<div class="carousel-item active">
<img src="images/header.png" class="d-block w-100" alt="...">
</div>

<div class="carousel-item">
<img src="images/erkekgiyim.png" class="d-block w-100" alt="...">
</div>

<div class="carousel-item">
<img src="images/kadingiyim.png" class="d-block w-100" alt="...">
</div>

<div class="carousel-item">
<img src="images/cocukgiyim.png" class="d-block w-100" alt="...">
</div>

</div>

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>

<span class="sr-only">
Previous.
</span>

</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true">
</span>

<span class="sr-only">
Next.
</span>
</a>
</div>
</header>
<section>
<!-- aşağıda sliderın altında bulunan bilgilendirme kesitinin kodları bulunmakta -->
<main>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item list-group-item-secondary flex-fill text-center">Ücretsiz İade & Mağazada Değişim </li>
<li class="list-group-item list-group-item-secondary flex-fill text-center">200TL Ve Üzeri Kargo Ücretsiz</li>
<li class="list-group-item list-group-item-secondary flex-fill text-center">Yazılar başka bir yerden alıntılanmıştır</li>
<li class="list-group-item list-group-item-secondary flex-fill text-center">2018 & 2019 Müşteri Deneyimini En İyi Yöneten Marka Ödülü</li>
<li class="list-group-item list-group-item-secondary flex-fill text-center">Çağrı Merkezinden Sipariş 0850 208 71 71</li>
</ul>

<!-- aşağıda anasayfa içerinde bilgilendirme kesitinin altında bulunan 10 adet resimin kodları bulunmakta -->

<div class="mx-auto" style="width:auto;">
<img src="images/anasayfaH.png" class="img-fluid mr-md-3 " alt="Responsive image">
<img src="images/anasayfaF.png" class="img-fluid mr-md-4 " alt="Responsive image">
<img src="images/anasayfaG.png" class="img-fluid mr-md-4 " alt="Responsive image">
<img src="images/anasayfa1.png" class="img-fluid mr-md-3 " alt="Responsive image">
<img src="images/anasayfaK.png" class="img-fluid mr-md-5 " alt="Responsive image">
<img src="images/anasayfaL.png" class="img-fluid mr-md-5 " alt="Responsive image">
<img src="images/anasayfaM.png" class="img-fluid mr-md-5 " alt="Responsive image">
<img src="images/anasayfaJ.png" class="img-fluid mr-md-3 " alt="Responsive image">
<img src="images/anasayfaN.png" class="img-fluid mr-md-4 " alt="Responsive image">
<img src="images/anasayfaO.png" class="img-fluid mr-md-4 " alt="Responsive image">
</div>

<!-- aşağıda 10 adet resimin altında bulunan "kampanyalı ürünler" kısımının üsteki resimlerden ayıran resimin kodu bulunmakta -->

<img src="images/anasayfaE.png"class="img-fluid mr-md-3" alt="Responsive image">

<!-- aşağıda kampanyalı ürünler altında olan 1.sayfa 24 adet resimin kodu bulunmakta -->

<div class="mx-auto" style="width: auto;">
<img src="images/1.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/2.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/3.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/4.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/5.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/6.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/7.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/8.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/9.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/10.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/11.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/12.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/13.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/14.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/17.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/16.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/20.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/18.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/19.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/21.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/22.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/23.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/24.png" class="img-fluid mr-md-7 " alt="Responsive image">
<img src="images/25.png" class="img-fluid mr-md-7 " alt="Responsive image">

<!-- aşağıda kampanyalı ürünler kısmında kullanıcının daha fazla içerik görmesini sağlayacak olan butonların kodları bulunmakta -->

<div class="btn-toolbar justify-content-center" style="margin-top: 20px;"role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
</div>
</div>
<button type="button" class="btn btn-secondary btn-lg btn-block" style="margin-top: 20px;">
Daha Fazlası İçin Tıklayın.
</button>
</div>

<div class="card-deck" style="margin-top: 20px;">
<div class="card">
<img src="images/cocukgiyim.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
<p class="card-text">
<small class="text-muted">
Last updated 3 mins ago.
</small>
</p>
</div>
</div>
<div class="card">
<img src="images/erkekgiyim.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">
Card title.
</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text">
<small class="text-muted">
Last updated 3 mins ago.
</small>
</p>
</div>
</div>
<div class="card">
<img src="images/kadingiyim.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">
Card title.
</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
</p>
<p class="card-text">
<small class="text-muted">
Last updated 3 mins ago.
</small>
</p>
</div>
</div>
</div>

</main>
</section>
</div>
<footer>
<div class="footericerik">
<h3>MCOLLECTION</h3>
<p>Tasarımın Hayat Bulduğu Nokta</p>
</div>
<div class="footerbutonu">
<p>2020 | Tüm Hakları Saklıdır© <span>Designed by Atakan</span></p>
</div>
</footer>

</body>
</html>

CSS:

*{
box-sizing: border-box;
overflow-x: hidden;
}

html{
overflow-x : hidden;
}

main{
margin-top: 0px;
width: 100%;
background-color: mistyrose;
}

.mr-md-3.
{
margin-top: 20px !important;
margin-bottom: 0px;

}
.mr-md-4 {
padding-left: 58px;
margin-bottom: 0px;
margin-top: 20px;
}

.mr-md-5 {
padding-left: 58px;
margin-top: 20px;
width: 580px;
}

.mr-md-7 {
margin-top: 20px;
padding-left: 39px;
}
/* AŞAĞIDA HTML DE "FOOTER" OLARAK BELİRTİLEN KODLARIN TÜM CSS TANIMI BULUNMAKTA*/

footer{
background:#020202;
height: auto;
width: 100%;
font-family: "Times New Roman";
padding-top: 40px;
color: #FFFFFF;
}
.footericerik{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footericerik h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height:3rem;
padding-right: 11px;
}
.footericerik p{
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 15.5px;
padding-right: 14px;
}
.footerkisim{
list-style: none;
display: flex;
align-items: center;
padding-right: -90px;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.footerkisim li{
margin: -50px;
}
.footerkisim a{
text-decoration: none;
color: white;
}
.footerkisim a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.footerkisim a:hover i{
color: #039E70;
}
.footerbutonu{
background: #000000;
width: auto;
padding: 20px 0;
text-align: center;
}
.footerbutonu p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
font-family: 'Montserrat', sans-serif;
}
.footerbutonu span{
text-transform:uppercase;
opacity: .4;
font-weight:200%;
}

Ata Ege Asiltürk · 25 Aralık 2020

Bunun için CSS'in position: absolute ve position: relative özelliklerinden faydalanabilirsin. Detaylıca anlatan bir videoyu aşağıya bırakıyorum.

UNVDLykia · 26 Aralık 2020

Teşekkürler. Sorunu kendim çözdüm. Konu kilitlenebilir.

Ata Ege Asiltürk · 26 Aralık 2020

UNVDLykia dedi:
Teşekkürler. Sorunu kendim çözdüm. Konu kilitlenebilir.

Nasıl çözdüğünüzü söylerseniz aynı sorunu yaşayanlarda çözüm bulabilir.

UNVDLykia · 31 Aralık 2020

Ata Ege Asiltürk dedi:
Nasıl çözdüğünüzü söylerseniz aynı sorunu yaşayanlarda çözüm bulabilir.

4 farklı sınıf oluşturdum; her birine 4 adet buton tanımladım ve bu butonlara link atadım. Css de 4 farklı sınıfa margin float kodlarını istediğim yere gelecek şekilde px cinsinden yazdım. Sınıflara bir hover tanımladım. Bu kadar

Bootstrap ile resim içine buton ve link verme nasıl yapılır?

Ayrıntılı düzenleme

UNVDLykia

Kilopat

Ata Ege Asiltürk

Kilopat

UNVDLykia

Kilopat

Ata Ege Asiltürk

Kilopat

UNVDLykia

Kilopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz