Burada Bootstrap ile ilgili birçok soru var. Bunu kullanan birçok insan görüyorum. Bu yüzden araştırmaya çalıştım ve resmi Bootstrap sitesini buldum , ancak sadece bir indirme bölümü ve bundan sonra birkaç kelime vardı. Bunun ne için olduğunu açıklayan bir şey yok ... Bunun bir ön uç yardımcısı olduğunu anladım. Google tarafından bir şey bulmaya çalıştım, ancak belirli bir şey bulamadım. Bulduğum her şey bilgisayar bilimi tanımıyla ilgili.

Yani, sorularım:

• Bootstrap nedir?
• Ne için kullanılır ve ön uç geliştirmeye nasıl yardımcı olur?
• Bunu açıklayan bazı ayrıntılar da istiyorum.

Web siteleri veya web uygulamaları oluşturmak için temel olarak kullanabileceğiniz bir HTML, CSS ve JavaScript açık kaynak çerçevesidir (başlangıçta Twitter tarafından oluşturulur).

• Daha fazla bilgi ve indirme bağlantıları

• Başlangıç

• Örnekler

• Temalar

• Bootply - Bootstrap Editör ve Oluşturucu

Güncelleme

Resmi bootstrap web sitesi güncellenir ve net bir tanım içerir.

"Bootstrap, web üzerinde duyarlı, mobil ilk projeler geliştirmek için en popüler HTML, CSS ve JS çerçevesidir."

" @Mdo ve @fat tarafından dünyadaki tüm sevgiyle tasarlanmış ve inşa edilmiştir ."

Bootstrap, Twitter'daki ekip tarafından geliştirilen açık kaynaklı bir Javascript çerçevesidir. Kullanıcı arabirimi bileşenlerinin oluşturulmasına yardımcı olmak için tasarlanmış HTML, CSS ve Javascript kodunun bir kombinasyonudur. Bootstrap hem HTML5 hem de CSS3'ü destekleyecek şekilde programlandı.

Ayrıca Ön uç çerçeve denir.

Bootstrap, web siteleri ve web uygulamaları oluşturmak için ücretsiz bir araç koleksiyonudur.

Tipografi, formlar, düğmeler, gezinme ve diğer arabirim bileşenleri için HTML ve CSS tabanlı tasarım şablonlarının yanı sıra isteğe bağlı JavaScript uzantıları içerir.

Programcılar için Bazı Nedenler Bootstrap Çerçevesini tercih etti

1. Başlamak kolay

2. Mükemmel ızgara sistemi

3. Çoğu HTML öğesi için temel stil (Tipografi, Kod, Tablolar, Formlar, Düğmeler, Görüntüler, Simgeler)

4. Kapsamlı bileşen listesi

5. Birlikte verilen Javascript eklentileri

About Bootstrap Framework'ten Alınan

Bootstrap, bildiğim gibi, iyi tanımlanmış bir CSS. Bootstrap kullanmanıza rağmen JavaScript, jQuery vb. örneğin. düzenleri kullanarak, metin şekillendirme düğmelerin renklendirme. Tüm bunlar için bir CSS dosyası yazmak zorunda değilsiniz, sadece HTML formunuzu şekillendirmek için doğru sınıf adını kullanmanız gerekir.

Daha basit bir deyişle, Bootstrap'ı, cihaza duyarlı web uygulamalarının daha hızlı oluşturulması için Twitter tarafından oluşturulan bir ön uç web çerçevesi olarak anlayabilirsiniz. Bootstrap, çoğunlukla içinde doğrudan kullanılabilen CSS sınıflarının bir koleksiyonu olarak da anlaşılabilir. Bootstrap öğeleri için stil, efektler ve eylemler oluşturmak üzere arka planda CSS, javascript, jQuery vb.

Web sayfası öğelerini şekillendirmek ve sınıflar oluşturmak için CSS kullandığımızı ve stili onlara uygulamak için web sayfası öğelerine sınıflar atadığımızı biliyor olabilirsiniz. Bootstrap burada tasarımı kolaylaştırıyor çünkü sadece Bootstrap dosyalarını dahil etmemiz ve Bootstrap'ın web sayfası elemanları için önceden tanımlanmış sınıf adlarından bahsetmemiz gerekiyor ve bunlar Bootstrap aracılığıyla otomatik olarak şekillendirilecek. Bu sayede, web sayfası öğelerine stil eklemek için kendi CSS sınıflarımızı yazmaktan kurtuluruz. En önemlisi Bootstrap, web sitenizin cihazını duyarlı hale getiren ve ana amacı bu şekilde tasarlanmıştır. Bootstrap için diğer alternatifler - Temel , Materyalize vb.

