Container Kelas
Kelas w3-kontainer adalah yang paling penting dari kelas W3.CSS.
Kelas w3-kontainer digunakan untuk semua jenis elemen kontainer HTML seperti:
<Div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, dan banyak lagi.
Tajuk ini adalah Green.
footer ini merah.
Artikel ini adalah abu-abu dan teks berwarna coklat.
Kontainer Menyediakan Kesetaraan
Kelas w3-wadah penting untuk menyediakan kesetaraan:
- margin umum
- paddings umum
- keberpihakan vertikal umum
- keberpihakan horisontal umum
- font umum
- warna umum
Contoh
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Cobalah sendiri " Untuk menambah warna, tambahkan saja kelas warna w3-:
Contoh
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Cobalah sendiri " Header dan footer
Kelas w3-kontainer dapat digunakan untuk gaya header:
Heading 1
Kelas w3-kontainer dapat digunakan untuk gaya footer:
Contoh
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Cobalah sendiri " Artikel dan Bagian
Kelas w3-kontainer dapat digunakan untuk gaya <article> dan <section> elemen:
Contoh
<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> Cobalah sendiri "  | Banyak halaman web menggunakan <div> elemen bukan <article> dan <section> elemen. |
|---|
Catatan, Panel, dan Quotes
Kelas w3-kontainer dapat digunakan untuk menampilkan semua jenis catatan:
Contoh
<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> Cobalah sendiri " Kelas w3-kontainer dapat digunakan untuk menampilkan semua jenis panel:
London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
Contoh
<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> Cobalah sendiri " Kelas w3-kontainer dapat digunakan untuk menampilkan semua jenis kutipan:
Contoh
<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>
Cobalah sendiri " Pergi ke bab W3.CSS Borders untuk mempelajari lebih lanjut tentang menampilkan catatan, panel, dan kutipan.
kombinasi
Header
Sebuah mobil adalah roda, self-powered kendaraan bermotor yang digunakan untuk transportasi. Sebagian besar definisi dari istilah menetapkan bahwa mobil dirancang untuk berjalan terutama di jalan-jalan. (Wikipedia)
Contoh menggunakan HTML <div> elemen
<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> Cobalah sendiri " Misalnya menggunakan HTML elemen semantik
<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> Cobalah sendiri " kontainer Padding
Kelasw3-kontainer memiliki 16px bawaan kiri dan padding kanan, dan tidak ada atas atau bantalan bawah:
Biasanya Anda tidak perlu mengubah padding default wadah, karena paragraf dan judul memberikan margin yang akan mensimulasikan padding.
Saya Heading 1
Saya seorang ayat.
Contoh
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Cobalah sendiri " kontainer sectioning
Kelasw3-kontainer tidak memiliki atas standar atau margin bawah.
Dua kontainer akan menampilkan wothout margin antara mereka:
Saya Heading 1
Saya seorang ayat.
Saya Heading 1
Saya seorang ayat.
Kelasw3-bagian dapat digunakan untuk memisahkan kontainer.Memiliki 16px atas dan bawah margin:
Saya Heading 1
Saya seorang ayat.
Saya Heading 1
Saya seorang ayat.
Contoh
<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>
Cobalah sendiri " Menyembunyikan (Penutupan) Kontainer
Menyembunyikan atau menutup wadah mudah:
Untuk menutup wadah ini, klik pada X di sudut kanan atas.
Contoh
<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>
Cobalah sendiri " Wadah membuka
Membuka wadah tertutup mudah:
Contoh
<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>
Cobalah sendiri "