Bileşenler

Navigasyon, uyarılar, açılır pencereler ve daha fazlasını sağlamak için oluşturulmuş düzinelerce yeniden kullanılabilir bileşen.

Örnekler

İki temel seçenek ve iki özel varyasyon daha.

Tek düğme grubu

Bir dizi düğmeyi .btnin ile sarın .btn-group.

  1. <div sınıfı = "btn grubu" >
  2. <button class = "btn" > Sol </button>
  3. <button class = "btn" > Orta </button>
  4. <button class = "btn" > Sağ </button>
  5. </div>

Çoklu düğme grupları

Daha karmaşık bileşenler için kümeleri <div class="btn-group">bir araya getirin.<div class="btn-toolbar">

  1. <div sınıfı = "btn-araç çubuğu" >
  2. <div sınıfı = "btn grubu" >
  3. ...
  4. </div>
  5. </div>

Dikey düğme grupları

Bir dizi düğmenin yatay yerine dikey olarak yığılmış görünmesini sağlayın.

  1. <div class = "btn-group btn-group-dikey" >
  2. ...
  3. </div>

Onay kutusu ve radyo aromaları

Düğme grupları, yalnızca bir düğmenin etkin olabileceği radyolar veya herhangi bir sayıda düğmenin etkin olabileceği onay kutuları olarak da işlev görebilir. Bunun için JavaScript belgelerini görüntüleyin .

Düğme gruplarındaki açılır menüler

Önüne bak!Açılır menüleri olan düğmeler, düzgün işleme için .btn-groupkendi başlarına ayrı ayrı sarılmalıdır ..btn-toolbar

Genel bakış ve örnekler

Bir açılır menüyü a içine yerleştirerek .btn-groupve uygun menü işaretlemesini sağlayarak tetiklemek için herhangi bir düğmeyi kullanın.

  1. <div sınıfı = "btn grubu" >
  2. <a class = "btn açılır-geçiş" data-toggle = "açılır menü" href = "#" >
  3. Eylem
  4. <span class = "şapka" ></span>
  5. </a>
  6. <ul class = "açılır menü" >
  7. <!-- açılır menü bağlantıları -->
  8. </ul>
  9. </div>

Tüm düğme boyutlarıyla çalışır

Düğme açılır listeleri her boyutta çalışır: .btn-large, .btn-small, veya .btn-mini.

JavaScript gerektirir

Düğme açılır listelerinin çalışması için Bootstrap açılır eklentisi gerekir.

Mobil gibi bazı durumlarda açılır menüler görünümün dışına taşar. Hizalamayı manuel olarak veya özel JavaScript ile çözmeniz gerekir.


Bölme düğmesi açılır menüleri

Düğme grubu stillerine ve işaretlemesine dayanarak, kolayca bölünmüş bir düğme oluşturabiliriz. Bölme düğmeleri, solda standart bir eyleme ve sağda bağlamsal bağlantılarla birlikte bir açılır menüye sahiptir.

  1. <div sınıfı = "btn grubu" >
  2. <button class = "btn" > Eylem </button>
  3. <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >
  4. <span class = "şapka" ></span>
  5. </button>
  6. <ul class = "açılır menü" >
  7. <!-- açılır menü bağlantıları -->
  8. </ul>
  9. </div>

Boyutlar

Ekstra düğme sınıflarını .btn-mini, .btn-smallveya .btn-largeboyutlandırma için kullanın.

  1. <div sınıfı = "btn grubu" >
  2. <button class = "btn btn-mini" > Eylem </button>
  3. <button class = "btn btn-mini açılır menü geçişi" data-toggle = "açılan menü" >
  4. <span class = "şapka" ></span>
  5. </button>
  6. <ul class = "açılır menü" >
  7. <!-- açılır menü bağlantıları -->
  8. </ul>
  9. </div>

Açılır menüler

Açılır menüler, öğesinin hemen üst öğesine tek bir sınıf eklenerek aşağıdan yukarıya doğru da değiştirilebilir .dropdown-menu. Yönünü çevirecek ve .caretyukarıdan aşağıya değil aşağıdan yukarıya hareket etmek için menünün kendisini yeniden konumlandıracaktır.

  1. <div class = "btn-group drop-up" >
  2. <button class = "btn" > Açılır Pencere </button>
  3. <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >
  4. <span class = "şapka" ></span>
  5. </button>
  6. <ul class = "açılır menü" >
  7. <!-- açılır menü bağlantıları -->
  8. </ul>
  9. </div>

