Rács szerkezet

↑↑↑ Válassz elrendezést ↑↑↑

 

50-50

Tartalom
Tartalom

 

Feltételes sortörés

Méretezd át a böngésző ablakot, és látni fogod, hogy a szöveg szűk, mobil-szerű nézetben egybefolyik, míg sm méret fölött kap egy sortörést. ITT FOG TÖRNI! Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic minus iure obcaecati. Nulla ipsum quod suscipit, enim mollitia neque obcaecati, minus ab odit explicabo cum quas eveniet facere similique. Obcaecati!

 

CSS Töréspontok

Figyeld a hátteret!

Mobil méret

 

Háttér igazítás

Vidd az egeret a képek fölé!

 

bg-left-top

 

bg-top

 

bg-right-top

 

bg-left

 

bg-center

 

bg-right

 

bg-left-bottom

 

bg-bottom

 

bg-right-bottom

 

Aszimmetrikus elrendezések - col-span-*

 
 
 
 
 
 

 

Különleges grid elrendezés

2x2
2x1
1x1
1x1
1x1
3x2
1x1

 

6 oszlopos elrendezés

 
 
 
 
 
 

 

Doboz úsztatása (Float)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a nisl urna. Sed nec elit aliquet, pellentesque mi ac, dignissim nulla. Morbi at metus bibendum, convallis nibh in, congue nulla. Sed rhoncus tortor non erat varius auctor. Maecenas in est in enim tempor placerat at ut dui. Vivamus a vestibulum est, eu cursus ante. Nulla ac maximus nibh. Vivamus mollis elit et venenatis efficitur. Aenean sollicitudin lectus a tortor cursus tempor. Vivamus suscipit blandit pulvinar. Proin placerat felis a pulvinar dictum. In eget iaculis est, non vestibulum nibh. Sed in mauris purus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer imperdiet erat enim, et aliquet augue rutrum vitae. Nam suscipit libero eu laoreet porta. Aliquam rutrum imperdiet risus, nec egestas enim consectetur molestie. Nunc neque justo, venenatis sit amet viverra lobortis, tristique ut ligula. Sed ornare aliquam sem a bibendum. Pellentesque iaculis, eros eget laoreet dapibus, sapien dui blandit magna, vel tincidunt leo purus ac lacus. Mauris blandit fringilla erat, nec viverra velit.

Interdum et malesuada fames ac ante ipsum primis in faucibus. In leo orci, faucibus molestie mattis vitae, gravida vel est. Etiam ac est ex. Duis pretium dictum velit, eu aliquet magna pharetra id. Integer libero tellus, lacinia sit amet efficitur nec, ultrices non sem. Nam elementum nulla eget velit sodales porta. Etiam sodales mauris non volutpat sodales.

Ut non tincidunt nunc, sit amet blandit sem. In condimentum, dolor sit amet fermentum vulputate, velit elit finibus arcu, in ultricies enim libero vel mauris. Fusce sagittis faucibus aliquam. Maecenas eget leo gravida, dignissim mi at, lacinia quam. In non egestas mi. Praesent faucibus velit enim, hendrerit vestibulum ante sollicitudin eu. Vestibulum finibus ut quam nec viverra. In ultricies finibus tempor. Aliquam erat volutpat. Vivamus pretium ornare suscipit. Quisque pharetra erat nisl. Phasellus mattis leo id sapien finibus, non dapibus erat efficitur. Donec in hendrerit justo. Nunc sit amet sodales turpis, id placerat leo. In egestas mi nisl, nec consequat tellus bibendum eget. Donec ac dui in tortor volutpat placerat convallis gravida ipsum.



Kép vagy tartalom cseréje mobil nézetben

Aktuális aktív töréspont:

Mobile
Méretezd át a böngészőt, hogy lásd, amint MD méreten megváltozik a lenti kép.

 

Lekerekítések

A lekerekítések formulája követi minden más modul szokását. A megcélzott sarkok nevének rövidítése és a kívánt méret meghatározása követi a rounded- törzset.

Például elemezd az alábbi formulákat:

rounded-{t|r|b|l}-{none|xs|sm|md|lg|xl|full}

rounded-{tl|tr|br|bl}-{none|xs|sm|md|lg|xl|full}

Ezekből kitűnik, hogy milyen lehetőségek közül választhatsz.

t top
r right
b bottom
l left
tl top-left

rounded-none

rounded-xs

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-full

rounded-t-{méret}

rounded-r-{méret}

rounded-b-{méret}

rounded-l-{méret}

rounded-tl-full

 

 

 
 

 
 

This is a bouncy button