Bootstrap ile Uygulama Geliştirmeyi Hızlandırma

Bootstrap, en iyi ve en çok kullanılan HTML/CSS/JS ön uç çerçevelerinden biridir. Bir veya iki web sitesi yapan hemen hemen her web geliştiricisi bu popüler çerçeveyi duymuştur. Çok sayıda hazır bileşen ve kaynak sunar, Bootstrap uygulama geliştirmenizi önemli ölçüde hızlandırabilir.

Her iyi geliştirici, geliştirme sürecinde her saniyeyi kurtarmakla ilgilenir. Verimli olmak, daha hızlı dağıtım anlamına gelir - ne kadar erken ve sık dağıtırsak, son kullanıcılarımız o kadar hızlı daha iyi bir ürün elde eder. Bu nedenle, süreci ve stratejiyi planlamak için birkaç saat veya gün harcamak bize sadece birkaç dakika değil, birçok saat kazandırabilir.

Ben şahsen son 4 yıldır projelerimin %90'ında bu çerçeve ile çalışıyorum. Bu yazıda, Bootstrap'in bazı harika özelliklerini kaçırmadan uygulama geliştirmenizi hızlandırmanıza yardımcı olabilecek birkaç ipucunu sizinle paylaşmak istiyorum.

Önyüklemeyi Anlamak

Başlaması çok kolay bir çerçeve olmasına rağmen, ilk bakışta basitliğine aldanmayın. Bir projeye atılmadan önce, çerçeveyle oynamaya ve altyapısının temel parçalarının ve heyecan verici bileşenlerine inmek için zaman ayırın. Bu, En Yaygın 10 Önyükleme Hatasından kaçınmaya yardımcı olacaktır.

Bootstrap sitesindeki belgeleri okumak için bir saat ayırın veya Toptal'ın blogundaki harika bir gönderiden daha fazlasını öğrenin, Bootstrap Nedir? Ne, Neden ve Nasıl Üzerine Kısa Bir Eğitim. Ve scotch.io'da bilmediğiniz Bootstrap 3 İpuçları ve Püf Noktaları harika bir makale.

Belge okumayı sıkıcı bir iş olarak görüyorsanız ve bunun yerine biraz kod okumayı tercih ediyorsanız, başlamak için en iyi yer Bootstrap'ın web sitesidir. Web denetçinizi açın, sitenin kaynak kodunu tarayın ve her kod bloğunu ve öğelerini kontrol edin. Muhtemelen temelleri kavramanın en iyi ve en hızlı yollarından biridir.

Sayfa yapısını inceleyin ve mizanpajların nasıl oluşturulduğunu öğrenin.

 <div class="container"> <div class="row"> ... </div> </div>

… tarayıcı pencerenizi yeniden boyutlandırın veya medya sorgulama yardımcı programları hakkında daha fazla bilgi edinmek için Chrome'un Viewport Resizer'ını kullanın.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… ve bunları nasıl ve ne zaman kullanacağınızı öğrenin, en iyi yanıt veren tasarım sonuçları için sütun sınıflarını öğrenin.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Tüm CSS sınıflarının, bileşenlerinin ve JavaScript eklentilerinin eksiksiz bir Bootstrap referansını bulabileceğiniz W3Schools'a bir göz atın - tümü “Kendiniz Deneyin” örnekleriyle:

• Bootstrap'in ızgara sistemi açıklandı: Bootstrap'teki ızgaralar
• Temel CSS sınıfları: tipografi, düğmeler, formlar ve form öğeleri, yardımcı sınıflar, resimler, tablolar
• Bireysel bileşenler: glifonlar, açılır menüler, gezinmeler.

