Bootstrap, kolayca stil verebileceğiniz pek çok sınıf sunar. Bu yazıda, Bootstrap kenarlık sınıflarını kullanarak bir resme üç farklı kenarlık eklemeyi göstereceğiz.
Bootstrap, kenarlıklar için border sınıflarını sunar. Bu sınıflar, öğelerin etrafına kenarlık eklemeye yarar ve çeşitli kenarlık kalınlıkları, renkler ve stillerle özelleştirilebilir.
Adımlar:
- İlk Kenarlık: Standart bir kenarlık ekleyeceğiz.
- İkinci Kenarlık: Kenarlık rengini değiştireceğiz.
- Üçüncü Kenarlık: Kenarlık stilini değiştireceğiz (örneğin: kesikli, noktalı).
HTML Kodu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Kenarlık Uygulaması</title> <!-- Bootstrap CSS Bağlantısı --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEJ6H2T+Kv3GZyL1O2qECbzQ0s1fWqfv8ePrC4t5fZG5D7DbJ/XZC0tpr2m7f" crossorigin="anonymous"> </head> <body> <div class="container mt-5"> <h2>Resme Üç Farklı Kenarlık Ekleme</h2> <!-- İlk Resim (Varsayılan Kenarlık) --> <div class="mb-4"> <img src="https://via.placeholder.com/300" alt="Resim 1" class="border"> </div> <!-- İkinci Resim (Renkli Kenarlık) --> <div class="mb-4"> <img src="https://via.placeholder.com/300" alt="Resim 2" class="border border-danger"> </div> <!-- Üçüncü Resim (Kesikli Kenarlık) --> <div> <img src="https://via.placeholder.com/300" alt="Resim 3" class="border border-success border-2 border-dashed"> </div> </div> <!-- Bootstrap JS Bağlantısı --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pzjw8f+ua7Kw1TIq0pLseTo7oBi61OgpKc4OoQHiT4HZXg/XJuv5h3rN1k0O5u0X" crossorigin="anonymous"></script> </body> </html> |
Açıklamalar:
- İlk Resim (Varsayılan Kenarlık):
class="border"sınıfı kullanılarak resme standart bir kenarlık eklenmiştir. Bu kenarlık, varsayılan olarak 1px kalınlığında ve siyah renktedir.
- İkinci Resim (Renkli Kenarlık):
class="border border-danger"kullanarak kenarlığın rengini değiştirdik.border-dangersınıfı, kenarlığı kırmızı renkte yapar. Bootstrap’te farklı renkler içinborder-primary,border-success,border-warning, vb. renk sınıfları mevcuttur.
- Üçüncü Resim (Kesikli Kenarlık):
class="border border-success border-2 border-dashed"kullanarak:border-success: Yeşil renkli bir kenarlık ekler.border-2: Kenarlık kalınlığını 2px yapar.border-dashed: Kenarlık stilini kesikli yapar.
Sonuç:
Bu uygulama, Bootstrap kenarlık sınıflarını kullanarak bir resme üç farklı kenarlık eklemenizi sağlar. Farklı kenarlık renkleri, stilleri ve kalınlıkları ile esnek tasarımlar oluşturabilirsiniz.
Yorum Yap