Hızlı başlangıç
Projenize hızla Bootstrap eklemek mi istiyorsunuz? StackPath’taki kişiler tarafından ücretsiz olarak sağlanan BootstrapCDN’yi kullanın. Bir paket yöneticisi mi kullanıyorsunuz yoksa kaynak dosyaları mı indirmeniz gerekiyor? İndirilenler sayfasına gidin .
CSS
-Kopyala yapıştır stil <link>senin içine <head>diğer tüm stil bizim CSS yüklemek için önce.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
JS
Bileşenlerimizin çoğu, işlevlerini yerine getirmek için JavaScript kullanımını gerektirir. Özellikle, jQuery , Popper.js ve kendi JavaScript eklentilerimizi gerektirirler. Aşağıdakileri etkinleştirmek <script>için sayfaların sonuna, kapanış </body>etiketinin hemen önüne yerleştirin . jQuery önce gelmeli, sonra Popper.js ve ardından JavaScript eklentilerimiz.
Biz kullanmak jQuery’nin ince yapı , ancak tam sürümü de desteklenmektedir.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Bizim bootstrap.bundle.jsve Popperbootstrap.bundle.min.js içerir , ancak jQuery değil . Bootstrap’a neler dahil olduğu hakkında daha fazla bilgi için lütfen bootstrap kategorimize göz atınız
Başlangıç şablonu
Sayfalarınızın en son tasarım ve geliştirme standartlarına göre ayarlandığından emin olun. Bu, bir HTML5 dokümanı kullanmak ve düzgün yanıt veren davranışlar için bir görünüm alanı meta etiketi eklemek anlamına gelir. Hepsini bir araya getirdiğinizde sayfalarınız şöyle görünmelidir:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <title>Seninkodun.com</title> </head> <body> <h1>Merhaba Dünya!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
Genel sayfa gereksinimleri için tek ihtiyacınız olan bu. Sitenizin içeriğini ve bileşenlerini düzenlemeye başlamak için Düzen dokümanlarını veya resim örneklerimizi ziyaret edin .
Önemli küreseller
Bootstrap, neredeyse tamamen çapraz tarayıcı stillerinin normalleştirilmesine yönelik olan, kullanmanız gerektiğinde bilmeniz gereken birkaç önemli küresel stil ve ayar kullanır . İçeri girelim.
HTML5 dokümanı
Önyükleme için HTML5 belgesinin kullanılması gerekir. Onsuz, bazı korkak eksik stiller göreceksiniz, ancak dahil olmak üzere önemli bir hıçkırık yaratmamalıdır.
<!doctype html> <html lang="en"> ... </html>
Duyarlı meta etiket
Bootstrap, önce mobil cihazlar için kodu optimize ettiğimiz ve ardından CSS medya sorgularını kullanarak bileşenleri gerektiği gibi ölçeklendirdiğimiz bir strateji olan mobil olarak geliştirildi . Tüm aygıtlar için doğru oluşturma ve dokunma yakınlaştırmasını sağlamak için duyarlı görünüm alanı meta etiketini bilgisayarınıza ekleyin <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Box-boyutlandırma
CSS’de daha basit boyutlandırma için global box-sizingdeğeri olarak content-boxdeğiştiririz border-box. Bu padding, bir öğenin nihai hesaplanan genişliğini etkilememesini sağlar , ancak Google Haritalar ve Google Özel Arama Motoru gibi bazı üçüncü taraf yazılımlarında sorunlara neden olabilir.
Nadiren geçersiz kılmanız gerekir, aşağıdaki gibi bir şey kullanın:
.selector-for-some-widget {
box-sizing: content-box;
}
Yukarıdaki snippet ile, ::beforeve aracılığıyla oluşturulan içerik dahil olmak üzere iç içe geçmiş öğeler bunun ::afteriçin belirtilenleri devralır .box-sizing.selector-for-some-widget
