İçeriğe atla

Şablon:Div sütunu

Vikikaynak, özgür kütüphane
Şablon belgelemesi Belgeleme

div sütunu, bir listeyi çoklu ekran çözünürlüklerine duyarlı olarak sütunlara bölen bir biçimlendirme şablonudur. Kullanılabilir ekran alanını otomatik olarak eşit parçalara böler, yani kaç sütun kullanılacağını tahmin etmek ve ardından bölmek için bölmenin yapılacağı noktaları bulmak gerekmez (örneğin, listeyi iki sütuna bölmek için orta noktayı veya listeyi üç sütuna bölmek için üçte bir veya üçte iki noktalarını).

Kullanım

Temel Kullanım

{{div sütunu}}<!-- varsayılan genişlik 30em'dir -->
* a
* b
* c
* d
* e
* f
* g
* h
{{div sütunu-son}}

Sonuç:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Parametreler

Bu şablon altı parametreye sahiptir:

|colwidth=
Sütunların minimum genişliğini belirler, böylece sütun sayısı ekran genişliğine dayalı olarak otomatik olarak belirlenir (yani daha geniş ekranlarda daha fazla sütun gösterilir). Değer belirtilmezse, şablon varsayılan olarak 30em kullanır. Genişlik herhangi bir CSS ölçü birimi ile belirtilebilir, örneğin "em" (görünen yazı tipinin büyük "M" harfinin genişliği kadar), colwidth=20em.
|rules=yes
Eğer yes olarak belirtilirse, sütunlar arasına dikey çizgiler eklenir.
|gap=
Bitişik sütunların içeriği arasındaki boşluğu geçerli bir CSS genişlik birimi ile belirtir, örneğin gap=2em. Varsayılan boşluk (tarayıcı tarafından ayarlanan) 1em'dir.
|class=
Sütunlara uygulanacak bir HTML sınıfı veya boşlukla ayrılmış birden fazla sınıfı belirtir.
|style=
Sütunlara uygulanacak CSS stilini belirtir. Örneğin style=column-count:3 gösterilecek sütun sayısını sınırlar.
|small=yes
Yazı tipi boyutunu %90 olarak ayarlar.
|content=
Sütunlara uygulanacak olan içerik. Bu parametre etkili olarak {{sütunlu liste}} ile aynıdır, bu da bu şablon için bir geçiş sağlar.

Örnekler

Colwidth

{{div sütunu|colwidth=10em}} <!-- sütun genişliği 10em -->
* a
* b
* c
* d
* e
* f
* g
* h
{{div sütunu-son}}

Sonuç:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Rules

{{div sütunu|colwidth=10em|rules=yes}} <!-- çizgilerle birlikte sütun genişliği 10em -->
* a
* b
* c
* d
* e
* f
* g
* h
{{div sütunu-son}}

Sonuç:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Gap

{{div sütunu|colwidth=10em|rules=yes|gap=2em}} <!-- çizgiler ve 2em boşluk ile sütun genişliği 10em -->
* a
* b
* c
* d
* e
* f
* g
* h
{{div sütunu-son}}

Sonuç:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Small

{{div sütunu|small=yes}} <!-- Small = yes -->
* a
* b
* c
* d
* e
* f
* g
* h
{{div sütunu-son}}

Sonuç:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Content

{{div sütunu|colwidth=10em|content= <!-- content parametresi {{div sütunu-son}} şablonuna ihtiyaç duymaz -->
* a
* b
* c
* d
* e
* f
* g
* h
}}

Sonuç:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Birden fazla parametre

{{div sütunu|colwidth=10em|rules=yes|gap=2em|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{div sütunu-son}}

Sonuç:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Liste işaretsiz metin karakterleri

{{div sütunu|colwidth=10em}} <!-- Liste işaretsiz metin karakterleri -->
a
b
c
d
e
f
g
h
{{div sütunu-son}}

Sonuç:

a b c d e f g h

anlamsız metin taslağı

{{div sütunu}} <!-- Lorem ipsum -->
{{lorem ipsum}}
{{div sütunu-son}}

Sonuç:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sınırlama

Alt-listeler

Temel CSS sistemi alt-listeleri sütunlara bölememektedir. Aşağıdaki dengesiz biçimlendirmeye dikkat edin:

{{div sütunu|colwidth=10em|rules=yes|gap=2em|style=column-count:3|content=
* a
* b
* c
** c.d
** c.e
** c.f
* g
* h
}}

Sonuç:

  • a
  • b
  • c
    • c.d
    • c.e
    • c.f
  • g
  • h

İzleme Kategorileri

Şablon Verisi

Şablon:TemplateData header

Div sütunu, bir listeyi sütunlara bölmek için kullanılır. Her bir sütunu otomatik olarak eşit bir alana böler ve böylece iki sütunun orta noktasını bulmanız gerekmez. Liste, |content= ile sağlanır veya {{div sütunu-son}} ile kapatılır.

Şablon parametreleri[Şablon veriyi değiştir]

ParametreAçıklamaTürDurum
Column widthcolwidth

Sütunların genişliğini belirtir ve dinamik bir şekilde ekran genişliğine dayalı olarak sütun sayısını belirler; daha geniş ekranlarda daha fazla sütun gösterilir.

Örnek
30em
Dizeisteğe bağlı
Rulesrules

Eğer 'yes' olarak ayarlanırsa, sütunlar arasına dikey çizgiler ekler.

Örnek
yes
Dizeisteğe bağlı
Gap sizegap

Bitişik sütunların içeriği arasındaki boşluğu belirtir.

Örnek
2em
Dizeisteğe bağlı
HTML classclass

Herhangi bir sınıfı veya birden çok boşlukla ayrılmış sınıfları belirtir.

Örnek
plainlist nowrap
Dizeisteğe bağlı
CSS stylestyle

Herhangi bir özel stili belirtir.

Dizeisteğe bağlı
Contentcontent

Sütunlarla bölünecek içeriği belirtir.

İçerikisteğe bağlı
Small fontsmall

Daha küçük bir yazı tipi boyutu kullanır (%90)

Örnek
yes
Dizeisteğe bağlı

Ayrıca bakınız