Bootstrap, çok sayıda CSS kodu yazmaktan kurtulmanızı sağlar ve ayrıca web sayfalarını tasarlamak için harcadığınız zamandan tasarruf sağlar.

Bootstrap, Twitter'ın tasarımcılar ve geliştiriciler ekibi tarafından Twitter uygulaması için geliştirilmiş açık kaynaklı bir CSS, JavaScript çerçevesidir. Sonra açık kaynak için yayınladılar. Twitter bootstrap uzun zamandır kullanıcı olmak onun mobil hazır duyarlı web siteleri tasarlamak için en iyi olduğunu düşünüyorum. Web sitenizi hemen tasarlamanız için birçok CSS ve Javascript eklentisi mevcuttur. Bir çeşit hızlı şablon tasarım çerçevesi. Bazı insanlar bootstrap CSS dosyalarının ağır olduğundan ve yüklenmesinin zaman aldığından şikayet ediyorlar, ancak bu iddialar tembel insanlar tarafından yapıldı. Web sitenizde bootstrap.css dosyasının tamamını saklamanız gerekmez. Web siteniz için gerekli olmayan bileşenlerin stillerini kaldırma seçeneğiniz her zaman vardır. Örneğin, yalnızca formlar ve düğmeler gibi temel bileşenleri kullanıyorsanız, ana CSS dosyasından akordeonlar vb. gibi diğer bileşenleri kaldırabilirsiniz. Bootstrap'te dabbling başlatmak için temel şablonları ve bileşenleri indirebilirsinizgetbootstrap sitesi ve sihrin gerçekleşmesine izin verin.

Feragatname: Geçmişte bootstrap kullandım, ama aslında daha önce ne olduğunu gerçekten takdir etmedim, bu açıklama bugün kendi tanımımdan geliyor. Ve bootstrap v4'ün bittiğini biliyorum, ancak bootstrap v3 belgelerinin çok daha net olduğunu gördüm, bu yüzden kullandım. Kütüphane, sağladığı şeyi kökten değiştirmeyecek.

kısaca

Bootstrap, standart html öğeleri için bazı hoş görünümlü varsayılan stil ve standart html öğeleri olmayan birkaç yaygın web içeriği nesnesi sağlayan bir CSS ve javascript dosyaları koleksiyonudur.

Bir benzetme yapmak için, powerpoint'te bir tema uygulamak gibi bir şeydir, ancak web siteniz için: çok fazla çaba harcamadan işleri oldukça güzel gösterir.

Ne içeriyor?

Resmi v3 belgeleri üç bölüme ayrılmıştır:

• CSS
• Bileşenler
• JavaScript

Bunlar kabaca Bootstrap'in sağladığı üç ana şeye karşılık gelir:

• Standart html öğelerine stil veren düz CSS dosyaları. Öyleyse, Bootstrap standart öğelerinizi hoş görünüyor. örneğin, html:<input class="btn btn-default" type="button" value="Input">Click me</button>
• Standart bir html öğesi olmayan, ancak standart bir Bootstrap öğesi (ör. Https://getbootstrap.com/docs/3.3/components/#progress ) olan bir şeye dönüştürmek için standart html öğelerinde stil kullanan CSS dosyaları . Bu şekilde Bootstrap "standart" web elemanları listesini görsel olarak tutarlı bir şekilde genişletir. örneğin, html:<span class="glyphicon glyphicon-align-left"></span>
• CSS sınıfları jQuery düşünülerek tasarlanmıştır. Dahili olarak Bootstrap, stilleri anında değiştirmek ve DOM ile etkileşime geçmek için jQuery seçicileri kullanır ve böylece kullanıcıya aynı yeteneği sağlar. Bunun daha fazla açıklama gerektirdiğine inanıyorum, bu yüzden ...

Javascript / jQuery kullanma

Bootstrap jQuery'yi biraz genişletir . Kaynak koda bakarsak, jQuery'nin aşağıdaki gibi şeyler yapmak için kullandığını görebiliriz: açılır listelerle etkileşimde bulunmak için keydown olayı için dinleyiciler ayarlayın . <script>Etiketinizde içe aktardığınızda tüm bu jQuery kurulumunu yapar, bu nedenle Bootstrap olmadan önce jQuery'nin yüklendiğinden emin olmanız gerekir.

Ayrıca, javascript'i DOM ile düz jQuery'den daha sıkı bağlar ve bir javascript sınıfı arabirimi sağlar. örneğin bir düğmeyi programlı olarak değiştirin . CSS'nin yalnızca bir şeyin nasıl göründüğünü tanımladığını unutmayın, bu nedenle bu işlemlerin ana işi, o anda hangi CSS sınıflarının öğeye uygulanacağını değiştirme eğilimindedir. Kullanıcı girişine dayalı bu tür değişiklikler düz CSS ile yapılamaz.

İnternet sakinlerinin CSS kapsamına girmediği bir kullanıcıyla başka standart etkileşimler de vardır. Mesela, sayfaları değiştirmek yerine sizi bir sayfaya kaydıran bir bağlantıyı tıklamak gibi. Bootstrap'ın size sunduğu şeylerden biri, bu davranışı kendi web sitenize uygulamanın kolay bir yoludur.

Standartlar

Burada "standart" kelimesinden çok bahsettim ve iyi bir nedenle. Bootstrap'ın sağladığı en iyi şey, iyi görünümlü standartlar kümesi. Varsayılan temayı istediğiniz kadar değiştirebilirsiniz, ancak ham html, css ve js'den daha iyi bir temeldir. Bu yüzden buna "çerçeve" denir.

Farklı web tarayıcılarının farklı varsayılan stilleri vardır ve farklı davranabilirler ve farklı CSS öneklerine ve bunun gibi şeylere ihtiyaç duyarlar. Bootstrap'ın en büyük yararı, tüm tarayıcılar arası şeyleri kendiniz yazmaktan çok daha güvenilir olmasıdır (yine de sorunlarınız olacak, eminim, ancak daha kolay).

Ben gulp ve babil kadar popüler olmadığında Bootstrap'ın daha çok tercih edildiğini düşünüyorum. Bootstrap'a bakıldığında, herkesin javascriptlerini derlemesinden bir süre önce gelmiş gibi görünüyor. Hala alakalı, ancak şimdi diğer kaynaklardan bazı avantajlardan yararlanabilirsiniz.

_{CSS'nin daha yeni sürümleri, değiştikçe bu statik listeler arasındaki geçişleri tanımlamanıza izin verdi. Bootstrap'ın orijinal sürümü aslında bu yeteneğin tarayıcılarda yaygın olarak kullanılmasını engelliyor, bu yüzden hala kendi animasyon sınıfları var. Bunun gibi birkaç Bootstrap biti var: diğer şeyler onun etrafında ortaya çıktı ve biraz gereksiz görünmesini sağlıyor.}

Bootstrap, güzel ve modern web siteleri veya web uygulamaları çok hızlı oluşturmanızı sağlayan birçok bileşene sahip bir HTML, CSS, JS çerçevesidir.

Aşağıdaki web siteleri, bootstrap çerçevesini kullanarak projenize entegre edebileceğiniz örnekler, öğeler ve yeniden kullanılabilir bileşenler içerir

bootsnipp.com

startbootstrap.com

bootdey.com

Bootstrap, HTML, CSS ve JS ile geliştirme için dünyanın en popüler ve yaygın olarak kullanılan açık kaynaklı çerçevesidir. HTML'nin ön uç çerçevesidir. Bootstrap, duyarlı web siteleri veya web uygulamaları ve web sitesini dinamik bir şekilde uygun bir ekran çözünürlüğüne göre ayarlamaya yardımcı olan 12 sütunlu bir ızgara sistemi oluşturmaya yardımcı olur. Bootstrap'ın şu anki sürümü 4.3.1 ve bootstrap ekibi Bootstrap 5 sürümünü resmi olarak duyurdu ve jquery'i bootstrap'tan kaldırmak gibi değişiklikler yaptı. Bootstrap çerçevesinin en çok tercih edilmesinin önemli nedenlerinden bazıları

• Kullanımı kolaydır
• Bootstrap'ın büyük bir topluluk desteği var
• Özelleştirmeler kolayca yapılabilir
• Geliştirme hızını artırır

• Cevaplanabilirlik

  Daha fazla ayrıntı için resmi web sitesini kontrol edebilirsiniz: https://getbootstrap.com/

Kaynak: https://vmokshagroup.com/blog/bootstrap-advantages/

Günümüz standartlarına ve web terminolojisine göre, Bootstrap'in aslında bir çerçeve olmadığını söyleyebilirim , ancak web sitelerinin iddia ettiği şey budur. Çoğu geliştirici Angular, Vue ve React çerçevelerini düşünürken, Bootstrap genellikle " kütüphane " olarak adlandırılır .

Ancak, kesin ve doğru olarak, Bootstrap, yaygın olarak kullanılan web öğelerini sıfırdan kodlamaktan çok daha hızlı (ve daha akıllı) geliştirmeyi amaçlayan açık kaynaklı, mobil ilk önce bir CSS, JavaScript ve HTML tasarım yardımcıları koleksiyonudur. .

Bootstrap'ın başarısına katkıda bulunan birkaç temel ilke:

• tekrar kullanılabilir
• esnek (yani: özel ızgara sistemlerine, yanıt verme kesme noktalarının, sütun oluk boyutlarının veya durum renklerinin kolaylıkla değiştirilmesine izin verir; genel bir kural olarak, çoğu ayar global değişkenler tarafından kontrol edilir)
• sezgisel
• modülerdir (hem JavaScript hem de (S) CSS modüler bir yaklaşım kullanır; yalnızca ihtiyaç duydukları parçaları dahil etmek için özel Bootstrap yapıları oluşturma konusunda öğreticiler kolayca bulunabilir)
• tarayıcılar arası ortalamanın üstünde uyumluluğu var
• kullanıma hazır web erişilebilirliği (ekran okuyucu hazır)
• oldukça iyi belgelenmiş

Tasarım şablonları ve işlevleri içerir: düzen, tipografi, formlar, navigasyon, menüler (açılanlar dahil), düğmeler, paneller, rozetler, modals, uyarılar, sekmeler, katlanabilir, akordeonlar, atlıkarıncalar, listeler, tablolar, sayfalandırma, medya yardımcı programları (dahil yerleştirmeler, görüntüler ve görüntü değiştirme), yanıt verme yardımcı programları, renk tabanlı yardımcı programlar (birincil, ikincil, tehlike, uyarı, bilgi, ışık, karanlık, sessiz, beyaz), diğer yardımcı programlar (konum, kenar boşluğu, dolgu, boyutlandırma, aralık, hizalama, görünürlük), scrollspy, ek, araç ipuçları, popovers.

Varsayılan olarak jQuery'ye dayanır, ancak modern popüler aşamalı JavaScript çerçevelerinin her biri tarafından desteklenen jQuery ücretsiz varyantlarını bulacaksınız:

• Tepki-Önyükleme - React destekli Bootstrap
• BootrapVue - Vue destekli Bootstrap
• ng-bootstrap - Açısal tahrikli Bootstrap

Bootstrap ile çalışmak büyük ölçüde belirli sınıfların uygulanmasına (veya JS çerçevesine bağlı olarak: yönergeler, yöntemler veya öznitelikler / aksesuarlar) ve belirli biçimlendirme yapılarının kullanılmasına dayanır.

Belgeler tipik olarak kolayca kopyalanabilen ve başlangıç ​​şablonları olarak kullanılabilen genel örnekler içerir.

Bootstrap ile geliştirmenin bir diğer avantajı, çoğu açık kaynak olan (örneğin: takvimler, tarih / saat seçiciler, tablo içerik yönetimi için eklentiler, MDB, portföy şablonları, yönetici şablonları vb. gibi Bootstrap üzerine inşa edilmiş kütüphaneler / bileşen koleksiyonları gibi)

Son olarak, Bootstrap yıllar boyunca iyi korunmuştur, bu da onu üretime hazır uygulamalar / web siteleri için sağlam bir seçim haline getirir.