Öncelikle cep telefonlarına yönelik olarak hazırlanan dinamik bir web sitesi için Dreamweaver'da Bootstrap başlangıç şablonlarını kullanın ve Bootstrap bileşenlerini sürükleyip bırakın.

Bootstrap, öncelikle cep telefonlarına yönelik dinamik web siteleri geliştirmekte kullanılan oldukça popüler ve ücretsiz bir HTML, CSS ve JavaScript çerçevesidir. Bu çerçevede düğmeler, tablolar, gezinti, görüntü döngüleri ve web sayfanızda kullanabileceğiniz diğer öğeler için dinamik CSS ve HTML şablonları bulunur. Temel kodlama bilgisi olan geliştiricilerin etkileyici dinamik web siteleri oluşturmasına olanak tanıyan isteğe bağlı birkaç JavaScript eklentisi kullanılabilir.

Dreamweaver, Bootstrap belgeleri oluşturmanıza ve Bootstrap ile oluşturulmuş mevcut web sayfalarını düzenlemenize olanak tanır. İster sıfırdan tasarlanmış Bootstrap dosyaları, isterse devam eden çalışmalar olsun bunları Dreamweaver'da düzenleyerek kodu değiştirebileceğiniz gibi Canlı Görünüm'de düzenleme, görsel CSS tasarımcısı, Görsel Ortam Sorguları ve Extract gibi görsel düzenleme özelliklerini kullanarak tasarım değişiklikleri de yapabilirsiniz.

Not:

Şu anda Bootstrap'in v4.3.1 ve v3.4.1 sürümleri desteklenmektedir.

Sık sorulan sorular

Dreamweaver'da değişken ızgaralar kullanıyorum. Bootstrap'i kullanmaya nasıl başlarım?

Değişken ızgara belgeleri oluşturduğunuzda, Dreamweaver uygun sınıfları otomatik olarak uygulayarak web sayfalarınızı dinamik hale getirdi. İçeriğinize odaklanmanız ve farklı form faktörlerinde nasıl aktıklarına karar vermeniz yeterliydi.

Benzer şekilde, Bootstrap belgelerinde içeriğinize ve tasarımınıza odaklanmanız yeterlidir; web sayfasının hızlı yanıt verme özelliği ise Bootstrap çerçevesi ile sıkı bir entegrasyon içerisinde olan Dreamweaver tarafından gerçekleştirilir.

Dreamweaver şimdilik Bootstrap'in v3.4.1 ve v4.3.1 sürümlerini desteklemektedir:

“Bootstrap 3.4.1 cihaz veya görüntü kapısının boyutu arttıkça, uygun bir şekilde 12 sütuna kadar ölçeklenebilen, hızlı yanıt verme özelliğine sahip, öncelikle cep telefonlarına yönelik bir değişken ızgara sistemi içerir. Daha fazla anlam mizanpajları oluşturmak için güçlü karışımların yanı sıra kolay mizanpaj seçenekleri için önceden tanımlanmış sınıflar içerir.” - Bootstrap belgeleri.

“Önemli değişiklikler yapılan Bootstrap 4.3.1, her şekilde ve ölçekte mizanpajın oluşturulması için on ikilik bir sütun sistemi, varsayılan beş dinamik kademesi, Sass değişken ve karışımlarıyla birlikte çok sayıda ön tanımlı sınıfı sayesinde cep telefonlarına yönelik güçlü bir ızgara içerir.” - Bootstrap belgeleri.

Dreamweaver'da Bootstrap belgelerini kullanmaya başlamak için Bootstrap başlangıç şablonlarını kullanabilirsiniz. Dreamweaver, e-ticaret veya portföy gibi oluşturmak istediğiniz farklı türlerdeki web sitelerine yönelik birçok şablon içerir.

Bootstrap belgesini en baştan oluşturmak isterseniz bunu Bootstrap Belgeleri Oluşturma bölümünde açıklandığı şekilde gerçekleştirebilirsiniz.

Mevcut değişken ızgara belgelerimi Dreamweaver'daki Bootstrap belgelerine taşıyabilir miyim?