Kaynak kodunu inceleyin ve mümkün olduğu kadar çok sınıf adı ile tanışmaya çalışın. Kullanım durumları hakkında bilgi edinin - nasıl, ne zaman ve neden. Bu, HTML yazarken ve UI öğelerini şekillendirirken daha hızlı ilerlemenize yardımcı olacaktır. Bu bileşenler hakkında daha fazla bilgi edinmek, stil sayfalarınızı birçok gereksiz yinelenen kodla şişirmekten kaçınmanıza yardımcı olacaktır. Çerçevede zaten var olanlarla aynı işlevi gören çok sayıda yeni bileşen oluşturmak yerine, mevcut bileşenleri kullanarak ve yeniden kullanarak onu yalın ve temiz tutun.

Bu, özellikle birkaç geliştiriciden oluşan bir ekipte çalışırken önemlidir. Yeni tasarımları koda çevirirken, her seferinde aynı durum için çok fazla stil oluşturan tonlarca çoğaltılmış kod yazmadığınızdan emin olun. UI geliştirmeyi tutarlı ve UI stil kılavuzlarıyla iyi belgelenmiş tutmak, üretken ekip çalışmasına birkaç düğüm ekleyebilir. Ayrıca, uygulamanıza yeni özellikler veya sayfalar eklerken daha az hayal kırıklığı ile ilerleyeceğinizi göreceksiniz. Bir düzineden fazla büyük projede yer aldım ve buna kıyasla, çerçevenin tam anlamıyla saldırıya uğradığı ve yeni CSS kodunun her eklendiğinde diğer sayfalarda kullanıcı arayüzünü bozduğu birkaç durum gördüm. Tüm siteyi gözden geçirmek ve bu tür hataları düzeltmek oldukça yorucu olurdu. Sadece bu da değil, ekstra geliştirici süresi ve KG yardımı için harcanan maliyeti ve tüm parayı düşünün.

En Yaygın Zaman Harcayan 7 Şekillendirme Hatası

1. Metin veya div'leri ortalarken

Bir div ve/veya içeriği ortalamanız gerekiyorsa, şu sınıflardan birini kullanabilirsiniz:

Metin merkezini kullan

 <p class="text-center">I am centered text</p>

… veya orta blok

 <div class="center-block">I am centered text</div>

.center veya <center> değil

2. Yazı tipi boyutunu değiştirirken

Daha küçük veya daha büyük yazı tiplerine ihtiyacınız varsa, şu sınıflardan birini kullanabilirsiniz:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

Daha büyük veya daha küçük başlıklara ihtiyacınız varsa, .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small'ı unutmayın . Bunu şu şekilde kullanın:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. Şamandıraları temizlerken veya öğeleri kendi alt öğelerini temizlemeye zorlarken

.clear gibi sınıflar oluşturmaya gerek yok, bunun yerine her zaman Bootstrap'in .clearfix'ini kullanabilirsiniz.

 <div class="clearfix">...</div>

4. .row sınıfı kenar boşluklarını öldürürken

Kendi stillerinizi tanımlamak (veya daha da kötüsü, satır içi stilleri kullanmak) yerine .clearfix'i kullanın:

 <div class="clearfix">...</div>

5. Sırasız listelerin ve diğer öğelerin stilini kaldırırken veya satır içine alırken

Liste öğelerindeki varsayılan liste stilini ve sol kenar boşluğunu kaldırın. Bu sadece acil alt liste öğeleri için geçerlidir. Aynısını iç içe listeler için de uygulamanız gerekiyorsa, sınıf adını bunlara da eklemeniz gerekecektir.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

Benzer şekilde, onay kutuları veya radyo düğmeleri için .checkbox-inline ve .radio-inline'a sahibiz .

Ayrıca, sola hizalı ve satır içi blok denetimleri için her zaman formlarınıza (bir <form> olması gerekmez) .form-inline ekleyebilirsiniz.

6. Düğmeleri boyutlandırırken

Daha büyük veya daha küçük düğmeler mi istiyorsunuz? Ek boyutlar için .btn-lg , .btn-sm veya .btn-xs ekleyin .

