Bootstrap kullanarak dinamik web siteleri tasarlama

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.

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.4.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 semantik 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.4.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.

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.4.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.4.1 olarak ayarlanır.

Bootstrap belgeleri oluşturma

Yeni Belge iletişim kutusunda 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.

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. Alternatif olarak, Photoshop kompozisyonlarınız varsa, Extract'i kullanarak Bootstrap belgenize görüntüler, fontlar, stiller, metin ve daha birçok öğeyi taşıyabilirsiniz.

Bootstrap dosyalarını açma

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

• Dosya > Aç'ı 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">

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.

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.

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 Minik 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. Ayrıca, Spinners bileşeni yalnızca Bootstrap v4.4.1 sürümünde kullanılabilir.

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.4.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.4.1 bileşenlerini yansıtır.

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 20 pks 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.

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.