• Bilişim
  • Spor
    • Satranç
  • Kadın ve Çocuk
  • Film
  • Kurumsal
    • İletişim
    • Hakkımızda
    • Künye
    • Gizlilik Politikası
  • Daha Fazla
    • Haberler
    • Antalya Etkinlikleri
    • Hangi Kanalda
    • Antalya Özel
    • Genel
    • Kitap
Kültür Kaynağı
  • Bilişim
  • Spor
    • Satranç
  • Kadın ve Çocuk
  • Film
  • Kurumsal
    • İletişim
    • Hakkımızda
    • Künye
    • Gizlilik Politikası
  • Daha Fazla
    • Haberler
    • Antalya Etkinlikleri
    • Hangi Kanalda
    • Antalya Özel
    • Genel
    • Kitap
  • Facebook

  • Pinterest

  • Google+

  • RSS

Bilişim

Bootstrap Nedir ? Nerede Kullanılır? Nasıl Kullanılır?

Bootstrap Nedir ? Nerede Kullanılır? Nasıl Kullanılır?
admin
03 Nisan 2017

Bootstrap Nedir ? Nerede Kullanılır? Nasıl Kullanılır?

Bootstrap, Html 5 yapısını kullanan, css yapısıyla zenginleştirilmiş, özellikle responsive (Mobil uyumluluk) tasarımları kolayca geliştirebilmek için üretilmiş bir kütüphanedir.

Mobil cihazların yaygın olarak kullanılmasıyla beraber, site tasarımlarının mobil cihazlardaki (cep telefonu, tablet vb.) görünümü hayli önem kazanmıştır. Mobil cihazların ekranlarının ve çözünürlüklerinin küçük olması sebebiyle masaüstü ortamları için tasarlanan internet sitelerinin bu cihazlarda görünürlük problemleri ortaya çıkmıştır. Küçük ekranlı cihazlarda tam sayfa görünen sitelerin okuma zorluğu tasarımcıların, sitenin mobil uyumluluğu üzerinde çalışmasını da zorunlu kılmaktadır. Ayrıca mobil uyumluluk Google gibi arama motorları için önemli referanslardandır.

Mobil uyumlu sitelerin kullanılabilirliği ve okunabilirlik deneyimi şüphesiz responsive olmayan sitelere göre daha başarılı. tasarımcılar ve programlayıcılara yönelik olarak responsive tasarımlar yapmaya yardımcı olacak en önemli kütüphane bootstrap kütüphanesidir. Meraklıları için yazı dizisi oluşturmaya karar verdim.

Bootstrap Nasıl Kullanılır ?

bootstrap’ın hazır bir kütüphane olduğunu ifade etmiştim. Bootstrap kütüphanesini bağlantı adresinden indirebilirsiniz.

Sarıyla boyadığım indirme türü çekirdek olarak başlangıç düzeyinde işimizi görecektir. Dilerseniz web Programcılarının daha gelişmiş içerikler oluşturmasına yardımcı olacak bootstrap kaynak dosyalarını da ilgili bağlantıdan indirebilirsiniz.

BootStrap’ın Dosya Yapısı
İndirdiğimiz Bootstrap dosyasının hiyerarşik dosya yapısı bu şekildedir.  İndirdiğimiz dosya paketi içerisinde css, js ve fonts olmak üzere 3 klasör göreceğiz. Bu üç klasörü sitemizin kök klasörüne kaydetmemiz gerekiyor.

├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

Ben Uygulamaları ve örnekleri Visual Studio yazılımı üzerinde gerçekleştireceğim. DreamVeawer, brackets yada başka tasarım editörlerinde de uygulama geliştirebilirsiniz.

Ayrıca Bootstrap ile içerik üretebilmek için css klasörü içerisinde yer alan bootstrap.min.css dosyasının sayfaya çağrılması gerekiyor. Aşağıdaki kodu sayfamızın <head></head> bloklarının arasına yerleştirmeyi unutmayacağız.
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
Sayfamızın bir html 5 dökümanı olması için eklediğimiz sayfanın başlangıç kısmın aşağıdaki şekilde düzenliyoruz.

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

/head>

<body>
…….
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script> <script src=”js/bootstrap.min.js”></script>

</body></html>

Body kod bloğu bitmeden hemen önce;

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”>

</script> <script src=”js/bootstrap.min.js”></script>

2 script kod satırı bloğunu sayfamıza dahil etmemiz gerekiyor.