Standart sayfalandırma

Uygulamalar ve arama sonuçları için harika, Rdio'dan ilham alan basit sayfalandırma. Büyük bloğu gözden kaçırmak zordur, kolayca ölçeklenebilir ve geniş tıklama alanları sağlar.

  1. <div sınıfı = "sayfalandırma" >
  2. <ul>
  3. <li><a href = "#" > Önceki </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Sonraki </a></li>
  10. </ul>
  11. </div>

Seçenekler

Devre dışı ve aktif durumlar

Bağlantılar farklı durumlar için özelleştirilebilir. .disabledTıklanamayan bağlantılar için ve .activegeçerli sayfayı belirtmek için kullanın .

  1. <div sınıfı = "sayfalandırma" >
  2. <ul>
  3. <li class = "devre dışı" ><a href = "#" > « </a></li>
  4. <li class = "etkin" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

İsteğe bağlı olarak, istenen stilleri korurken tıklama işlevini kaldırmak için etkin veya devre dışı bırakılmış çapaları yayılma alanları için değiştirebilirsiniz.

  1. <div sınıfı = "sayfalandırma" >
  2. <ul>
  3. <li class = "devre dışı" ><span> « </span></li>
  4. <li class = "etkin" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Boyutlar

Daha büyük veya daha küçük sayfalama ister misiniz? Ek boyutlar için .pagination-large, .pagination-smallveya ekleyin ..pagination-mini

  1. <div class = "sayfalandırma sayfalandırma-büyük" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div sınıfı = "sayfalandırma" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "sayfalandırma sayfalandırma-küçük" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "sayfalandırma sayfalandırma-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

hizalama

Sayfalandırma bağlantılarının hizalamasını değiştirmek için isteğe bağlı iki sınıftan birini ekleyin: .pagination-centeredve .pagination-right.

  1. <div class = "sayfalandırma sayfalandırma merkezli" >
  2. ...
  3. </div>
  1. <div class = "sayfalandırma sayfalandırma-sağ" >
  2. ...
  3. </div>

Çağrı cihazı

Hafif işaretleme ve stiller ile basit sayfalandırma uygulamaları için hızlı önceki ve sonraki bağlantılar. Bloglar veya dergiler gibi basit siteler için harikadır.

Varsayılan örnek

Varsayılan olarak, çağrı cihazı bağlantıları ortalar.

  1. <ul class = "çağrı cihazı" >
  2. <li><a href = "#" > Önceki </a></li>
  3. <li><a href = "#" > Sonraki </a></li>
  4. </ul>

Hizalanmış bağlantılar

Alternatif olarak, her bir bağlantıyı yanlara hizalayabilirsiniz:

  1. <ul class = "çağrı cihazı" >
  2. <li sınıf = "önceki" >
  3. <a href = "#" > Daha eski </a>
  4. </li>
  5. <li sınıf = "sonraki" >
  6. <a href = "#" > Daha yeni → </a>
  7. </li>
  8. </ul>

İsteğe bağlı devre dışı durumu

Çağrı cihazı bağlantıları ayrıca .disabledsayfalandırmadaki genel yardımcı program sınıfını da kullanır.

  1. <ul class = "çağrı cihazı" >
  2. <li class = "önceki devre dışı" >
  3. <a href = "#" > Daha eski </a>
  4. </li>
  5. ...
  6. </ul>

Etiketler

Etiketler İşaretleme
Varsayılan <span class="label">Default</span>
Başarı <span class="label label-success">Success</span>
Uyarı <span class="label label-warning">Warning</span>
Önemli <span class="label label-important">Important</span>
Bilgi <span class="label label-info">Info</span>
Ters <span class="label label-inverse">Inverse</span>

Rozetler

İsim Örnek İşaretleme
Varsayılan 1 <span class="badge">1</span>
Başarı 2 <span class="badge badge-success">2</span>
Uyarı 4 <span class="badge badge-warning">4</span>
Önemli 6 <span class="badge badge-important">6</span>
Bilgi 8 <span class="badge badge-info">8</span>
Ters 10 <span class="badge badge-inverse">10</span>

Kolayca katlanabilir

Kolay uygulama için, etiketler ve rozetler, :emptyiçinde hiçbir içerik olmadığında (CSS seçici aracılığıyla) basitçe çökecektir.

