bootstrap da sağda açılır ekran

Aslında tam nasıl açıklarım bilmiyorum. kafam dondu, Olay şu web sitesine girdğimiz de sayfanın tam ortasında sağda bir buton olsun istiyorum, Butona tıkladığımda hazıladğım form açılacak. Butonu da yaptım ama bir türlü istediğim yere gelmiyor.

Bunu nasıl yaparım örnek verecek olursam pamukkale.com.tr sitesinde yapmış adam bilet al butonu tam olarak istedğim bu tek fark ben sola değil sağa yaslamak istiyorum Nasıl yaparım yardımlarınız için teşekkürler

Merhaba,

Pamukkalenin sitesinde öğeyi incele yaparak kullanman gereken kod parçalarını bulabilirsin. 

Mesela solda değilde sağda olmasını sağlaman için kutunun left özelliğini kapatman gerekiyor: http://prntscr.com/n216eq

Kodlara baktığında açıp kapama butonu ile form butonu alt alta bir div olarak yer alıyor: http://prntscr.com/n217uv

Form kısmındaki css kodlarında ufak bir değişiklik yaptım ve form hemen sağa kaydı: http://prntscr.com/n218ug

Burda önemli olan formun ve butonun genişliğini yüksekliğini ayarladıktan sonra;

  • üstten konumunu
  • sağdan konumunu
  • div'e basıldığında display özelliğinin değişimi ve divin onclik özelliğinin değişmesi (kapatma metotu ile)
  • dive basıldığında divin konumu, kapatma divine basıldığında divin konumu

Bu ve bunun gibi dikkat etmen gereken alanlar var.

Formun açılmasını sağlayan divin css özellikleri Örn:

.formuAc {
    position: fixed;
    rigth: 10px;
    top: 300px;
    right: 10px!important;
    width: 77px;
    height: 70px;
    z-index: 99;
    display: none;
}

 

Mobil uyumlu olmasını istersen eğer css @media özelliğini kullanabilirsin.

Kolay gelsin.

EMRE çok sağol ama bootstrap'da bu css özelliği çalışmıyor kardeşim. Pamukakkale örnek'di. 

bootstrap normal css mantığı ile çalışmıyor. sağa yada sola alabiliyorum bu konu da sorun yok. 

Sorun ekranın ortasında sağa alınması, ve örnek sitede belirttiğim gibi buton ile bareber açılması, popup özelliğini aktif edebiliyorum o konuda problem yok. 

Merhaba,

https://mdbootstrap.com/docs/jquery/css/animations/

bu kaynağı inceleyebilirsiniz...


Saygılarımla

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git