Bootstrap Sass Kurulum konusunu öğrenmek için ön koşul var mı?

Bu içerik temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.

Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?

Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.

Takıldığım bir yerde nereden soru sorabilirim?

İçeriğin altındaki topluluk yorumları bölümünden sorunuzu iletebilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.

Bootstrap Sass Kurulum - Bootstrap 5 Dersleri

Bootstrap ile Sass kullanarak bir proje kurmak için aşağıdaki adımları takip edebilirsiniz:

1. Gerekli Araçları Yükleyin

Öncelikle, Sass ve Bootstrap’ı kullanabilmek için bazı araçların sisteminize yüklü olması gerekiyor. Node.js ve npm (Node Package Manager) yüklü değilse, Node.js resmi web sitesinden indirip kurun.

2. Yeni Bir Proje Oluşturun

Terminal veya komut istemcisinde yeni bir proje dizini oluşturun ve içine girin:

mkdir bootstrap-sass-project cd bootstrap-sass-project

3. Npm ile Projeyi Başlatın

Projeyi başlatmak için npm init komutunu kullanın. Bu, bir package.json dosyası oluşturmanıza yardımcı olur.

npm init -y

4. Bootstrap ve Sass Kurulumu

Bootstrap ve Sass kütüphanelerini kurmak için şu komutları kullanın:

npm install bootstrap sass

5. Proje Yapısını Oluşturun

Aşağıdaki gibi bir dizin yapısı oluşturun:

bootstrap-sass-project/ ├── css/ │ └── styles.css ├── scss/ │ └── styles.scss └── index.html

6. SCSS Dosyasını Düzenleyin

scss/styles.scss dosyasını açın ve Bootstrap'ı dahil edin:

// Bootstrap'ı dahil et @import "../node_modules/bootstrap/scss/bootstrap"; // Kendi stilinizi buraya ekleyebilirsiniz

7. CSS Dosyasını Oluşturun

css/styles.css dosyasını oluşturun. Bu dosya, Sass dosyasının derlenmiş halini içerecek.

8. Sass'ı Derleyin

Terminalde, Sass dosyasını derlemek için aşağıdaki komutu çalıştırın:

npx sass scss/styles.scss css/styles.css --watch

Bu komut, scss/styles.scss dosyasındaki değişiklikleri izler ve her değişiklikte css/styles.css dosyasını otomatik olarak günceller.

9. HTML Dosyasını Oluşturun

index.html dosyasını oluşturun ve aşağıdaki kodu ekleyin:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <title>Bootstrap Sass Projesi</title> </head> <body> <div class="container"> <h1>Bootstrap ile Sass Projesi</h1> <p>Bu, Bootstrap ve Sass kullanarak oluşturulmuş bir örnek projedir.</p> </div> </body> </html>

10. Projeyi Çalıştırın

Projeyi bir tarayıcıda görüntülemek için, basit bir HTTP sunucusu kurabilirsiniz. Örneğin, live-server kullanabilirsiniz:

npm install -g live-server

Daha sonra projenizin kök dizininde şu komutu çalıştırarak projeyi başlatın:

live-server

Bu adımları takip ederek Bootstrap ve Sass ile basit bir proje oluşturmuş olacaksınız. Projenizi geliştirmek için Bootstrap bileşenlerini ve Sass stil özelliklerini kullanabilirsiniz.

Bootstrap Sass Kurulum