kahraman birimi

Sitenizdeki önemli içeriği sergilemek için hafif, esnek bir bileşen. Pazarlama ve içerik ağırlıklı sitelerde iyi çalışır.

Selam Dünya!

Bu basit bir kahraman birimi, öne çıkan içerik veya bilgilere ekstra dikkat çekmek için basit bir jumbotron tarzı bileşendir.

Daha fazla bilgi edin

  1. <div class = "kahraman-birim" >
  2. <h1> Başlık </h1>
  3. <p> Kısa Açıklama </p>
  4. <p>
  5. <a sınıfı = "btn btn-birincil btn-büyük" >
  6. Daha fazla bilgi edin
  7. </a>
  8. </p>
  9. </div>

Sayfa başlığı

h1Bir sayfadaki içeriğin bölümlerini uygun şekilde boşaltmak ve bölümlere ayırmak için basit bir kabuk . h1'nin default öğesini ve diğer bileşenlerin çoğunu kullanabilir small(ek stillerle).

  1. <div class = "sayfa başlığı" >
  2. <h1> Örnek sayfa başlığı <small> Başlık için alt metin </small></h1>
  3. </div>

Varsayılan küçük resimler

Varsayılan olarak, Bootstrap'in küçük resimleri, minimum gerekli işaretleme ile bağlantılı görüntüleri sergilemek için tasarlanmıştır.

Son derece özelleştirilebilir

Biraz fazladan işaretleme ile başlıklar, paragraflar veya düğmeler gibi her türlü HTML içeriğini küçük resimlere eklemek mümkündür.

  • 300x200

    Küçük resim etiketi

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id, eget metus'ta elit olmayan porta gravida. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.

    Eylem Eylem

  • 300x200

    Küçük resim etiketi

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id, eget metus'ta elit olmayan porta gravida. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.

    Eylem Eylem

  • 300x200

    Küçük resim etiketi

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id, eget metus'ta elit olmayan porta gravida. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.

    Eylem Eylem

Küçük resimler neden kullanılır?

