Predložak:Stupci

Izvor: Wikipedija

Predložak se rabi za dijeljenje bilo kog sadržaja u stupce, ali je prvenstveno namijenjen za popise, kao zamjena za predloške s ručnim prijelomom u stupce {{Col-begin}}, {{Col-N}}, {{Col-break}}, {{Col-end}} u kategoriji Kategorija:Predlošci za tablice i stupce. U ovom se predlošku sav sadržaj stupaca dodaje kao vrijednost parametra i ne zatvara ga se drugim predloškom. Ponaša se slično paru predložaka {{Div col}} + {{Div col end}} jer sadržaj prelama automatski i s promjenjivim brojem stupaca koji ovisi o širini uređaja.

Uporaba[uredi kôd]

Jednostavni oblik:

{{stupci|broj stupaca|sadržaj}}

Oblik sa svim parametrima:

{{stupci|broj stupaca|razmak=vrijednost|debljina=vrijednost|stil=vrijednost|boja=vrijednost|sadržaj}}

Ako se parametri izostave, prikazat će se dva stupca bez separatora, a razmak među njima odredit će preglednik automatski. Popis postavljate kao svaki popis na Wikipediji, s početkom u novom redu.

Opis parametara[uredi kôd]

Svi parametri osim sadržaj su neobvezni (ali neimenovanim parametrima treba zadržati poziciju, vidjeti donji primjer).

  • širina= minimalna širina stupca izražena u nekoj od CSS jedinica, npr. 12em za vrlo uske stupce
  • broj stupaca je približan broj stupaca na koji se dijeli sadržaj; na mobilnim uređajima on može biti manji od traženoga, a na širokim ekranima veći jer se parametar upotrebljava za izračunavanje minimalne širine stupca (oko 28em za 2, 21em za 3, 14em za 4 i više).
  • razmak= broj piksela za razmak među stupcima
  • Iako se u redovnoj uporabi neće rabiti, dodana je mogućnost postavljanja okomite crte za uočljivije razdvajanje stupaca. Obratite pažnju da su ovi parametri "imenovani", tj. moraju se navesti te iza znaka jednakosti unijeti vrijednosti parametara
    • debljina= debljina crte izražena u pikselima
    • stil= definira izgled linije, a moguće vrijednosti su: dotted, dashed,solid (uobičajena puna crta), double, groove, ridge, inset, outset
    • boja= crte može se iskazati kôdom boje ili nazivom (npr. #808080 ili gray za sivu boju)
  • sadržaj je neimenovani parametar, ali u slučaju da se negdje u sadržaju javlja znak jednakosti, parametar se mora imenovati s 2=

Predloškom se automatski prelamaju stupci, tako da se stavke ne moraju ručno prebrojavati i preslagati. Na taj način je olakšano dodavanje ili brisanje stavki. Osim toga, stupci su iste širine, jer se duži redovi automatski prebacuju u novi red, što vizualno djeluje urednije. Također, nema ograničenja u broju stupaca (na stari način bilo je samo Col-6), ali pri kombiniranju broja stupaca i razmaka vodite računa da nemaju svi široke zaslone.

Primjer 1[uredi kôd]

Osnovni oblik (približno 4 stupca s razmakom 10px, bez crte separatora, nenabrojeni popis)

{{stupci|4|razmak=10|
* test
* test
* test...
}}
  • test
  • test
  • test
  • Ovo je jedan duži red, za ilustraciju prijeloma.
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test

Primjer 2[uredi kôd]

Osnovni oblik (približno 4 stupca s razmakom 10px, bez crte separatora, nabrojeni popis)

{{stupci|4|razmak=10|
# test
# test
# test...
}}
  1. test
  2. test
  3. test
  4. test
  5. test
  6. test
  7. test
  8. test
  9. test
  10. test
  11. test
  12. test
  13. test
  14. test
  15. test
  16. test
  17. test
  18. test
  19. test
  20. test
  21. test
  22. test
  23. test
  24. test
  25. test
  26. test
  27. test
  28. test
  29. test
  30. test
  31. test
  32. test
  33. test
  34. test
  35. test
  36. test
  37. test
  38. test
  39. test
  40. test
  41. test
  42. test
  43. test
  44. test

Primjer 3[uredi kôd]

Sa svim parametrima (3 stupca s razmakom 10px, puna siva crta separatora debljine 2px)

{{stupci|3|razmak=10|debljina=2|stil=solid|boja=gray|Lorem ipsum...}}
Lorem ipsum dolor sit amet consectetuer lorem at In Fusce cursus. Ipsum sed Morbi sollicitudin quis laoreet Donec pede tortor enim magna. Felis fermentum lobortis tortor metus cursus Nullam nibh risus Maecenas ipsum. Pellentesque Duis nibh quis Vestibulum tincidunt Quisque cursus laoreet quis quis. Nascetur enim vel vitae dignissim Vivamus lacus eros semper orci pede. Quisque iaculis Fusce felis interdum adipiscing Aliquam Pellentesque Nam Cras hac. Pellentesque. Leo condimentum Lorem mauris justo justo tellus Nullam hac turpis consequat. Non semper elit Aenean pretium augue sagittis vitae Nulla tortor libero. Sed eget sem sed vitae laoreet fames tincidunt Aenean tellus orci. Donec tempor velit et quis orci neque penatibus tempus vitae eros. Libero fames morbi at mus tempor elit Quisque habitant eros nonummy.

Primjer 4[uredi kôd]

S izostavljenim parametrima broj stupaca i razmak - dobit će se dva stupca i automatski razmak

{{stupci||debljina=2|stil=solid|boja=gray|Lorem ipsum...}}
Lorem ipsum dolor sit amet consectetuer lorem at In Fusce cursus. Ipsum sed Morbi sollicitudin quis laoreet Donec pede tortor enim magna. Felis fermentum lobortis tortor metus cursus Nullam nibh risus Maecenas ipsum. Pellentesque Duis nibh quis Vestibulum tincidunt Quisque cursus laoreet quis quis. Nascetur enim vel vitae dignissim Vivamus lacus eros semper orci pede. Quisque iaculis Fusce felis interdum adipiscing Aliquam Pellentesque Nam Cras hac. Pellentesque. Leo condimentum Lorem mauris justo justo tellus Nullam hac turpis consequat. Non semper elit Aenean pretium augue sagittis vitae Nulla tortor libero. Sed eget sem sed vitae laoreet fames tincidunt Aenean tellus orci. Donec tempor velit et quis orci neque penatibus tempus vitae eros. Libero fames morbi at mus tempor elit Quisque habitant eros nonummy.

Primjer 5[uredi kôd]

Primjer slika raznih veličina u stupcima (stupci širine >150px s razmakom od 40px, puna plava crta separatora debljine 1px; parametar sadržaj je imenovan pomoću 2= zbog znaka jednakosti u sadržaju)

{{stupci|širina=150px|razmak=40|debljina=1|stil=solid|boja=blue|2=
[[datoteka:Wikipedia-logo.png|link=|50px]]
[[datoteka:Wikipedia-logo.png|link=|20px]] ... }}


U gornjem primjeru su slike naredane bez prekida reda, ali mogu biti u novom redu (u wikisintaksi prazan red ili <br>) ili u popisu (* ili #).

Predložak za dijeljenje sadržaja u stupce

Parametri predloška[Uredi dokumentaciju predloška]

U ovom je predlošku preporučljivo pisati svaki parametar u svom retku.

ParametarOpisVrstaStanje
sadržaj u stupcima2

Nema opisa

Sadržajobvezno
razmak između stupaca, u pikselimarazmak

Nema opisa

Brojneobvezno
debljina razdjelne crte, u pikselimadebljina

Nema opisa

Primjer
2
Nepoznatoneobvezno
stil razdjelne crtestil

Nema opisa

Predložene vrijednosti
solid dotted dashed double
Primjer
solid
Nizneobvezno
boja razdjelne crteboja

Nema opisa

Primjer
blue
Nepoznatoneobvezno
širinaširina

minimalna širina stupca u CSS jedinicama: px, em…

Nepoznatoneobvezno
približan broj stupaca1

Nema opisa

Brojzastarjelo