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
Contoh
<header class="w3-container w3-teal">
<h2>Heading 1</h2>
</header>
Cobalah sendiri "
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">
<h2>London</h2>
<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">
<h2>London</h2>
<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">
<h2>London</h2>
<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:
London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
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.
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:
"Buatlah sesederhana mungkin, tetapi tidak sederhana."
Albert Einstein
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">
<h2>Header</h2>
</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">
<h2>Header</h2>
</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:
Saya tidak memiliki atas atau bantalan bawah
Contoh
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Cobalah sendiri "
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">
<h2>I am Heading 1</h2>
<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">
<h2>I am Heading 1</h2>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section w3-green">
<h2>I am Heading
1</h2>
<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" title="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 title="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 "