Şablon:Div sütunu

Belgeleme

Bu belgeleme Şablon:Div sütunu/belge sayfasından (değiştir | geçmiş) bağlantılı kopyalanmıştır.

Bu şablonla ilgili çeşitli denemeler yapmak için kullanabileceğiniz deneme tahtası vardır

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:Sayılır kategori bağlantısı (burada belirtilmeyen parametre isimleriyle hatalı bir şekilde bu şablonu kullanan sayfalar için)

Ş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]
Parametre		Açıklama	Tür	Durum
Column width	`colwidth`	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	Dize	isteğe bağlı
Rules	`rules`	Eğer 'yes' olarak ayarlanırsa, sütunlar arasına dikey çizgiler ekler. Örnek yes	Dize	isteğe bağlı
Gap size	`gap`	Bitişik sütunların içeriği arasındaki boşluğu belirtir. Örnek 2em	Dize	isteğe bağlı
HTML class	`class`	Herhangi bir sınıfı veya birden çok boşlukla ayrılmış sınıfları belirtir. Örnek plainlist nowrap	Dize	isteğe bağlı
CSS style	`style`	Herhangi bir özel stili belirtir.	Dize	isteğe bağlı
Content	`content`	Sütunlarla bölünecek içeriği belirtir.	İçerik	isteğe bağlı
Small font	`small`	Daha küçük bir yazı tipi boyutu kullanır (%90) Örnek yes	Dize	isteğe bağlı

Ayrıca bakınız

{{Bitiş kutusu}} (bir tabloyu kapatır)