W3.Panele CSS
Jestem panelem.
Jestem panelem.
Jestem kontenerem.
Jestem kontenerem.
Klasa panelu
Klasa w3-panel dodaje 16px górny i dolny margines oraz 16px lewy i prawy dopełnienie do dowolnego elementu HTML.
Przykład
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Panele na notatki
Klasa w3-panel jest idealna do wyświetlania notatek.
Notatki są często wyświetlane w jasnym kolorze:
Londyn to najbardziej zaludnione miasto w Wielkiej Brytanii, z obszarem metropolitalnym liczącym ponad 9 milionów mieszkańców.
Przykład
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Aby dowiedzieć się więcej o W3.CSS Notes, odwiedź rozdział W3.CSS Notes .
Panele do cytatów
Klasa w3-panel jest idealna do wyświetlania cytatów.
Przykład
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
Aby dowiedzieć się więcej o Cytatach W3.CSS, odwiedź rozdział Cytaty W3.CSS .
Panele alertów
Klasa w3-panel jest idealna do wyświetlania alertów.
Alerty są często wyświetlane przy użyciu mocnego koloru:
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Przykład
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Aby dowiedzieć się więcej o alertach W3.CSS, przejdź do rozdziału Alerty W3.CSS .
Panele jako karty
Londyn to najbardziej zaludnione miasto w Wielkiej Brytanii, z obszarem metropolitalnym liczącym ponad 9 milionów mieszkańców.
Przykład
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Zaokrąglone panele
Londyn to najbardziej zaludnione miasto w Wielkiej Brytanii, z obszarem metropolitalnym liczącym ponad 9 milionów mieszkańców.
Przykład
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
Ukryj (zamknij) panel
Ukrycie panelu jest łatwe.
Kliknij X, aby zamknąć ten panel.
Kliknij X, aby zamknąć ten panel.
Przykład
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
Pokaż (otwórz) panel
Pokazanie (ukrytego) panelu jest łatwe:
Przykład
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>