Mobil Cihazlar için Standart Önyükleme Gezinti Çubuğu ve Düğmesi Nasıl Oluşturulur
Yayınlanan: 2022-02-16
Bootstrap bir HTML, CSS ve JavaScript çerçevesidir. Bunu kullanarak, mobil öncelikli duyarlı web sitelerini kolayca oluşturabilirsiniz. Gezinme çubukları da dahil olmak üzere web öğeleri için size önceden ayarlanmış çok sayıda CSS stili sunar.
Bu öğreticide, basit bir Bootstrap duyarlı gezinme çubuğunun nasıl kolayca oluşturulacağını öğreneceksiniz. Ardından, mobil cihazlar için Bootstrap Standart Navbar Düğmesini nasıl kullanacağınızı öğreneceksiniz.
Bootstrap'i kullanabilmek için önce onu yüklemelisiniz. Bu eğitimin amacı doğrultusunda, yerel PC'nizin herhangi bir yerine kurabilirsiniz - bir web sunucusu olması gerekmez. Hadi beraber yapalım.
Aşama 1. Bootstrap'i İndirin
- getboostrap.com'a gidin ve "Bootstrap İndir" düğmesini tıklayın:
- Bir sonraki "Başlarken" sayfasında, başka bir "Bootstrap İndir" düğmesine tıklayın:
- Bu dosyayı sabit sürücünüzde herhangi bir yere kaydedin:
Adım 2. Bootstrap'i yerel PC'nize yükleyin
- Bu dosyayı aç
- Ortaya çıkan klasörü önyükleme olarak yeniden adlandırın
Aşama 3. Temel bir index.html dosyası oluşturun
- Önyükleme klasörünüzde aşağıdaki kodla bir index.htm l dosyası oluşturun:
<!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>4. Adım. Duyarlı bir gezinme çubuğu oluşturun
- Açılış gövdesi div'inin hemen altında, Bootstrap sınıfı kapsayıcısıyla yeni bir div oluşturun:
<div class="container"><!-- Start navbar container div -->
- Biraz boşluk oluşturmak ve bu yeni div'i kapatmak için birkaç kez Enter tuşuna basın:
</div><!-- Finish navbar container div -->
- Yeni kapsayıcı div'inizin içinde yeni gezinme çubuğunuz için gezinme etiketi oluşturun:
<nav class="navbar navbar-default">
- Klavyenizde Enter tuşuna birkaç kez basın ve etiketi kapatın:
- Gezinme etiketinin içinde başka bir kapsayıcı div oluşturun ve gezinme çubuğunun gerçek içeriğini oluşturmaya başlayın:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- <h1> etiketini ve içeriğini silin.
- Navbar-header div'inizin nerede kapandığını bulun ve hemen altında henüz sınıfsız başka bir div oluşturun.
- Bu div içinde, duyarlı gezinme çubuğunuzun gerçek öğelerini içeren sırasız bir liste başlatın:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
- index.html dosyanızı kaydedin.
- Bu dosyayı tarayıcınızda açın. Şimdi duyarlı gezinme çubuğunuzu görmelisiniz. Bunu standart mobil gezinme çubuğu yapmaya neredeyse hazırsınız. Yine de yapmadan önce, biraz geliştirelim.
- Lütfen index.html dosyanıza geri dönün.
- Gezinme etiketinizde, aşağıdaki kodu almak için varsayılanı ters olarak değiştirin:
<nav class="navbar navbar-inverse">
- Dosya 'yı kaydet.
- Sitenize geri dönün ve sayfayı yenileyin. Gezinme çubuğunuz şimdi biraz daha güzel görünüyor:
Aferin! Duyarlı gezinme çubuğunuz artık üzerinde daha fazla çalışmanız için hazır.
Yeni oluşturduğunuz gezinme çubuğunu mobil kullanıcılar için standart Bootstrap menü düğmesiyle nasıl değiştireceğinizi öğrenmek için aşağıdaki videoyu izleyin.