Ana içeriğe atla

Drupal ve Bootstrap’i Birlikte Nasıl Kullanabilirsiniz?

Seda Aktepe
Seda Aktepe Front End Developer
8 dakika okuma süresi
Drupal Bootstrap

Drupal ve Bootstrap’i Birlikte Nasıl Kullanabilirsiniz?

Drupal, açık kaynaklı bir içerik yönetim sistemi (CMS) iken, Bootstrap, HTML, CSS ve JavaScript bileşenlerinin hızlı ve etkili bir şekilde tasarımını sağlayan açık kaynaklı bir framework'dür. Drupal ve Bootstrap'un bir araya getirilmesi, kullanıcıların web sitelerinin daha etkili, duyarlı ve modern bir şekilde tasarlanmasını sağlar. Bu yazıda, Drupal ve Bootstrap'un birbirleriyle nasıl kullanılabileceği hakkında bilgi vereceğiz.

Bootstrap'in Drupal ile Entegrasyonu

Drupal, Bootstrap'in tüm sürümleriyle uyumlu ve entegre edilebilir. Drupal kullanıcılarının, Bootstrap ile web tasarımı süreçlerinde daha fazla esneklik ve daha kolay bir kullanım sağlamasına yardımcı olur. Drupal ve Bootstrap'i entegre etmek için birkaç farklı yol vardır:

Bootstrap Kütüphanelerini Drupal Temalarında Kullanma: Drupal temalarında Bootstrap kütüphanelerini kullanarak sitenizin görünümünü hızlı bir şekilde geliştirebilir ve Bootstrap'in düzen ve bileşenlerinden faydalanabilirsiniz. Bu sayede, sitenizin işlevselliğini artırabilirsiniz.

1.İlk olarak, temanın *.info.yml dosyasını açarak aşağıdaki gibi Bootstrap kütüphanelini ekleyebilirsin:

libraries:
  - 'temanın-adı/bootstrap'
  

2.Daha sonra, temanın kök dizininde temanın-adı.libraries.yml adında bir dosya oluştur ve içeriğini aşağıdaki gibi düzenleyebilirsin:

bootstrap:
  version: 4.6.0
  css:
    theme:
      https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css: { type: external, minified: true }
  js:
    https://code.jquery.com/jquery-3.6.0.min.js: { type: external, minified: true }
    https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js: { type: external, minified: true }

Bu şekilde, Drupal temanızda Bootstrap kütüphanelerini kullanabilirsin. Daha sonra bu kütüphaneleri temanızın içinde istediğin şekilde kullanabilirsin. 

Bootstrap Tabanlı Drupal Temaları Kullanma: Drupal için geliştirilmiş birkaç Bootstrap tabanlı tema vardır. Bu temalar sayesinde, Drupal web siteniz için daha hızlı bir tasarım oluşturma olasılığınız vardır. Bootstrap tabanlı Drupal temaları, hazır öğelerin ve düzenlerin kullanımını sağlayarak, web tasarım sürecinde kolaylık sağlar.

  • Bootstrap Barrio Teması: Barrio, Drupal 8 ve 9 için geliştirilmiş bir Bootstrap tabanlı tema. Tamamen duyarlı ve esnek bir yapıya sahip.
  • Bootstrap Clean Theme: Bootstrap Clean, Drupal için minimalist ve temiz bir Bootstrap temadır. Basit ve kullanımı kolay yapısıyla dikkat çeker.
  • Bootstrap Business Theme: Bu tema, Drupal 8 ve 9 için geliştirilmiş iş odaklı bir Bootstrap temadır. Kurumsal web siteleri için idealdir.
  • January Bootstrap 5 Theme: Bootstrap 5 için geliştirilmiş modern bir Drupal temasıdır.
  • Bootstrap Mint Theme: Drupal için geliştirilmiş, hafif ve temiz bir Bootstrap temasıdır.

Bu temaları Drupal temaları arasında arayarak bulabilir ve sitenizin ihtiyaçlarına en uygun olanını seçebilirsiniz.

Bootstrap Tabanlı Modüller: Drupal'ın Bootstrap'ı entegre etmek için birçok modülü mevcuttur. Bu modüller, Bootstrap bileşenlerini Drupal kodlarına otomatik olarak entegre ederler. Böylece, içerik üreticileri, Bootstrap bileşenlerinin sağladığı çeşitli özelliklerden yararlanarak, daha iyi bir kullanıcı deneyimi sağlayabilirler.

Drupal Temalarında Bootstrap Kullanımı ve Avantajları

