Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Bootstrap kullanıcıları dikkat..
#1
Bootstrap

Merhaba arkadaşlar bu postumuzda bootstrap hakkında dikkat etmeniz gereken kısımlar ve yardımcı olabileceğim kısmlar hakkında bir kaç bilgi vericem bu konu bootstrap’a ve frontend e yeni geçmiş arkadaşlarımız bakıp gerekli bilgiyi alacaklardır .

Bootstrap frontend programcılarının günümüz responsive (mobil uyumlu sayfalar) tasarımlarda işlerini en basit hale indirebilen ve kendi şablon tasarımları ve jquery sistemlerinin programcının işini hafifletebilme yönünden oldukça önemi yüksek bir frameworktur yeni başlayanların bunu denemesini tercih ederim.

Bootstrapta Dikkat edilmesi gereken hususlar

Bootstrap frameworkünün en önemli hususundan birisi yazılımı kodlarken amacın dışına çıkılmaması bundan kastım nedir ?

İlk öncelikle bootstrap css ve js lerine asla müdahale etmeyiniz içine giripte kodlarda oynama yapmayınız. Tasarımın üzerine css yazabilirsiniz ancak bu css sadece görüntü ve şablon üzerine olmalı boxların uzunluklarıyla ve media query dediğimiz fonksiyonları bozmamaya özen gösterin

Grid sistemlerinde ise önemli olan kısım ise şuanki bazı türk frontenddeveloperları izlediğim kadarıyla “row” ların paddinglerini bozup bug yapıyorlar ve tasarımlarda hatalar meydana geliyor bu yanlış bootstrap kodlamasının bir yazılım düzeni var mesela örnek olarak div komutlarını kullanırken şu yazım biçimini kullanırsanız iyi olacaktır sizin için
Kod:
.container-fluid -> .row -> .container -> . row -> columns -> row ->elements

Sistem bu şekilde grid de asla ve asla bu class ların ayarlarını ne bootstrap üzerinden nede css olarak değiştirmeyin widthlerini heightleri ve şablonlarıyla oynayabilirsiniz elinizdeki tasarıma göre şekilledirebilirsiniz ama asla media query lerle oynamayın.

Bu sistemi divler içinde gösterecek olursak;
Kod:
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
</div>


Yazımları bu şekildedir bunun dışına çıkmamaya özen gösterirseniz sizin içinde tasarımınız içinde daha sağlıklı olacaktır. Tasarımlarınızdaki responsive çatlaklarının en önemli bir diğer hususlarınızdan biride tablelardır.


Tablelar responsive olabilir ancak bu tablelar columnlar gibi alt alta sıralanmıyorlar bunu önlemek içinde table ı xsmall da kaybetip onun sadece xsmall da görünen versiyonunu yapmanızı öneririm yada internetten bulduğunuz tasarımları cssleri ile beraber uygulayabilirsiniz.

Tablelar responsivedir ancak sadece width:100% olarak bir class atanmıştır. Alt alta kayma olayı ciddi şekilde hasarlar veriyor sayfayı xsmall haldeyken pencerenin altında scroll bar çıkar sağa doğru giden bunun olmaması gerekiyor çatlakları önlemek için.

Bu Sistemleri sadece şablon css i olarakda kullanabilirsiniz button ve sliderlarda ciddi içerikler yapmanızı sağlayabilirler işinize yarayacaktır yani illa responsivesini kullanmak zorunda değilsiniz.

Kod:
http://seybendesigns.com/blog/bootstrap-kullanicilari-dikkat
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping