Bootstrap SASS ile Gridler Arası Boşluğu Nasıl Değiştiririm?

Merhaba arkadaşlar.

SCSS kullanarak aşağıdaki işlemi bootstrap'ta nasıl yapabiliriz?

.row,
.form-horizontal .form-group {
  margin-left: -7.5px;
  margin-right: -7.5px;
}

[class*="col-"],
.container,
.container-fluid {
  padding-left: 7.5px;
  padding-right: 7.5px;
}

 

Yukarıda yazdığın kodları SASS dosyasına yazarsan çalışır ve o şekilde de kullanabilirsin. Ama bu işlemin daha basiti var.

Bootstrap'in SASS ve LESS gibi önişlemcilere uyarlanmış stil kodları vardır. SASS'a uyarlanmış halini buradan indirelim ve SASS klasörünü projemize dahil edelim.

İmport işlemi ile _bootstrap.scss dosyasını sayfaya dahil edelim.

@import "../kutuphaneler/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

Bu import işleminden önce de degisken.scss diye bir dosya oluşturup onu sayfaya çağıralım.

// Bootstrap özellik değiştirme
@import "degisken.scss";

// Bootstrap SASS versiyonu
@import "../kutuphaneler/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

Degisken.scss dosyasının içine aşağıdaki gibi kod yazalım.

// Gridler arası boşluğu değiştirelim
$grid-gutter-width: 10px !default;

Bu işlemden sonra gridler arası boşluk 10px olacak. Burada kullandığımız $grid-gutter-width değişkeni SASS dizininin içindeki _variables.scss dosyasında tanımlanıyor.

bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

Bu dosyanın içindeki değişkenleri düzenleyerek Bootstrap'in birçok özelliğini değiştirebiliriz.

Teşekkür ederim.

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git