„Snið:Bootstrap-mynd“: Munur á milli breytinga

Útgáfa síðunnar 24. mars 2025 kl. 10:56

Þetta snið má nota til að móta mynd þannig að hún skalist í takt við stærð vafragluggans eftir Bootstrap verkfærasettinu.

Sjálfgefið tekur myndin yfir alla breidd gluggans í minnstu stillingu, í þeirri næst minnstu hálfan gluggann, miðstærðinni 1/3 gluggans, í stórri stærð 1/4 gluggans og í þeirri stærstu 1/6 gluggans. Þannig verður hún ekki of stór í stórum glugga og í þeim minnsta er hún einfaldlega fyrir ofan eða neðan umlykjandi texta í stað þess að vera klesst inn í hann.

Notkun

Myndinni er bætt við með:

{{bootstrap-mynd|Mynd:Nafn myndar.jpeg}}

en hana má senda til hægri eða vinstri með öðru hvoru:

{{bootstrap-mynd|Mynd:Nafn myndar.jpeg|hægri}}
{{bootstrap-mynd|Mynd:Nafn myndar.jpeg|vinstri}}

Sérsníðing stæðar mynda

Ef vilji er fyrir því að stilla hlutfall gluggans sem myndin tekur fyrir hverja gluggastærð, má breyta stikunum svo:

{{bootstrap-mynd|Mynd:Nafn myndar.jpeg|hægri|xs=6|sm=4|sm=4|md=3|lg=2|xl=1}}

þar sem hver stiki skilgreinir hversu marga tólftu hluta glugginn á að taka. Stikinn xs=6 þýðir t.a.m. að í "xs" stærðinni tekur myndin hálfan gluggann vegna þess að ${\tfrac {6}{12}}={\tfrac {1}{2}}$ og md=3 þýðir að myndin taki yfir fjórðung gluggans því ${\tfrac {3}{12}}={\tfrac {1}{4}}$ .

@@ Lína 1: / Lína 1: @@
-<includeonly><div class="col-xs-{{{xs|12}}} col-sm-{{{sm|6}}} col-md-{{{md|4}}} col-lg-{{{lg|3}}} col-xl-{{{xl|2}}}" style="{{#ifeq: {{{2}}} | hægri | float:right; | }}{{#ifeq: {{{2}}} | vinstri | float:left; | }} {{{style|}}}">[[{{{1}}}]]</div></includeonly><noinclude>
+<includeonly><div class="col-xs-{{{xs|12}}} col-sm-{{{sm|6}}} col-md-{{{md|4}}} col-lg-{{{lg|3}}} col-xl-{{{xl|3}}}" style="{{#ifeq: {{{2}}} | hægri | float:right; | }}{{#ifeq: {{{2}}} | vinstri | float:left; | }} {{{style|}}}">[[{{{1}}}]]</div></includeonly><noinclude>
 {{bootstrap-mynd|Mynd:Bmnnetwork - responsive design.png|hægri}}
 Þetta snið má nota til að móta mynd þannig að hún skalist í takt við stærð vafragluggans eftir [https://getbootstrap.com/ Bootstrap verkfærasettinu].