Lütfen dersleri ne zaman kullanacağımı containerve row. Emin değilim çünkü Bootstrap'in dokümantasyonu bu kısım hakkında oldukça net değil.
Bootstrap 3 kullanıyorum.
Yanıtlar:
containerbir rowelement kabıdır .
row öğeler sütun konteynerleridir (dokümanlar buna ızgara sistemi adını verir)
Ayrıca, containermizanpajınızın duyarlı davranışlarıyla ilgilenen içeriğin kenar boşluklarını ayarlar.
Bu nedenle, containersınıf genellikle Bootstrap projesinin stil kurallarına göre 'kutulu' içerikler oluşturmak için kullanılır.
Tam genişlikte bir ızgara oluşturarak "kutunun dışına çıkmak" istiyorsanız, yalnızca rowiçinde sütun bulunan öğeleri kullanabilirsiniz (normal toplam 12 kolonu kapsayan).
containerVe rowsınıfları vücut içinde elemanları bulunmaktadır. Yani temel bir düzen şöyle olacaktır:
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
Kutulu duyarlı bir düzen için.
Atlarsanız containertam genişlikte bir düzen elde edersiniz.
Jumbotron, containerdavranışa iyi bir örnektir . Bir öğeye bir Jumbotron öğesi koyarsanız container, yanıt veren genişliğe bağlı olarak yuvarlatılmış kenarlıkları ve sabit bir genişliği olur. Jumbotron bir kabın dışındaysa, sınırları olmayan tam genişliğe yayılır.
rowiçinde sütun bulunan öğeleri kullanabilirsiniz (normal toplam 12 kolonu kapsayan). Kullanabileceğin düşünüyorum container-fluidve row-fluidbunun için. (Bootstrap acemi burada, bir tutam tuzla alın.)
Ben de aynı şeyi merak ediyordum ve bootstrap.css3. versiyonun üzerinden geçtiğimi anlamaya çalışıyordum . Cevap satır no. 1585 ila 1605. Daha iyi anlaşılması için bu satırları aşağıdaki gibi buraya göndereceğim.
.container
{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Kodun tamamı kendinden açıklamalıdır. Bununla birlikte, bunu ayrıntılandırmak için, 750pxekran genişliği kodun gösterdiği gibi arasında 768pxve 992pxbenzeri olması durumunda kapsayıcı alacaktır . Şimdi, 1200'den fazla ortak ekran çözünürlüğü için, kapsayıcı alacaktır 1170px, ancak 30 px( 15px+15px) ' nin dolgusu çıkarıldığında, 1140pxsol ve sağ kenar boşluğu otomatik olarak ayarlandığında ekranda ortalanmış olan sol etkili boşluk olacaktır.
Şimdi, olması durumunda class="row", aşağıdaki kod var:
.row {
margin-right: -15px;
margin-left: -15px;
}
Dolayısıyla, satır kabın içindeyse, kaptan her bir tarafa 15 piksellik dolguyu etkili bir şekilde alır ve tüm alanı kullanır. Ancak sınıf satırı gövde etiketinin içindeyse, negatif kenar boşlukları nedeniyle görünür alandan tarayıcının hem sol hem de sağ tarafına geçme eğilimindedir.
Umarım netleştirilmiştir.
Konteyner
Kap, duyarlı genişlikler üzerindeki genişlik kısıtlamalarını sağlar. Duyarlı boyutlar değiştiğinde, değişen kaptır. Satırlar ve sütunların tümü yüzde temellidir, bu nedenle değiştirilmeleri gerekmez. Her iki tarafta satırlarla iptal edilen 15 piksellik bir kenar boşluğu olduğunu unutmayın.
Satırlar
Satırlar her zaman bir kapta olmalıdır.
Satır, sütunlara yaşanacak bir yer sağlar, ideal olarak toplamı 12'ye kadar olan sütunlara sahiptir. Ayrıca, tüm sütunlar sola kaydığı için bir sarmalayıcı görevi görür, kayan değerler tuhaflaştığında ek satırlar çakışmaz.
Satırların her iki tarafında da 15 piksel negatif kenar boşluğu vardır. Sırayı oluşturan div, normalde kapların dolgusu içinde sınırlandırılır, pembe alanın kenarlarına dokunur ancak ötesine dokunmaz. 15px negatif kenar boşlukları, satırı kapsayıcıların 15px dolgusunun üstünden dışarı iter ve esasen onu reddeder. Ayrıca, satırlar, içindeki tüm div'lerin önceki ve sonraki satırlardan ayrı olarak kendi satırlarında görünmesini sağlar.
Sütunlar
Sütunların artık 15 piksel dolgusu var. Bu dolgu, sütunların aslında satırın kenarına temas ettiği ve satırın negatif kenar boşluğuna sahip olduğu ve konteynerin pozitif dolgusuna sahip olduğu için konteynerin kenarına temas ettiği anlamına gelir. Ancak, sütundaki dolgu, sütunun içindeki her şeyi olması gerektiği yere iter ve ayrıca sütunlar arasında 30 piksellik boşluk sağlar. Asla bir satırın dışında sütun kullanmayın, işe yaramaz.
Daha fazla bilgi için bu yazıyı okumanızı öneririm . Gerçekten açık ve Bootstrap'in grid sisteminin nasıl çalıştığını iyi açıklıyor.
Sınıf 'kapsayıcı', içeriği görünüm bağlantı noktasının merkezine sarar. İçinde body etiketi olan tüm içerik, sayfanın ortasında belirtilen genişlikte görüntülenen sonuçlara yerleştirilebilir.
Sınıf 'satır', içeriği arka arkaya sütunlara yerleştirmeniz gerektiğinde kullanılır, her satırda toplamda en fazla 12 sütun olabilir.
Geleneksel CSS uygulamalarında muhtemelen aşağıdaki sınıfları kullanırsınız:
wrapper, header, navigator, contents, footer
yukarıdaki sınıfların kullanımı şu örnek gibi olabilir:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="navigator">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
Bootstrap'ta dilerseniz veya yukarıdaki şablona alışkınsanız aşağıdaki örnek gibi önyükleme sınıflarını kullanabilirsiniz:
<body>
<div class="container">
<div class="col-md-12">
<h1>Header</h1>
<p>Header contents goes here</p>
</div>
<div class="col-md-12">
<nav role="navigation" class="nav navbar">
<h1>Navigation</h1>
<p>Navigation contents goes here</p>
</nav>
</div>
<div class="col-md-12">
<div class="pagination">
<h1>Page contents</h1>
<p>Webpage contents goes here</p>
</div>
</div>
<div class="col-lg-12">
<h1>Footer contents</h1>
<p>footer contents goes here</p>
</div>
</div>
</body>
Satır sınıfı için, sayfa için tablo düzenini tasarlamak istediğinizde satır sınıfını kullanabilirsiniz, ancak verileri tablo biçiminde görüntülemek istediğinizde tablo sınıfını kullanmalısınız, ancak tablo yanıt vermeyecektir.
Veri tablolarından farklı olan tablo düzeni oluşturmak için bu örnekte olduğu gibi satır sınıfını kullanın:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
</div>
</div>
</body>
Tablo tabanlı düzen kullanmaktan kaçınmaya ve burada açıklandığı gibi duyarlı tabloları kullanmaya çalışmalısınız.