• 09-06-2018, 12:21:56
    #1
    Merhaba,


    Tasarım yaparken özellikle Bootstrap ile tasarımı oluştururken kullandığınız kaynaklar nelerdir? Mesela blok alanlarını oluşturken hazır ui kaynaklar var mı?


    Teşekkürler.
  • 09-06-2018, 19:21:31
    #2
    bootstrapta toplamda 12 alanın vardır bir tam sayfan 12 alana eşit olur yani

    <div class="col-md-6">sayfanın yarısı</div>
    <div class="col-md-6">sayfanın diğer yarısı</div>

    yaparsan sayfayı 2 ye bölmüş olursun

    col-md-1 olarak 12 bölüm yaparsın
    col-md-2 olarak 6 bölüm yaparsın
    col-md-3 olarak 4 alan yaparsın
    col-md-4 olarak 3 alan yaparsın
    col-md-5 - col-md-5 col-md-2 yaparak 12 ye tamamlar ve 3 bölüm yaparsın yada
    col-md-6 - col-md-3 - col-md-3 yaparak ta 3 e bölmüş olursun yani bölümlediğin blog alanları her zaman için 12 ye tamamlaman gerekmektedir

    bölümlediğin divler içerisinde kendi iç bölümlerinde de yine col-md leri kullanarak bölebilirsin onada örnek verecek olursak

    <div class="col-md-6">
    <div class="col-md-6"> sayfa yarısının içerisinde o blogun yarısı</div>
    <div class="col-md-6"> sayfa yarısının içerisinde o blogun diğer yarısı yarısı</div>
    </div>

    gibi gibi

    diğer yapılarda ise

    container clasıı sayfa ortasıdır
    col-sm tablet görünümü içindir
    col-xs telefon görünümü içindir

    yani sen bir dive başlangıç olarak

    <div class="col-md-12 col-xs-12 col-sm-12">
    olarak başlarsan hem pc, hem telefon hemde tablet de o alanları tam blok olarak ayarlamış olursun
    </div>
  • 09-06-2018, 20:06:47
    #3
    <div class="col-md-12 col-xs-12 col-sm-12">
    
    </div>

    şeklinde uzun uzun yazmanıza gerek yok. Eğer 12 sütun genişlik kullanacaksanız sadece


    <div class="col-xs-12">
    
    </div>

    demeniz yeterlidir. Mesela


    <div class="col-xs-12 col-lg-6">
    
    </div>

    diyecek olursanız "lg ekran çözünürlüğüne kadar tüm çözünürlüklerde(xs,sm,md) 12 sütun olsun ancak lg ekran çözünürlüğünde ve sonrasında 6 sütun olsun" anlamına gelir.
  • 09-06-2018, 21:16:29
    #4
    AspavA adlı üyeden alıntı: mesajı görüntüle
    bootstrapta toplamda 12 alanın vardır bir tam sayfan 12 alana eşit olur yani

    <div class="col-md-6">sayfanın yarısı</div>
    <div class="col-md-6">sayfanın diğer yarısı</div>

    yaparsan sayfayı 2 ye bölmüş olursun

    col-md-1 olarak 12 bölüm yaparsın
    col-md-2 olarak 6 bölüm yaparsın
    col-md-3 olarak 4 alan yaparsın
    col-md-4 olarak 3 alan yaparsın
    col-md-5 - col-md-5 col-md-2 yaparak 12 ye tamamlar ve 3 bölüm yaparsın yada
    col-md-6 - col-md-3 - col-md-3 yaparak ta 3 e bölmüş olursun yani bölümlediğin blog alanları her zaman için 12 ye tamamlaman gerekmektedir

    bölümlediğin divler içerisinde kendi iç bölümlerinde de yine col-md leri kullanarak bölebilirsin onada örnek verecek olursak

    <div class="col-md-6">
    <div class="col-md-6"> sayfa yarısının içerisinde o blogun yarısı</div>
    <div class="col-md-6"> sayfa yarısının içerisinde o blogun diğer yarısı yarısı</div>
    </div>

    gibi gibi

    diğer yapılarda ise

    container clasıı sayfa ortasıdır
    col-sm tablet görünümü içindir
    col-xs telefon görünümü içindir

    yani sen bir dive başlangıç olarak

    <div class="col-md-12 col-xs-12 col-sm-12">
    olarak başlarsan hem pc, hem telefon hemde tablet de o alanları tam blok olarak ayarlamış olursun
    </div>

    emerald adlı üyeden alıntı: mesajı görüntüle
    <div class="col-md-12 col-xs-12 col-sm-12">
    
    </div>
    şeklinde uzun uzun yazmanıza gerek yok. Eğer 12 sütun genişlik kullanacaksanız sadece


    <div class="col-xs-12">
    
    </div>
    demeniz yeterlidir. Mesela


    <div class="col-xs-12 col-lg-6">
    
    </div>
    diyecek olursanız "lg ekran çözünürlüğüne kadar tüm çözünürlüklerde(xs,sm,md) 12 sütun olsun ancak lg ekran çözünürlüğünde ve sonrasında 6 sütun olsun" anlamına gelir.


    Arkadaşlar teşekkürler ancak sormak istediğim kullandığınız UI kaynaklardı. (codepen vs.)



    Teşekkürler.
  • 09-06-2018, 22:29:39
    #5
    Bootstrap Studio, Mobirise ve Pingendo var.
  • 10-06-2018, 17:48:54
    #6
    https://bootsnipp.com/ hazır bloglar şaplonlar v.s her şey var genelde burayı kullanırım
  • 10-06-2018, 19:56:52
    #7
    Çok teşekkürler işime yaradı