En sade haliyle bir bootstrap çalışma sayfası hazırlamış olduk. İlgili düzenlemeleri yaptıysanız eğer artık mobil uyumlu sayfalar hazırlamaya hazırsınız demektir.
*** Soru sormak için sayfamızın yorum bölümünü kullanabilirsiniz. Sorduğunuz sorulara mutlaka 48 saat içerisinde cevap verilecektir. Bir sonraki dersimizde görüşmek üzere…

Visual Studio ile hazırlanmış Örnek Bootstrap Çalışma Sayfası

Related Itemsbootstrap nasıl kullanılırbootstrap neden kullanılırbootstrap nedirbootstrap visual studiobootstrap visual studio nasıl kullanılırFeaturedmobil uyumlu tasarım nasıl yapılırvisual studio bootstrap eklemevisual studio bootstrap kullanmavisual studio ile responsive tasarım nasıl yapılırvisual studio örnek bootstrap dosyası
Yorumları Oku (2)

2 Comments

  1. seyfi

    03 Nisan 2017 at 15:04

    devamını bekliyoruz. Türkçe kaynak adına güzel bir çalışma olmasını diliyorum.

    Cevapla
    • İbrahim FİDANCAL

      03 Nisan 2017 at 15:06

      2. Ders hazir sayilir. Yorum icin tesekkurler.

      Cevapla

Yorum Bırakmadan Geçme :)

Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bilişim
03 Nisan 2017
admin

...

Related Itemsbootstrap nasıl kullanılırbootstrap neden kullanılırbootstrap nedirbootstrap visual studiobootstrap visual studio nasıl kullanılırFeaturedmobil uyumlu tasarım nasıl yapılırvisual studio bootstrap eklemevisual studio bootstrap kullanmavisual studio ile responsive tasarım nasıl yapılırvisual studio örnek bootstrap dosyası

İlişkili Bilişim

DualSense rahatlığı PC’de de kullanılıyor

admin24 Aralık 2021
İNCELE

Güvenilir YouTube’dan MP3’e Dönüştürücü

admin24 Kasım 2020
İNCELE

Dijital Pazarlamadan Daha Fazla Değer Elde Etmenin Dört Yolu

admin23 Eylül 2020
İNCELE

Blog Yazarlığından Ayda Ne Kadar Para Kazanılır?Kaç İzlenme Kaç TL?

Emre Kasap19 Eylül 2019
İNCELE

Apple, Yenilikçi Yapay Zeka Sistemi (Overton)?

Emre Kasap16 Eylül 2019
İNCELE

Apple İPhone 11 ve 11 Pro Türkiye fiyatı ve bütün özellikleri neler? İPhone 11 yurt dışı fiyatları neler?

Emre Kasap13 Eylül 2019
İNCELE

Montaj Şirketi Flex, Huawei Üretimlerini Durdurdu

Yunus Sönmez25 Mayıs 2019
İNCELE

SpaceX 60 İnternet Uydusunu Uzaya Gönderdi

Yunus Sönmez24 Mayıs 2019
İNCELE
div ile tasarım

html div ile Sayfa Tasarımı Örnekleri

admin16 Kasım 2018
İNCELE
Devamı İçin Kaydır
Tap

Film/Dizi Önerilerimiz

  • italya gizem filmleri 2
    İtalyan Yapımı En İyi Gizem Filmleri | İtalya Gizem Filmleri
    Film Önerileri07 Ocak 2019
  • sonu sürprizli ispanyol filmleri
    İspanya Yapımı En İyi Gizem Filmleri Listesi
    Film Önerileri16 Nisan 2018
  • Avengers: Sonsuzluk Savaşı
    Nisan Ayında Vizyona Girecek Filmler -2018
    Film Önerileri02 Nisan 2018
  • amir khan son filmi
    Aamir Khan’ın Son Filmi Secret Superstar – Gizli Süper Yıldız
    Film Önerileri02 Nisan 2018
  • gözlerindeki sır arjantin
    Arjantin Sinemasının Dudak Uçuklatan En Güzel Filmleri
    Film Önerileri27 Mart 2018

Kültür Kaynağı
Bumerang - Yazarkafe

Facebook

Bloga e-posta ile abone ol

Bu bloga abone olmak ve e-posta ile bildirimler almak için e-posta adresinizi girin.

Diğer 358 aboneye katılın




Tüm Hakları Saklıdır.Copyright © 2014 | Antalya Avukat, Antalya Hukuki Danışman

2017 Dünya İnternet Klavye Şampiyonası
Bootstrap ile Buton Kullanımı