Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları

  • Onur YURT
  • iletisim@hazirsitekodlari.com
  • 57

    Makale

  • 3

    Yorum

  • 8

    Kategori

Webmaster adına tüm bilgi ve paylaşım platformudur.

Senin Kodun

Ana Sayfa / Bootstrap / Bootstrapa sıfırdan başlıyoruz

Bootstrapa sıfırdan başlıyoruz

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>
Hangi bileşenlerin açıkça jQuery, JS ve Popper.js gerektirdiğini mi merak ediyorsunuz? Aşağıdaki bileşenleri göster bağlantısını tıklayın. Genel sayfa yapısından emin değilseniz, örnek sayfa şablonu için okumaya devam edin.

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

 

BENZER KONULAR

Bootstrap Örnek Şablonlar
Bootstrap Örnek Şablonlar DEVAMI
  • 5 Haziran 2020 | 0 | 527
Bootstrap Nedir?
Bootstrap Nedir? DEVAMI
  • 11 Mayıs 2020 | 0 | 338
Bootstrap | Kategorisine Ait Yazıların Daha Fazlası...

KONU HAKKINDA (Yorum Yapılmamış) | SENDE YORUM YAP DESTEK OL!

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

BEN KİMİM?

Onur YURT

Web Developer And Coder

Merhaba arkadaşlar Adım Onur YÜRT Bursada doğdum ve yaşıyorum 2009 yılından itibaren web hayatına adım attım ve şuanda bulunduğum sayfayı açtım amaçım sizlere birşeyler öğretmek ve kazandırmak Web tasarım konusunda kendimi yeterince geliştirdiğime inanıyorum bu bilgileri zamanla siz değerli takipçilerime sunmak yeterince bildiğim kodlama diller Css3, Html5, Javascript ve Php dir.

POPULER KONULAR

Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları...