Displej W3.CSS


Třídy zobrazení vám umožňují zobrazit prvky HTML na určitých pozicích uvnitř jiných prvků HTML:

Vlevo nahoře
Vpravo nahoře
Vlevo dole
Vpravo dole
Vlevo, odjet
Že jo
Střední
Nahoře uprostřed
Dole uprostřed

Třídy zobrazení W3.CSS

W3.CSS poskytuje následující třídy zobrazení: 

Třída Definuje
w3-display-container Kontejner pro třídy w3-display-
w3-display-topleft Zobrazí obsah v levém horním rohu w3-display-container
w3-display-topright Zobrazí obsah v pravém horním rohu w3-display-container
w3-display-bottomleft Zobrazí obsah v levém dolním rohu w3-display-container
w3-display-bottomright Zobrazí obsah v pravém dolním rohu w3-display-container
w3-display-left Zobrazí obsah vlevo (uprostřed vlevo) od w3-display-container
w3-display-right Zobrazí obsah napravo (vpravo uprostřed) od w3-display-container
w3-display-middle Zobrazí obsah uprostřed (uprostřed) w3-display-container
w3-display-topmiddle Zobrazí obsah uprostřed nahoře w3-display-container
w3-display-bottommiddle Zobrazí obsah ve spodní části kontejneru w3-display-container
w3-display-position Zobrazí obsah na určeném místě v kontejneru w3-display-container
w3-display-hover Zobrazí obsah při umístění kurzoru uvnitř w3-display-container
w3-vlevo Pohybuje prvek doleva (plovoucí: vlevo)
w3-vpravo Pohybuje prvek doprava (plovoucí: vpravo)
w3-show Zobrazuje prvek (zobrazení: blok)
w3-skrýt Skryje prvek (zobrazení: žádný)
w3-mobile Dodává jakémukoli prvku odezvu na prvním místě pro mobily.
Zobrazuje prvky jako blokové prvky na mobilních zařízeních


Příklady

Příklad

<div class="w3-display-container w3-green" style="height:300px;">
  <div class="w3-display-topleft">Top Left</div>
  <div class="w3-display-topright">Top Right</div>
  <div class="w3-display-bottomleft">Bottom Left</div>
  <div class="w3-display-bottomright">Bottom Right</div>
  <div class="w3-display-left">Left</div>
  <div class="w3-display-right">Right</div>
  <div class="w3-display-middle">Middle</div>
  <div class="w3-display-topmiddle">Top Mid</div>
  <div class="w3-display-bottommiddle">Bottom Mid</div>
</div>

Stejný příklad jako výše s přidanou výplní:

Vlevo nahoře
Vpravo nahoře
Vlevo dole
Vpravo dole
Vlevo, odjet
Že jo
Střední
Nahoře uprostřed
Dole uprostřed

Příklad

<div class="w3-display-container w3-green" style="height:300px;">
  <div class="w3-padding w3-display-topleft">Top Left</div>
  <div class="w3-padding w3-display-topright">Top Right</div>
  <div class="w3-padding w3-display-bottomleft">Bottom Left</div>
  <div class="w3-padding w3-display-bottomright">Bottom Right</div>
  <div class="w3-padding w3-display-left">Left</div>
  <div class="w3-padding w3-display-right">Right</div>
  <div class="w3-padding w3-display-middle">Middle</div>
  <div class="w3-padding w3-display-topmiddle">Top Mid</div>
  <div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>

Zobrazení textu uvnitř obrázku:

Světla
Vlevo nahoře
Vpravo nahoře
Vlevo dole
Vpravo dole
Top Mid
Vlevo, odjet
Že jo
Střední
Spodní střed

Příklad

<div class="w3-display-container">
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <div class="w3-padding w3-display-topleft">Top Left</div>
  <div class="w3-padding w3-display-topright">Top Right</div>
  <div class="w3-padding w3-display-bottomleft">Bottom Left</div>
  <div class="w3-padding w3-display-bottomright">Bottom Right</div>
  <div class="w3-padding w3-display-topmiddle">Top Mid</div>
  <div class="w3-padding w3-display-left">Left</div>
  <div class="w3-padding w3-display-right">Right</div>
  <div class="w3-padding w3-display-middle">Middle</div>
  <div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>

Zobrazení ukazatele myši

Třída w3-display-hover zobrazuje obsah při umístění kurzoru uvnitř kontejneru w3-display-container (přechází ze skrytého do zobrazeného).

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Najeďte myší na toto pole!
Top Mid
Bottom Mid

Příklad

<div class="w3-display-container w3-light-grey" style="height:300px;">
  <div class="w3-display-topleft w3-display-hover">Top Left</div>
  <div class="w3-display-topright w3-display-hover">Top Right</div>
  <div class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
  <div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
  <div class="w3-display-left w3-display-hover">Left</div>
  <div class="w3-display-right w3-display-hover">Right</div>
  <div class="w3-display-middle">Mouse over this box!</div>
  <div class="w3-display-topmiddle w3-display-hover">Top Mid</div>
  <div class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
</div>

Třídy w3-display-hover lze zkombinovat s třídami efektů a animací a vytvořit tak skvělé efekty hoveru:

Avatar
Kalhoty
Khaki pants, $19.99

Příklad

 <div class="w3-display-container w3-hover-opacity">
  <img src="img_avatar.png" alt="Avatar">
  <div class="w3-display-middle w3-display-hover">
    <button class="w3-button w3-black">John Doe</button>
  </div>
</div>

Více o animacích a efektech se dozvíte později v tomto tutoriálu.


Displaying A Flag

With a little bit of imagination, the w3-display-classes can be used to create a flag:

Example

<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
  <div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
  <div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
  <div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
  <div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>

Floating Classes

The w3-left class floats an element to the left, the w3-right class floats an element to the right:

w3-left
w3-right

Example

<div class="w3-bar w3-light-grey">
  <div class="w3-left w3-red">w3-left</div>
  <div class="w3-right w3-blue">w3-right</div>
</div>

Note: Clear floats with the w3-clear class or put them inside a w3-container, like in the example above (clears floats automatically).


Hide and Show

Force an element to be shown or hidden with the w3-show or w3-hide class.

Example

<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>

These classes are often used to toggle between hiding and showing elements:

Example

Hello!


The w3-mobile Class

The w3-mobile class adds mobile-first responsiveness to any element.

It adds display:block and width:100% to an element on screens that are less than 600px wide.

Example

<button class="w3-button w3-mobile">Link</button>