W3.CSS Sınırlar

Sınır Sınıflar

W3.CSS sınır sınıfları herhangi bir HTML elemanlarında kullanılabilir.

Ben her tarafta sınırları var.

Kırmızı bir alt sınır var

Ben yuvarlak sınırları var.

Mavi bir leftbar var.

Örnek

<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>

Kendin dene "

Notlar gösteriliyor

Notlar genellikle soluk renk ve renkli bir bar ile gösterilir:

Londra İngiltere'nin başkentidir. 13 milyonun üzerinde nüfuslu bir metropol alana sahip İngiltere'deki en kalabalık kentidir.

Örnek

<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>

Kendin dene "

Panelleri gösteriliyor

Paneller milyonlarca farklı şekillerde görüntülenebilir:

Londra İngiltere'nin başkentidir. 13 milyonun üzerinde nüfuslu bir metropol alana sahip İngiltere'deki en kalabalık kentidir.

Örnek

<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>

Kendin dene "

Alıntılar gösteriliyor

W3-konteyner sınıfı tırnak görüntülemek için kullanabileceğiniz edilebilir.

"Make it as simple as possible, but not simpler."

Albert Einstein

"Make it as simple as possible, but not simpler."

Albert Einstein

"Make it as simple as possible, but not simpler."

Albert Einstein

Örnek

<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>

Kendin dene "

HTML <blockquote> kullanırsanız, HTML fazladan sol kenar boşluğu katacak unutmayın:

"Make it as simple as possible, but not simpler."

Albert Einstein

Örnek

<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>

Kendin dene "