Bootstrap menu gizleme/gosterme

Merhaba arkadaslar bootstrap ile bir site tasarlamaya calisiyorum ama bir turlu istedigim sonucu alamadim. Yapmak istedigim sey masaustunde iki kolon olan goruntunun mobilde bir kolonu gitmis biri kalmis sekilde cikmasini istiyorum.

Mesela aldigim cikti masaustunde bu ve mobilde asagidaki gibidir.

Yapmak istedigim sey ise mobilden girildiginde saat ve tarihin oldugu yer gozukmesin bir tek deneme yazan yer gozuksun isiyorum. Kodumda asagidaki gibidir.









<script></script>
<script></script>

<script></script>

<script></script>

Deneme

Merhabalar,

Farklı çözünürlüklerde elementleri gizlemek için Bootstrap'de kullanılan bir kaç class mevcut. Bunlar;

Çok küçük ekranlı telefonlar için (768px'den küçük) (Class ismi: hidden-xs)

Tablet gibi küçük ekranlar için (768px'den büyük veya eşit) (Class ismi: hidden-sm)

Masaüstü gibi orta boyutlu ekranlar için (992px'den büyük veya eşit) (Class ismi: hidden-md)

Masaüstü gibi yüksek boyutlu ekranlar için (1200px'den büyük veya eşit) (Class ismi: hidden-lg)

Sizin örneğinizde ise telefon gibi küçük çözünürlüğe sahip cihazlarda "deneme div'ini" gizlemek için hidden-xs class'ını ilgili div'e eklemek yeterli.









<script></script>
<script></script>

<script></script>

<script></script>

hidden-xs notifications">
Deneme

Kaynak: Bootstrap CSS

Cevabiniz icin tessekurler ama onu eklememe ragmen hic bir degisiklik olmuyor neden acaba? Yani gene mobilde alt alt sonuc aliyorum

Gizleyerek olmuyorsa sadece belirli çözünürlükte gösterin. visible-lg visible-md visible-xl gibi classları eklemeyi deneyin.

Sorun cozulmustur ilgilenen arkadaslar icin ekledigim bootstarp dosyalari duzgun olmadigi icin hidden-xs komutu calismiyormus. Bootstrapi yuklemek sorunu cozdu komutu calistirdi.

Kodlara bazi ekstra satirlar ekledigim zaman gene ayni seyi yapmaya basladi acaba nasil kolonlardan birini gorunmez yapabilirim visible komutunuda denedim ama ne yazik ki bir sonuc alamadim.












<script></script>
<script></script>
<script></script>

Saat

Tarih

Butun proje dosyasina asagidaki linkten ulasabilirsiniz

https://drive.google.com/drive/folders/0B70_roNUfG_VdEZvYUlyS2ZuUGc?usp=sharing

Dosyalarınızı kontrol ettiğimde Bootstrap 4 versiyonu kullandığınızı gördüm. Arkadaşların bahsettiği "hidden" ve "visible" sınıfları 4. versiyon ile kaldırıldı (bknz: https://getbootstrap.com/docs/4.0/migration/#utilities). Bunun yerine display tipine bağlı bir takım sınıflar geldi (bknz: https://getbootstrap.com/docs/4.0/utilities/display/#common-display-values)

Örnek olarak siz bir elemanın küçük cihazlarda (burada da artık 4. versiyonda "xs" sınıfı dönüş noktası olarak kullandığı için kullanımdan kaldırıldı. Buna göre en küçük sınıf artık "sm") görünmeyip diğer cihazlar için görünür kılmak için kod içerisinde ki "hidden-lg" sınıfını silip yerine "d-none d-sm-block" iki sınıfı eklemeniz gerekiyor. Burada "display" kuralının ufak cihazlar için "none" değerini almasını diğer cihazlar için "block" değerini almasını söylüyoruz.

Ayrıca kodunuzu incelediğim zaman yine Bootstrap 4 ile gelmiş olan bir gereksinim dosyasının eksik olduğun gördüm. "popper.js" isimli bir kütüphanede artık Bootstrap 4 ile gerekesinim olarak kabul edilmiştir. Dolayısıyla bu kütüphane sayfanıza eklemeniz gerekiyor.

Bunun için aşağıda ki kodu script kodlarının altına ekleyebilirsiniz.
<script></script>

Ayrıca sayfada "font-awesome" sınıfını çağırmış fakat kullanmamışsınız ve bu sınıfa ait dosyalar verdiğiniz bağlantıdaki dosyalarda yok bunu da kontrol etmenizde fayda var.

Tüm bunlara rağmen ben size Bootstrap 4 yerine Bootstrap 3 ile başlamanızı tavsiye ederim. Bootstrap 4 hakkında şuan çok fazla bir doküman veya yardım alabileceğiniz konular yok. Yeni bir sürüm ve "Flexbox" gibi güçlü bir sistemi içinde barındırıyor fakat eski cihazlara uyum için kütüphaneyi çok değiştirdiler. Dolayısıyla ben de Bootstrap 4'e henüz geçiş yapmadım stabil sürümü bekliyorum.

Bootstrap 3 sürümü hakkında https://getbootstrap.com/docs/3.3/ adresinden yararlanabilirsiniz.

İyi şanslar.

Anladim cok tessekur ederim

Selamlar,

Bootstrap 3 sınıfında "navbar-fixed-bottom" sınıfı ile bunu yapmanız mümkün. Farzı misal Fixed Navbar örneğini ele alıp buradaki "navbar-fixed-top" sınıfını "navbar-fixed-bottom" olarak değiştirip deneyin.

Dediklerinizi yaptim navbarida kurdum ama butona basinca butonda herhangi bir oynama olmuyor buyuk bir ihtimalle js ile alakali ama nerde acaba sorun?