Anonim

Twitter'ın güzel web siteleri yapmak için geliştirdiği bir çerçeve olan Bootstrap'i hiç duymamışsanız, kaçırmışsınız! Bootstrap, CSS'de (Cascading Style Sheets) çok fazla bilgiye sahip olmayan bir web sitesi tasarlamayı oldukça hızlı ve kolaydır. Web için programlamada yeniyseniz, Bootstrap'ın nasıl çalıştığını öğrenmeye başlamak için CSS hakkında bir şey bilmenize gerek yoktur; tek ihtiyacınız olan tek bir HTML belgesi. Bootstrap'a bir göz atacağız, size bunların neyle ilgili olduğunu, nasıl çalıştığını ve inşa ettiğiniz her web sitesi için iyi bir seçenek olup olmadığını göstereceğiz.

Bootstrap API'sini HTML Dosyanıza Ekleme

Bootstrap'ı ana proje dosyanıza eklemek için birkaç seçeneğiniz vardır. İlk seçenek, tüm gerekli Bootstrap dosyalarını projenize eklemek. Bunu paketi indirerek ve proje klasörünüze yükleyerek yapabilirsiniz. Elbette, birincil Bootstrap CSS dosyasını belgenize bağlamanız gerekir. Bootstrap'ın resmi web sitesinde bunun nasıl yapılacağı hakkında adım adım bir rehber bulunmaktadır.

Diğer seçenek paketi indirmeyi atlamak ve bir İçerik Dağıtım Ağı (CDN) kullanmaktır. Bir CDN, birincil Önyükleme dosyalarını HTML belgenize hiç indirmeden bağlamanızı sağlar. Bu, elbette, profesyonel web siteleri için her zaman iyi bir şey değildir, çünkü iş veya portföy sayfamı, o sunucunun aşağı inmesi durumunda kadere bırakmayacak kadar hızlı olmayacağım. Projenizdeki dosyaların olması en iyisidir, ancak öğrenme amacıyla, CDN gayet iyi sonuç verecektir.

Bootstrap’i HTML belgenize eklemek için, aşağıdaki kodu yazmanız yeterli olacaktır. HTML belgenizdeki etiket:

Bu bağlantılar bu kafa etiketine eklendikten sonra, hepiniz Bootstrap sınıflarını kullanmaya başlayacaksınız. Belgeniz bunun gibi bir şeye benzemelidir:

Önyükleme ve Sınıflar

Önyükleme öğeleri, yalnızca işaretlemenize ekleyebileceğiniz önceden yazılmış bir grup CSS olan sınıflara ayrılır. İşaretlemenize sınıflar eklemek kolaydır, sadece kullanmak istediğiniz sınıfın adını bilmeniz ve daha sonra önceki bir makalede anlatıldığı gibi, class = ”classname” değerini kullanarak bunu HTML öğelerinizden birine uygulamanız yeterlidir.

Zor kısım, hepsinin birlikte güzel bir şey yaratmak için nasıl birlikte çalıştığını bulmaktır. Bootstrap'taki tüm farklı sınıfları doğrudan resmi belgelerden kontrol edebilirsiniz. Şimdi, Bootstrap'a hakim olmak başka bir hikaye. Bu biz ya da başkasının size öğretebileceği bir şey değil. Öğreticiden sonra öğreticiyi izleyebilirsiniz, ancak çok sayıda deneme yanılma içeren çerçeveyi kullanmada başarılı olmak için. Ve bu, kendi projelerinizde onunla başa çıkmanızı gerektirir.

Bunu göz önünde bulundurarak, bilgisayarınızda kendi HTML projenizi Atom veya başka bir metin editörü kullanarak başlatmanızı, HTML ve CSS sınıflarının ne olduğunu incelemeyi ve ardından Bootstrap ile oynamaya başlamanızı rica ediyorum. Ve eğer yeterince biçimlendirme biliyorsanız, belki de kendi portföy web sitenizi bir test alıştırması olarak oluşturabilirsiniz.

Bootstrap Her Web Sitesi İçin Uygun Bir Seçenek midir?

Önyükleme harika bir çerçeve, ancak oluşturduğunuz her web sitesi için uygun bir seçenek midir? Bu gerçekten geliştiriciye ve projenin gereksinimlerine bağlıdır. Birçok profesyonel ortamda, büyük ölçüde Proje Yöneticisine bağlı olacağından, hangi teknolojileri kullandığınızı gerçekten seçemezsiniz. Eğer söz konusu Proje Yöneticisi Bootstrap'i kullanmayı seçerse, onu bir ton özel CSS ile birleştireceksin. Web sitenizi genellikle Bootstrap kullanan diğer web sitelerinden benzersiz ve farklı kılan şey budur.

Kişisel olarak, Bootstrap’ı her web sitesi için mükemmel bir seçenek olarak görmüyorum. Elbette, bazı kestirmelere yardımcı olabilir ve sağlayabilir, ancak sonuçta CSS ile sıfırdan tasarım yapmanın büyük ölçüde üzerindeki kontrolünüzden dolayı en iyi yol olduğunu buldum. Fakat bir kez daha, web programlamaya yeni başlıyorsanız, Bootstrap'ı kullanmak hiç de fena bir şey değil, fakat kariyeriniz için buna güvenmeyin.

Yeni başlayan bir geliştirici iseniz, portföyünüzdeki tüm projeler için Bootstrap kullanmamalısınız. API konusunda uzman olabileceğinize rastlamak mümkün, ancak CSS'de yolunuzu tam olarak bilmiyorsunuz. Bununla birlikte, hem portföyünüzde hem de Bootstrap'i almak kolay olduğu için yalnızca CSS'de iyi bir karışım elde etmek iyidir.

Kapanış

Bootstrap'ın kısaca özetlediği şey bu. Daha önce de belirttiğim gibi, kendi HTML projenizi başlatmanızı ve çerçeveyle oynamaya başlamak için öğelere farklı sınıflardan bazılarını eklemenizi öneririm. Bootstrap'in sunduğu tüm bileşenleri açıklamalarla ve kod örnekleriyle burada bulabilirsiniz.

Önyükleme gerçekten düzgün bir araçtır, ancak yalnızca ona güvenmemeyi unutmayın! Bu konuya aşina olmak ve çerçevede yolunuzu bilmek iyi, ancak sahne arkasında neler olup bittiğini gerçekten anlamak için CSS'ye daldığınızdan emin olun. Sadece bu değil, aynı zamanda CSS’deki sağlam bir bilgi Bootstrap’i çok övgüde bulunarak, kendi kişiselleştirmenizle gerçekten eşsiz ve güzel web siteleri yapmanıza olanak sağlar.

Güzel bir web sitesi yapmak için önyükleme özelliğini nasıl kullanabilirsiniz?