Bootstrap bileşenlerini kullanma

Önyükleme İhtiyacımız olan veya yapmak istediğimiz farklı web tasarım çözümleri için bize standart bir başlangıç ​​noktası sağlayan iki büyük sağlam temele sahiptir, bunlar Grid ve temel CSS'dir, bu iki araçla yapabileceğimiz büyük bir merkezi temel oluşturabiliriz. arayüzümüzü oluşturan tüm farklı öğeleri dinlendirmek için yerleştirin.
Tüm bazalar gibi, bunlar da yapının geri kalanını kendi başlarına yapmazlar, daha fazla gelişmişlik ve detaya ulaşmak için tabanımızda bulunan ek bileşenlerin kullanılması gerekir ve elbette güçleri sağlamlıktan etkilenecektir. mektubun.
Bu durumuda Önyükleme Tasarımlarımızın ayrıntılarını en üst düzeye çıkarmamıza yardımcı olan birkaç bileşenimiz, simgelerden panellere, hatta başlıklardan oluşan bileşenlere sahibiz. Uygulamamızı diğerlerinden ayırt etmemize ve öne çıkarmamıza yardımcı olan unsurlar.
İçindeki bileşenler Önyükleme Sayfalarımızda diğerlerinden bağımsız olarak kullanılabilirler, yani tek bir belgede ihtiyaç duyduğumuz kadar bileşeni, diğerleriyle çakışmadan üretebiliriz.
Ek olarak, varsayılan olarak temel stil zaten önceden tanımlanmıştır, bu nedenle uygulamamızı hızlı ve fazla çaba harcamadan oluşturabiliriz ve sonunda kendi stilimiz için temel stili değiştirerek tüm uygulamamızı özelleştirebiliriz.
Bileşenler şunlardan olabilir: CSS, JavaScript veya her ikisi, yani bazıları dışında Temel CSS gibi üçüncü taraf kitaplıkları gerektirecektir. jQuery, bu biraz rahatsız edici görünebilir, ancak gerçek şu ki, uygulama o kadar basittir ki, varsayılan olarak getirilenden daha fazla şey kullandığımızı bile anlamayacağız. Önyükleme.
Anlamamız gereken ilk bileşenlerden biri simgelerdir, çünkü bu küçük görüntü parçalarıyla kullanıcının tasarımımızın herhangi bir bölümünün işlevselliğini anlamasını sağlayabiliriz, böylece büyük bir simge gördüğümüzde x mevcut bölümün kapatılmasıyla ilgili olduğunu veya şeklinde bir simge görmemiz durumunda olduğunu biliyoruz. + bir şey eklemek olduğunu bileceğiz.
glifonlarİçinde Önyükleme simgelerden oluşan bir kitaplık var glifonlar, web tasarımında çok popüler ve bize bir web sayfasında gerçekleştirebileceğimiz her eylem için pratik olarak bir simge sunan, bu bize çok iş katıyor çünkü hizmet eden grafik parçaları tasarlamak için birini aramayı düşünmemize gerek yok. bu amaçlar.
Aşağıdaki resimde, doğrudan web sitesinde sahip olduğumuz simgeleri görebiliriz. Önyükleme:

BÜYÜT

Bu, elimizdeki simgelerin sadece küçük bir örneğidir, ancak resmi sayfaya göz atarsak, kullanımımız için sahip olduğumuz tüm seçenekleri göreceğiz.
Bu simgelerin kullanımı çok basit, sadece sınıfı eklememiz gerekiyor. glifon elemana HTML ve ardından mevcut listeden ilgili simgenin sınıfını ekleyin. Simgeler genellikle aşağıdaki gibi öğelere eklenir: veya bu şekilde sadece görsel olduklarından emin oluyoruz, böylece mümkün olan en iyi sonucu elde ediyoruz. Şimdi aşağıdaki kodda bu bileşenin nasıl kullanılacağına dair bir örnek görelim. HTML.

 Bootstrap'ta Glyphicon'ları Kullanma
Ödemek
Posta
Kullanıcılar
Geridönüşüm kutusu
Oturumu Kapat

Bu kodda, kütüphanelerimizden eklemeleri basitçe yerleştirdik. Önyükleme karşılık gelen, ekleme jQuery üçüncü taraf kitaplığı olarak ve ardından kitaplığı ekleyin js nın-nin Önyükleme, js kütüphanesinden beri bu sırayı korumak önemlidir. Önyükleme ihtiyacı jQuery ve eğer dahil edilirse, uygulamada bize bir hata verecektir.
Daha sonra kendi içinde eklediğimiz bazı bölümler oluşturduk. glifonlarBizim amacımız için simgeleri etiketin içine yerleştirmek yeterliydi. Tarayıcımızda çalıştırırsak, aşağıdaki sonucu elde ederiz:

Gördüğümüz gibi, simgeler onlara daha fazla ağırlık ve anlayış vererek mesajlara eşlik eder, örneğin arama kutusunda biri İngilizce konuşmazsa mesajı anlamayacaktır. aramaAncak bilgisayar sistemlerini kullandıysanız ve büyüteç simgesini hemen görüyorsanız, bunun aramalara atıfta bulunduğunu bilirsiniz, bu bileşenin gerçek gücü budur.
Diğer bir önemli bileşen ise, içeriğimizi aynı sayfada düzenlememizi sağlayan gezinme sekmeleridir, böylece çok fazla alan tüketmekten kaçınır ve böylece web uygulamamızda çok sayıda bölüm öğrenmek zorunda kalmadan kullanıcının hayatını kolaylaştırır.
Bu sekmeleri kullanmak için sınıfın yardımına ihtiyacımız var. gezinme, yaptığı şey varsayılan stili kaldırmaktır. HTML elementlerin ve oğulları , böylece kullanımı ve daha sonra tasarımımıza uyarlanmasını kolaylaştırır. Bunu kullanmak için sınıfları eklememiz yeterlidir. gezinme Y gezinme sekmeleri bir elemente ve bununla uygun sonucu elde edeceğiz.
Bu çözümü uyguladığımız aşağıdaki kodu görelim, önceki örnekte olduğu gibi dosyaları eklememiz gerekiyor. bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, kodumuzu görelim:

 Bootstrap'ta Glyphicon'ları Kullanma

Güvenlik
Kayıtlar
İçindekiler

Öğenin kullanımını fark ettiğimiz gibi bu sınıf ile bir yapı yapmamızı sağlar HTML normaldir, ancak aşağıda göreceğimiz gibi sonuç bize bilgileri düzenlemenin başka bir yolunu verir. Kodumuzun bir başka ilginç yönünü vurgulayabiliriz ve bu, aşağıdakilerin birleşimidir: glifonlar bu çözümle, öğelerin bağımsızlığı hakkında ne açıkladığımızı gösteriyoruz.

BÜYÜT

Çok yararlı olan diğer bir bileşen de açılır menülerdir; bunlar, özellikle düzenlemeleri gereken birçok kategoriye sahip web sayfaları için birçok seçeneği küçük bir alana yoğunlaştırmamıza olanak tanır.
Yıkılmakbileşeni Önyükleme bunu yapana denir Yıkılmak ve önceki bileşen gibi, öğeye uygulanır ancak, HTML çalışma stilinin ötesine geçmese de yapımı biraz daha karmaşıktır.
Önce açılır listenin başlığı olan bir öğeye sahip olmalıyız, sonra görüntülenecek seçenekleri içerecektir. Bunun için, içerik sekmesine bir açılır menü eklemek için önceki örneği yeniden formüle edeceğiz, bununla örneğimizi daha iyi anlayabiliriz.
Biraz özetlemek gerekirse, başlık aynı olacağından sadece içeriğini göstereceğiz. Açılır menü işlevimiz için kodu görelim:

Güvenlik
Kayıtlar
İçindekiler

Videolar
Görüntüler
Ses

Daha sonra bir elementte nasıl olduğunu görüyoruz sınıfla açılır listeye başladık yıkılmak, sonra bunun içinde, sınıfı eklerken seçenek tetikleyicisi olarak bir öğe tanımlarız. açılır-geçiş ve sonunda bir yarattık sınıfta ne var Aşağıya doğru açılan menü göreceğimiz tüm seçeneklere sahip olduğunu belirlemek için. Örneğimizi tarayıcıda çalıştırırsak aşağıdaki sonucu alırız:

BÜYÜT

Elbette bu, elde edebileceklerimizin sadece küçük bir kısmı, çünkü daha fazla efekt eklemek mümkün ve farklı stiller bunların görselliğini değiştiriyor. Bununla, kullanabileceğimiz en kullanışlı üç bileşeni gördüğümüz bu öğreticiyi bitiriyoruz. Önyükleme, böylece uygulamamızın çok daha fazla özelleştirilmesini sağlıyoruz.