Hayır, mevcut değişken ızgara belgelerini doğrudan Bootstrap belgelerine dönüştürmenin bir yolu yoktur. Ancak, Dreamweaver'da Bootstrap belgeleri oluştururken ve tasarlarken gerçekleşen kullanıcı deneyimi, değişken ızgara belgelerine benzer. Örneğin, doğrudan Yeni Belge iletişim kutusundan bir Bootstrap belgesi oluşturmaya başlayabilirsiniz. Bootstrap için Mobil, Tablet ve Masaüstü olmak üzere üç temel form faktörüne yönelik olarak değişken ızgara belgeleri oluştururken; küçük, orta, büyük ve ekstra büyük olmak üzere temel ekran boyutları için belge oluşturarak başlarsınız. Bootstrap belgelerinde öğeleri tıklattığınızda görüntülenen mizanpaj düzenleme seçenekleri de değişken ızgara belgelerinin seçeneklerine benzer.

Dreamweaver'ın son sürümünde eski siteleri içe aktarabilir miyim?

Evet, Dreamweaver'ın son sürümünde eski siteleri içe aktarabilirsiniz. Bunu yaptığınızda Dreamweaver, Bootstrap CSS dosyasını site kökü/css/ klasöründe arar. 

  • Sitede bir Bootstrap v3 CSS dosyası varsa Siteleri Yönet > Gelişmiş Ayarlar > Bootstrap altındaki Bootstrap Sürümü 3.4.1 olarak ayarlanır.
  • Sitede bir Bootstrap v4 CSS dosyası varsa Siteleri Yönet > Gelişmiş Ayarlar > Bootstrap altındaki Bootstrap Sürümü 4.3.1 olarak ayarlanır.
  • site kökü/css yolunda site için bir Bootstrap CSS dosyası yoksa Siteleri Yönet > Gelişmiş Ayarlar > Bootstrap altındaki Bootstrap Sürümü 4.3.1 olarak ayarlanır.

Bootstrap belgeleri oluşturma

Yeni Belge iletişim kutusundaki aşağıdaki seçeneklerden birini kullanarak Bootstrap web sitenizi tasarlamaya başlayabilirsiniz:

  • Bootstrap başlangıç şablonları (Başlangıç Şablonları > Bootstrap Şablonları): Sayfalarınızın sıfırdan mizanpajını yapmakla uğraşmadan hızlıca çalışmaya başlamak istiyorsanız bu seçeneği kullanın. Metni düzenlemeniz ve gerekirse varlıkların yerini değiştirmeniz yeterli, dinamik web siteniz hemen hazır olacaktır. Daha fazla bilgi için bkz. Bootstrap başlangıç şablonlarını kullanma.
  • Bootstrap çerçevesine dayalı bir HTML belgesi oluşturun (Yeni Belge > HTML > Bootstrap): Web sitenizi Dreamweaver içinden CSS ve Bootstrap bileşenleri kullanarak adım adım geliştirmek istiyorsanız bu seçeneği kullanın. Daha fazla bilgi için bkz. Bootstrap çerçevesini temel alan HTML belgeleri oluşturma.

Bootstrap başlangıç şablonlarını kullanma

Bootstrap başlangıç şablonları, popüler temalar için bir çırpıda web sayfaları oluşturabilmenizi sağlar. Çerçevede yer alan tüm bağımlı dosyalar otomatik olarak kaydedilir.

  1. Dosya > Yeni'yi tıklatın.

  2. Yeni Belge iletişim kutusu görüntülenir. Buradan, Başlangıç Şablonları'nı tıklatın ve gerekli şablonu Bootstrap Şablonları listesinden seçin.

  3. Oluştur'u tıklatın. 

    Seçtiğiniz şablona dayalı bir HTML sayfası oluşturulur. Bundan sonra bileşenleri ekleyerek veya silerek, metni veya varlıkları düzenleyerek sayfayı gerektiği şekilde değiştirebilirsiniz.

Bootstrap çerçevesini temel alan HTML belgeleri oluşturma