Bootstrap, web sayfalarının hızlı ve kullanıcı dostu bir şekilde tasarlanmasını sağlayan popüler bir framework'tür. Drupal ile birlikte kullanıldığında, kullanıcılar daha etkileyici ve modern görünümlü siteler oluşturabilirler. İşte Drupal temalarında Bootstrap'in kullanımının bazı avantajları:

  1. Duyarlı Tasarım: Bootstrap, otomatik olarak duyarlı bir tasarım sunar. Bu sayede, kullanıcılar web sitelerinin farklı cihazlarda ve ekran boyutlarında sorunsuz bir şekilde çalışmasını sağlayabilirler.
  2. Ön Tasarım: Bootstrap'in bir dizi hazır bileşeni vardır. Drupal temalarında bu bileşenleri kullanarak hızlı bir şekilde ön tasarım yapabilir, şablonları özelleştirebilir ve tasarım sürecinde önemli ölçüde zaman kazanabilirsiniz.
  3. Daha İyi Gezinme: Bootstrap, kullanıcı dostu bir gezinme yapısı sunar. Bu, Drupal web sitelerinin kullanıcılar tarafından daha kolay gezinilebilmesine yardımcı olur.
  4. Daha Fazla CSS Seçeneği: Bootstrap, geniş bir CSS seçeneği sunar. Bu sayede, tasarım sürecinde daha fazla esneklik elde edebilir ve web sitelerinde istediğiniz gibi özelleştirmeler yapabilirsiniz.

Drupal İçin Bootstrap Tabanlı Modüller ve Eklentiler

Drupal topluluğu, Bootstrap entegrasyonunu daha da geliştirmek amacıyla birçok modül ve eklenti oluşturmuştur. İşte Drupal için bazı Bootstrap tabanlı modüller ve eklentiler:

  1. Bootstrap UI
    Bootstrap UI modülü, Bootstrap kullanıcı arayüzünü hızlı ve kolay bir şekilde entegre etmenizi sağlar. Sayfa yapılandırması, blok yerleşimi ve daha fazlasını içeren kullanışlı araçlar sunar.
  2. Bootstrap UI Kit
    Bootstrap UI Kit modülü, sitenize özel Bootstrap UI bileşenlerini eklemenizi sağlar. Bu modül, önceden tasarlanmış UI kitleriyle sitenizin görünümünü kişiselleştirmenize yardımcı olur.
  3. Bootstrap Theme
    Bootstrap Theme modülü, sitenizi hızlı bir şekilde Bootstrap tabanlı bir tasarıma dönüştürmenizi sağlar. Bu modül, önceden oluşturulmuş temalar, düzenler ve özelleştirmelerle birlikte gelir, böylece sitenizin tasarımını hızlıca başlatmanıza yardımcı olur.
  4. Paragraphs Bootstrap
    Paragraphs Bootstrap eklentisi, içerik oluşturma sürecinizi zenginleştirmek için Bootstrap'un önceden tasarlanmış bileşenlerini entegre eder. Bu sayede içeriğinizi daha çekici ve düzenli bir şekilde sunabilirsiniz.
  5. Bootstrap Carousel
    Bootstrap Carousel modülü, sitenizde görsel içerikleri sergilemek için Bootstrap Carousel öğelerini entegre eder. Bu modül sayesinde kullanıcılarınıza etkileyici bir slayt gösterisi deneyimi sunabilirsiniz.
  6. Bootstrap Layouts
    Bootstrap Layouts modülü, sayfa düzenlerinizi özelleştirmenizi sağlar. Bootstrap'un kolay kullanım avantajlarıyla, sitenizin farklı sayfalarında tutarlı bir tasarım oluşturabilirsiniz.
  7. Bootstrap Form Elements
    Bootstrap Form Elements modülü, Drupal formlarınızı Bootstrap stilinde düzenlemenizi sağlar. Bu sayede formlarınız daha modern ve kullanıcı dostu bir görünüme sahip olur.
  8. Bootstrap Paragraphs
    Bootstrap Paragraphs modülü, sayfa içeriğinizi düzenlemenizi ve özelleştirmenizi sağlar. Bu modül, farklı Bootstrap bileşenlerini kullanarak sayfa içeriğinizi daha etkileyici hale getirmenize yardımcı olur.

Bu modül ve eklentiler, Drupal ile Bootstrap'in entegrasyonunu daha da kolaylaştırarak web sitenizin tasarım sürecini geliştirebilir.

Ofislerimiz

Drupart Locations

Ofislerimiz

Drupart AR-GE

GOSB Teknopark Hi-Tech Bina 3.Kat B3 Gebze - KOCAELİ

+90 262 678 8872

+90 216 706 12 58 

[email protected]

Londra

151 West Green Road, London, England

+44 203 815 6478

[email protected]

Newark

112 Capitol Trail Suite, A437 Newark DE, 19711

+1 (740) 666 6255

[email protected]

Wiesbaden

Hinterbergstraße 27
65207 Wiesbaden
Deutschland

+49 (0) 6151 – 492 70 23

[email protected]