[]
Bootstrap yardımı (acemiye)
Merhaba,
Sabahtan beri alışmaya, öğrenmeye çalışıyorum. Yardımlar çok makbule geçecek.
Aşağıdaki sayfalardan birinde container (eğer ismi buysa) bölgesi dar, diğerinde tam ekrana yayılmış. Container'in bu genişliğini nereden kontrol ediyoruz? (bootstrap.min.css içerisinde arıyorum ama bulamıyorum)
getbootstrap.com
getbootstrap.com
Teşekkürler.
Sabahtan beri alışmaya, öğrenmeye çalışıyorum. Yardımlar çok makbule geçecek.
Aşağıdaki sayfalardan birinde container (eğer ismi buysa) bölgesi dar, diğerinde tam ekrana yayılmış. Container'in bu genişliğini nereden kontrol ediyoruz? (bootstrap.min.css içerisinde arıyorum ama bulamıyorum)
getbootstrap.com
getbootstrap.com
Teşekkürler.
Öncelikle bootstrap.min.css değil bootstrap.css kullanın. Daha anlaşılır olacaktır.
İkinci olarak bootstrap'in kendi sitesinde
getbootstrap.com
grid yapısı altında bulabilirsin. Burayı incelemeden ilerlemen zor olacaktır.
İkinci olarak bootstrap'in kendi sitesinde
getbootstrap.com
grid yapısı altında bulabilirsin. Burayı incelemeden ilerlemen zor olacaktır.
- saygilarefendim (30.11.14 22:01:01)
container - fixed width
container-fluid - fluid width
amma velakin iki örneğin yapısı farklı, birinde önce navbar var ki navbar 100% width
navbar içinde container var,
diğeri önce container sonra navbar var
container-fluid - fluid width
amma velakin iki örneğin yapısı farklı, birinde önce navbar var ki navbar 100% width
navbar içinde container var,
diğeri önce container sonra navbar var
- selam (30.11.14 22:03:33)
abi niye öyle css dosyasında arıyorsun ki? chrome'dan sağ tıkla öğeyi incele de. dom ağacını görebilirsin. birinde önce container sonra jumbotron yapmış, diğerinde önce jumbotron sonra container.
- eksi sozlukte eksiyen adam (30.11.14 22:19:05)
@saygilarefendim:öneri için teşekkürler. notepad ++'da düzeltmeyi denemiştim, orada beceremeyince word'de { ve } karakterlerini find replace kullanarak biraz daha anlaşılır yapmıştım. ben de benden kaynaklanıyor sanıyordum :)
bahsettiğin siteyi biraz incelemiştim, daha çok zaman harcamam gerekiyor.
@selam: fixed width ve fluid width yazman çok işime yaradı, yukarıdaki sitede hemen gözüme çarptı. ama halen çözemedim sorumu.
@eksi sozlukte eksiyen adam: teşekkürler, bunu bilmiyordum. peki burada örneğin dar olan sayfadaki container'ın genişliğini nasıl artırabileceğiz? Burada değiştirebileceğim bir parametre var mı? Şu an sadece padding veya margin değiştirebildim mesela.
:: buldum parametreleri galiba. çok teşekkür ederim tekrar.
bahsettiğin siteyi biraz incelemiştim, daha çok zaman harcamam gerekiyor.
@selam: fixed width ve fluid width yazman çok işime yaradı, yukarıdaki sitede hemen gözüme çarptı. ama halen çözemedim sorumu.
@eksi sozlukte eksiyen adam: teşekkürler, bunu bilmiyordum. peki burada örneğin dar olan sayfadaki container'ın genişliğini nasıl artırabileceğiz? Burada değiştirebileceğim bir parametre var mı? Şu an sadece padding veya margin değiştirebildim mesela.
:: buldum parametreleri galiba. çok teşekkür ederim tekrar.
- puc (30.11.14 22:34:26 ~ 22:43:08)
ikisi arasındaki fark selam'ın dediği gibi bence de. ancak senin istediğin şey sanırım ilk linkten daha geniş bir bölümü kaplaması ama ikincisi gibi tam ekran olmaması değil mi? istediğin şeyler bootstap'te şu şekilde kodlu olabilir:
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
gördüğün gibi her ekran boyutu için farklı bir genişliği var. senin buradan elle tek tek değiştirmen bootstrap'te bazı başka şeyleri bozabilir. en iyisi arkadaşların dediği gibi bootstrap'in css dosyasında değişiklik yapmadan kendi css'inle onun koşullarının üzerine başka koşullar getirmen. ben hep bu yönte tavsiyeler okudum.
illa kökten değişsin diyorsan bootstrap customize sayfasından da yapabilirsin. burada farklı ekranlar için farklı container boyutlarını girebilirsin temizinden.
getbootstrap.com
edit: biraz bakındım. bootstrap'ten ayrı bir css dosyasında
.container {
max-width: 90%
}
yaparak genişletebiliyorsun tek satırla. ama dediğim gibi bootstrap'in farklı ekranlara göre ayarlanmış olmasından dolayı ekran boyutunu küçültünce kayıyor her şey. bunun sebebi (yukarıda gördüğün üzere) 768 px üzeri cihazlar için sabit genişlikler varken, 768px altındakiler için container genişliği %100 olarak atanmış. yani ekranın neyse, o. max-width yaparsak 768px altı cihazlar için bu ayarı değiştirmiş oluyoruz. beyin jimnastiği oldu benim için de. umarım yanılmıyorumdur.
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
gördüğün gibi her ekran boyutu için farklı bir genişliği var. senin buradan elle tek tek değiştirmen bootstrap'te bazı başka şeyleri bozabilir. en iyisi arkadaşların dediği gibi bootstrap'in css dosyasında değişiklik yapmadan kendi css'inle onun koşullarının üzerine başka koşullar getirmen. ben hep bu yönte tavsiyeler okudum.
illa kökten değişsin diyorsan bootstrap customize sayfasından da yapabilirsin. burada farklı ekranlar için farklı container boyutlarını girebilirsin temizinden.
getbootstrap.com
edit: biraz bakındım. bootstrap'ten ayrı bir css dosyasında
.container {
max-width: 90%
}
yaparak genişletebiliyorsun tek satırla. ama dediğim gibi bootstrap'in farklı ekranlara göre ayarlanmış olmasından dolayı ekran boyutunu küçültünce kayıyor her şey. bunun sebebi (yukarıda gördüğün üzere) 768 px üzeri cihazlar için sabit genişlikler varken, 768px altındakiler için container genişliği %100 olarak atanmış. yani ekranın neyse, o. max-width yaparsak 768px altı cihazlar için bu ayarı değiştirmiş oluyoruz. beyin jimnastiği oldu benim için de. umarım yanılmıyorumdur.
- raikkonen (30.11.14 23:03:29 ~ 23:24:07)
1