Hızlı başlangıç

Projenize CoreUI for Bootstrap'ı hızlı bir şekilde eklemeyi mi düşünüyorsunuz? Ücretsiz açık kaynaklı bir CDN olan jsDelivr'ı kullanın. Bir paket yöneticisi mi kullanıyorsunuz veya kaynak dosyalarını mı indirmeniz gerekiyor? İndirme sayfasına gidin.

CoreUI, bağımsız bir kütüphane olarak kullanılabilen ve projenizde şu anda kullanılan Bootstrap'ın yerini almasına olanak tanıyan bir genişletme olarak oluşturulmuştur.

CSS

Stil sayfasını `` bölümünüze diğer tüm stillerden önce yapıştırın, böylece CSS'mizi yükleyin.

<link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">

JS

Birçok bileşenimizin çalışması için JavaScript kullanımı gereklidir. Özellikle, kendi JavaScript eklentilerimizi ve Popper kullanmaları gerekir. Bunları aktif hale getirmek için aşağıdaki ``lerden birini sayfanızın en altına, kapanış `` etiketinin hemen öncesine yerleştirin.

ipucu

Javascript eklentilerini aktif hale getirmek için sayfanızın sonuna koymayı unutmayın!

Paket

Her CoreUI for Bootstrap JavaScript eklentisini ve bağımlılığını iki paketimizden birini kullanarak dahil edin. Hem coreui.bundle.js hem de coreui.bundle.min.js, araç ipuçlarımız ve açılır pencerelerimiz için Popper içerir. CoreUI hakkında daha fazla bilgi için lütfen içeriğimize bakın.

<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>

Ayrı

Eğer ayrı betik çözümünü seçerseniz, Popper'ın önce gelmesi gerekir (eğer araç ipuçları veya açılır pencereler kullanıyorsanız), ardından JavaScript eklentilerimiz gelir.

<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>

Modüller

Eğer `kullanıyorsanız, lütfenCoreUI for Bootstrap'ı bir modül olarak kullanma` bölümüne bakın.

Bileşenler

Hangi bileşenlerin özellikle JavaScript ve Popper'ı gerektirdiğini merak mı ediyorsunuz? Aşağıdaki bileşenleri göster butonuna tıklayın.

JavaScript gerektiren bileşenleri göster

• Collapse eklentimizi genişletmek için Akordeonlar
• Dismiss için Uyarılar
• Durumları ve onay kutusu/radyo işlevselliğini değiştirmek için Düğmeler
• Tüm kaydırma davranışları, kontroller ve göstergeler için Carousel
• İçeriğin görünürlüğünü değiştirmek için Collapse
• Gösterim ve konumlandırma için Açılır Listeler (ayrıca Popper gerektirir)
• Gösterim, konumlandırma ve kaydırma davranışı için Modallar
• Duyarlı davranış uygulamak için Collapse eklentimizi genişletmek için Navigasyon Çubuğu
• Gösterim, konumlandırma ve kaydırma davranışı için Offcanvas'lar
• Gösterim ve dismiss için Toast'lar
• Gösterim ve konumlandırma için Araç ipuçları ve açılır pencereler (ayrıca Popper gerektirir)
• Kaydırma davranışı ve navigasyon güncellemeleri için Scrollspy

Bootstrap Yerine Geçme

Eğer projenizde halihazırda Bootstrap kullanıyorsanız veya Bootstrap ile tam uyumluluğu sürdürmek istiyorsanız, CoreUI for Bootstrap'ı projenize nasıl ekleyebileceğinizi kontrol edin. CoreUI, gelişmiş bileşenler ve özellikler ekleyerek Bootstrap projelerini geliştirir ve minimum ayarlamalarla sorunsuz bir yükseltme sunar. Bootstrap'ın tanıdık yapısını korurken UI geliştirme için yeni olanaklar sunar.

bilgi

CoreUI, Bootstrap ile uyumluluğu artırarak kullanıcı deneyimini geliştirmek için tasarlandı.

CSS

Stil sayfasını `` bölümünüze diğer tüm stillerden önce yapıştırın, böylece CSS'mizi yükleyin.

<link href="{{< param "cdn.css_bs" >}}" rel="stylesheet" integrity="{{< param "cdn.css_bs_hash" >}}" crossorigin="anonymous">

JS

Birçok bileşenimizin çalışması için JavaScript kullanımı gereklidir. Özellikle, kendi JavaScript eklentilerimizi ve Popper kullanmaları gerekir. Bunları aktif hale getirmek için aşağıdaki ``lerden birini sayfanızın en altına, kapanış `` etiketinin hemen öncesine yerleştirin.

Paket

