Turkcell | Geleceği Yazanlar

Soru & Cevap

Bootstrap İle Boyu duyarlı hale nasıl getirebilirim ?

19.07.2017 - 12:02

Merhabalar,

Öncelikle herkese kolay gelsin çok uzatmadan hemen soruma geçiyorum.

Ben bir asansör projesi hazırlıyorum ve bootstrap ile ilgili bir sıkıntı yaşıyorum bootstrap ta container, row ve  col-xs-12 yi tanımlayıp içerisine asansörümü yerleştirdim. Tabiki takdir edersiniz ki genişlik responsive oldu o konuda bir sıkıntı yok fakat pencere küçültüldüğünde boyda herhangi bir küçülme olmuyor bunu nasıl sağlayabilirim ? Değerli cevaplarınız için şimdiden teşekkürler.

2 Cevap

Burak
20.07.2017 - 09:59

Mehmet Bey cevabınız için teşekkürler. Sorunumu Boostrap ile değil de javascript ile çözme yolunu tercih ettim. Kodları da daha sonra bu konuda problem yaşayan arkadaşlar için yazacağım. Bu arada bu asansör imaj değil divlerle oluşturdum. Yinede çok teşekkürler cevabınız için. 

Burada yazan kodlar asansörün yüksekliğe göre duyarlı hale gelmesi için. Eğer anlaşılmayan bie yer olursa soran arakadaşlara detaylı bir şekilde anlatabilirim.

 $( window ).resize(function() {
 var yuk = $(window).height();
 var boslukyuk=yuk-15;
 var katyuk = yuk/11;
 var kat10= (katyuk/2);                  
 var  kat9=(katyuk+kat10);
 var kat8=(katyuk+kat9);
 var kat7=(katyuk+kat8);
 var kat6=(katyuk+kat7);
 var kat5=(katyuk+kat6);
 var kat4=(katyuk+kat5);
 var kat3=(katyuk+kat4);
 var kat2=(katyuk+kat3);
 var kat1=(katyuk+kat2);
 var kat0=(katyuk+kat1);
 var  up9= kat9;
 var  up8= kat8;
 var  up7= kat7;
 var  up6= kat6;
 var  up5= kat5;
 var  up4= kat4;
 var  up3= kat3;
 var  up2= kat2;
 var  up1= kat1;
var call0up=kat0;
 var call1up=up1;
 var call2up=up2;
 var call3up=up3;
 var call4up=up4;
 var call5up=up5;
 var call6up=up6;
 var call7up=up7;
 var call8up=up8;
 var call9up=up9;
 var call1down=kat1;
 var call2down=kat2;
 var call3down=kat3;
 var call4down=kat4;
 var call5down=kat5;
 var call6down=kat6;
 var call7down=kat7;
 var call8down=kat8;
 var call9down=kat9;
 var call10down=kat10;
 if(yuk< 400){
	 alert("Eğer pencerenin yüksekliğini bu denli düşürürseniz hareketini düzgün gözlemleyemeyeceksiniz.");
 }
 
 $("#bina").css("height",yuk);
$ ("#bosluk").css("height",boslukyuk);
$("#call0up").css("top",call0up);
$("#call1up").css("top",call1up);
$("#call2up").css("top",call2up);
$("#call3up").css("top",call3up);
$("#call4up").css("top",call4up);
$("#call5up").css("top",call5up);
$("#call6up").css("top",call6up);
$("#call7up").css("top",call7up);
$("#call8up").css("top",call8up);
$("#call9up").css("top",call9up);
$("#call1down").css("top",call1down);
$("#call2down").css("top",call2down);
$("#call3down").css("top",call3down);
$("#call4down").css("top",call4down);
$("#call5down").css("top",call5down);
$("#call6down").css("top",call6down);
$("#call7down").css("top",call7down);
$("#call8down").css("top",call8down);
$("#call9down").css("top",call9down);
$("#call10down").css("top",call10down);
});

Aşağıda yazan kodlar ise html5 ile oluşturduğum div lerin kodları.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  <style>
body {
	background-image: url("https://i.hizliresim.com/WQqm7E.gif");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}