Bootstrap çerçevesini temel alan bir HTML belgesi oluşturarak dinamik web sitenizi oluşturmaya başlayabilirsiniz. Bir dizi Bootstrap çerçevesi dosyası oluşturmayı veya mevcut dosyaları kullanmayı seçebilirsiniz. Belge oluşturulduktan sonra, Dreamweaver'daki Ekle panelini kullanarak akordeon ve döngü gibi Bootstrap bileşenleri ekleyebilirsiniz. Ya da Photoshop kompozisyonlarınız varsa, Extract'i kullanarak Bootstrap belgenize görüntüler, fontlar, stiller, metin ve daha birçok öğeyi taşıyabilirsiniz.

  1. Dosya > Yeni'yi tıklatın.

  2. Yeni Belge iletişim kutusu görüntülenir. Buradan, Yeni Belge > HTML'yi ve ardından Bootstrap sekmesini tıklatın.

  3. Yeni bir bootstrap.css dosyası (ve diğer Bootstrap dosyalarını) oluşturmak için aşağıdaki işlemleri gerçekleştirin:

    Yeni bir Bootstrap CSS oluşturmak veya mevcut bir CSS'yi kullanmak istediğinizi belirtin.

    Yeni bir CSS oluşturmayı seçerseniz sitenin kök dizininde “css” adlı bir klasör oluşturulur ve bootstrap.css dosyası bu yeni klasöre kopyalanır. Mevcut bir CSS'yi kullanmayı seçerseniz yolu belirtin veya CSS konumuna gidin.

    1. Yeni Oluştur'u tıklatın.

      Yeni bir Bootstrap belgesi oluşturma
      Yeni bir Bootstrap belgesi oluşturma
    2. (İsteğe bağlı) Belgenize başka bir CSS eklemek isterseniz CSS Ekle bölümünde  simgesini tıklatın. Harici Stil Sayfası Ekle iletişim kutusu görüntülenir. Ayarları belirtin ve Tamam'ı tıklatın.

    3. Önceden Oluşturulmuş Bir Mizanpaj Ekle seçeneği temel bir Bootstrap belge yapısı sunar.

      Temel yapıyı kullanmak istemiyorsanız ve bunun yerine boş bir belgeyle çalışmaya başlamak istiyorsanız Önceden Oluşturulmuş Bir Mizanpaj Ekle seçimini kaldırın.

    4. (İsteğe bağlı) Varsayılan mizanpaj 30 pks sütun aralığıyla 12 sütun içerir. Varsayılan ekran boyutları şunlardır: 576 pks, 768 pks, 992 pks ve 1200 pks. 

      Bu ayarları değiştirmek isterseniz Özelleştir'i tıklatın. Bootstrap.css dosyası buna uygun olarak değiştirilir.

      Not:

      Bootstrap v3.4.0 için varsayılan ekran boyutları şunlardır: 768 pks, 992 pks ve 1200 pks.

    5. Extract panelinin (kapalı durumdaysa) açılmasını isterseniz Photoshop Kompozisyonlarınızdan Sayfa Oluşturmak için Extract'i Kullanın seçeneğini belirleyin Bunu yaparak, varlıkları Photoshop kompozisyonlarından ayıklamaya hemen başlayabilirsiniz.

      Yeni site varsayılan olarak Bootstrap sürüm 4.3.1 kullanılarak oluşturulur. Belgeyi oluşturduktan sonra sitenin kök klasöründe css ve js klasörlerini bulacaksınız. Ancak siteyi Bootstrap sürüm 3.4.1 kullanarak oluşturmak isterseniz Site > Siteleri Yönet'i seçin. Sitenin kök klasörünü seçin. Gelişmiş Ayarlar > Bootstrap'ı tıklatın. Bootstrap Sürümü açılır pencere alanında 3.4.1 sürümünü seçin. Bootstrap sürüm 3.4.1 için, sitenin kök klasöründe css, js ve fonts klasörünü görebilirsiniz.

      Bootstrap sürüm 4.3.1'i seçin
      Bootstrap sürüm 4.3.1'i seçin

      Bir Bootstrap 4.3.1 sayfası oluşturduğunuzda jQuery sürüm 3.3.1 desteklenir. Bootstrap Başlangıç şablonları, Bootstrap 4.3.1 sürümünü kullanacak biçimde güncellenir.

      Bootstrap sayfasına Bootstrap bileşenleri eklediğinizde Bootstrap 4.0.0 sayfalarını Bootstrap 4.3.1'e ve jQuery sürümünü 3.3.1'e yükseltebilirsiniz. Sayfaya Bootstrap bileşenleri eklediğinizde görüntülenen iletişim kutusunda Evet seçeneğini tıklatın.

      Sürüm uyumluluğu onay iletişim kutusu
      Sürüm uyumluluğu onay iletişim kutusu
      Bootstrap 3.4.1 onay iletişim kutusu
      Bootstrap 3.4.1 onay iletişim kutusu
      jQuery açılır pencere iletişim kutusu
      jQuery açılır pencere iletişim kutusu

      Bootstrap 4.0.0 sitesini içeri aktardığınızda veya bir siteyi önceki sürümlerden Dreamweaver sürümüne taşıdığınızda Site Ayarları > Gelişmiş ayar > Bootstrap bölümünde Bootstrap sürümü 4.3.1 olarak ayarlanır.

    Not:

    Bootstrap 4.3.1 ile Izgara satır sütununun 1 piksel olan yüksekliği 0 piksel olarak değiştirilir. Bu nedenle Canlı görünümde görünür hale getirmek için Izgara satır sütununa içerik eklemeniz gerekir.

  4. Mevcut Bootstrap çerçevesi dosyalarını kullanmak için aşağıdaki işlemleri gerçekleştirin:

    1. Var Olanı Kullan'ı tıklatın ve bootstrap.css dosyasının yolunu belirtin. CSS'nin kaydedildiği konuma da gidebilirsiniz.

      Mevcut çerçeve dosyalarını kullanarak Bootstrap belgeleri oluşturma
      Mevcut çerçeve dosyalarını kullanarak Bootstrap belgeleri oluşturma

    2. (İsteğe bağlı) Belgenize başka bir CSS eklemek isterseniz CSS Ekle bölümünde  simgesini tıklatın. Harici Stil Sayfasını Ekle iletişim kutusunda ayarları belirtin ve Tamam'ı tıklatın.

    3. Önceden Oluşturulmuş Bir Mizanpaj Ekle seçeneği temel bir Bootstrap belge yapısı sunar. Temel yapıyı kullanmak istemiyorsanız ve bunun yerine boş bir belgeyle çalışmaya başlamak istiyorsanız Önceden Oluşturulmuş Bir Mizanpaj Ekle seçimini kaldırın.

  5. Oluştur'u tıklatın.

