Skip to content

Latest commit

 

History

History
101 lines (81 loc) · 2.56 KB

02-margin-padding-border.md

File metadata and controls

101 lines (81 loc) · 2.56 KB

BOOTSTRAP WIDTH

  • w-25
  • w-50
  • w-75
  • w-100
<div class="w-25" style="background-color: #eee;">Width 25%</div>
<div class="w-50" style="background-color: #eee;">Width 50%</div>
<div class="w-75" style="background-color: #eee;">Width 75%</div>
<div class="w-100" style="background-color: #eee;">Width 100%</div>

BOOTSTRAP HEIGHT

  • h-25
  • h-50
  • h-75
  • h-100
<div class="h-25 d-inline-block" style="background-color: #eee;">Width 25%</div>
<div class="h-50 d-inline-block" style="background-color: #eee;">Width 50%</div>
<div class="h-75 d-inline-block" style="background-color: #eee;">Width 75%</div>
<div class="h-100 d-inline-block" style="background-color: #eee;">Width 100%</div>

BOOTSTRAP BORDER

  • border : çizgi oluşturur.
  • border-top : üst kenar
  • border-right : sağ kenar
  • border-bottom: alt kenar
  • border-left : sol kenar " -0 " verirsek devamında çizgi yok olur...

./images/border.png

ÖRNEK KULLANIM:

<<span class="border">Example</span>&nbsp;
<span class="border-top">Example</span>&nbsp;
<span class="border-end">Example</span>&nbsp;
<span class="border-bottom">Example</span>&nbsp;
<span class="border-start">Example</span>&nbsp;

BOOTSTRAP ROUNDED

ovalleştirmedir açı vermedir.. KUllanmak için deneyiniz...

  • rounded
  • rounded - bottom
  • rounded - top
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">

Eğer ki devamında " -renk " değerleri alırsa renk alır

BOOTSTRAP PADDING

-0 -1 -2 -3 -4 -5 değerlerine göre boşluk bırakır

  • p = padding
  • pr = padding right
  • pl = padding left
  • pt = padding top
  • pb = padding bottom
  • px = padding x eksenindeki hali
  • py = padding y eksenindeki hali


BOOTSTRAP MARGIN


-0 -1 -2 -3 -4 -5 değerlerine göre boşluk bırakır


    

  • m = margin
    • 

  • mr = right
    • 

  • ml = left
    • 

  • mt = top
    • 

  • mb = bottom
    • 

  • mx = x ekseni
    • 

  • my = y ekseni
    • 



BOOTSTRAP DISPLAY(IN CSS)


    

  • d-inline : widht ,height yok
    • 

  • d-block : blok özelliği taşır ve blok olarak bulunur..
    • 

  • d-inline-block : hem inline hem de block özelligi taşır width ve height vardır muhakkak..
    • 

  • d-none : yer kaplamadan yok eder
    • 

  • invisible : direk yok eder ama sanki görünmez var gibidir...
    • 

  • visible : görünür adı üstünde
    •