Metin hizalama

Herhangi bir paragraf veya div bloğu içindeki metin hizalaması, "metin-sol", "metin-merkezi" ve "metin-sağ" sınıfları kullanılarak ayarlanabilir.

Metin rengi

Paragrafların metni için varsayılan renkleri ayarlayabilirsiniz, bunun için "sessiz" - gri, "metin uyarısı" - kırmızı, "metin hatası" - kestane rengi, "metin-bilgisi" gibi çeşitli renk vurgu sınıfları kullanılır. " - açık mavi ve "metin başarısı" - yeşil.

Tablo stilleri

Twitter Bootstrap, varsayılan olarak tablo düzenlerini de destekler. Bunun için aşağıdaki kod kullanılır:

Resimlerle çalışma

Normal bir etiket kullanarak resim ekleyebilirsiniz . Projelerinizi daha ilginç hale getirmek için, köşeleri yuvarlatılmış resimler için "img-rounded", kayan resimler için "img-circle" ve görüntünün çevresinde bir gölge ve kenarlık oluşturmak için "img-polaroid" sınıflarını ekleyebilirsiniz.

açılır menüler

Mevcut bir gezinme çubuğuna bir açılır menü eklemek için (demo sayfasında gösterildiği gibi), "li" öğesinin içine aşağıdaki işaretlemeyi eklemeniz gerekir.

Bir açılır liste oluşturmak için, ana öğeyi "açılır liste" sınıfıyla sarmanız ve ardından eklemek için "a" işaretini kullanmanız gerekir. Ardından liste öğesini bu öğeye yerleştirin.

Twitter Bootstrap kullanmanın temellerini, sisteme nasıl başlayacağınızı gösterdim. Artık nasıl çalıştığını bildiğinize göre, orijinal belgelerdeki çerçeve öğelerinin açıklamasıyla çalışmayı çok daha kolay bulacağınızı umuyorum.

Bunu okuduktan sonra, uygulama için birçok yeni fırsat bulacağınızdan emin olabilirsiniz.

Bir sonraki makalede, Twitter Bootstrap kullanarak duyarlı web siteleri oluşturma konusunda size yol göstereceğim.

Makalenin çevirisi " Twitter Önyükleme Eğitimi – Karmaşık Tasarımları Kullanma» Güleryüzlü bir proje ekibi tarafından hazırlanmıştır.

İyi kötü

CSS çerçevelerini kullanmanın avantajı, mizanpaj tasarımcısının, çerçeve yaratıcılarının kendisi için önceden düşündüğü birçok mizanpaj nüansı hakkında düşünmesine gerek olmamasıdır. Bu tür nüanslar, tarayıcılar arası uyumluluk, çeşitli ekran çözünürlükleri için destek ve çok daha fazlasını içerir. Düzen tasarımcısı yalnızca neyin, nasıl ve ne zaman gösterileceğini belirtir, gerisi çerçevenin kendisi tarafından yapılır. Bu yaklaşım, sitenin düzenini büyük ölçüde hızlandırabilir. Bootstrap'in avantajları popülerliğini içerir. Bu, başka bir kodlayıcının kodunuzu korumasının daha kolay olacağı anlamına gelir.

Çerçeveleri kullanmanın dezavantajı, sayfanın yalnızca küçük bir bölümünü kullansa bile tüm ekstra çerçeve stillerini "taşıması" gerekmesidir. Çerçeve, yönetim sayfaları gibi tasarımın ikincil olduğu sayfaların prototipini oluşturmak ve oluşturmak için harika bir araçtır. Çok özel bir tasarımınız varsa, bunu bir çerçeve yardımıyla düzenlemek, yerel araçlardan daha zor olabilir. Ancak bu da mümkündür.

Bootstrap kullanımı hakkında

DAHA AZ kullanmadan

Bundan sonra, Bootstrap stillerini değiştirmek için bunları style.css dosyanızda şu şekilde geçersiz kılmanız gerekir:

A (renk: #beceda; )
Bu yaklaşımın bariz dezavantajı, geçersiz kılınması gereken gerekli stilleri manuel olarak aramanız gerekecek ve bu her zaman önemsiz olmayacak çünkü. bazı Bootstrap seçenekleri, birçok seçiciye değiştirilmiş bir biçimde, örneğin formüller aracılığıyla uygulanır. Özelleştirme aracı burada biraz yardımcı olabilir, değişikliklerinizi doğru bir şekilde derlemenize yardımcı olur, ancak yalnızca bir kez. Gelecekte bazı parametreleri değiştirmek isterseniz, stillerinizi derlemek için tüm alanlara değiştirilen değerleri yeniden girmeniz gerekecektir.

DAHA AZ kullanma

LESS dosyalarını derlemenin birçok yolu vardır ve Bootstrap bunu geliştiriciye bırakır. Bootstrap, derlemek için Grunt'u kullanır, JetBrains ürünleri için eklentiyi tercih edebilirsiniz ve makale yeni başlayanlara yönelik olduğundan, daha basit çözümlere bakacağız. Bu tür çözümler Windows için WinLess, Mac için SimpLESS veya Linux için Koala'dır. Tüm bu programlar aşağı yukarı aynı şeyi yapar: Girdi olarak LESS dosyaları içeren bir klasör alırlar ve bunlardaki değişiklikleri dinlerler. Herhangi bir dosyada değişiklik yaptığınız anda, hemen belirtilen CSS dosyasına derlenir. Bu şekilde, her değişiklikten sonra derlemeyi elle çalıştırmanız gerekmez. LESS dosyasını değiştirir, kaydeder ve sitedeki değişiklikleri önceden derlenmiş, sıkıştırılmış bir biçimde hemen görürsünüz.

Proje oluştur

Ön izleme

• Resimler nasıl kesilecek?
• Hangi bileşenler kullanılacak?
• Ana stiller neler olacak?
• Hangi sayfa düzenini alacağız?

Genel görüntüler

Harita görüntüsünü kaydedin:

Logoları şu şekilde kaydedelim:

resimler/logo.png
resimler/footer-logo.png

Tekrar eden arka plan görüntüleri, dikey ve yatay olarak tekrarlanarak tam bir görüntü oluşturacak kadar minimum parçada kesilmelidir.

/images/bg.png
/images/h1-bg.png

Aynı boyuttaki sosyal ağ simgelerini tek bir dosyada kaydetmek ve daha hızlı yükleme için bunları sprite olarak kullanmak uygundur. Görüntüleri yapıştırma hakkında daha fazla ayrıntı ilk bölümde açıklanmıştır. Sonuç iki dosya olacaktır:

/images/social.png
/images/social-small.png

Bileşenler

Şablonumuza bir göz atarsanız, aşağıdaki bileşenlere ihtiyacımız olduğunu görebilirsiniz:

1. Sütunlardaki düzen için - ızgara sistemi (satır, sütun)
2. Arama için - satır içi form (form-inline), gruplandırılmış kontroller (giriş grubu), düğme (btn)
3. Navigasyon için - navigasyon çubuğu (navbar) ve navigasyonun kendisi (nav)
4. Bir alt menüyü görüntülemek için - gruplandırılmış bir liste (liste grubu)
5. Harita bloğu için - görsel panel (panel)
6. Büyük bir merkezi birimi görüntülemek için - jumbotron
7. Fotoğraf çerçevelerini görüntülemek için - küçük resimler (küçük resim)

Temel stiller

Öncelikle Bootstrap ayarlarında olmayan değişkenleri ileride kullanabilmek için eklemeniz gerekiyor. Bizde bu sadece belirli bir tasarım yazı tipidir.

@brand-font: "Oswald", sans-serif;
Rus siteleri için bir şablon kullanmak istiyorsanız, Oswald yazı tipini Kiril'i destekleyen en yakın Cuprum ile değiştirmeyi deneyebilirsiniz.

Şimdi Bootstrap ayarlarını kendi ayarlarımızla değiştirelim:

Değişkenlerle işimiz bittiğinde, şimdi style.less dosyasında tasarımımızı şekillendirmeye başlayalım. İlk olarak, Bootstrap'in kendisini ve değişkenlerimizi dahil edelim:

@import "bootstrap/bootstrap.less"; @import "variables.less";
Bootstrap'in tüm varsayılan stilleri değişkenlerle değiştirilemez, hadi bunu manuel olarak yapalım:

P ( margin: 20px 0; ) .form-control ( box-shadow: yok; ) .btn ( font-family: @brand-font; )
Burada form öğelerinden gölgeyi kaldırdık ve butonlardaki metinler belirli bir sayfa yazı tipinde belirtildi.

Ardından sayfanın arka planını ve üst çubuğu açıklıyoruz:

Gövde ( border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); )
Ayrıca metinde stillerin hangi dosyada yazıldığı belirtilmeyecektir. Tüm değişkenleri değişkenler.less dosyasına kaydettiğimizi ve CSS stillerinin style.less dosyasında saklanacağını unutmayın.