Küçük resimler (önceden .media-gridv1.4'e kadar) fotoğraf veya video ızgaraları, görsel arama sonuçları, perakende ürünler, portföyler ve çok daha fazlası için mükemmeldir. Bağlantılar veya statik içerik olabilirler.

Basit, esnek işaretleme

Küçük resim işaretlemesi basittir - gerekli olan tek şey ulherhangi bir sayıda liöğeye sahip olmaktır. Ayrıca süper esnektir, içeriğinizi sarmak için biraz daha fazla biçimlendirme ile her tür içeriğe izin verir.

Izgara sütun boyutlarını kullanır

Son olarak, küçük resimler bileşeni , küçük resim boyutlarının kontrolü için .span2veya benzeri mevcut ızgara sistemi sınıflarını kullanır ..span3

İşaretleme

Daha önce de belirtildiği gibi, küçük resimler için gerekli işaretleme hafif ve basittir. Bağlantılı resimler için varsayılan kuruluma bir göz atın :

  1. <ul class = "küçük resimler" >
  2. <li sınıf = "span4" >
  3. <a href = "#" class = "küçük resim" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Küçük resimlerdeki özel HTML içeriği için işaretleme biraz değişir. Herhangi bir yerde blok düzeyinde içeriğe izin vermek için, şununla <a>değiştiririz <div>:

  1. <ul class = "küçük resimler" >
  2. <li sınıf = "span4" >
  3. <div sınıfı = "küçük resim" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Küçük resim etiketi </h3>
  6. <p> Küçük resim yazısı... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Daha fazla örnek

Kullanabileceğiniz çeşitli ızgara sınıfları ile tüm seçeneklerinizi keşfedin. Ayrıca farklı boyutları karıştırıp eşleştirebilirsiniz.

Varsayılan uyarı

.alertTemel bir uyarı uyarı mesajı için herhangi bir metni ve isteğe bağlı bir kapatma düğmesini sarın .

Uyarı! En iyisi kendini kontrol et, pek iyi görünmüyorsun.
  1. <div sınıfı = "uyarı" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Uyarı! </strong> Kendinize iyi bakın, pek iyi görünmüyorsunuz.
  4. </div>

Kapat düğmeleri

Mobile Safari ve Mobile Opera tarayıcıları, data-dismiss="alert"özniteliğe ek olarak, bir etiket href="#"kullanıldığında uyarıların kaldırılması için bir gerektirir.<a>

  1. <a href = "#" class = "kapat" data-dismiss = "uyarı" > × </a>

<button>Alternatif olarak, dokümanlarımız için yapmayı seçtiğimiz data özniteliğine sahip bir öğe kullanabilirsiniz . kullanırken <button>, eklemeniz gerekir, type="button"aksi takdirde formlarınız gönderilmeyebilir.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

JavaScript aracılığıyla uyarıları kapat

Uyarıların hızlı ve kolay bir şekilde kapatılması için uyarılar jQuery eklentisini kullanın .


Seçenekler

Daha uzun mesajlar için, uyarı sarmalayıcısının üstündeki ve altındaki dolguyu ekleyerek artırın .alert-block.

Uyarı!

En iyisi kendini kontrol et, pek iyi görünmüyorsun. Nulla vitae seçkin libero, bir pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "uyarı uyarı bloğu" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> Uyarı! </h4>
  4. En iyisi kendini kontrol et, değilsin...
  5. </div>

bağlamsal alternatifler

Bir uyarının çağrışımını değiştirmek için isteğe bağlı sınıflar ekleyin.

Hata veya tehlike

Çabuk! Birkaç şeyi değiştirin ve tekrar göndermeyi deneyin.
  1. <div class = "uyarı uyarı hatası" >
  2. ...
  3. </div>

Başarı

Aferin! Bu önemli uyarı mesajını başarıyla okudunuz.
  1. <div class = "uyarı uyarısı başarısı" >
  2. ...
  3. </div>

Bilgi

Önüne bak! Bu uyarıya dikkat etmeniz gerekiyor, ancak çok önemli değil.
  1. <div class = "uyarı uyarı bilgisi" >
  2. ...
  3. </div>

Örnekler ve işaretleme

Temel

Dikey eğimli varsayılan ilerleme çubuğu.

  1. <div sınıfı = "ilerleme" >
  2. <div class = "bar" stili = " genişlik : % 60 ; " ></div>
  3. </div>

Çizgili

Çizgili bir efekt oluşturmak için bir degrade kullanır. IE7-8'de mevcut değildir.

  1. <div class = "ilerleme ilerleme çizgili" >
  2. <div class = "bar" stili = " genişlik : % 20 ; " ></div>
  3. </div>

animasyonlu

Sağdan sola şeritleri canlandırmak için .activeekleyin . .progress-stripedIE'nin tüm sürümlerinde mevcut değildir.

  1. <div class = "ilerleme ilerleme çizgili aktif" >
  2. <div class = "bar" stili = " genişlik : % 40 ; " ></div>
  3. </div>

Yığılmış

.progressİstiflemek için birden fazla çubuğu aynı yere yerleştirin.

  1. <div sınıfı = "ilerleme" >
  2. <div class = "bar-success" style = " width : % 35 ; " ></div>
  3. <div class = "bar çubuğu uyarısı" stili = " genişlik : % 20 ; " ></div>
  4. <div class = "bar-bar-danger" stili = " genişlik : % 10 ; " ></div>
  5. </div>

Seçenekler

Ek renkler

İlerleme çubukları, tutarlı stiller için aynı düğme ve uyarı sınıflarından bazılarını kullanır.

  1. <div class = "ilerleme ilerleme bilgisi" >
  2. <div class = "bar" stili = " genişlik : % 20 " ></div>
  3. </div>
  4. <div class = "ilerleme ilerleme-başarı" >
  5. <div class = "bar" stili = " genişlik : % 40 " ></div>
  6. </div>
  7. <div class = "ilerleme ilerleme uyarısı" >
  8. <div class = "bar" stili = " genişlik : % 60 " ></div>
  9. </div>
  10. <div class = "ilerleme ilerleme tehlikesi" >
  11. <div class = "bar" stili = " genişlik : % 80 " ></div>
  12. </div>

çizgili çubuklar

Düz renklere benzer şekilde, çeşitli çizgili ilerleme çubuklarımız var.

  1. <div class = "ilerleme ilerleme bilgisi ilerleme çizgili" >
  2. <div class = "bar" stili = " genişlik : % 20 " ></div>
  3. </div>
  4. <div class = "ilerleme ilerleme-başarı ilerleme çizgili" >
  5. <div class = "bar" stili = " genişlik : % 40 " ></div>
  6. </div>
  7. <div class = "ilerleme ilerleme uyarısı ilerleme çizgili" >
  8. <div class = "bar" stili = " genişlik : % 60 " ></div>
  9. </div>
  10. <div class = "ilerleme ilerleme-tehlike ilerleme çizgili" >
  11. <div class = "bar" stili = " genişlik : % 80 " ></div>
  12. </div>

tarayıcı desteği

İlerleme çubukları, tüm efektlerini elde etmek için CSS3 gradyanlarını, geçişlerini ve animasyonlarını kullanır. Bu özellikler, Firefox'un IE7-9 veya daha eski sürümlerinde desteklenmez.

Internet Explorer 10 ve Opera 12'den önceki sürümler animasyonları desteklemez.

Metin içeriğinin yanı sıra sola veya sağa hizalanmış bir görüntü içeren çeşitli bileşen türleri (blog yorumları, Tweetler vb.) oluşturmak için soyut nesne stilleri.

Varsayılan örnek

Varsayılan medya, bir medya nesnesinin (görüntüler, video, ses) bir içerik bloğunun soluna veya sağına kaydırılmasına izin verir.

64x64

Medya başlığı

Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
64x64

Medya başlığı

Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
64x64

Medya başlığı

Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
  1. <div sınıfı = "medya" >
  2. <a class = "sola çekme" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div sınıfı = "medya gövdesi" >
  6. <h4 class = "media-heading" > Medya başlığı </h4>
  7. ...
  8.  
  9. <!-- İç içe medya nesnesi -->
  10. <div sınıfı = "medya" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Medya listesi

Biraz fazladan işaretleme ile, medyayı liste içinde kullanabilirsiniz (yorum dizileri veya makale listeleri için kullanışlıdır).

  • 64x64

    Medya başlığı

    Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis.

    64x64

    İç içe medya başlığı

    Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis.
    64x64

    İç içe medya başlığı

    Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis.
    64x64

    İç içe medya başlığı

    Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis.
  • 64x64

    Medya başlığı

    Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis.
  1. <ul class = "medya listesi" >
  2. <li sınıf = "medya" >
  3. <a class = "sola çekme" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div sınıfı = "medya gövdesi" >
  7. <h4 class = "media-heading" > Medya başlığı </h4>
  8. ...
  9.  
  10. <!-- İç içe medya nesnesi -->
  11. <div sınıfı = "medya" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

kuyular

Bir öğeye ek efekt vermek için kuyuyu basit bir efekt olarak kullanın.

Bak, bir kuyudayım!
  1. <div sınıfı = "iyi" >
  2. ...
  3. </div>

İsteğe bağlı sınıflar

İki isteğe bağlı değiştirici sınıfla kontrol dolgusu ve yuvarlatılmış köşeler.

Bak, bir kuyudayım!
  1. <div class = "iyi-büyük" >
  2. ...
  3. </div>
Bak, bir kuyudayım!
  1. <div class = "iyi iyi küçük" >
  2. ...
  3. </div>

Kapat simgesi

Modeller ve uyarılar gibi içerikleri kapatmak için genel kapat simgesini kullanın.

  1. <düğme sınıfı = "kapat" > × </button>

href="#"Bir bağlantı kullanmayı tercih ederseniz, iOS aygıtları bir tıklama olayı gerektirir .

  1. <a class = "kapat" href = "#" > × </a>

yardımcı sınıflar

Küçük ekran veya davranış değişiklikleri için basit, odaklanmış sınıflar.

.çek-sol

Bir öğeyi sola kaydır

  1. sınıf = "sola çekme"
  1. . çekme - sol {
  2. yüzer : sol ;
  3. }

.sağa çekme

Bir öğeyi sağa kaydır

  1. sınıf = "sağa çekme"
  1. . çekme - sağa {
  2. yüzer : sağ ;
  3. }

.sessiz

Bir öğenin rengini şu şekilde değiştirin:#999

  1. sınıf = "sessiz"
  1. . sessiz {
  2. renk : #999;
  3. }

.açık düzeltme

floatHerhangi bir öğeyi temizle

  1. sınıf = "düzeltme"
  1. . düzeltme {
  2. * yakınlaştırma : 1 ;
  3. &: önce ,
  4. &: sonra {
  5. ekran : tablo ;
  6. içerik : "" ;
  7. }
  8. &: sonra {
  9. temizle : ikisi de ;
  10. }
  11. }