#bina {
	position: relative;
	left: -20px;
	top: 0px;
	width: 130px;
	background: #ecaf2f;
	height: 640px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid #ecaf2f;
	border-radius: 15px;
	padding-bottom: 30px;
}
#gostergekenar {
	width: 42px;
	height: 20px;
	background: #000;
	position: absolute;
	left: 28px;
	top: -1px;
	background-color: #000;
}
#gosterge {
	width: 10px;
	height: 10px;
	background-color: #000;
}
#gosterge {
	width: 30px;
	height: 18px;
	background: #808080;
	position: relative;
	left: 6px;
	top: 1px;
	color: #000;
	font-family: Symbol;
	font-weight: bold;
}
#bosluk {
	background: #AAA;
	width: 50px;
	height: 610px;
	top: 20px;
	margin: 0 auto;
	position: relative;
}
#asansorboslugu {
	position: absolute;
	height: 60px;
	width: 50px;
	bottom: 0px;
	background-color: #000;
}
#asansor {
	background-image: url("https://i.hizliresim.com/G0ma9v.jpg");
	height: 60px;
	overflow: hidden;
	width: 50px;
	position: absolute;
	background-size: 100% 100%;
}
#sagkapi {
	width: 50%;
	height: 60px;
	background-color: #918B8B;
	float: right;
	overflow: hidden;
}
#solkapi {
	width: 50%;
	height: 60px;
	background-color: #918B8B;
	float: left;
	overflow: hidden;
}
#call0up {
	top: 590px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call1up {
	top: 530px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call1down {
	top: 530px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call2up {
	top:475px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call2down {
	top: 475px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call3up {
	top: 420px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call3down {
	top: 420px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call4up {
	top: 365px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call4down {
	top: 365px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call5up {
	 top: 310px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call5down {
	 top: 310px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call6up {
	top: 255px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call6down {
	top: 255px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call7up {
	top: 200px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call7down {
	top: 200px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call8up {
	top: 145px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call8down {
	top: 145px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call9up {
	top: 90px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call9down {
	top: 90px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call10down {
	top: 40px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
.up {
	background-image: url("https://i.hizliresim.com/y36g0M.png");
	height: 30px;
	overflow: hidden;
	width: 30px;
	position: absolute;
	background-size: 100% 100%;
}
.down {
	background-image: url("https://i.hizliresim.com/6XadJk.png");
	height: 30px;
	overflow: hidden;
	width: 30px;
	position: absolute;
	background-size: 100% 100%;
}
.down:hover {
	filter: grayscale(80%);
}
.up:hover {
	filter: grayscale(80%);
}
.down:active {
	transform: translateY(2px);
}
.up:active {
	transform: translateY(2px);
}
#canvas #katsecimi ul li:active {
	transform: translateY(2px);
}
</style>
   
    <link rel="shortcut icon" href="/images/tiga.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Asansör Denemesi</title>
    </head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div id="bina">
            <div id="gostergekenar">
              <div class="abc" id="gosterge" > 0 - </div>
            </div>
            <div id="call1up" class="up"></div>
            <div id="call2up" class="up"></div>
            <div id="call3up" class="up"></div>
            <div id="call4up" class="up"></div>
            <div id="call5up" class="up"></div>
            <div id="call6up" class="up"></div>
            <div id="call7up" class="up"></div>
            <div id="call8up" class="up"></div>
            <div id="call9up" class="up"></div>
            <div id="call0up" class="up"></div>
            <div id="call1down" class="down"></div>
            <div id="call2down" class="down"></div>
            <div id="call3down" class="down"></div>
            <div id="call4down" class="down"></div>
            <div id="call5down" class="down"></div>
            <div id="call6down" class="down"></div>
            <div id="call7down" class="down"></div>
            <div id="call8down" class="down"></div>
            <div id="call9down" class="down"></div>
            <div id="call10down" class="down"></div>
            <div id="bosluk">
              <div id="asansorboslugu">
                <div id="asansor">
                  <div id="sagkapi"></div>
                  <div id="solkapi"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

Kolay Gelsin.

Sitede yorum yapabilmek için giriş yapın ya da üye olun.

Mehmet Emin
20.07.2017 - 08:32

Merhabalar, Bootstrap'ın resimler için bir class ı var. img-responsive olması lazım sanırım. O classı sitesinden bulup bi dener misin?

Sitede yorum yapabilmek için giriş yapın ya da üye olun.

Sitedeki sorulara cevap verebilmek için giriş yapın ya da üye olun.