Not:

Oluşturulan bootstrap.css salt okunur bir dosyadır. Yani, bu stilleri CSS Tasarımcısı'nı kullanarak düzenleyemezsiniz; CSS Tasarımcısı'ndaki Özellikler bölmesi Bootstrap dosyalarında devre dışı bırakılmıştır.

Bootstrap belgenizin stilini değiştirmek istiyorsanız başka bir CSS dosyası oluşturarak mevcut stilleri geçersiz kılın ve sonra da bu yeni CSS dosyasını belgeye ekleyin.

Bootstrap dosyalarını açma

Not:

Dreamweaver uygulamasında, yalnızca Bootstrap sürüm 3 ve sonrasında oluşturulan belgeleri açmanız ve düzenlemeniz önerilir.

Bootstrap dosyalarını aşağıdaki yollardan biriyle açabilirsiniz:

  • Dosya > 'ı tıklatın ve sonra da Bootstrap HTML dosyasına gidin.
  • (Önerilen) Bir Dreamweaver sitesi oluşturun ve site klasörünü tüm Bootstrap dosyalarınızı içeren klasöre işaret edecek şekilde ayarlayın.

Dreamweaver uygulamasında bir Bootstrap HTML dosyasını açtığınızda:

  • Satırlar yuvarlak köşeli, gri renkli kırık çizgilerle vurgulanır
  • Sütunlar mavi renkli kırık çizgilerle vurgulanır

