Bootstrap, responsive tasarım için kullanılan popüler bir CSS framework'üdür ve düzen kesme noktaları (breakpoints), tasarımın farklı ekran boyutlarında nasıl görüneceğini belirlemek için kullanılır. Bootstrap'te üç temel düzen kesme noktası vardır:
1. Küçük Ekranlar (xs)
- Kesme Noktası: 0px ve üzeri
- Açıklama: Genellikle akıllı telefonlar için kullanılır. Bu kesme noktasında, tasarım daha basit ve sütunlar genellikle üst üste yer alır.
2. Orta Ekranlar (md)
- Kesme Noktası: 768px ve üzeri
- Açıklama: Tabletler için uygundur. Bu noktada, daha fazla alan mevcut olduğu için sütunlar yan yana yerleştirilebilir.
3. Büyük Ekranlar (lg)
- Kesme Noktası: 992px ve üzeri
- Açıklama: Dizüstü bilgisayarlar ve daha büyük ekranlar için optimize edilmiştir. Bu kesme noktasında daha karmaşık düzenler ve geniş aralıklar kullanılabilir.
4. Geniş Ekranlar (xl)
- Kesme Noktası: 1200px ve üzeri
- Açıklama: Büyük ekranlı bilgisayarlar ve televizyonlar için kullanılır. Genellikle geniş ve kompleks düzenlerin tercih edildiği alandır.
5. Çok Geniş Ekranlar (xxl)
- Kesme Noktası: 1400px ve üzeri
- Açıklama: Çok büyük ekranlar için optimize edilmiştir. Tasarımın tam potansiyelini ortaya koyan geniş düzenler için kullanılır.
Kullanım Örnekleri
Bootstrap'te bu kesme noktalarını kullanarak sınıflar tanımlayabilirsiniz. Örneğin:
<div class="col-xs-12 col-md-6 col-lg-4">
<!-- İçerik -->
</div>
Bu örnekte:
- col-xs-12: Ekran boyutu 0px ve üzeri olduğunda bu sütun tüm genişliği kaplar (12 birim).
- col-md-6: Ekran boyutu 768px ve üzeri olduğunda bu sütun genişliğin yarısını kaplar (6 birim).
- col-lg-4: Ekran boyutu 992px ve üzeri olduğunda bu sütun genişliğin üçte birini kaplar (4 birim).
Sonuç
Düzen kesme noktaları, tasarımın farklı cihazlarda uygun bir şekilde görünmesini sağlar. Bootstrap, bu kesme noktalarını kullanarak responsive bir tasarım oluşturmayı oldukça kolaylaştırır.