Bootstrap 2.0 ile bir web projesi düzenleyin

Bir web sitesi oluştururken ana görev, içerik alanlarını tanımlamak için xhtml ve css ile yapıyı oluşturmak için tasarımı düzenlemektir, bu görevde bize yardımcı olması için 960gs veya Bootstrap gibi standart çerçeveler vardır.
Bu durumda, Twitter tarafından geliştirilen ve kullanılan Bootstrap'ı göreceğiz.
Bootstrap, web tasarımları oluşturma sürecini basitleştirmek için tasarlanmış bir çerçevedir.. Bunun için, önceden programlanmış bir dizi CSS sınıfı ve Javascript dosyası sunar ve bu, aşağıdaki gibi görevlerin geliştirilmesine olanak tanır:

• Mevcut tarayıcılarda çok fazla değişiklik yapmak zorunda kalmadan çalışan web tasarımı.

• Farklı cihazlarda, farklı ölçek ve çözünürlüklerde doğru görüntülenebilen bir web tasarımı.

• jQuery gibi en sık kullanılan kitaplıklarla daha iyi entegrasyon.

• CSS3 / HTML5 gibi güncel araçlara ve standartlara dayalı sağlam bir tasarım

http://getbootstrap.com/2.3.2/ çerçevesini indirerek bir örnek başlatacağız.

Dosyayı açıyoruz ve önyükleme bileşenlerini içeren 2 dizin göreceğiz.
Anlatacağımız bir index.html dosyası oluşturuyoruz.
Temel bileşenlerle bir html oluşturuyoruz:

 Bootstrap ile Tasarım / * İşte içerik olacak * / 

Bootstrap, içeriği yerleştirmek için 980 piksel yapısını 60 piksellik 12 sütuna daldırır. Oluşturulabilecek bloklar, spanx sınıfını kullanarak 1'den 12'ye kadar gider, böylece span1 60 piksellik bir blok olacaktır. Sahip olabileceğimiz tüm içerik bloklarına bir örnek.

Bir web üstbilgisi, sol sütun, içerik, altbilginin temel yapısını oluşturacağız. Tüm sınıflar zaten çerçevelerde gelir

// genel konteyner çerçevesi// bir blok satırının başlangıcını tanımla// Başlık için 980 piksele eşit 12 sütun bloğu;// Sütun için 120 piksele eşit 2 sütun bloğu;// İçerik için 600 piksele eşit 10 sütun bloğu;// Altbilgi için 980 piksele eşit 12 sütun bloğu;

BÜYÜT

Menü oluşturmak için bileşenler
Başlık bölümünde, bir menü oluşturmak için gezinme çubuğu sınıflarıyla bir liste menüsü ekleyebilirsiniz:

// Başlık için 980 piksele eşit 12 sütun bloğu;

konu 1
Konu 2
Tema 3

Böylece css ile uğraşmadan menümüzü hazır olarak görebiliriz.

BÜYÜT

Daha sonra kendi css kurallarımızı oluşturarak önyüklemeyi genişletmek istiyorsanız başka bir default.css dosyası oluşturuyoruz ve kodumuzu bu şekilde yerleştiriyoruz ve örnek koda sınıfımızı ekliyoruz:

İçerik sütununda bir içerik oluşturuyoruz

// İçerik için 600 piksele eşit 10 sütun bloğu;
Öğreticiyi açıklamak için Bootstrap ile içerik oluşturuyoruz
// boş bir paragraf, bir satır veya boşluk bırakmakla aynıdır Bkz. Bootstrap

Örneğimizi yenilerken sonuç şöyle olacaktır:

BÜYÜT

Örnek tam bir web sitesi veya kayda değer bir estetiğe sahip değil, ancak az bir çabayla gördüğümüz gibi, bir metin düzenleyiciden fazlasına ihtiyaç duymadan bir demo yapabilir veya şablonlar oluşturabilir ve tüm standartlaştırılmış platformla çok fazla iş tasarrufu sağlayabiliriz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.

Bu eğitim size yardımcı oldu mu?

değilse

BU EĞİTİMİ GELİŞTİRMEYE YARDIMCI OLUN!

Bu öğreticiyi düzeltebileceğinizi veya geliştirebileceğinizi düşünüyor musunuz? Sürümünüzü faydalı olduğunu düşündüğünüz değişikliklerle birlikte gönderebilirsiniz.
0 kullanıcı bu öğreticiyi düzenledi. Düzenleyin ve tanınmış bir uzman olun!
Bu Eğitimi Düzenle

BENZER ÖĞRETMENLER

Html5, css3 ve önyüklemede vurgulu efektli yatay çubukJavaScript'te Google Haritalar API'si ile istemci koordinatlarını alın (HMTL5, CSS3 ve Bootstrap)HTML5 + Bootstrap ile duyarlı bir slayt gösterisi yapmayı öğrenmeBootstrap Framework gelişmiş web arayüzü geliştirmeBootstrap'i GenişletmeNetbeans: Şablonlar ve eklentilerle HTML5 projeleri oluşturunÖnyükleme kullanıcı arayüzleriBootstrap bileşenlerini kullanma

Yorum yok, ilk siz olun!

Daha fazla beklemeyin ve Solvetic'e girinYorumlarınızı bırakın ve kullanıcı hesabından yararlanın Bize katılın!

• Hesap oluşturSolvetic hesabınıza sahip olmak için ÜCRETSİZ kaydolunBir hesap oluştur
• Tanımlamakzaten bir hesabın var mı? Oturum açınBeni Hesabımda tanımla