7. Öğeleri sağa veya sola kaydırırken ve hizalarken

Bir öğeyi bir sınıfla sola veya sağa kaydırın. !important , özgüllük sorunlarından kaçınmak için eklenmiştir. Sınıflar, herhangi bir CSS ön işlemcisi ile karışım olarak da kullanılabilir.

.right , .left , .left-float , .right-float yerine .pull-right , .pull-left , .text-right , .text-left kullanın.

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Metin hizalama sınıflarıyla metni bileşenlere kolayca yeniden hizalayın.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

Çerçeve Çekirdek Dosyalarını Doğrudan Özelleştirmeyin

Büyük projeler üzerinde çalışırken, çerçeveyi etkili bir şekilde kullanmanın en iyi yolunun, çerçeveyi doğrudan geliştirmek ve çekirdek dosyalarını doğrudan özelleştirmemek olduğunu buldum. Bu konsept, proje için kullanabileceğiniz diğer platformlara ve kütüphanelere benzer.

Küçük bir site oluşturuyorsanız ve fazla değişiklik veya güncelleme gerektirmeyen bir tasarım modeliniz varsa, çerçeveyi ihtiyaçlarınıza göre özelleştirmenin daha iyi bir seçenek olduğunu görebilirsiniz. Örneğin, ihtiyacınız olmayan tüm şeyleri doğrudan çerçeve dosyalarında çıkarmak isteyebilirsiniz veya tüm bileşenleri, değişkenleri ve jQuery eklentilerini kolayca yapılandırabileceğiniz Bootstrap'in site özelleştirme bölümüne gidebilirsiniz. kendi versiyonu. Bu durumda, site geliştirmenizi hızlandırabilir ve stil oluşturma veya geçersiz kılmalarla uğraşma süresini kısaltabilirsiniz.

Bununla birlikte, birkaç veya daha fazla geliştiriciye sahip büyük bir site üzerinde çalışıyorsanız veya başlıyorsanız, işleri ayrı ve iyi organize etmek en iyisidir. Çerçeve dosyalarını ana özel CSS klasörünün dışına taşıyın ve düzenleme olmayan sürüm olmayan bir klasörde saklayın ve Grunt veya Gulp eklentilerini grunt-uncss veya gulp-uncss kullanarak kullanılmayan CSS'yi kaldırın. Ayrı tutmanın bir başka alternatifi de CDN aracılığıyla sunmaktır. Çerçeve kodunun ayrı ve dokunulmamış olması, onu en son sürüme yükseltirken size daha iyi ve daha hızlı bir seçenek sunar. Ayrıca, bir dizi ölçeklenebilirlik ve stil sorununu en aza indirmeye veya hızlı sürekli kullanıcı arabirimi değişiklikleriyle eklemeler yaparken yavaşlamaya yardımcı olur.

Uygulamanızın yoluna dosya eklemekten çok daha fazlasını yaptıkları için Yeoman veya Slush gibi iskele araçlarını ve Bower, Python's pip, Node's NPM veya Ruby Gems gibi paket yöneticilerini kullanın. Bower'ın gücünü gerçekten takdir ediyorum - kesinlikle bir veya iki dosyayı indirmekten biraz daha fazlasını yapabilir. Bir paket yöneticisi kullanmak iyi bir fikirdir, çünkü büyük olasılıkla projenizin karmaşıklığı artacak ve üçüncü taraf eklentilerin miktarı ve bunları nasıl koruyacağınız çılgınca ve zaman alıcı hale gelecektir. Bower, Bootstrap ile ilgili her şey dahil olmak üzere her bir eklentiyi ve bağımlılıklarını takip etmenize yardımcı olacaktır.

Uygulama Geliştirme için Mevcut Önyükleme Kaynaklarından Yararlanın

