Kontener klasy
Klasa w3-kontener jest najważniejszą z klas W3.CSS.
Klasa w3 pojemnik stosuje się do wszystkich typów elementów kontenerowych HTML jak:
<Div> <header>, <footer>, <article>, <section> <blockquote> <form> i wiele innych.
Ten nagłówek jest zielony.
Ta stopka jest czerwony.
Ten artykuł jest jasnoszary, a tekst jest brązowy.
Pojemniki Zapewnia Równość
Klasa w3-kontener jest ważne dla zapewnienia równości:
- wspólne marginesy
- wspólne Uszczelki
- Wspólne wyrównania pionowego
- Wspólne wyrównania poziome
- wspólne czcionki
- Najczęstsze kolory
Przykład
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Spróbuj sam " Aby dodać kolor, wystarczy dodać w3- klasę kolorów:
Przykład
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Spróbuj sam " Nagłówki i stopki
Klasa w3-pojemnik może być używany do stylu nagłówka:
Nagłówek 1
Klasa w3-pojemnik może być używany do stylu stopkę:
Przykład
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Spróbuj sam " Artykuły i sekcje
Klasa w3-pojemnik może być używany do stylu <Article> i <section> elementy:
Przykład
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<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 "  | Wiele stron internetowych wykorzystuje <div> zamiast <article> oraz <section>. |
|---|
Uwagi, paneli i cytaty
Klasa w3-pojemnik może być używany do wyświetlania różnego rodzaju notatek:
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 " Klasa w3-pojemnik może być używany do wyświetlania wszystkich rodzajów płyt:
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 " Klasa w3-pojemnik może być używany do wyświetlania różnego rodzaju 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 " Przejdź do rozdziału W3.CSS granicznego , aby dowiedzieć się więcej na temat notatek wyświetlających, paneli i cytatów.
kombinacje
nagłówek
Samochód jest na kółkach, z własnym zasilaniem pojazd silnikowy używany do transportu. Większość definicji tego terminu określić, że samochody są przeznaczone do pracy przede wszystkim na drogach. (Wikipedia)
Przykład wykorzystania HTML <div>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> Spróbuj sam " Przykład wykorzystania elementów HTML semantyczne
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> Spróbuj sam " Pojemnik Dopełnienie
Klasaw3-pojemnik ma domyślnego 16px lewy i prawy dopełnienie, a nie górną lub dolną padding:
Zwykle nie trzeba zmienić domyślny wyściółkę pojemnika, ponieważ akapity i nagłówek zapewnić marże, które symulują wyściółkę.
Ja Nagłówek 1
Jestem pkt.
Przykład
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Spróbuj sam " Pojemnik kabin sekcyjnych
Klasaw3-pojemnik ma domyślnego Margines górny lub dolny.
Dwa pojemniki będą wyświetlane wothout margines między nimi:
Ja Nagłówek 1
Jestem pkt.
Ja Nagłówek 1
Jestem pkt.
Klasaw3 sekcji mogą być stosowane do oddzielania pojemników.Ma 16px górny i dolny margines:
Ja Nagłówek 1
Jestem pkt.
Ja Nagłówek 1
Jestem pkt.
Przykład
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Spróbuj sam " Ukrywanie (zamknięcia) Kontenery
Ukrywanie lub zamykania pojemnika jest łatwe:
Aby zamknąć opakowanie, kliknij na przycisk X w prawym górnym rogu.
Przykład
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
Spróbuj sam " otwierania pojemników
Otwieranie zamkniętych pojemników jest prosta:
Przykład
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
Spróbuj sam "