jumbotron

Temel örnek

Jumbotron bileşeni, v4 sürümünde düşürülmüştür çünkü yardımcı araçlarla yeniden oluşturulabilir. Web sitenizde önemli pazarlama bilgilerini sergilemek için isteğe bağlı olarak tam görünüm alanına ulaşabilen hafif, esnek bir öğe oluşturma örneklerine göz atın.

ipucu

Bu jumbotron, öne çıkan içerik veya bilgiye ekstra dikkat çekmek için kullanılabilir.

Merhaba, dünya! Bu basit bir kahraman birimidir, öne çıkan içerik veya bilgiye ekstra dikkat çekmek için kullanılan basit bir jumbotron tarzı bileşendir.

İçeriği daha büyük bir kapsayıcı içinde yerleştirmek için tipografi ve boşluklar için yardımcı sınıfları kullanır. Daha fazla bilgi edinin

Tam genişlikte Bootstrap jumbotron

bilgi

Bu, yukarıdaki temel jumbotronu alır ve bir .container içindeki içerik ile hizalamak için kenarları uçtan uca yapar.

Tam genişlikte jumbotron

  Yukarıdaki gibi, yerleşik ızgara ve yardımcı sınıflar ile yeniden oluşturulmuştur.

Özel Bootstrap jumbotronları

tehlike

Arka plan rengi ve metin rengi yardımcı sınıflarını değiştirirken, renk uyumuna dikkat edin.

  Arka planı değiştirin
  <p>Arka plan rengi yardımcı sınıfını değiştirin ve jumbotron görünümünü karıştırmak için bir .text-* renk yardımcı sınıfı ekleyin. Ardından, ek bileşen temaları ve daha fazlası ile karıştırın ve eşleştirin.
  Örnek düğme




  Sınırlar ekleyin
  Ya da, hafif tutun ve içeriklerinizin sınırlarına biraz tanım eklemek için bir sınır ekleyin. Her iki sütunun içeriğinin eşit yükseklikte olup olmadığını kontrol etmek için burada kaynak HTML'ye göz atmayı unutmayın.
  Örnek düğme