Basit ve etkili bir şekilde Bootstrap nasıl değiştirilir
çizme atkısı Burada hiçbir şekilde tek HTML / CSS arabirim çerçevesi yoktur, ancak oyunu değiştirdiğini söylemenin güvenli olduğunu düşünüyorum. Bu mutfak lavabosu dahil kod yığını pek çok uygulamanın (ve web sitesinin) tasarımını ve geliştirilmesini çok kolaylaştırdı ve devasa HTML çerçevesini bir yan ürün olarak popüler hale getirdi.
Ne yazık ki, özellik kümesinin ne kadar büyük bir bölümü insan doğasının tembel yönlerine hitap ediyor ve onu kullanmayı tercih edenlerin çoğu varsayılanlarla uğraşıyor. Şimdi, aklınızda bulunsun, varsayılan stiller ve düzen kılavuzu, hayal gücünün herhangi bir kısmı tarafından kötü değildir. Twitter ekibinin çok yoğun çalışmasının ve kapsamlı testlerinin sonucudur. Onlar kadar katı bir temel oluştururlar.
Ama hepsi bu kadar: bir vakıf. İsimlerinden de anlaşılacağı gibi çerçeveler, UX ihtiyaçlarınız için her şeyden önce bir çözüm olarak kullanılmamalıdır. Bu kuralın tek istisnası, halkın asla göremeyeceği bir şey geliştiriyorsanız olabilir. Ama o zaman bile… Bütün fikir onları daha ileri götürmek, genişletmek ve değiştirmek.
Bootstrap'ın geliştiricileri bunu yapmak için çok kolay bir iş çıkardılar: kodları modüler; ve uygun gördüğünüz şekilde kullanmak için çerçevenin tek tek bileşenlerini indirebilirsiniz. Hatta bir temel özelleştirme aracı Web sitelerinde, tüm değişkenleri gerektiği gibi düzenlemenizi sağlar.
Gerisi, bize kalmış. Ve insan, bazı gerçekten etkileyici tasarımcılar ve geliştiriciler, bahanelerimizi hiçbir bahane olmadan bırakacak modlar ve araçlar üreterek hızlandırdılar. Varsayılanlara göre yerleşmek için bir sebep yok.
Bireysel projelerinizi değerlendirin; Belki Bootstrap'in varsayılan tipografisi sizin için uygun, ancak renk şeması ve ızgara, belki de farklı simgeler gerekir. Bootstrap'in ihtiyaçlarınızı karşıladığı yerleri belirleyin ve aşağıdaki kaynaklara göz atın.
Bootstrap modları
Bunlar, temel önyükleme UI'sini alan ve onu neredeyse tanınamayan bir şeye dönüştüren tam teşekküllü modlardır. Kullanımları biraz spesifik ve sınırlı; ama ihtiyaçlarınızı karşılarlarsa, size zaman ve para kazandırabilirler.
Düz UI
Bu listedeki ilk mod Düz UI. Adamlar tarafından serbest bırakıldı Designmodo , Düz UI tasarım topluluğunda anında popülerlik kazandı ve iyi bir sebeple: güzel.
Düz tasarımı sevenler için - Bootstrap'in biraz skeuomorphic eğilimlerinin aksine - her UI öğesi yepyeni bir estetikle yeniden tasarlandı.
Vektör simgeleri, yeni bir glif simge fontu, özel UI öğeleri (yapılacaklar listesi gibi) ve kolayca değiştirilebilen renk şemaları ile, Düz UI, Bootstrap'in neye benzeyebileceğini yeniden düşünür.
Benim bir evcil hayvan çişim: temel paragraf öğeniz için metin boyutu bir web sitesi için biraz küçük. Adil olmak gerekirse, muhtemelen oldukça küçük alanlarda metin koyabileceğiniz bir uygulama arayüzü için doğrudur.
Düz UI ücretsizdir, ancak ekstra öğeler, işlevsellik ve PSD dosyaları ile pro sürümü için ödeme yapabilirsiniz.
Fbootstrapp
Bu modlardan bazılarının özel kullanım durumları olduğunu nasıl söylediğimi hatırlıyor musunuz? Şaka yapmıyordum. Fbootstrapp Facebook'un kullanıcı arabirim öğeleriyle uyumlu olacak şekilde yeniden çalışıldı.
Neden biri böyle bir şey yapsın ki? Eh, kendi sözleriyle, “Fbootstrapp hem ilgili boyutlarda Facebook iFrame uygulamaları başlatmak için tasarlanmış bir araç takımıdır. Tipografi, formlar, düğmeler, tablolar, ızgaralar, gezinme ve daha fazlası için tipik bir Facebook görünümüne ve tarzına sahip olan CSS ve HTML'yi içerir. ”
Facebook uygulama geliştiricileri, not al: işiniz daha da kolaylaştı.
Hızlıbaşlangıç kullanıcı arayüzü yönetici şablonları
Önyükleme, uygulamalarda kullanılmak üzere tasarlanabilir, ancak klasik bir “yönetici arayüzü” oluşturmayı düşünüyorsanız biraz çalışma gerektirir. Hızlıbaşlangıç UI Bu, hayranlık uyandıran üç farklı şablon getiriyor.
Admin UI simgeleri, widget stilleri, jQuery tabanlı veri görselleştirme eklentileri ve daha fazlası temiz, özelleştirilebilir ve tamamen yanıt veren düzenlerde bir araya getirilmiştir.
Bununla birlikte, bu modlar diğerlerinden önemli bir şekilde farklıdır. Serbest versiyon yoktur; Onları tam olarak ödemek zorundasınız. Ancak çok pahalı değiller: 15 ila 20 USD arasında değişiyorlar. Onlara giren çok fazla çaba için, özel ihtiyaçlarınızı karşılarsa buna değdiğini söyleyebilirim.
BootMetro
Bazı insanlar bunu sever ve birçoğu bir tutkuyla nefret eder; ama Windows 8 ve Metro UI'sinin tasarım dünyasında bir kargaşaya neden olduğunu inkar etmiyor. Ben, hayatım boyunca, bu tür kullanıcı arayüzünün özellikle yararlı olacağı herhangi bir kullanım durumunu (bir çeşit yazılım deposu dışında) düşünemiyorum. Ama hey BootMetro Elimizde bir tane var!
Ücretsiz ve tam özellikli görünüyor, bu yüzden kontrol edin. Çoğu insan için özellikle yararlı olmayabilir, ancak ilginç bir kod deneyi. (Gerçekten mi? Bootstrap ve Metro? Geldiğini görmedim.)
Bootstrap özelleştirme araçları
Yani, Bootstrap kurulumunuzu UI / UX ihtiyaçlarınızı daha iyi karşılayacak şekilde uyarlamak istiyorsunuz. Nereden başlıyorsun? Eh, doğrudan doğruya kodlara girebilirsin. Onu yaptım. Söyleyeyim, yine de zor olabilir.
Tipografinin tamamını veya düğme ve bağlantı renklerini veya navbar stillerini manuel olarak değiştirmek isterseniz, bir süre orada olacaksınız. Özelleştirme uygulamasındaki tüm değişkenleri Bootstrap web sitesinde düzenleyebilirsiniz, ancak tüm renkler için HEX kodlarını bilmeniz gerekir ve değişiklik yaptığınızda herhangi bir görsel geri bildirim almazsınız.
Neyse ki bizim için, bu amaç için özel olarak oluşturulan birkaç Bootstrap tema yapımcısı var. Bunlar şimdiye kadar bulduğum en iyi iki şey.
StyleBootstrap
Uyanık arayüzü görmezden gelebilirseniz, StyleBootstrap Çerçevede bulacağınız varsayılan UI öğelerinin çoğunu düzenlemek için güçlü bir araçtır. Hızlı bir şekilde başlamak istiyorsanız, sadece en belirgin şeyleri değiştirmek istiyorsanız, orası başlangıç noktasıdır.
Bootstrap Magic
Bootstrap Magic Çerçevenin derinlemesine yeniden markalanmasını istiyorsanız kullanmak için bir araçtır. Daha güzel, daha basit bir ara yüze sahiptir ve size StyleBootstrap'den çok daha fazla eleman yapabilmenizi sağlar. Yine de uyarın, bu daha uzun sürecek. Bununla birlikte, her şeyi el ile değiştirecek kadar uzun sürmeyecek.
Eklentiler ve snippet'ler
Bootstrap'in sahip olabileceğiniz şeylere sahip olduğunu söylemek için yeterli olun. Başlamak için simgelerimiz var.
Yazı Tipi Başarısı
Bootstrap'in glif ikonları havalı fakat sınırlıdır. Koyu simgelerin var, o zaman her şey güzel bir küçük resim görüntüsünde ayarlanmış ışık simgelerine sahip. Ancak, simge fontları çok daha çok yönlüdür. CSS3 ile yazabileceğiniz herhangi bir şey varsa, bu simgelere yapabilirsiniz. Büyüklüğü, rengi değiştir, onlara bir damla gölge ver; Tam anlamıyla CSS yazmak kadar kolay. Bu yazının yazıldığı sırada 361 simgeleriyle, Yazı Tipi Başarısı kontrol etmeye değer.
Bootsnipp
Bootsnipp muhtemelen herhangi bir ek kütüphane eklemeden Bootstrap ile çalışmak üzere tasarlanmış bir HTML parçacıkları kütüphanesidir. Parçacıklar şunları içerir: sekmeli kayıt ve giriş formları, karuseller, daha iyi takvimler, Gmail'e benzeyen bir e-posta arayüzü, bir medya oynatıcı kullanıcı arayüzü ve daha fazlası.
Kullanıcı arayüzünüzde öğeleri nasıl bir araya getireceğinizi anlamaya çalışıyorsanız, Bootsnipp kitaplığına göz atın. İhtiyacınız olan şey tam olarak yoksa, kod örnekleri bunun nasıl yapılacağını anlamanıza yardımcı olabilir.
Bu her şey değil…
Twitter'ın favori çerçevesi olduğu kadar yaygın bir şekilde benimsenirse, muhtemelen Bootstrap'i herhangi bir listenin içerebileceğinden daha fazla özelleştirmek için daha fazla bilgi vardır.
Sonuçta, İnternet bunun için geçerli, değil mi? Bu ve… kediler.
Bootstrap'ı değiştirdin mi? Bunu manuel mi yaptınız yoksa bir kaynak mı kullandınız? Yorumlarda bize bildirin.