Http://getbootstrap.com adresinden eksiksiz bir bootstrap 3 paketi indirdikten sonra , tema için ayrı bir css dosyası olduğunu fark ettim. Nasıl kullanılır? Lütfen açıkla?
bootstrap-theme.cssMevcut bootstrap projeme dahil oldum , ancak çıktıda bir fark yok.
Yanıtlar:
Bootstrap 3.x'i indirdikten sonra, bootstrap.css ve bootstrap-theme.css (bu dosyaların var olan küçültülmüş sürümlerinden bahsetmiyoruz) elde edersiniz .
bootstrap.csstamamen tarz ve kullanıma hazırsa, eğer isteğiniz buysa. Belki biraz sade ama hazır ve orada.
İstemiyorsanız bootstrap-theme.css dosyasını kullanmanıza gerek yoktur ve her şey yolunda olacaktır.
bootstrap-theme.csssadece dosyanın adının önermeye çalıştığı şeydir: yaratıcı bir şekilde 'bootstrap teması' olarak kabul edilen bootstrap için bir temadır. Dosyanın adı, tabanın bootstrap.csszaten stil uygulanmış olması nedeniyle işleri biraz karıştırıyor ve birincisi, bu stilleri varsayılan olarak kabul ediyorum. Ancak bu sonuç, Bootstrap belgelerinin bu bootstrap-theme.cssdosyayla ilgili örnekler bölümünde söylenenler ışığında yanlış görünüyor :
"Görsel olarak geliştirilmiş bir deneyim için isteğe bağlı Bootstrap temasını yükleyin."
Yukarıdaki alıntı burada bulunan http://getbootstrap.com/getting-started/#examples bu örnek sayfaya o bağlantıları küçük bir üzerinde http://getbootstrap.com/examples/theme/ . Fikir olmasıdır bootstrap-theme.cssolan önyükleme tema VE isteğe bağlıdır.
BootSwatch.com'daki temalar hakkında: Bu temalar aşağıdaki gibi uygulanmamıştır bootstrap-theme.css. BootSwatch temaları orijinalin değiştirilmiş versiyonlarıdır bootstrap.css. Bu nedenle, BootSwatch ve bootstrap-theme.cssdosyadan aynı anda kesinlikle bir tema KULLANMAMALISINIZ .
Kendi Özel bootstrap-theme.cssTemanız Hakkında: Kendi temanızı oluştururken değişiklik yapmayı seçebilirsiniz . Bunu yapmak, bu yerleşik Bootstrap iyiliğinden herhangi birini yanlışlıkla bozmadan stil değişiklikleri yapmayı kolaylaştırabilir.
Css stillerinin bir örneği için şuraya bakın: http://getbootstrap.com/examples/theme/
Örneğin bootstrap-theme.css dosyası olmadan nasıl göründüğünü görmek istiyorsanız , tarayıcı geliştirici araçlarınızı açın ve bağlantıyı örneğin <head> öğesinden silin ve sonra karşılaştırabilirsiniz.
Bunun eski bir soru olduğunu biliyorum, ancak herkesin nasıl olduğuma dair bir örnek araması durumunda yayınladı.
Güncelleme
bootstrap.css = ana css çerçevesi (ızgaralar, temel stiller, vb.)
bootstrap-theme.css= genişletilmiş stil (3D düğmeler, degradeler vb.). Bu dosya isteğe bağlıdır ve bootstrap işlevini hiç etkilemez, sadece görünümü geliştirir.
Güncelleme 2
V3.2.0 sürümü ile Bootstrap, doc sayfalarında css temasını görüntülemek için bir seçenek ekledi. Doküman sayfalarından birine ( css , bileşenler , javascript ) giderseniz, yan gezinme bölmesinin altında css temasını açmak ve kapatmak için kullanabileceğiniz bir "Temayı önizle" bağlantısını görmelisiniz.
bootstrap.cssBootswatch.com'dan bir sitenin söylediği gibi bir tema ile değiştirilmesini ister miydim ve hala bootstrap-theme.cssbir Bottswatch temasıyla bile kullanabilir miyim?
bootstrap-themeBootswatch ile kullanamazsınız. Yine de sitemin bir karışıklık yaptı.
İlk olarak, bootstrap-theme.cssBootstrap 3'te Bootstrap 2.x stilinin eşdeğeri başka bir şey değildir. Gerçekten kullanmak istiyorsanız, sadece birlikte ekleyin bootstrap.css(minimize edilmiş sürüm de çalışır).
Başkaları tarafından belirtildiği gibi, bootstrap-theme.css dosya adı çok kafa karıştırıcı. Aslında ne yaptığından daha açıklayıcı olan bootstrap-3d.css veya bootstrap-fancy.css gibi bir şey seçerdim . Dünyanın "Bootstrap Tema" olarak gördüğü şey, tamamen farklı bir canavar olan BootSwatch'dan alabileceğiniz bir şey.
Bununla birlikte, etkiler oldukça güzel - gradyanlar ve gölgeler ve benzeri. Ne yazık ki bu dosya BootSwatch Temalarında hasara yol açacak, bu yüzden onlarla güzel oynamak için ne gerekeceğini araştırmaya karar verdim.
Bootstrap-theme.css, Bootstrap kaynağındaki theme.less dosyasından oluşturulur . Etkilenen öğeler (Bootstrap v3.2.0'dan itibaren):
Theme.less dosyası şunlara bağlıdır:
@import "variables.less";
@import "mixins.less";Kod, değişkenlerde tanımlanan renkleri kullanır. Birkaç yerde, örneğin:
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}Bu nedenle bootstrap-theme.css, BootSwatch Temalarını tamamen karıştırır. İyi haber şu ki BootSwatch Temaları değişkenler.less dosyalarından da oluşturulmuştur, böylece BootSwatch Temanız için bir bootstrap-theme.css oluşturabilirsiniz.
Bunu yapmanın doğru yolu, Tema oluşturma işlemini güncellemektir, ancak işte burada hızlı ve kirli yol. Bootstrap kaynağındaki variable.less dosyasını Bootswatch Temanızdaki bir dosyayla değiştirin ve oluşturun ve Bootswatch Temanız için bir bootstrap-theme.css dosyanız var.
Bootstrap oluşturmak göz korkutucu gelebilir, ancak aslında çok basit:
Bitti. Kolaydı, değil mi?
Bu yazının biraz eski olduğunu biliyorum ama ...
'Zekâ' işaret etti.
Kendi Özel Temanız Hakkında Kendi temanızı oluştururken bootstrap-theme.css dosyasını değiştirmeyi seçebilirsiniz. Bunu yapmak, bu yerleşik Bootstrap iyiliğinden herhangi birini yanlışlıkla bozmadan stil değişiklikleri yapmayı kolaylaştırabilir.
Bootstrap'in yıllar boyunca herkesin çekirdek stillerden biraz farklı bir şey istediğini gördüğü gibi görüyorum. Bootstrap.css dosyasını değiştirebilmenize rağmen bazı şeyleri kırabilir ve yeni bir sürüme güncellemeyi gerçek bir acı ve zaman alıcı hale getirebilir. Eğer beklemek zorunda bir 'tema' site aracından indirilmesi halinde büyük, o yaratıcısı güncellenerek o tema ise bazen, değil mi?
Bazıları kendi 'custom.css' dosyasını oluşturur ve sorun değil, ancak 'bootstrap-theme.css' kullanırsanız çok fazla şey zaten oluşturulmuştur ve bu, bootstrap çekirdeğini bozmadan kendi temanızı daha hızlı yuvarlamanıza izin verir .css. 3D düğmelerini ve degradeleri çoğu zaman sevmiyorum, bu yüzden onları bootstrap-theme.css kullanarak değiştirin. , Kenar boşluklarını veya dolgu ekleyin düğmeleri yarıçapı değiştirmek, böylece ve ...