Şablon:Div sütunu/belge
Bu sayfa, Şablon:Div sütunu sayfasının bir belgeleme alt sayfasıdır. Asıl şablon sayfası hakkında kullanım talimatları, kategoriler ve başka içerikleri barındırmaktadı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
[kaynağı değiştir]Temel Kullanım
[kaynağı değiştir]{{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
[kaynağı değiştir]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
[kaynağı değiştir]Colwidth
[kaynağı değiştir]{{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
[kaynağı değiştir]{{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
[kaynağı değiştir]{{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
[kaynağı değiştir]{{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
[kaynağı değiştir]{{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
[kaynağı değiştir]{{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
[kaynağı değiştir]{{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ğı
[kaynağı değiştir]{{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
[kaynağı değiştir]Alt-listeler
[kaynağı değiştir]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
[kaynağı değiştir]- Kategori:Tanımlanmamış parametreler içeren div sütunu şablonu kullanılan sayfalar (40) (burada belirtilmeyen parametre isimleriyle hatalı bir şekilde bu şablonu kullanan sayfalar için)
Şablon Verisi
[kaynağı değiştir]Div sütunu için şablon verileri
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.
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.
| Dize | isteğe bağlı |
Rules | rules | Eğer 'yes' olarak ayarlanırsa, sütunlar arasına dikey çizgiler ekler.
| Dize | isteğe bağlı |
Gap size | gap | Bitişik sütunların içeriği arasındaki boşluğu belirtir.
| Dize | isteğe bağlı |
HTML class | class | Herhangi bir sınıfı veya birden çok boşlukla ayrılmış sınıfları belirtir.
| 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)
| Dize | isteğe bağlı |
Ayrıca bakınız
[kaynağı değiştir]- {{Bitiş kutusu}} (bir tabloyu kapatır)