HTML çerçevesi

Bu blok bir HTML5 belge yapısı oluşturur. Başlıkta sayfamızın adını belirtiyoruz - Whitesquare. Viewport meta etiketi ile mobil cihazlarda sayfa genişliğinin ekran genişliğine eşit olacağını ve ilk ölçeğin %100 olacağını belirtiyoruz. Ardından stil dosyası eklenir. Ve Internet Explorer'ın dokuzuncudan daha düşük sürümleri için, düzenimizi doğru bir şekilde görüntülememize izin veren komut dosyalarını bağlarız.

Düzen

Aşağıdaki kodu gövdeye ekleyelim:

Bir sütuna ekranlar için değerlerle aynı anda farklı sınıflar verilebilir, örneğin class="col-xs-12 col-md-8". Bu sınıflar, belirli bir ekran boyutu için bir sütunun genişliğini yüzde olarak ayarlar. Sütun için belirli bir ekranın sınıfı ayarlanmamışsa, minimum tanımlı ekranın sınıfı uygulanacaktır ve belirtilmemişse genişlik uygulanmayacak ve blok mümkün olan maksimum genişliği alacaktır.

"col-md-7" ve "col-md-17" sınıflarımız, blokların ana konteynere göre 7 ve 17 genişliğinde sütunlar olduğunu gösterir. Varsayılan olarak, Bootstrap'taki sütun genişliklerinin toplamı 12'dir, ancak ihtiyacımız olan esnekliği elde etmek için bu sayıyı iki katına çıkardık.

Gövde ( … .wrapper ( dolgu: 0 0 50px 0; ) başlık (dolgu: 20px 0; ) )
Bu yapıyı vücudun içine yerleştirdik. LESS sözdizimi, daha sonra bu tür yapılarda derlenen kuralları iç içe yerleştirmenize olanak tanır:

Gövde .wrapper(...) gövde başlığı(...)
Bu yaklaşım, HTML'nin yapısını doğrudan CSS'nin içinde görmenizi sağlar ve kurallara bir tür "kapsam" verir.

Logo

Logoyu başlık etiketine yapıştırın:

(!LANG:Ek stil gerekmez.

Arama

Bir arama oluşturmak için aşağıdaki Bootstrap bileşenlerine ihtiyacımız var: satır içi form, gruplandırılmış kontroller ve bir düğme.
Başlık etiketinde, sağa hizalanmış bir satır içi form oluşturuyoruz. Böyle bir formun alanları "form-control" sınıfına ve etiketine sahip olmalıdır.

Formda "gruplandırılmış kontroller" bileşenini yerleştiriyoruz. Gruplama denetimleri, metin girişi ile düğme arasındaki girintiyi kaldırmanıza ve onları tek bir öğede birleştirmenize olanak tanır.
Bu, "input-group" sınıfı ve alanları olan bir div'dir ve böyle bir bileşenin düğmesi "input-group-btn" sınıfıyla bir bloğa yerleştirilir.

Arama kutusu için bir etiket göstermemiz gerekmediğinden, onu "sr-only" sınıfıyla gizleyeceğiz. Bu, özel ekran okuyucular için gereklidir.

Düğmeye “btn-birincil” sınıfı eklenir, yani bu, bu formun birincil düğmesidir.

Gövde ( … .wrapper ( … başlık ( … .form-search ( genişlik: 200 piksel; ) ) ) )

Menü

Menüyü görüntülemek için "navigasyon çubuğu" bileşenini alalım ve içine bağlantıların olduğu bir liste olan "navigasyon" bileşenini yerleştirelim. Gezinme için, gezinme çubuğu içinde özel gezinme stilleri uygulayan "navbar-nav" sınıfı eklenir.

/*navbar yüksekliği*/ @navbar-height: 37px; /*daha fazla yatay dolgu ayarla*/ @nav-link-padding: 10px 30px; /*menü öğeleri için arkaplan*/ @navbar-default-bg: @panel-bg; /*menü öğelerinde metin rengi*/ @navbar-default-link-color: #b2b2b2; /*ve fareyle üzerine gelindiğinde - aynı*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*etkin menü öğesinin arka planı bizim özel mavi rengimizdir*/ @navbar-default-link-active-bg: @brand-birincil; /*etkin menü öğesinin metin rengi*/ @navbar-default-link-active-color: #fff;
Özelleştirilebilir parametrelere ek olarak, stillerde ek olanları tanımlayacağız - bu büyük harfli metin ve bizim özel yazı tipimizdir:

Gövde ( … .wrapper ( … .navbar a ( text-transform: büyük harf; font: 14px @brand-font; ) ) )

Sayfa başlığı

Sayfanın başlığı, "başlık" sınıfına sahip bir div'e yerleştirilir.

Gövde ( … .wrapper ( … .başlık ( yükseklik: 40 piksel; arka plan: şeffaf url(../images/h1-bg.png); kenar boşluğu: 30 piksel 0; sol doldurma: 20 piksel; h1 ( ekran: satır içi blok; renk: #7e7e7e; yazı tipi: normal 40px/40px "Oswald", sans-serif; arka plan: url(../images/bg.png); kenar boşluğu: 0; dolgu: 0 10px; metin dönüşümü: büyük harf; ) ) ))
Burada div'de arka plan olarak gri bir şerit çiziyoruz ve h1 için şeffaf bir arka plana sahip olduğu izlenimini vermek için istenen yazı tipi ve sayfa rengi arka planıyla satır içi h1 ile satır içi hizalıyoruz.

alt menü

Alt menü oluştururken “navigasyon” bileşenini kullanmayacağız çünkü stiller açısından bize pek uymadığı için “gruplandırılmış liste” bileşeni bizim için çok daha uygun. Böyle bir bileşenin her elemanı "list-group-item" sınıfına sahiptir.

Alt menü, kenar etiketine yerleştirilmelidir. Ana menüye benzer bir bağlantı listesi oluşturuyoruz.

@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
Ve alt menüye aşağıdaki stilleri uygulayın:

Gövde ( … .wrapper ( … .submenu ( margin-bottom: 30px; li ( display: list-item; font: 300 14px @brand-font; liste-stil-pozisyonu: içeride); liste-stil-türü: kare; dolgu) : 10px; text-transform: büyük harf; &.active ( color: @brand-primary; ) a ( color: @text-color; text-decoration: yok; &:hover ( color: @text-color; ) ) ) ))
İlk olarak, Bootstrap onları kendi stilleriyle kesintiye uğrattığından, standart stilleri liste öğelerine döndürürüz. Altta bir girinti ekleyin. Alt menüler daha ince bir yazı tipi ve kare madde işaretleri kullanır. Ve bağlantılar için renkleri, büyük harfleri ayarlıyoruz ve alt çizgiyi kaldırıyoruz. "&.active" kodundaki ve işareti, ana seçiciyle derleme zamanında LESS sözdizimi ile değiştirilecektir: ".submenu li.active".

Kenar çubuğu içeriği

Bunu görüntülemek için “panel” bileşeni bizim için uygundur veya daha doğrusu başlığı renklendirmek için “ana panel” (panel-birincil) varyasyonu uygundur. Bu bileşen, bir başlık bloğu (panel başlığı) ve bir panel içerik bloğu (panel gövdesi) içerir. Harita görüntüsüne, görüntünün küçük bir ekran genişliğinde küçülmesini sağlayacak “img-responsive” sınıfını ekliyoruz.

@panel-birincil-border: @panel-inner-border;
Şimdi site stillerinde, değişkenler aracılığıyla değiştirilmeyen varsayılan panel ayarlarını değiştirmeniz gerekiyor:

Panel ( kutu gölgesi: yok; .panel başlığı ( font: 14px @brand-font; metin dönüşümü: büyük harf; dolgu: 10px; ) .panel gövdesi ( dolgu: 10px; ) )
Burada panellerden gölgeyi kaldırdık, kendi dolgumuzu belirledik ve başlık yazı tipimizi belirledik.

Alıntı yapmak

Bu sayfa öğesi en çok Jumbotron bileşenine benzer. Bunu içerik sütununa ekleyelim:

@jumbotron-bg: @marka-birincil; @jumbotron-renk: #fff;
Ve stillerimizi tanımlayalım:

Gövde ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blok alıntı ( border-sol: yok; p ( font: 300 italik 33px @brand-font; metin dönüşümü: büyük harf); margin-bottom: 0; ) küçük ( text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before ( content: ""; ) ) ) )
Bunlarda, Bootstrap'in varsayılan olarak kullandığı köşe yuvarlamayı, bileşen dolgusunu ve alıntı süslemelerini kaldırıyoruz. Yazı tipi stillerimizi de ekleyelim.

İçerik

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

Donec vel nisl nibh…

@küçük resim dolgusu: 1 piksel; @thumbnail-border: #c9c9c9;

"Ekibimiz"i engelle

Bu bloğu düzenlerken önce bir başlık ekleyin:

Bizim takım

Gövde ( … .wrapper ( … h2 ( arka plan: yok tekrar kaydırma 0 0 #29C5E6; renk: #fff; yazı tipi: 300 30 piksel @brand-font; dolgu: 0 10 piksel; metin dönüşümü: büyük harf; ) ) )
Ardından, çalışan kartlarını içeren iki satırdan oluşan "takım" sınıfına sahip bir blok ekleyin. Her kart bir sütundur. Kart, ızgaramızın dört sütununa eşit bir genişliğe sahiptir. Satırdaki ilk kart dışındaki tüm kartların solunda "col-md-offset-1" sınıfı tarafından oluşturulan bir girinti vardır. Kart içeriği bir resim ve bir açıklamadan (.caption) oluşur

John Doe

Saundra Pittsley

takım Lideri

…

Erica Nobriga

Sanat Yönetmeni

Cody Rousselle

kıdemli kullanıcı arayüzü tasarımcısı

…

Gövde ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail ( margin-bottom: 5px; ) ) .col-md-offset-1 ( margin- left: %3.7; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; renk: @brand-birincil; kenar boşluğu: 0; ) ) ) ))
Burada ayarlanan girintiler ve yazı tipi stillerine ek olarak "col-md-offset-1" sınıfını değiştirdik. Girintiyi %3.7'ye ayarlamak zorunda kaldı. standart girinti çok büyüktü.

altbilgi

İlk olarak, şu bloklarla bir altbilgi kapsayıcı oluşturalım:

Altbilgi ( arka plan: #7e7e7e; renk: #dbdbdb; yazı tipi boyutu: 11 piksel; .container (yükseklik: 110 piksel; dolgu: 10 piksel 0; ) )
Altbilgi etiketi, ekranın genişliği boyunca gri bir alan tanımlar ve içindeki kap, büyük ekranlarda ortalanmış alanı görüntüler ve altbilginin yüksekliğini ve dolgusunu ayarlar. Altbilgi içindeki blokları hizalamak için sütunlar kullanırız.

Twitter beslemesi

Gövde ( … altbilgi ( … .container ( … h3 ( border-bottom: 1px düz #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand-font; kenar boşluğu: 0) 0 10px; metin-dönüşümü: büyük harf; ) p ( kenar boşluğu: 5px 0; ) .twitter ( p ( sağ dolgu: 15px; ) zaman a ( color: #b4aeae; metin-dekorasyon: altı çizgi; ) ) ) )
Tüm altbilgi başlıkları için yazı tiplerini ve girintileri ayarlayın ve ayrıca alt çerçeveden alt çizgi yapın. Paragraflar için girinti. Tarihi gösteren bağlantı için rengi ayarlayın ve altını çizin.

site haritası

Gövde ( … altbilgi ( … .container ( … a ( color: #dbdbdb; ) .sitemap a ( ekran: blok; yazı tipi boyutu: 12 piksel; kenar boşluğu: 5 piksel; ) ) )

Sosyal Bağlantılar

"Social" sınıfına sahip bir bloğa bir dizi bağlantı ekliyoruz.

Gövde ( … altbilgi ( … .container ( … .social ( .social-icon ( genişlik: 30 piksel; yükseklik: 30 piksel; arka plan: url(../images/social.png) tekrarsız; ekran: satır içi blok; kenar boşluğu) -right: 10px; ) .social-icon-small ( genişlik: 16 piksel; yükseklik: 16 piksel; arka plan: url(../images/social-small.png) tekrarsız; ekran: satır içi blok; kenar boşluğu: 5 piksel 6 piksel 0 0; ) .twitter ( arka plan konumu: 0 0; ) .facebook ( arka plan konumu: -30px 0; ) .google-plus ( arka plan konumu: -60px 0; ) .vimeo ( arka plan konumu: 0 0 ; ) .youtube ( arka plan konumu: -16px 0; ) .flickr ( arka plan konumu: -32px 0; ) .instagram ( arka plan konumu: -48px 0; ) .rss ( arka plan konumu: -64px 0; ) ) )) )
Burada sprite tekniğini kullandık - farklı resimler için bir resim dosyası kullanıldığında. Tüm bağlantılar büyük simgeler (.social-icon) ve küçük olanlar (.social-icon-small) olarak ayrılmıştır. Bu sınıfları, sabit boyutları ve aynı arka planı olan bir satır içi blok olarak görüntülenecek şekilde ayarladık. Ve sonra CSS'nin yardımıyla bu arka planı kaydırdık, böylece her bağlantıda karşılık gelen görüntü görüntülendi.

Telif hakkı

(!LANG:Copyright 2012 Whitesquare. Bir pcklab oluşturma

Gövde ( … .footer ( … .container ( … .footer-logo ( float: right; margin-top: 20px; font-size: 10px; text-align: right; a ( metin-dekorasyon: alt çizgi; ) ) ) )

Bu, düzeni tamamlar. Bitmiş proje indirilebilir

Bu derste, Bootstrap çerçevesinin (sürüm 3 veya 4) nasıl indirileceğini ve siteye nasıl bağlanacağını öğreneceğiz.

Bootstrap Öğrenme Araç Seti

Bootstrap çerçevesinde web projeleri oluşturmak için minimum araç seti (programlar):

• kodla çalışmak için metin düzenleyici ("Блокнот", "Brackets", "Notepad++" или др.);!}
• tarayıcı (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer, vb.).

Bootstrap Çerçevesini Yükleme

Bootstrap çerçevesine dayalı bir web projesi oluşturmak her zaman onu yüklemekle başlar. Bootstrap çerçevesini indirebilirsiniz Farklı yollar. Örneğin, getbootstrap.com sitesinde bulunan bir bağlantı aracılığıyla veya npm paket yöneticisi, Composer, Bower, vb. kullanılarak. Bunun nasıl yapılacağına bağlıdır. deneyiminizden veya özel durumunuzdan.

Paket yöneticileri kullanılarak Bootstrap çerçevesinin nasıl kurulacağının yanı sıra Grunt kullanılarak nasıl oluşturulacağını bu makaleden okuyabilirsiniz.

İndirmenin en kolay yolu bağlantıyı kullanmaktır. Bootstrap sitesinde 2 bağlantı var.

İlk bağlantı şunları içerir: kullanıma hazır CSS ve JavaScript dosyaları. Bu derleme esas olarak çerçeveyi öğrenmek veya varsayılan olarak yazarlar tarafından belirlenen stillerde tasarlanabilen projelerde kullanılmak için kullanılır.

İkinci bağlantı, içindeki çerçeveyi içerir. kaynak kodları. Bu sürüm, web sitesi geliştirme için daha uygundur, çünkü. bileşenlerin stillerini, renklerini değiştirmeyi, özelleştirmeyi vb. çok kolaylaştırır. Ancak bu kaynak dosyaların sayfada kullanılmadan önce derlenmesi ve küçültülmesi gerekecektir. Bu işlem genellikle örneğin Gulp kullanılarak otomatikleştirilir.

Bootstrap arşivini açma

Arşivi indirdikten sonra (kullanıma hazır CSS ve JavaScript dosyaları ile), onu web proje dizininize açmanız gerekir.

Arşive bakarsak aşağıdaki içeriğe sahip olduğunu görebiliriz (Örnek olarak Bootstrap 3.4.0 kullanarak):

Bootstrap/ ├── css/ │ ── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── fontlar/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └ ── glifonlar-yarımlar-düzenli.woff

css dizini, Bootstrap çerçevesinin stillerini içerir ve js dizini, bazı bileşenlerin çalışmasını sağlamak için eklentiler içerir. Eklentiler, jQuery kitaplığı işlevleri kullanılarak yazılır. Bu nedenle Bootstrap JS'den önce jQuery kitaplığını eklemeniz gerekir.

Gördüğünüz gibi, arşivde CSS ve JavaScript dosyalarının 2 versiyonu var, yani. min son eki olan ve olmayan. Dosya sürümü min ile min olmadan farklı değil, basitçe simge durumuna küçültülür (sıkıştırılır).

Üretimde (bir üretim sitesinde), dosyaların küçültülmüş sürümlerini kullanmak daha iyidir. Bu dosyalar daha küçüktür ve bu nedenle site sayfalarının daha hızlı yüklenmesini sağlar.

Küçültülmemiş sürümler, geliştirme sırasında ve çalışma için daha uygundur.

Bu dosyalara ek olarak, bu arşiv ayrıca "Glyphicons" simge yazı tipini de içerir. "Glyphicons" yazı tipi, "Glyphicon Halflings" setinden 250'den fazla simgeye sahiptir. Yazı tipi 4 dosya kullanılarak temsil edilir: glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff).

Aynı yazı tipinin bu kadar çeşitli biçimleri, tüm tarayıcılarda görüntülenmesini sağlamak için gereklidir.

Bu makalede, yazı tipi biçimindeki simgelerin yanı sıra sahip oldukları avantaj ve dezavantajlar hakkında bilgi edinebilirsiniz.

Bootstrap 4 çerçeve arşivi, Bootstrap 3'ten pratik olarak farklı değil. Onun temel farkı, onun "Glyphicons" yazı tipini içermiyor. Yazı tipi simgelerine ihtiyacınız varsa, bunları kendiniz bağlamanız gerekir. Örneğin, aşağıdaki kümelerden birini kullanmak: FontAwesome, Octicons, Glyphicons, IcoMoon, vb. Hazır bir yazı tipi kullanmak istemiyorsanız, yalnızca gerekli simgelerden oluşacak kendi yazı tipinizi oluşturun, o zaman bunu kullanın. bilgi.

Ayrıca Bootstrap 4 arşivi şunları içerir: daha fazla dosya bootstrap-grid.css ve bootstrap-reboot.css . Bu dosyalar sadece ihtiyacı olanlar için gereklidir. çerçevenin tamamı değil, sadece bir kısmı.

İlk dosya (bootstrap-grid.css) Bootstrap ızgarasını içerir ve ikincisi (bootstrap-reboot.css), tüm tarayıcılardaki tüm HTML öğelerinin aynı stile sahip olması için temel stilleri ayarlayan bir normalleştiricidir.

Bootstrap'i bir HTML Sayfasına Bağlama

Bootstrap 3 çerçeve yükleme işlemi, aşağıdaki dosyaların bir HTML 5 sayfasına eklenmesinden oluşur:

1. Önyükleme CSS'si (bootstrap.min.css);
2. jQuery kitaplığının en son sürümü (Bootstrap JS eklentilerinin çalışması için gereklidir);
3. Önyükleme JavaScript'i (bootstrap.min.js).

Not: JavaScript dosyaları en iyi kapanış gövde etiketinden önce eklenir (

), çünkü bu, web sayfasının ana içeriğinin daha hızlı yüklenmesini ve görüntülenmesini sağlayacaktır.

...

Bootstrap 4 çerçevesinin bağlanması şu şekilde yapılır:

...

Bootstrap 4'ü aşağıdakilere de bağlayabilirsiniz: CDN(aynı zamanda projeye Bootstrap indirmenize gerek yoktur):

kopyalandı

...

Önyükleme 3.4.0 CDN'si:

kopyalandı

Çerçevenin işlevselliğini kontrol etmek için bir düğme oluşturalım, ona getirildiğinde bir açılır araç ipucu görüntülenecektir.

İmleci bana getir

herhangi bir şekilde kullanabileceğinizi, kaynak kodunu düzenleyebileceğinizi ve çerçeveyi istediğiniz şekilde yeniden oluşturabileceğinizi. Mükemmel.

Bootstrap'i Yükleme

Bu konu üzerinde ayrıntılı olarak durmayacağım çünkü kurulum hakkında zaten ayrı bir makale yazdım -. WordPress'te kurulumu açıklar. Çerçeve dosyalarını bir html belgesine eklemeniz gerekiyorsa (örneğin, uygulama için), çerçeveyi resmi site getbootstrap.com'dan indirin, dosyalarını projeye kopyalayın ve ihtiyacınız olanları ekleyin. Bu dosyalara kısa bir genel bakış sunacağım:

1. bootstrap.css ve bootstrap.min.css, çerçeve css kodunun sıkıştırılmamış ve sıkıştırılmış sürümleridir. Çalışan projeye sıkıştırılmış bir dosya eklemeniz önerilir, bu şekilde indirme hızını biraz artıracaksınız. Ancak kodu bir dosyada görüntülemeyi planlıyorsanız, sıkıştırılmamış sürümü ekleyin.
2. bootstrap.js ve bootstrap.min.js - komut dosyası
3. fonts klasörü ve içindeki glifon dosyaları Bootstrap simgesi fontudur. Yaklaşık 200 simge içerir. Çoğu durumda, onlar sizin için yeterli olacaktır, bazen başkalarını bağlamanız gerekir. Simge yazı tipleri hakkında daha sonra konuşacağız.

Bu, çerçevenin standart kümesidir. Aslında, kolayca özelleştirebilir ve kendiniz için değiştirebilirsiniz. Örneğin, komut dosyalarını hiç kullanmayın veya yalnızca bir ızgarayı bağlamayın. Genel olarak, bunun hakkında da konuşacağız.

Rusça belgeler Bootstrap

Gidiyor getbootstrap Muhtemelen buradaki her şeyin İngilizce olduğunu fark etmişsinizdir. Çerçeve konusunda da Rus yardımına ihtiyacımız olacak. Onu bulmak kolay. Bunu yapmak için ana sayfadan bölüme gidin Başlarken. En alta kaydırın, çevirilere bir bağlantı olacak. Orada Rusça arayın ve tıklayın. İşte bu, şimdi sitenin Rus versiyonundasınız. Doğru, burada her şey çevrilmedi, ancak %70-80 civarında bir yerde doğrudur, yani her şeyi anlayacaksınız.

Önyükleme ağı

Beğenin ya da beğenmeyin, Bootstrap'in ana unsuru duyarlı ızgaradır. Genel olarak, onsuz çerçeve neredeyse tüm değerini kaybeder, çünkü ızgara sayesinde hızlı bir şekilde uyarlanabilir şablonlar oluşturabilirsiniz. Aynı zamanda, medya sorgularına hiç aşina olmayabilirsiniz, bunlara ihtiyacınız yoktur, çünkü çerçeve uyarlanabilirlik uygulamasını üstlenir, sadece bloklar için doğru sınıfları ayarlamanız gerekir.

Bu sınıflar nelerdir? Belgelere gidiyoruz, bize çok yardımcı olacak. bölüme git CSS - Izgara Sistemi. Bir ızgara ile çalışmanın genel kuralları basittir, şimdi bunları listeleyeceğim.

Bir ızgara ile nasıl çalışılır?

Bunu bir html tablosu gibi düşünün. Tablolar için html kodu yazdıysanız, tüm içeriğin tablo etiketine yerleştirildiğini, tr etiketine bir satır yerleştirildiğini ve hücrelerin zaten içine yerleştirildiğini bilirsiniz - td .

Yani, ağda her şey aynı. Kapsayıcı sınıfı, ızgara için genel bir kapsayıcı görevi görür. Önyükleme ızgarası için 2 seçenek vardır - tamamen kauçuk ve yine de sınırlı bir maksimum genişliğe sahip. Yani container sınıfının genel bloğunu ayarladığınızda sitenin maksimum genişliği 1170 piksel olacaktır. Daha fazla genişlemeyecektir. Doğal olarak, içerik ortalanacaktır.

Kap-sıvı sınıfını ayarlarsanız, ağ tamamen kauçuk olacaktır, yani boyut kısıtlaması olmayacaktır. Örneğin, bir kişi 1920 piksel genişliğinde bir monitörde bir web sitesi açarsa, onu tam genişlikte görecektir.

Buna göre, bir site geliştirirken yapmanız gereken ilk şey, şablonun ne olacağına karar vermek - tamamen kauçuk veya genişliğinin hala sınırlı olması gerekiyor.

Harika, konteyner bloğuna bir sıra ızgara yerleştirmelisiniz. Aynı satırdaki tüm blokları içine koymanız gerekir. Yani, en tipik şablonu alırsak: üstbilgi, gövde, sağ sütun ve altbilgi, o zaman 3 sütun vardır. İlki yalnızca bir üstbilgiye sahip olacak, ikincisi içerik ve bir kenar çubuğuna sahip olacak ve sonuncusu bir altbilgiye sahip olacak. Böyle bir sitenin işaretlemesi şuna benzer:

Ama şimdilik, bu yanlış işaretleme, çünkü eksik ... ne? Bu doğru, hücreler! Bootstrap durumunda, bunlara sütunlar da denir. Önyükleme ızgarası 12 sütundan oluşur. En az 1200 piksel, en az 100 olmak üzere herhangi bir genişlikteki herhangi bir bloğa gömülebilir. Bütün bunlar, sütunların genişliğinin piksel olarak değil, yüzde olarak ayarlanmış olmasıdır.

Bu 12 sütunlu sistem nasıl çalışır?

Böylece çerçeve ile ilgili en önemli konuya geliyoruz. İnan bana, eğer bunu anlıyorsan, diğer her şey saçmalık. Ana şey, şebekenin nasıl çalıştığını anlamaktır ve hızlı uyarlanabilir bir düzene giden yol size açık olacaktır.

Bunu yapmak için, hemen aşağıdaki belgelerde gezinin, orada önemli ızgara özelliklerini içeren bir tablo bulacaksınız.

Bu arada, sütunların kendileri Bootstrap'ta colclass ile işaretlenmiştir, ancak bu bileşik bir sınıftır, bu nedenle sadece col- asla yazılmaz. Bootstrap, farklı genişliklerdeki blokların boyutunu kontrol etmek için tasarlanmış 4 özel sınıfa sahiptir, işte bunlar:

1. ld - geniş ekranlar için, 1200 pikselden daha geniş (masaüstü bilgisayarlar);
2. md - orta ekranlar için, 992 ila 1199 arası genişlik (bilgisayarlar, netbook'lar);
3. sm - küçük ekranlar için, genişlik 768 ila 991 piksel (tabletler);
4. xs - 768 pikselden daha küçük, ekstra küçük ekranlar.

Burada 4 sınıf var, ancak öğelerin boyutunu kontrol etmek için 1'den 12'ye kadar sayılar kullanılıyor, çünkü hatırladığınız gibi ızgarada tam olarak 12 sütun var.

Bunu anlamak oldukça basittir. Her şeyden önce, bir başlık oluşturuyoruz, yine de genişliğin% 100'ünü kaplayacağından (genellikle) ızgaraya yerleştirilemez. Ama yine de koyacağız. Bu col-md-12 sınıfı nedir? Size daha önce de söylediğim gibi, kimse sadece col- yazmaz, bu sınıfla aslında tarayıcıya şunu söyleriz:
Bu bir hücre | kolon
Orta cihazlarda (sınıf md), genişliği 12 sütundan 12'si, yani satırın (satırın) genişliğinin %100'ü olmalıdır.
Peki ya diğer cihazlardaki genişlik? Büyük (lg) ekranlarda da %100 olacaktır, çünkü büyük ekranların değerleri kalıtsaldır, ancak daha küçük ekranlar için değildir. Çok basit: col-xs-4 yazarsanız, sütun genişliği tüm cihazlarda %33 olur ve col-lg-4 ise yalnızca büyük cihazlarda olur. İşte bir özellik, unutmayın.

Peki, genişlik değeri daha küçük ekranlarda kaydedilmezse ne olur? Atılır. İşte nasıl gidiyor:
col-sm-4 - küçük ekranlarda blok genişliğin %33'ünü kaplayacak, md ve lg ekranlarında aynı olacak, ancak xs'de yani en küçük olanlarda genişlik %100'e sıfırlanacak . Bu nedenle, 1 basit kuralı daha hatırlayın: Daha küçük ekranlar için hiçbir şey ayarlanmazsa, blok üzerlerinde %100 genişlikte görüntülenecektir.

Temel olarak, tarayıcıya şunu söylüyoruz:
İçerik bloğu 12 sütun genişliğinden 8'i olsun ve bu durum küçük, orta ve büyük ekranlarda olacaktır (küçük ekranlar için belirtmeniz yeterli, büyük ekranlar için hatırlayacağınız gibi değer kalıtsaldır). Ancak en küçük ekranlarda blok %100 dolu olacaktır. Bu doğru, genellikle mobil cihazlarda siteler tam olarak 1 sütunda gider.
Aynı küçük, orta ve büyük ekranlarda yan sütun satırın genişliğinin üçte biri olsun.Eh, en küçüğünde, zaten anladığınız gibi, genişliği de %100'e sıfırlanır. Bu kadar basit.

Pekala, altbilgi ile uğraşacak bir şey yok. Şebekenin temel ilkelerini analiz ettik ama yine de nasıl çalıştığını görmemiz gerekiyor...

Bootstrap İç İçe Izgara

Gerçek şu ki, şablonu şimdi yalnızca ana bloklara ayırdık, ancak içlerinde sütunlara da bölünmeleri olabilir. Örneğin, içerik, ürünleri birden çok sütunda görüntüleyebilir. Nasıl olunur? Çok basit - içeride tamamen aynı ızgarayı oluşturuyoruz. İç içe olacak, ancak aynı zamanda 12 sütun içeriyor. Bütün bunları özetlersek, şu sonuca varırız:
Herhangi bir blok içinde sınırsız sayıda ızgara olabilir. Örneğin, ürünleri olan bir blokta, malları ayırmak için bir ızgarada, bir ürünün kendisiyle birlikte blokta, örneğin fiyatları, mevcudiyet hakkında bilgileri ve ekstraları ayırmak için başka bir ızgara oluşturabilirsiniz. bilgi.

Şimdi ürünleri 3 sütun halinde düzenlemek için içerikli bloğun içinde başka bir ızgara yapmaya çalışacağız. Bu nedenle, içeriğimizin bulunduğu bloğu alıyoruz:

Ve ona yazıyoruz:

Katalog:

Ürün adı

Ürün Açıklaması

Gördüğünüz gibi, içeriğin içinde yeni bir ızgara oluşturduk - içine bir satır koyduk ve zaten satırda ürünleri olan 3 blok olacak. Ürün kartıyla birlikte col-sm-4 bloğunu kopyalayıp 2 kez daha yapıştırmanız yeterlidir, bu şekilde görünecektir (herhangi bir ürün resmini çekebilirsiniz, harika bir tane çektim):

Bir önemli noktayı daha gözden kaçırmışım, resimlerin bulundukları bloklara uyum sağlaması için her birine img-responsive sınıfın verilmesi gerekiyor. Ben, benim gibi, bunu yapmanın sakıncalı olduğunu düşünüyorsanız, o zaman sadece kendi style.css'nizde şöyle yazın:

Img (maksimum genişlik: %100; yükseklik: otomatik; ekran: blok; )

İşte bu, bu kodu kaydedin ve css dosyanızı projeye ekleyin. Artık resimler varsayılan olarak duyarlı olacaktır.

Peki, oldukça sorunsuz oldu mu? Evet ve önyükleme olmadan, daha uzun süre acı çekmeniz gerekir. Tek şey, herhangi bir bloğun içinde bir ızgara oluştururken, artık içinde container sınıfı olan bir blok oluşturmanıza gerek olmamasıdır. Bu neden gerekli değil? Evet, çünkü ızgaranın oluşturulduğu blok bir kapsayıcı görevi görür.

Böylece herhangi bir blokta istediğiniz kadar sütun oluşturabilir ve herhangi bir karmaşıklıkta bir şablon oluşturabilirsiniz. Ve tüm bunlar Bootstrap olmadan çok daha hızlı çünkü tüm css'leri sıfırdan yazmanız gerekiyor.

Duyarlı yardımcı programlar

Bu, bootstrap'ın bir başka harika özelliğidir. İhtiyacınız olan genişlikte herhangi bir bloğu gizleyebilir veya görünür hale getirebilirsiniz. Örneğin, dar ekranlarda kenar çubuğunu tamamen gizleyin, mobil cihazlarda bazı yeni öğeler ekleyin, geniş ekranlarda bir sütun ekleyin, vb.

Bir çok uygulama seçeneği var ama ben size en önemlisi bu yardımcı programları nasıl kullanacağınızı anlatmadım. Bunu yapmak için, istediğiniz bloğa sınıflar eklemeniz yeterlidir. Gizlemeniz gerekiyorsa, aşağıdaki sınıfı belirtmeniz yeterlidir:

altbilgi

Bu durumda gizli-xs sınıfı ne yapacak? Altbilgiyi çok küçük cihazlarda gizleyecektir. Diğerlerinde, blok görünür olacaktır.

Aksine, yalnızca en küçük ekranlarda göstermeniz gerekiyorsa, görünür-xs-block sınıfını kullanmanız gerekir. Bu durumda, blok en dar ekranlar dışında tüm ekranlarda gizlenecektir. Böylece, uyarlanabilir yardımcı programların sınıfları şu şekilde yazılır:

1. Neye ihtiyacınız olduğuna bağlı olarak gizli veya görünür kelime
2. Bloğun hangi ekranlarda gizleneceğini veya gösterileceğini belirten xs, sm, md veya lg kısaltması.
3. Görünür için ayrıca üç değerden birini eklemeniz gerekir: blok - öğeyi bir blok olarak görüntüleyin, satır içi blok - satır içi blok olarak, satır içi - satır içi.

Pekala, açıklığa kavuşturmak için birkaç örnek:

1. gizli-xs gizli-lg - öğeyi en küçük ve en büyük ekranlarda gizler. Gördüğünüz gibi, boşluklarla ayrılmış birden çok sınıf belirtebilirsiniz.
2. görünür-xs-inline görünür-md-block — öğe küçük ve büyük ekranlarda hiç görüntülenmez. Çok küçükte küçük harf olacak ve orta boyutta bir blok olacak.
3. görünür-lg-blok - öğe yalnızca en büyük ekranlarda görünür olacak, diğerlerinde gizlenecek

Her şey böyle çalışıyor. Aynen böyle ve başka bir şey değil. Umarım anlarsın. Hadi uygulamaya koyalım. Çok ilkel de olsa bir test şablonumuz var.

Bir görev: kenar çubuğunun küçük ekranlarda ve bir ürünün daha küçük ekranlarda kaybolmasını sağlayın. Ve böylece xs cihazlarında, mallar zaten 3'te değil, 2 sütundaydı.

Sadece html kodunu düzenleyerek kendiniz yapmaya çalışın. Ne yapılması gerekiyor? İlk olarak, sütunla ilgilenelim, sm ekranlarında gizlemek için, sadece gizli-sm sınıfını eklememiz gerekiyor.

Harika, şimdi gizli-xs sınıfını üçüncü ürüne eklememiz gerekiyor ve en küçük ekranlarda kaybolacak. Peki, kalan iki malın sınıfları şu şekilde olacaktır:

Diğer bir deyişle, orta cihazlarda blok, 12'den 4 sütunu kaplar, bu da genişliğin% 33,33'üne ve ekstra küçük cihazlarda -% 50'ye çevrilebilir. Ve bu genişlikte bir ürün bloğu kaybolacağından, her iki ürün bloğu da şu şekilde 1 sıraya düzgün bir şekilde sığacaktır:


İyi! Bunu anlayarak, web sayfasındaki blokları hemen hemen istediğiniz şekilde manipüle edebilirsiniz. Kendiniz için görevler bulmaya çalışın ve bunları uygulayın.

Beni tamamen hareket ettir

Ardından, çok iyi 1 numara daha göstereceğim - bloğu sağa veya sola hareket ettirme yeteneği. Diyelim ki art arda 3 ürünümüz değil, 1 ürünümüz var ve tüm genişliği kaplamıyor. Ve senin görevin onu merkeze hizalamak. 12 sütunlu bir sistemle çalıştığınızı göz önünde bulundurursanız bunu yapmak kolaydır.

Ürünle bir blok bırakalım:

Bloğu ortalamak için ne kadar hareket ettirmeniz gerektiğini anlamak için basit hesaplamalar yapmanız yeterlidir. Orta ve büyük ekranlarda 4 sütun, küçük ekranlarda 3 sütun sola kaydırılması gerekir. Bu nasıl göründüğü:

col-md-offset-4 sınıfı diyor ki: orta ve büyük ekranlarda, kutuyu ana konteynerin genişliğinin %33'ü kadar sola kaydırın (1/3 sol dolgu, 1/3 kutu genişliği, ⅓ dolgu sağ, merkeze alın).
Col-xs-offset-6 sınıfı: Çok küçük ve küçük ekranlarda, %25 sola kaydırma (sol doldurma ¼, blok genişliği ¼, sağ doldurma ¼).

Umarım işin özünü anlarsınız ve gerekirse bu dersleri uygularsınız.

Bootstrap bileşenleri ve kullanım örnekleri

Seni kutlarım. Çerçeve ile ilgili en önemli konuyu ele aldık. Önemli olan şebeke ve onunla çalışmaktır. Bileşenlerle çalışmak, zaten belgelere gitmeniz, istediğiniz bileşenin kodunu oraya kopyalamanız ve gerekirse kendiniz değiştirmeniz gerçeğinden oluşur. Ama yine de bileşenlerin nasıl kullanılacağına dair daha fazla örnek vereceğim.

Hızlı yüzer ve deflow

Sola çekme ve sağa çekme sınıfları, herhangi bir bloğu sola veya sağa iterek hızlı bir şekilde yüzdürmenizi sağlar. Sargıyı iptal etmeyi unutmayın. Bunun için clearfix sınıfını kullanabilirsiniz.

Bootstrap: Yatay Duyarlı (Mobil) Menü

Aşağıdaki bileşenleri doğrudan şablona ekleyeceğiz, bu yüzden kodla çalışmak ve sadece okumak istemiyorsanız, benim için tüm adımları izleyin.

Aslında, Bootstrap'ta sadece uyarlanabilir bir menü değil, küçük ekranlarda tamamen daraltılan ve tek bir düğmenin altına gizlenen sözde mobil olanı yapmak çok kolaydır. Bu teknik, birçok duyarlı şablonda görülebilir ve aslında uygulanması çok kolaydır. Mobil menü örnek kodu belgelerde var, oradan alıp biraz yeniden yapacağım.

Bu yüzden yapacağım ilk şey başlık bloğunu kaldırmak, çünkü menümüz aslında şablonumun durumunda başlık olacak. Menü kodu, sitenin tüm içeriğinden önce, hatta konteyner bloğundan önce yerleştirilmelidir. Niye ya? Evet, artık kılavuzun zaten gezinme çubuğuna yerleşik olduğunu kendiniz göreceksiniz. İşte kod:

Çok fazla kod olması gerçeğinden korkmayın. Site şu anda böyle görünüyor:


Ancak menünüz ekranın tüm genişliğini kaplamıyorsa, onu ortalamak mantıklıdır. Bunu yapmak için, menü için container-fluid sınıfına sahip bloktan sonra yerleştirilmesi gereken ek bir sarmalayıcı bloğu oluşturmalısınız. Bu bloğu kapatmayı unutmayın. Ona navbar-wrap sınıfını verdim. İşte bunun için stiller:
Gördüğünüz gibi, menüye bir logo, iki basit öğe, bir açılır öğe ve bir arama formu ekledik. Yani birçok unsur var. Kendi sınıflarınızı ekleyerek menüyü kolayca kendinize göre özelleştirebilirsiniz. Ama şimdilik amacım size sadece bu bileşeni göstermek.

Ekran genişliği 768 pikselden az olan cihazlarda menü şu şekilde görünecektir:


Gördüğünüz gibi menü çöktü. Sağ üst köşedeki butona tıkladığınızda açılır. Ekranda sadece logosu kaldı.

Aşağıya doğru açılan menü

Aynı zamanda yukarıdaki örnekten Bootstrap'te bir açılır menü öğesinin nasıl yapıldığını anlayabilirsiniz, daha yakından bakmak için bu kodu çıkaracağız:

simülatörler

• koşu bantları


• Eliptik Eğitmenler


• Banklar

Bu nedenle, açılır öğe için kapsayıcı, açılır sınıfa sahip normal bir liste öğesidir. İçinde, bir açılır menüyü açan tıklayarak ana bağlantı bulunur. ona yazmak çok önemli veri özelliği kodda gördüğünüz gibi, onsuz hiçbir şey çalışmaz. Ayrıca bootstrap.js dosyasının web sayfalarında yer aldığından emin olmanız gerekir.

Düzeltme sınıfına sahip bir yayılma, bir oktan başka bir şey değildir, bu sayede öğenin açılır olduğunu anlayabilirsiniz, ancak menünün altında standart bir madde işaretli liste kullanılarak oluşturulur. İşte bu, her şey oldukça basit, açılır öğeleri uygulamak için bu kodu kullanabilirsiniz.

Bootstrap ile Ekmek Kırıntıları Ekleme (Ekmek Kırıntıları)

Birçok mağazada, mevcut sayfanın tam yolunu içeren kırıntı bloğu denilen şeyi bulabilirsiniz. Çerçevenin yardımıyla bunu yapmak da kolaydır, koda bakın.

İlgili Makaleler

Karadağ'da tatil evi Gizlilik ayarlarının değiştirilmesi

Doğrudan Rezervasyon hizmeti nasıl göründü?

Videodan GIF oluşturma programı

Rus işletim sistemi Rosa Desktop

Rus işletim sistemleri: varlar, ama neden?

Yandex'de SMTP ve POP3 protokollerini kullanarak Kerio Mail Server'da posta kurulumu

En son makaleler

• 

  2022-03-23 06:03:04

  Cihaz nedir ve gadget'tan farkı nedir?
• 

  2022-03-23 06:03:04

  MSI P35 NEO Anakart İncelemesi MSI P35 Neo ve MSI P35 Neo Combo - Intel P35 Chipset Tabanlı Anakartlar
• 

  2022-03-17 22:04:42

  Tablo içeren metin belgelerinin tasarımı üzerine pratik çalışma

Popüler Makaleler

• 

  Sigortalının kişisel hesabı

• 

  Otomatik tanımlama sistemi Elektronik harita sistemi ile AIS'nin ortak kullanımı

• 

  Wargame: Red Dragon başlamıyor mu?

• 

  Üzücü escobar "Ukrayna yargı sisteminin yüzü"

• 

  ROME Total War - tüm grupların kilidi nasıl açılır?

Editörün Seçimi

• 2022-03-12 11:39:54
  TalkBack özelliği nasıl kapatılır?

  Android işletim sistemi, sıradan kullanıcıların bazılarının farkında bile olmadığı birçok özelliğe sahiptir. O "cips"lerden biri...

• 2022-03-12 11:39:54
  Alternatif donanım yazılımına genel bakış HTC Desire A8181 Bravo HTC Desire için donanım yazılımı dosyası nasıl yüklenir

  HTC Desire A8181'in mutlu bir sahibiyim. Bir yıl önce aldığımda sevincim sınır tanımıyordu. Bir süre sonra Samsung çıktı...

• 2022-03-12 11:39:54
  Yanıp sönen veya yanıp sönen Alcatel telefon, akıllı telefon ve tablet

  Alcatel, modaya uygun cep telefonları, akıllı telefonlar ve tabletlerin üretiminde uzmanlaşmıştır, sadece mükemmel ürünlerle değil...

• 2022-03-12 11:39:54
  Samsung Galaxy'de veriler nasıl sıfırlanır (donanımdan sıfırlama, fabrika ayarlarına sıfırlama)

  Donanımdan sıfırlamanın kullanılabilirliği: Mevcut Akıllı telefonunuzda fabrika ayarlarına donanım sıfırlaması yapmanız gerekebilecek birçok neden vardır (Sabit...

• 2022-03-12 11:39:54
  Sense kabuğu ile HTC Desire için en iyi bellenim - Runnymede ve RuHD RuHD for Desire Kurulumu

  Evet, biraz konu dışı, ama yine de geçen gün kendim parladım, zaten oldukça eski, smarfon ve tecrübem var. Dedikleri gibi, aynı ürün yazılımı ile ortak bir şey ...