Bootstrap'in popülaritesi ile birlikte çok sayıda yardımcı kaynak gelir: makaleler, öğreticiler, üçüncü taraf eklentiler ve uzantılar, şablonlar, tema oluşturucular vb. Böylece ister ilham ister kod parçacıkları arıyor olun, ilerlemenizi hızlandırmak için ihtiyacınız olan her şeye sahip olacaksınız.

Bu kadar çok kaynağa sahip olmak, herkesin bundan yararlanacağını ve projeleri aracılığıyla kullanacağını düşünürdünüz, ama inanın ya da inanmayın - durum böyle değil. Bazı geliştiriciler, bazı harika kod parçacıklarını veya kaynaklarını atlayarak zamanlarını boşa harcar ve proje ilerlemesini yavaşlatır. Sadece körü körüne kopyalayıp yapıştırmamanıza rağmen, iyi kısımları anlamanız ve kodlama stilinize ve teknik ihtiyaçlarınıza uyarlamanız gerekir. İyi kaynakları bulma ve ayırma ve onu etkin bir şekilde kullanabilme yeteneği de bir beceridir ve yılların deneyimi ve bilgisi gerektirir.

Aşağıda, başlamak için yararlı kaynakların bir listesini bulacaksınız:

Şablonlar, Temalar ve Eklentiler

Bootstrap'in yaratıcılarından Resmi Temalar: theme.getbootstrap.com.

Premium Bootstrap temalarına ve şablonlarına sahip pazar yerleri: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Ücretsiz Bootstrap Temaları ve Şablonları: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

"The Big Badass List" - 319 faydalı Bootstrap kaynağının bir listesi: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

AngularUI Ekibi tarafından saf AngularJS ile yazılmış BootstrapUI.

ReactJS

React-Bootstrap, yeniden kullanılabilir ön uç bileşenlerinden oluşan bir kitaplıktır. Facebook'un React.js çerçevesi aracılığıyla Twitter Bootstrap'ın görünümünü ve hissini çok daha temiz bir kodla elde edeceksiniz.

Django

Django ile Bootstrap 3 entegrasyonu: https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap, Jekyll tabanlı bloglar için eksiksiz bir blog iskelesidir.

WordPress

Modern bir ön uç geliştirme iş akışına sahip WordPress başlangıç ​​teması Sage. HTML5 Boilerplate, gulp, Bower ve Bootstrap'a dayalıdır.

Malzeme Tasarımı

Bootstrap için Materyal Tasarımı, yeni Google Materyal Tasarımını en sevdiğiniz ön uç çerçevesinde kullanmanıza izin veren Bootstrap 3 için bir temadır.

Çözüm

Bootstrap, uygulama geliştirme sürecinizi hızlandırmak ve hızlandırmak için size birçok harika araç ve kaynak sunan mevcut en iyi çerçevelerden biridir.

Harika bir kullanıcı arayüzü tasarlarken ve kodlarken size saatlerce/günlerce çalışmadan tasarruf etmenizi sağlar. Her bileşen ve eklenti, daha kolay kullanım ve özelleştirme için canlı örnekler ve kod bloklarıyla kapsamlı bir şekilde belgelenmiştir. Birçok geliştirici tarafından şiddetle tavsiye edilir ve hem prototipleme hem de üretim için çok popülerdir. Mobil uyumlu duyarlı web siteleri yapmak için çok iyi bir araçtır. Bootstrap size birçok proje türü için harika bir başlangıç ​​noktası, onu bir tasarımcıya teslim etme ve "bunu süslü göster!" deme seçeneği sunar. onlar kod aracılığıyla yollarını kesmek zorunda kalmadan. En önemlisi, önce yapıyı geliştirmenize ve daha sonra yazı tiplerini, renkleri ve süslü stilleri ele almanızı sağlar. Ne yapabileceğini incelemek için zaman ayırın ve istediğiniz yere daha hızlı ulaşabilmeniz için onu en iyi şekilde nasıl kullanacağınız konusunda akıllı olun.