CSS dosyası adında “bootstrap” ifadesi yer alıyorsa Dreamweaver, Bootstrap HTML dosyasıyla ilişkilendirilmiş CSS dosyalarını tanır. CSS dosyası başvurusu aşağıdakilerden biri veya hepsi birden olabilir:

  • Yerel yol:

    Küçültülmüş veya küçültülmemiş CSS dosyası yerel olarak bulunur. Örneğin:

    <link href="css/bootstrap.css" rel="stylesheet"> veya
    <link href="css/bootstrap.min.css" rel="stylesheet">

  • Uzak yol:
  • Uzaktaki bir konumda yer alan küçültülmüş veya küçültülmemiş CSS dosyasıdır. Örneğin:

    <link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
    <link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

  • CDN
  • <link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_sürüm_numarası>/css/bootstrap.min.css" rel="stylesheet">

Not:

Link ve import etiketlerinde yer alan Bootstrap stil sayfaları Dreamweaver'da desteklenir. Ancak iç içe aktarma (başka bir stil sayfasını içe aktaran bir stil sayfasına bağ) desteklenmez.

Gizli Bootstrap öğelerini görüntüleme, gösterme ve yönetme

Bazı durumlarda, belirli bir öğenin bir görüntü kapısında görüntülenmesini isterken aynı öğeyi tasarım gereğince başka bir görüntü kapısında gizlemek isteyebilirsiniz. 

Bootstrap öğesini gizlemek için öğeyi sağ tıklatın ve Öğeyi Gizle'yi seçin. Öğe görünümden geçici olarak gizlenir.

Dreamweaver'da Bootstrap öğelerini gizleme
Dreamweaver'da Bootstrap öğelerini gizleme

Gizli öğeleri görüntülemek ve göstermek için öğeyi sağ tıklatın ve Gizli Öğeleri Yönet'i seçin. Gizli öğeler gri renkli kırık arka planla görünür. Öğeyi göstermek için göz simgesini tıklatın.

Gizli Bootstrap öğelerini yönetme
Gizli Bootstrap öğelerini yönetme

Bootstrap bileşenleri ekleme

Ekle panelindeki Bootstrap Bileşenleri seçeneğinde, Dreamweaver'da web sayfanıza ekleyebileceğiniz tüm Bootstrap bileşenleri listelenir. HTML sayfasına bağlı bootstrap.css dosyasındaki Bootstrap sürümüne göre ilgili bileşenler Ekle panelinde listelenir.  Örneğin, Bootstrap v4.0.0'da Kartlar, Rozetler gibi ek bileşenler görürsünüz. Benzer şekilde Glyphicons, Panel, Kuyular ve Küçük Resim bileşenleri yalnızca Bootstrap v3.3.7'de mevcuttur. Bootstrap sürümüne bağlı olarak ilgili bileşenleri Ekle panelinde görürsünüz.

Ekle panelindeki bileşenler aşağıdaki ölçütlere göre doldurulur:

  • Odaklanılan belge: Ekle panelindeki bileşenler, belgeye bağlı Bootstrap dosyasındaki Bootstrap sürümü temel alınarak doldurulur. 
  • Site Tercihleri altındaki sürüm: Bootstrap olmayan bir belge için Dreamweaver, sürümü Site Tercihleri > Gelişmiş > Bootstrap altında arar. Bu seçenekte görünen sürüme bağlı olarak, uygun bileşenler doldurulur. Yeni siteler için varsayılan olarak 4.3.1 sürümü kullanılır.
  • Dosyaların kaydedildiği yer: Herhangi bir sitenin parçası olmayan, Bootstrap dışındaki bir belge için Ekle paneli 4.3.1 bileşenlerini yansıtır.
Bootstrap 4.0.0'da desteklenen bileşenler
Bootstrap 4.0.0'da desteklenen bileşenler

