Bootstrap Framework gelişmiş web arayüzü geliştirme

Başka bir eğitimde, Bootstrap kullanıcı arayüzlerine bir giriş ve ayrıca Bootstrap 2.0 ile bir web projesinin nasıl tasarlanacağına dair bir eğitim açıklanmıştır, bu yazıda web geliştirmede en çok kullanılan arayüzlere ve öğelere doğru ilerleyeceğiz.
Bootstrap'i indirebilir ve web sitemizdeki bir dizine koyabilir veya çevrimiçi kitaplığınıza bağlayarak kullanabiliriz.
Bootstrap açık kaynaklı bir çerçevedir ve daha hızlı ve daha kolay web geliştirme için açık.
Arama yaparak, css topluluğundan birçok katkı bulabiliriz ve diğer kullanıcıların yaptığı özel bileşenler ve tasarım şablonları bulabilir ve bunları kullanılabilir hale getirebiliriz, gezinme çubukları, kalıcı pencereler ve açılır pencereler, görüntü karuselleri, menüler ve diğerleri oluşturmak için birçok bileşen vardır. formları ve diğer işlevleri doğrulamak için JavaScript ve Jquery eklentileri olarak

Efektli tablolar ve satırlar

Bootstrap, örneğin bir tablodaki satırların rengini ve farenin üzerinden geçtiğinde değiştirmek için kullanabileceğimiz önceden programlanmış CSS stillerine ve efektlerine sahiptir.

Kod aşağıdaki gibi olacaktır:

Efektli tablo ve satırlar
 

 
 
Araç
 
Kaynak
 
Durum
 
Fiyat
 

 

 

 
 
Fiat 500
 
Madrid
 
Kullanılmış
 
9690€
 

 
 
Honda anlaşması
 
Barselona
 
Kullanılmış
 
14500€
 

 
 
Renault laguna
 
Toledo
 
Kullanılmış
 
2800€
 

 

 

Ardından, yalnızca Bootstrap CSS kullanarak alt menülü bir menü oluşturacağız:

BÜYÜT

Kod aşağıdaki gibi olacaktır:

Css Bootstrap kullanarak çok düzeyli menü
Müşteriler Satış Yöneticisi 

sistem
Kullanıcılar
Ayarlar

izinler
sunucular

Vps Sunucusu A
Vps Sunucusu B


Kaynak tüketimi
Destek olmak

Yapıyı ve önceden tanımlanmış sınıflarını açıklıyoruz. Sınıf, Bootstrap'ta varsayılan olarak bulunan web boyutunu tanımlar.

 .container {genişlik: 1170 piksel; } 

Aşağıdaki satır sınıfları, tüm sayfada bir sol ve sağ kenar boşluğu sağlar:

 .sıra {; sağ kenar boşluğu: -15px; } 

Açılır menü sınıfı zaten Bootstrap ve btn btn-birincil düğme sınıflarıyla birlikte gelir. Alt menüyü oluşturabilmek için alt menüyü ve seviye sınıflarını ekleyeceğiz. Sınıfların hiyerarşileri olduğunu unutmayın, bu nedenle Bootstrap'ta sahip olduğumuz aynı sınıfı adlandırırsak ve ona bazı nitelikler eklersek, yapılan son bildirim geçerli olur.
Bu, sınıf zaten bootstrap.min.css içinde tanımlanmış olsa bile bir sola kaydırma özniteliği eklediğimiz durum içindir.

 .dropdown-menü {sol: 150 piksel; } 

html içeriği ile Css ve jquery açılır
Bir bağlantı fareyle üzerine getirildiğinde ve içerik değişkeninin görüntülenecek html'si olduğunda bir açılır pencere görüntüleyen popover işlevini kullanacağız.
Önceki tabloyu alıp teknik bir sayfa için bir sütun ekleyeceğiz.
Her bağlantıda aşağıdaki cümle olacak ve ardından id ile bir komut dosyası çağıracağız.

 
 

 
 
Araç
 
Kaynak
 
Durum
 
Fiyat
 
Fotoğraflar
 

 

 

 
 
Fiat 500
 
Madrid
 
Kullanılmış
 
9690€
 
Veri Sayfası
 

 
 
Honda anlaşması
 
Barselona
 
Kullanılmış
 
14500€
 
Veri Sayfası
 

 

 

 

Geniş bir listemiz varsa, örneğin bir veritabanından çıkarılan dinamik içeriği gönderebileceğimiz bir JQuery işlevi oluşturabiliriz.

Sayfadaki sütunlar ve bloklar

Bootstrap, web yapısının %99'unu kapsayan 12 bloğa bölünmüş, 1200 piksellik bir genişliğe dayanmaktadır, her blok %8.3333, 100 piksele eşdeğerdir ve ayrıca 1 piksellik bir alana sahiptir.
Her zaman aynı satırdaki blokların kombinasyonu örneğin 12 eklemek için:
3'lü iki blok ve 6'lı bir blok

Önyükleme blokları
300 piksellik Col-md-3 bloğu.
600 piksellik Col-md-6 bloğu.
300 piksellik Col-md-3 bloğu.
800px col-md-8 bloğu.

Aşağıda 800 piksel olan 8 blok boyutunda bir blok koyuyoruz:

Bu bloklar, Bootstrap css'de yapılandırıldıkları için duyarlıdır. Burada, blokların bir mobil cihazın ekran değişikliğine nasıl uyum sağladığına dair bir örnek görebiliriz.

Stilleri ve işlevselliği değiştirmek için Bootstrap nasıl özelleştirilir?

Bootstrap ile uyumlu stiller ve işlevler oluşturmak için, onu diğer herhangi bir css veya js kütüphanesi gibi, projenin başka bir çerçevesi olarak kullanmalıyız, bu durumda kullanıcının tarayıcısında tasarım ve işlevsellik için kullanılacaktır. Orijinal kitaplıkları yeniden düzenlemekten kaçınmalıyız, ancak kendimizinkini yerleştirmeliyiz, böylece Bootstrap geliştiricileri bir güncelleme yayınladığında, değişikliklerimizi ayrı tutarsak yeniyi dahil etmekte sorun yaşamayacağız.
Kendi stil sayfalarımızı tanımlamak için, orijinal css'i etkilemeden değişikliklerimizi tanımlamak için yeni bir CSS stilleri dosyası oluşturmalıyız. Örneğin hiyerarşiyi hatırlayalım.
Bootstrap css'de ise bootstrap.min.css

 .col-md-3 {genişlik: %25; } 

Ve biz onun bir kenarlığı olmasını istiyoruz, o zaman ayrı bir dosyamda style.css'imi ilan edebiliriz:

 .borderojo {kenarlık: 1 piksel düz kırmızı} 

Sonra sayfada her iki dosyayı da çağırıyoruz

Blokta aşağıdaki gibi uygularız:

300 piksellik Col-md-3 bloğu.

Bu, şu şekilde ilan etmeye eşdeğer olacaktır:

 col-md-3 {genişlik: %25; kenarlık: 1 piksel düz kırmızı; } 

Şimdi, herhangi bir nedenle iki benzer ifadeye sahipse, varsayalım.

 .borderojo {kenarlık: 1 piksel düz kırmızı; } .clientblock {kenarlık: 1 piksel düz mavi; }
300 piksellik Col-md-3 bloğu.

Kim üstün gelir, en son açıklanan cümledir. Bu nedenle blok mavi bir kenarlığa sahip olacaktır.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.