Merhaba dostlar bugün sizlerle Kenarlık ve boyutlandırmayı göreceğiz vakit kaybetmeden geçelim
hemen border vererek başlıyalım
hemen border vererek başlıyalım
HTML:
<div class="bg-light mt-2 p-4"></div>
<div class="bg-light mt-2 p-4 border"></div>
görselde de gözüktüğü gibi bir kenarlık yani border vermiş olduk
peki gelin bide istediğimiz tarafa border verelim aynı margin ve padding de olduğu gibi
HTML:
<div class="bg-light mt-2 p-4 border-top"></div> üst
<div class="bg-light mt-2 p-4 border-left"></div> sol
<div class="bg-light mt-2 p-4 border-right"></div> sağ
<div class="bg-light mt-2 p-4 border-bottom"></div> aşağıpeki gelin bide border larımıza bide renk verelim
HTML:
<div class="bg-light mt-2 p-4 border border-danger"></div>
<div class="bg-light mt-2 p-4 border border-primary"></div>
<div class="bg-light mt-2 p-4 border border-secondary"></div>renk kodlarını biliyoruz zaten bu şekilde uyguluyoruz ve görselldeki gibi bir sonuç çıkıyor
gelin bide yuvarlatma ekliyelim böyle keskin keskin nereye kadar değilmi
<div class="bg-light mt-2 p-4 border border-danger rounded"></div>
bu şekilde ekliyoruz
HTML:
<div class="bg-light mt-2 p-4 border border-primary rounded-top"></div>
<div class="bg-light mt-2 p-4 border border-secondary rounded-left"></div>ve bu şekilde de istediğimiz taraftan veriyoruz
peki gelin bide sayfanın istediğim kadarını kaplasın yapalım
HTML:
<div class="bg-primary mt-2 p-4 w-25 "></div>
<div class="bg-primary mt-2 p-4 w-50 "></div>
<div class="bg-primary mt-2 p-4 w-75 "></div>istedğimiz oranı yaza biliriz unutmayın ki sayfa küçüldüğünde yeniden boyutlanır küçülen sayfanın % lik oranını
alır
gelin son olarak bide gölge verelim
HTML:
<div class="shadow bg-light mt-2 p-4"></div>
<div class="shadow-sm bg-light mt-2 p-4"></div>
<div class="shadow-lg bg-light mt-2 p-4"></div>bu şekilde vere biliriz görsel koyamıyorum çünkü arka plan dan dolayı bende gözükmüyor
bir sonraki konuda Hizalama ve Display özelliklerine bakacağız iyi forumlar
NOT: BTK Akademi tarafından yardım alınarak hazırlanmıştır
projedeki tüm kodlar
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<! CSS >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>www.TürkHackTeam.org/com</title>
<style>
</style>
</head>
<body class="p-5">
<div class="bg-light mt-2 p-4"></div>
<div class="bg-light mt-2 p-4 border"></div>
<div class="bg-light mt-2 p-4 border-top"></div>
<div class="bg-light mt-2 p-4 border-left"></div>
<div class="bg-light mt-2 p-4 border-right"></div>
<div class="bg-light mt-2 p-4 border-bottom"></div>
<br><br>
<div class="bg-light mt-2 p-4 border border-danger"></div>
<div class="bg-light mt-2 p-4 border border-primary"></div>
<div class="bg-light mt-2 p-4 border border-secondary"></div>
<br><br>
<div class="bg-light mt-2 p-4 border border-danger rounded"></div>
<div class="bg-light mt-2 p-4 border border-primary rounded-top"></div>
<div class="bg-light mt-2 p-4 border border-secondary rounded-left"></div>
<br><br>
<div class="bg-primary mt-2 p-4 w-25 "></div>
<div class="bg-primary mt-2 p-4 w-50 "></div>
<div class="bg-primary mt-2 p-4 w-75 "></div>
<br><br>
<div class="shadow bg-light mt-2 p-4"></div>
<div class="shadow-sm bg-light mt-2 p-4"></div>
<div class="shadow-lg bg-light mt-2 p-4"></div>
<br><br>
<br><br>
<br><br>
<! JS >
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
