Hemen hemen herkes en az bir ya da birkaç kez bu şekilde Bootstrap, kullanmış durumdadır.

Web siteleri için, prototip ve (WordPress gibi iyi bilinen Milyonlarca Bootstrap İYS’ler için temalar dayanmaktadır. Çerçevesi, kurulumu basit, kullanımı kolay ve son derece zaman kurtarıcı bir programdır.. Bu çok az bir çaba ile iyi görünümlü tasarımlar oluşturmak için olanak sağlayan yüksek kaliteli HTML, CSS ve JavaScript üzerinde inşa edilmiş durumdadır.

CSS medya sorguları, ne kadar verimli olursa olsun telefonlar, tabletler veya dizüstü kullanarak aygıtlar sayesinde, kullanıcıların deneyimini sağlamak ve tek bir kod tabanı ile web siteleri ve uygulamalar ölçekler duruma gelmektedir. Kolayca uygulanabilir bileşenleri vardır. Sistemle birlikte modeller, galeriler, ipuçları, katlanabilir sekme sistemleri, açılır menüler, düğmeler ve çok daha fazlası:

Bu makalenin amacı Bootstrap 4.  Yeniliklerini tanımlamak ve karşımıza yeni olarak ne geliyor belirtmek. Bootstrap 4. Ün demo olan alfa sürümü, Bootstrap 4 tamamen stabil eksik değildir. Buna ek olarak, bazı özellikler değişebilir, bu nedenle şu anda üretimde kullanılmamalıdır. Ancak, şu ana kadar yapılan iyileştirmeler ayrıntılı bir açıklanmış bir çerçeveyi içerecektir. yeni çıkan özellikler hakkında iyi bir fikrim var ve sizlere oldukça yardımcı olacak size ileride yapılacak çalışmalara istihdam sağlayacaktır.

Ben Bootstrap 4’ün yeni özelliklerini tanıtan konuya başlamadan önce, en son güncellemelerin hızlı bir özetini yapalım.

Bootstrap kısa yakın tarih

19 Ağustos 2015de, ortaya çıkan Bootstrap ın dördüncü doğum günü vesilesiyle ve sonrasında dev ekibi oluşturmuştur. Bootstrap 4’ün ilk alfa sürümü . Bootstrap 3 ile karşılaştırıldığında en önemli değişiklik, Internet Explorer 8 kesin düşürme ve CSS kesme veya fallbacks güvenmek zorunda olmadan daha iyi bir CSS3 teknikleri kullanılarak sonraki olasılığı idi.

O zamandan bu yana, dört küçük bültenleri takip edildiğinde; 8 Aralık 2015 te  alfa 2 Bootstrap , Bootstrap 4,  27 Temmuz 2016 da alfa 3 ve 19 Ekim 2016  Bootstrap 4 alfa 4 . Ve son geçerli kararlı sürümü (Bootstrap 3.3.7 ) resmen 25 Temmuz 2016 tarihinde hayata geçirildi.

Bu güncellemeler sayesinde (ve Bootstrap dev toplumun şaşırtıcı yardım), iyileştirmeler, hata düzeltmeleri ve dokümantasyon geliştirmeleri yüzlerce önerilmiş ve dâhil edilmiştir.

BOOTSTRAP 4 YENILIKLERi neler?

HTML5, CSS3, JavaScript ve Sass: 4 Önyükleme bu standartları üzerine kuruludur. Son yıllarda, ön uç geliştiriciler, yaygın projelerinde bunu benimseyerek, yerine Az Sass için bir tercih ortaya koymuştur. Önceden yayımlanmış tüm sürümlerinde, Bootstrap kendi Ön işlemci olarak daha az kullanılır.

Sürüm 3 itibarıyla, Bootstrap bir Sass liman oluşturularak sürdürülen haline geldi.

4 Önyükleme şimdi varsayılan olarak kullanır ve kullandığı Libsass gerçekten hızlı derlemek için, bir Sass derleyicisi olarak C / C ++ uygulamadır. Meraklı ve Az ve Sass arasındaki “rekabet” hakkında daha fazla şey biliyor ve kod temeli değişen dev takımın son seçim ardındaki nedenleri keşfetmek istiyorsanız, ben size Neden 4 Bootstrap Sass başlıklı görüş yazımıza bir göz atmanızı öneririm.

Şimdi, Bootstrap 4’ün neler sunabileceğini bulalım.

Değiştirici sınıfları bu bileşenlere benzer işlevler sunan Bootstrap 4’te. Bir kart olarak cardlar için panel, thumbnail, Ve .wellsınıflar yerini almış durumdadır.

Esnek ve genişletilebilir içerik konteyner. Bu üst bilgi ve alt bilgiler için seçeneklerler sunan içerikler geniş bir yelpazede, içeriksel arka plan renkleri ve güçlü ekran seçeneklerini içerir.

Kartlar ile birlikte veya eşit yüksekliğe sahip gruplandırılmış, tekiller olabilir. Daha önce de belirtildiği gibi parçaların yerini alacak, kartlar hakkında Size nasıl daha iyi bir fikir verebileceğim konusunda ben kullanılarak oluşturulan thumbnail Bootstrap 3 ve card Bootstrap 4 için aynı görsel bileşeni gösteren bir örnek oluşturdum.

Bootstrap 3 kullanılarak geliştirilen kod aşağıda gösterilmiştir:

<div class=”thumbnail”>

  <img src=”https://placehold.it/350×150″ alt=””>

  <div class=”caption”>

    <h3>Bootstrap 4</h3>

    <p>The new version of Bootstrap is incredible. You should definitely try it!</p>

    <a href=”#” class=”btn btn-primary” role=”button”>Download</a>

  </div>

</div>

Bu sonuçlanır:

Küçük resim Nasıl da Bootstrap 3 ‘a benziyor

Bootstrap 4 ile oluşturulan kod aşağıdaki gibidir:

<div class=”card”>

  <img class=”card-img-top” src=”https://placehold.it/350×150″ alt=””>

  <div class=”card-block”>

    <h3 class=”card-title”>Bootstrap 4</h3>

    <p class=”card-text”>The new version of Bootstrap is incredible. You should definitely try it!</p>

    <a href=”#” class=”btn btn-primary” role=”button”>Download</a>

  </div>

</div>

Bootstrap 4 kod neden olur:

Bootstrap 4 kartları Neye benziyor

Gördüğünüz gibi, sonuca ulaşmak için biçimlendirme isteği hemen hemen aynıdır. cardBileşeni ek sınıfların bir çift kullanımını gerektirir, ancak bu esnekliği kaynaklanmaktadır. Dahası Bootstrap 3 görüntü varsayılan olarak ortalanır.

Yeni Button Sitilleri

Düğmelerin yepyeni bir tarzı var. Onlar üzerinde kesinlikle “düz” gitme ve geçişlerini kaldırıldı. Ayrıca, btn-outline-*sınıflar getirilmiş durumdadır.

Onların zamanla nasıl değiştiğini görmelerini ve aşağıdaki örnekte farkları olabilir. Aşağıdaki HTML Verilen:

<button type=”button” class=”btn btn-primary”>Primary</button>

<button type=”button” class=”btn btn-outline-primary”>Primary</button>

<button type=”button” class=”btn btn-secondary btn-lg”>Large button</button>

<a href=”#” class=”btn btn-secondary btn-lg active” role=”button” aria-pressed=”true”>Link</a>

<button type=”button” class=”btn btn-lg btn-primary” disabled>Primary button</button>

Bootstrap 3’te düğmelerin nasıl görüneceğini budur:

Düğmeler Bootstrap 3 neye benziyor

Ve Bootstrap 4te yeni görünüm:

Düğmeler Bootstrap 4 te neye benziyor

Tipografi Değişiklikleri

Bootstrap 4, 16px yeni varsayılan yazı tipi boyutu, metin boyutu daha büyük ve daha görünür olduğu anlamına gelir, (Bu 14px önceki idi).

Ayrıca, bu yeni sürümü her şeyin daha fazla olması amaçlanmıştır. yazı boyutlandırma ve ızgara sistemi: önemli bir donanımı sayesinde rems olarak dinamik dayanmaktadır. İsterseniz, yine tipografi için piksel, EMS, ya da puan kullanabilirsiniz unutmayın. Ancak, Bootstrap 4 yazı boyutlandırma tamamen dayanmaktadır rem birimi ve bu değişimin arkasındaki nedeni olan remmobil cihazlar aşağı yukarı ölçek ya da için işimizi  kolaylaştırır.

Ve yazı hakkında konuşurken, bu Önyükleme 4 Glyphicons simgesi yazı damla olduğunu hatırlamak için önemlidir. Eğer simgeler gerekiyorsa, dev ekip aşağıdaki seçenekleri önerir:

Yukarı versiyonu Glyphicons

Octicons

Başar yazı

max-widthayarlanır rems. Kullanımı rems şimdi olduğu gibi, hem de ızgara sistemi için geçerli

GÖRÜNTÜ BAŞLIKLARI

rems, Kullanımı yeni bir tipografik bileşeni tanıtmak için ekran başlığı istihdam edilmiştir. 3 zaten desteklenir sınıflar gibi Bootstrap h1, h2onlar başlıkları sanki ve benzeri öğeleri görüntülemek için. 4 Bootstrap sayfanın öne çıkan bir başlık gerektiğinde kullanılması gereken bu yeni bileşen sayesinde, uygulayarak geliştiriciler için olasılığını arttırır.

4 Önyükleme destekleyen dört farklı boyut ekran başlığı (sınıf için display-*). Aşağıdaki örnek, onların nasıl kullanılacağını gösterir:

<h1 class=”display-1″>Heading 1</h1>

<h1 class=”display-2″>Heading 2</h1>

<h1 class=”display-3″>Heading 3</h1>

<h1 class=”display-4″>Heading 4</h1>

Bu onlar bakmak nasıl:

Ekran başlıkları Bootstrap 4 te neye benziyor

FLEXBOX

Bootstrap bu sürümünde büyük yeniliklerden biri için destek FlexBox CSS daha basit ve esnek düzen seçenekleri sunar. Belirtildiği gibi Bootstrap resmi rehber ,daha özel olarak ise, [FlexBox] içerir:

Bir ana öğesinin içinde içerik kolay dikey hizalama.

Medya sorguları yardımıyla reordering. Cihazlar ve ekran çözünürlükleri arasında içeriğin kolay

Senin grid tabanlı düzenleri için kolay CSS sadece eşit yükseklik sütunları.

Bütün bunlar mümkün olurken bubların dışında FlexBox vardır, ama genellikle doğru yapmak için ekstra kesmek ve geçici çözümler gerektirmektedir.

Bu konu hakkında daha fazla bilmek istiyorum ve Bootstrap ızgara bileşenleri içinde aktive olursa neler olur bilmek isterseniz, size  “Bootstrap 4 FlexBox Kullanılması” makaleyi okumanızı öneririm.

DIĞER DEĞIŞIKLIKLER

Yeni Aralığı Yardımcı Sınıflar yatay ve dikey boşluk daha iyi kontrole sahip sağlayan bir duruma getirilmiştir. Artık (kenar boşlukları veya altlık ile) bir yardımcı sınıfını kullanarak herhangi bir yönde bazı yerleri ekleyebilirsiniz.

Kod basittir:

<div class=”row”>

    <div class=”col-sm-6 m-t-md”>

        <!– column-small-50%, margin-top-medium –>

    </div>

</div>

Her şey son derece sezgisel: m marjı anlamına gelir ve p dolgusu için. Yöne gelince: t üst içindir. r hakkı için, l sol için, x sağ ve sol için y üst ve alt ve bir bütün için. Son olarak, boyutları için: 0, sıfır içindir. Oto için, md orta ve için lg için büyük. Varsayılan için boş bırakın.

Bir yana not olarak yazdığımızda, her eklenti olarak yeniden yazılmıştır belirtmekte yarar var ES6 yeni JavaScript geliştirmelerinden yararlanmak ve tüm belgeler de çekirdekler edilmiştir.

Bazı ek kaynaklar için, check out bu makaleyi Nicholas Cerminara tarafından ve Orta bu yazı Carol Skelly tarafından.

Bootstrap 4 nelerin değiştiğini 3 Bootstrap ile karşılaştırıldığında?

Bootstrap 3 te eylem zaten vardı ama sürüm 4 ilgili düzenlemeleri olan bileşenleri arasında, iki önemli değişiklikten bahsetmek istiyorum. Birincisi, The yeni bir ızgara kesmecol-xl-* classes girmiştir. Bootstrap 3’e dayanan ve 4 katmanlı ızgara sistemi tüm tipik dikey ve yatay ekran genişliklerini desteklemek için yeni bir kesme de dâhil olmak üzere, 5 katmanlı ızgara sistemi olmaya dönüşmüştür.

Şimdi 5 katlı şekli şunlardır:

(-Ekstra küçük <544 px)

Küçük ( ≥544 px)

Orta ( ≥768 px)

Büyük ( ≥992 px)

(-Ekstra büyük ≥1200 px)

XS kesme tipik küçük cihaz genişlikleri için daha iyi destek sağlayan 544px daha küçük ekranlar için bize hedef olarak izin verdiğinde  XL kesme, 1200px> için ekran genişlikleri olduğunu doğrular.

Yeni katman 544px altında ekran genişlikleri desteklerken sürüm 3 katmanlı  col-xs-*, 768px altında ekran genişliklerini destekledi. Sonuç olarak, bu değişiklik mobil cihazlar (akıllı telefonlar) üzerine portre görünümleri desteğini geliştirir.

İkincisi, Bootstrap 3 desteklenmediği özel formlar Bunlar tamamen tarayıcı varsayılan yerine özelleştirilebilir unsurlardır sürüm 4. girmiştir. Aynı için de geçerlidir ters tablolar girmesinden sonra Bootstrap 4 eklenmiştir. table-inverse class. Bu CodePen örnek bu yeni özelliği uygulamanın nasıl olduğunu gösterir.

Bu  sürüm size 3 ve 4 arasındaki farklar hakkında yeterli bilgiler  vermek için gerekir, ancak tam anlamıyla her şeyi bilmek istiyorum diyenler için, ben ayrıntılı bir listesini önermek isterim . Gelişme ilerledikçe bu liste gözden geçirilecektir unutmayın.

Sonuç

Bu makalede, sürüm 4. Ve sürüm 3 resmi geçit ile değişecek neler olduğunu Bootstrap 4te yeni ve hızlı bir bakış yapmayı amaçlıyordu. sizler de  daha fazla bilgi edinmek istiyorsanız her şeyi kapsayan, ve en iyi tavsiye anlamına gelen  Bootstrap 4 okumak için ilgili resmi web sitesinde mevcut belgeleri dikkatle ve eksiksiz takip edin Bootstrap 4 Göç Kılavuzu son değişiklikleri görebilmek için.

Bootstrap 4 için çıkış tarihi henüz bilinmemektedir. Ancak çalışma grubu üzerine onun dikkatini ve onların iş-içinde-ilerleme sürecinin nasıl gittiğini göreceğiz. Diğer özellikleri hakkında daha ayrıntılı bir fikrim yok diyorsanız. sizlerde projenin GitHub sayfasına bir göz atabilirsiniz.. Eğer yardım etmek istiyorsanız topluluğuna katılmak için çekinmeyin! Dev ekibi iddialı bir kalkınma planı ve todos uzun bir liste var, bu yüzden senin işbirliğinden büyük bir mutluluk duyacağız eminin olabilirsiniz.