Bir bileşen eklemek için, bileşeni panelden web sayfasının üzerine sürükleyin. Bileşeni bırakmadan önce Canlı Kılavuzlar, Tam Olarak Ekleme (DOM kullanarak) ve Konum Yardımı gibi görsel yardımları not alın. Bileşenleri sayfanıza hızlı ve doğru bir şekilde yerleştirmek için bu yardımcıları kullanın. Web sayfanıza öğe ekleme hakkında daha fazla bilgi için bkz. Ekle paneline genel bakış.

Satır ekleme

Yeni satırı sonrasına eklemek istediğiniz satırı tıklatın. Ardından, Yeni satır ekle simgesini tıklatın. Her birinde altı sütun bulunan iki alt sütun öğesinin yer aldığı bir Bootstrap satırı eklenir.

Eklenen satırın kodu aşağıdaki gibidir:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

burada *, Dreamweaver'daki geçerli ekran boyutudur.

Sütun ekleme

Gerekli sütunu seçin ve ardından Yeni sütun ekle simgesini tıklatın. Seçili sütun alt öğeleri olmadan çoğaltılır.

Tüm boş sütunlara minimum yükseklik olarak 20pks atanır. Ancak bu yükseklik gerçekte sayfaya eklenmez; öğelerin sütun içine daha kolay eklenebilmesi için yalnızca Canlı Görünüm'de gösterilir.

Satır ve sütunları çoğaltma

Çoğaltmak istediğiniz satırı veya sütunu ve ardından sağ alt köşedeki çoğalt simgesini tıklatın. Satırın veya sütunun tamamı içeriğiyle birlikte çoğaltılır.

Not:

Satır Ekle veya Sütun Ekle seçeneği, satırı veya sütunu sınıflarıyla birlikte ancak içeriği olmadan çoğaltır.

Sütunları yeniden boyutlandırma ve kaydırma

Özellikle de çeşitli görüntü kapıları için dinamik tasarımlar oluşturuyorsanız sütunların yeniden boyutlandırılması ve kaydırılması zorunlu hale gelir. 

Sütunları yeniden boyutlandırma

Gerekli sütunu tıklatın ve yeniden boyutlandırmak için tutamacı sağa sürükleyin. Bootstrap v4.0.0 belgesi için bir sütunu yeniden boyutlandırdığınızda col-*-n sınıfı eklenir; burada *, geçerli ortam sorgusunu (sm, md, ld, xl) ve n de içerdiği sütun sayısını temsil eder. Ekstra küçük ekran boyutu için col-n sınıfı eklenir.

Bootstrap v3.3.7 belgesi için bir sütunu yeniden boyutlandırdığınızda col-*-n sınıfı eklenir; burada *, geçerli ortam sorgusunu (xs, sm, md veya lg) ve n de içerdiği sütun sayısını temsil eder.

Dreamweaver geçerli ekran boyutunu algılar ve uygun sınıfı ekler. Sütunları belirli görüntü kapılarına uygun olacak şekilde yeniden boyutlandırmak için, görüntü kapısı boyutunu fırçanın sağ alt köşesindeki seçenekleri kullanarak değiştirin. Ardından, sütunları gerektiği şekilde yeniden boyutlandırın.

Sütunları kaydırma

Gerekli sütunu tıklatın ve sütunu kaydırmak için tutamacı sola sürükleyin. Kaydırma işlemi bir kesik çizgili alan olarak gösterilir. Bootstrap v4.0.0 belgesi için bir sütunu kaydırdığınızda offset-*-n sınıfı eklenir; burada *, geçerli ortam sorgusunu (sm, md, lg veya xl) ve n de içerdiği sütun sayısını temsil eder.

Bootstrap v3.3.7 belgesi için sütunu kaydırdığınızda, col-*-offset-n sınıfı eklenir; burada *, geçerli ortam sorgusunu (xs, sm, md veya lg) ve n de kaydırıldığı sütun sayısını temsil eder.

Dreamweaver geçerli ekran boyutunu algılar ve doğru sınıfı ekler. Sütunları belirli görüntü kapılarına uygun olacak şekilde kaydırmak için, görüntü kapısı boyutunu fırçanın sağ alt köşesindeki seçenekleri kullanarak değiştirin. Ardından, sütunları gerektiği şekilde kaydırın.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi