En son web geliştirme öğreticiler
 

Bootstrap Get Started

❮ Önceki Sonraki Bölüm ❯

Nedir Bootstrap ?

  • Bootstrap hızlı ve daha kolay web geliştirme için ücretsiz bir ön uç çerçevesidir
  • Bootstrap tipografi, formlar, düğmeler, tablolar, navigasyon, kipliklerin, görüntü karuselleri ve diğer birçok yanı sıra opsiyonel JavaScript eklentileri için HTML ve CSS tabanlı tasarım şablonları içerir
  • Bootstrap ayrıca kolayca duyarlı tasarımlar oluşturma olanağı verir

What is Responsive Web Design?

Esnek web tasarımı otomatik büyük masaüstü küçük telefonlardan, tüm cihazlarda iyi bakmak için kendilerini ayarlamak web siteleri oluşturmak hakkındadır.

Bootstrap Geçmişi

Bootstrap Twitter Mark Otto ve Jacob Thornton tarafından geliştirilen ve GitHub üzerinde Ağustos 2011'de bir açık kaynak ürünü olarak serbest bırakıldı.

Haziran 2014 yılında Bootstrap GitHub'dan No.1 projesi oldu!

Neden Bootstrap ?

Avantajları Bootstrap :

  • HTML ve CSS sadece temel bilgilere sahip herkes kullanmaya başlayabilirsiniz: Kullanımı kolay Bootstrap
  • Duyarlı özellikler: Bootstrap 'ın duyarlı CSS telefonlar, tabletler ve masaüstü ayarlar
  • Mobil cihazlar ilk yaklaşım In: Bootstrap 3, cep birinci stil çekirdek çerçevenin bir parçasıdır
  • Tarayıcı uyumluluğu: Bootstrap tüm modern tarayıcılar ile uyumludur (Chrome, Firefox, Internet Explorer, Safari, and Opera)

Nereye Gidilir Bootstrap ?

Kullanmaya başlamak için iki yol vardır Bootstrap kendi web sitesinde.

Yapabilirsin:

  • İndir Bootstrap dan getbootstrap.com
  • Dahil Bootstrap bir gelen CDN

İndirme Bootstrap

Indirebilir ve ev sahibi olmak istiyorsanız Bootstrap kendiniz gidin getbootstrap.com ve belirtilen talimatları izleyin.

Bootstrap CDN

Indirebilir ve barındırmak istemiyorsanız Bootstrap kendini, bir onu içerebilir CDN (Content Delivery Network) .

MaxCDN için CDN desteği sağlamak Bootstrap 'ın CSS ve JavaScript. Ayrıca jQuery şunlardır:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

One advantage of using the Bootstrap CDN :
Birçok kullanıcı zaten gelen Bootstrap indirdiğiniz MaxCDN Başka bir siteyi ziyaret sırasında. daha hızlı yükleme süresine yol açmaktadır sitenizi ziyaret ettiklerinde Sonuç olarak, bu önbellekten yüklenecektir. Ayrıca, çoğu CDN's kullanıcı ondan bir dosya isteğinde kez, o da daha hızlı yükleme süresine yol açmaktadır kendilerine en yakın sunucudan servis edilecektir sağlayacağız.

İle İlk Web Sayfası Oluşturma Bootstrap

1. HTML5 Doctype'ı ekle

Bootstrap HTML öğelerini ve HTML5 doküman türü gerektirmektedir CSS özelliklerini kullanır.

Daima birlikte sayfanın başında HTML5 Doctype'ı içerir lang özniteliği ve doğru karakter kümesi:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 mobil cihazlara ilk

Bootstrap 3'e mobil cihazlara duyarlı olacak şekilde tasarlanmıştır. Mobil-ilk stilleri çekirdek çerçevesinin bir parçasıdır.

Aşağıdaki ekleyin düzgün oluşturmayı ve dokunmatik yakınlaştırma sağlamak için <meta> içindeki etiketi <head> elemanı:

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

width=device-width kısmı cihazının ekran genişliği takip genişliğini belirler (which will vary depending on the device) .

initial-scale=1 kısım sayfa ilk tarayıcı tarafından yüklenen ilk yakınlaştırma düzeyini ayarlar.

3. Konteyner

Bootstrap , site içeriğini kaydırmak için bir içeren eleman gerektirir.

Seçim için iki konteyner sınıfı vardır:

  1. .container sınıfı, bir yanıt sabit genişlik kap temin eder
  2. .container-fluid sınıfı görünüm tüm genişliğini kapsayan, tam genişlikli bir kap temin eder

Not: Konteynerler (başka bir kabın içine bir kap koyamazsınız) iç içe geçebilen değildir.

İki Temel Bootstrap Sayfalar

Aşağıdaki örnek, basit bir kodunu göstermektedir Bootstrap sayfa (with a responsive fixed width container) :

Örnek

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Kendin dene "

Aşağıdaki örnek, basit bir kodunu göstermektedir Bootstrap sayfa (with a full width container) :

Örnek

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Kendin dene "

❮ Önceki Sonraki Bölüm ❯