Her CoreUI for Bootstrap JavaScript eklentisini ve bağımlılığını iki paketimizden birini kullanarak dahil edin. Hem bootstrap.bundle.js hem de bootstrap.bundle.min.js, araç ipuçlarımız ve açılır pencerelerimiz için Popper içerir.

<script src="{{< param "cdn.js_bs_bundle" >}}" integrity="{{< param "cdn.js_bs_bundle_hash" >}}" crossorigin="anonymous"></script>

Ayrı

Eğer ayrı betik çözümünü seçerseniz, Popper'ın önce gelmesi gerekir (eğer araç ipuçları veya açılır pencereler kullanıyorsanız), ardından JavaScript eklentilerimiz gelir.

<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
<script src="{{< param "cdn.js_bs" >}}" integrity="{{< param "cdn.js_bs_hash" >}}" crossorigin="anonymous"></script>

Başlangıç Şablonu

Sayfalarınızı en son tasarım ve geliştirme standartları ile ayarladığınızdan emin olun. Bu, uygun yanıt verme davranışları için bir HTML5 dosya tipi kullanmak ve bir görünüm meta etiketi eklemek anlamına gelir. Hepsini bir araya getirin ve sayfalarınız şu şekilde görünmelidir:

<!doctype html>
<html lang="en">
  <head>
    <!-- Gerekli meta etiketler -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CoreUI for Bootstrap CSS -->
    <link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">

    <title>Merhaba, dünya!</title>
  </head>
  <body>
    <h1>Merhaba, dünya!</h1>

    <!-- Opsiyonel JavaScript; ikisinden birini seçin! -->

    <!-- Seçenek 1: Popper ile CoreUI for Bootstrap Paketi -->
    <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>

    <!-- Seçenek 2: Ayrı Popper ve CoreUI for Bootstrap JS -->
    <!--
    <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
    <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
    -->
  </body>
</html>

not

Sonraki adımlar için, Düzen belgelerine gidin ve sitenizin içeriğini ve bileşenlerini yerleştirmeye başlayın.

Önemli Küresel Ayarlar

CoreUI for Bootstrap, kullanırken farkında olmanız gereken bir dizi önemli küresel stil ve ayar içerir, bunların tümü neredeyse tamamen tarayıcılar arası stilleri normalleştirmeye yöneliktir. Hadi dalalım.

HTML5 dosya tipi

CoreUI for Bootstrap, HTML5 dosya tipi kullanımını gerektirir. Olmadan, bazı tuhaf eksik stiller göreceksiniz, ancak buna dahil etmek önemli bir aksama yol açmamalıdır.

<!doctype html>
<html lang="en">
  ...
</html>

Duyarlı meta etiketi

CoreUI for Bootstrap mobil öncelikli olarak geliştirilmiştir, bu stratejide önce mobil cihazlar için kodu optimize ediyoruz ve ardından bileşenleri gerekli olduğunda CSS medya sorguları kullanarak ölçeklendiriyoruz. Tüm cihazlarda doğru render ve dokunma yakınlaştırması sağlamak için, duyarlı görünüm meta etiketini `` bölümünüze ekleyin.

<meta name="viewport" content="width=device-width, initial-scale=1">

Bunun bir örneğini başlangıç şablonunda görebilirsiniz.

Kutu boyutlandırma

CSS'de daha basit boyutlandırma için, global box-sizing değerini content-box'tan border-box'a değiştiriyoruz. Bu, padding'in bir öğenin son hesaplanan genişliğini etkilememesini sağlar, ancak Google Haritalar ve Google Özelleştirilmiş Arama Motoru gibi bazı üçüncü taraf yazılımlarda sorunlar yaratabilir.

Nadir durumlarda bunu geçersiz kılmanız gerekiyorsa, aşağıdakine benzer bir şey kullanın:

.selector-for-some-widget {
  box-sizing: content-box;
}

Yukarıdaki kod parçası ile, iç içe öğeler—::before ve ::after aracılığıyla oluşturulan içerik dahil—belirtilen box-sizing'i bu .selector-for-some-widget için miras alır.

tehlike

Global box-sizing değerini değiştirmek bazı durumlarda stil sorunlarına yol açabilir; dikkatli olmalısınız.

Box modeli ve boyutlandırma hakkında daha fazla bilgi için CSS Tricks'i ziyaret edin.

Reboot

Gelişmiş tarayıcılar arası render için, Reboot kullanarak tarayıcılar ve cihazlar arasında tutarsızlıkları düzeltir, aynı zamanda yaygın HTML öğelerine biraz daha iyi resetler sunar.

Topluluk

CoreUI'nin geliştirmeleri hakkında güncel kalın ve bu yararlı kaynaklarla toplulukla iletişime geçin.

• Resmi CoreUI Blogunu okuyun ve abone olun.
• resmi Topluluğa katılın.

Ayrıca @core_ui Twitter'da takip edebilirsiniz.