Klasy graniczne
Klasy W3.CSS graniczna może być stosowany na wszystkich elementów HTML.
Mam granice ze wszystkich stron.
Mam czerwoną dolnej granicy
Mam granic zaokrąglone.
Przykład
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border-bottom w3-border-red">
<p>I have
a red bottom border.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>
Spróbuj sam " Wyświetlanie notatki
Notatki są często wyświetlane z bladym kolorem i kolorowym pasku:
Przykład
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Spróbuj sam " Wyświetlanie paneli
Panele mogą być wyświetlane na milion różnych sposobów:
Londyn jest stolicą Anglii. Jest to najbardziej zaludnione miasto w Wielkiej Brytanii, z metropolii powierzchni ponad 13 milionów mieszkańców.
Londyn jest stolicą Anglii. Jest to najbardziej zaludnione miasto w Wielkiej Brytanii, z metropolii powierzchni ponad 13 milionów mieszkańców.
Londyn jest stolicą Anglii. Jest to najbardziej zaludnione miasto w Wielkiej Brytanii, z metropolii powierzchni ponad 13 milionów mieszkańców.
Przykład
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> Spróbuj sam " Wyświetlanie notowania
Klasa w3-pojemnik może być używany do wyświetlania cytatów.
Przykład
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it
as simple as possible, but not simpler."</i></p>
<p>Albert
Einstein</p>
</div> Spróbuj sam " Jeśli używasz HTML <blockquote>, należy pamiętać, że HTML doda dodatkowy lewy margines:
"Zrób to tak proste, jak to możliwe, ale nie prostsze."
Albert Einstein
Przykład
<blockquote class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make
it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote> Spróbuj sam " Hoverable Borders
Klasy kolor w3-hover obramowania zmienić kolor obramowania na mouse-over:
Red hoverable granicy
Purpurowy obramowanie, które zmienia kolor na niebieski przy aktywowaniu
Przykład
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div> Spróbuj sam "