Bootstrap 3 Öğretimi Bölüm 4

 Önceki Bölümler :


Bootstrap Navigation Bar

Navigation Bar'ları

Bu barlar sayfalarınızın üst kısmında yer alan ve siteniz içinde değişik sayfalara geçişlere imkan sağlayan menülerdir. 

Bootstrap navigation bar'ları (gezinme çubuğu) ekran boyutlarına göre otomatik olarak kapanıp açılabilir. Standart gezinti çubuğu <nav class="navbar navbar-default"> elemanı kullanarak üretilir. Aşağıdaki örnek sayfanın üzerine nasıl navbar ekleneceğini gösteriyor.

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Adı</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Sayfa 1</a></li>
            <li><a href="#">Sayfa 2</a></li>
            <li><a href="#">Sayfa 3</a></li>
        </ul>
    </div>
</nav>


Not : Burada verilen örneklerdeki gezinti çubukları hep sayfa genişliğinde ancak daha dar ekranlar için en sonda bir örnek verilmiştir.



Ters Renk Navbar

Eğer default navbar görüntüsünü beğenmediyseniz, .navbar-default yerine .navbar-inverse sınıf ismini kullanın.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Adı</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Sayfa 1</a></li>
            <li><a href="#">Sayfa 2</a></li>
            <li><a href="#">Sayfa 3</a></li>
        </ul>
    </div>
</nav>



Açılır Menülü Navbar

Aşağıda Sayfa 1 linkine açılır menü eklenen bir örnek görülüyor.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Adı</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ana Sayfa</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Sayfa 1<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Sayfa 1 - 1</a></li>
                    <li><a href="#">Sayfa 1 - 2</a></li>
                    <li><a href="#">Sayfa 1 - 3</a></li>
                </ul>
            </li>
            <li><a href="#">Sayfa 2</a></li>
            <li><a href="#">Sayfa 3</a></li>
        </ul>
    </div>
</nav>



Sağ Tarafta Nav Elemanı

Navbar butonlarından bazılarının sağ tarafa dayalı olmasını isterseniz. .navbar-right sınıfı kullanırsınız. Aşağıda siteye kullanıcı giriş yapan linkleri glyphicon sembolleri ile sağ tarafta gösteren örnek var.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Adı</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Sayfa 1</a></li>
            <li><a href="#">Sayfa 2</a></li>
            <li><a href="#">Sayfa 3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Kayıt Ol</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Giriş Yap</a></li>
        </ul>
    </div>
</nav>



Navbar Üzerinde Buton

Bootstrap butonlarını .navbar-btn sınıf adı ekleyerek gezinti çubuğunda kullanabilirsiniz.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Adı</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Sayfa 1</a></li>
            <li><a href="#">Sayfa 2</a></li>
        </ul>
        <button class="btn btn-danger navbar-btn">Buton</button>
    </div>
</nav>



Navbar Üzerinde Form Elemanları

Form elemanları ekleyebilmek için form elemanına .navbar-form sınıfı eklenir. Aşağıdaki örnekte input elemanını .form-group sınıfı bir div içine yerleştirerek padding sağladık. Bunu ilerde form elemanlarında göreceğiz. 

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Adı</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Sayfa 1</a></li>
            <li><a href="#">Sayfa 2</a></li>
        </ul>
        <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Ara">
            </div>
            <button type="submit" class="btn btn-default">Gönder</button>
        </form>
    </div>
</nav>



Navbar İçinde Yazı

Bir paragraf yazısını diğer menü elemanları ile hizalı olacak şekilde yerleştirmek için .navbar-text sınıf adı kullanılır.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Adı</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Sayfa 1</a></li>
            <li><a href="#">Sayfa 2</a></li>
        </ul>
        <p class="navbar-text">Bir Yazı</p>
    </div>
</nav>



Üste Sabitlenmiş Navbar

nav elemanına .navbar-fixed-top sınıfı eklenirse sayfanın en üstüne yayılır ve aşağı gidildikçe hala en üstte görünmeye devam eder.

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Adı</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Sayfa 1</a></li>
            <li><a href="#">Sayfa 2</a></li>
        </ul>
    </div>
</nav>


Benzer şekilde .navbar-fixed-bottom ile gezinti bar sürekli sayfanın en altında görünür. 


Açılır Kapanır Navbar

Küçük ekranlarda navbar'ın sadece istenirse görünmesi için aşağıdaki örnek kullanılır.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Bu navbar 768 pikselden daha dar ekranlarda sadece sağ tarafta 3 çizgili bir buton olarak görünecek ve butona tıklanınca menü aşağı doğru açılacaktır.




Bootstrap Formları

Default Form Stilleri

Form kontrolleri bootstrap'tan default stilller alırlar. Tüm <input>, <textarea>, ve <select> yazı elemanları eğer .form-control sınıfına sahipse tüm genişliği kaplarlar.



Bootstrap Form Yerleşimi

Bootstrap 3 değişik form yerleşimi sunar

  • Dikey formlar (default stil)
  • Yatay formlar
  • Satır içi formlar

Üç form yerleşimi için ortak yerleşim kuralları:

  • Etiketleri ve kontrolleri <div class="form-group"> elemanı içine yerleştirilir. Böylece optimum boşluklar sağlanır.
  • Tüm <input>, <textarea>, ve <select> yazı elemanlarına .form-control sınıfı verilir.



Bootstrap Dikey Form (Default)

Aşağıdaki örnek iki input, bir checkbox ve bir gönder butonu olan form gösteriyor.

<form action="/action.php">
    <div class="form-group">
        <label for="email">Email Adresi : </label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
        <label for="pwd">Şifre : </label>
        <input type="password" class="form-control" id="pwd">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Beni Hatırla</label>
    </div>
    <button type="submit" class="btn btn-default">Gönder</button>
</form>



Bootstrap Satıriçi Form

Satır içi formda tüm elemanlar tek bir satır içerisine yerleşir. Sola yanaşık yerleşir ve etiketler yan yanadır. 

Not : Bu stil sadece 768 piksel ve daha fazla genişlikte sayfalarda kullanılır.

Satır içi form stili için <form> elemanına .form-inline sınıfı eklenir. 

<form class="form-inline" action="/action.php">
    <div class="form-group">
        <label for="email">Email Adresi : </label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
        <label for="pwd">Şifre : </label>
        <input type="password" class="form-control" id="pwd">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Beni Hatırla</label>
    </div>
    <button type="submit" class="btn btn-default">Gönder</button>
</form>


İpucu : Eğer her kontrole bir label elemanı vermezseniz ekran okuyucu uygulamaları formunuzu analiz ederken sorun yaşar. label elemanlarınızda .sr-only sınıfı kullanarak ekran okuyucu kullanmayan tarayıcılarda etiketlerin görünmesini engelleyebilirsiniz.



Bootstrap Yatay Formlar

Yatay formlarda etiketler ve bağlı oldukları kontroller aynı satırda yerleştirilir. 768 pikselden dar ekranlarda aynı dikey form gibi alt alta dizileceklerdir. 

Yatay formlar için ilave kurallar:

  • <form> elemanına .form-horizontal sınıfı ekleyin.
  • <label> elemanlarının hepsine .control-label sınıfı ekleyin

İpucu : Yatay formlarda düzgün görünüm sağlamak için bootstrap grid sistemi kullanabilirsiniz.

<form class="form-horizontal" action="/action_page.php">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Email Giriniz">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Şifre:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Şifre Giriniz">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Beni hatırla</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Gönder</button>
    </div>
  </div>
</form>




Bootstrap Form Giriş Elemanları

Desteklenen Form Kontrolleri

Bootstrap aşağıdaki form kontrollerini destekler:

  • input
  • textarea
  • checkbox
  • radio
  • select



Bootstrap Input Elemanı

Bootstrap tüm HTML5 <input> eleman tiplerini destekler : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ve color.

Not : Eğer tipleri belirtilmemişse input elemanları düzgün stillenemeyebilir.

Aşağıda biri yazı diğeri şifre stilinde iki input elemanı olan bir form örneği görüyorsunuz.

<form action="/action_page.php">
    <div class="form-group">
        <label for="usr">İsim:</label>
        <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group">
        <label for="pwd">Şifre:</label>
        <input type="password" class="form-control" id="pwd">
    </div>
</form>



Bootstrap Textarea

Aşağıda textarea elemanının kullanımı örnek veriliyor.

<form action="/action_page.php">
    <div class="form-group">
        <label for="comment">Yorum:</label>
        <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
</form>



Bootstrap Checkbox

Checkbox elemanını kullanıcının seçeneklerden bir yada birkaçını seçmesi için bir liste sunmak amacıyla kullanırsınız. Aşağıdaki örnek 3 checkbox içerir sonuncusu disable durumdadır.

<div class="checkbox">
  <label><input type="checkbox" value="">Seçenek 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Seçenek 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Seçenek 3</label>
</div>


Eğer seçeneklerin aynı satırda olmasını isterseniz .checkbox-inline sınıfını kullanın.

  <label class="checkbox-inline"><input type="checkbox" value="">Seçenek 1</label>
  <label class="checkbox-inline"><input type="checkbox" value="">Seçenek 2</label>
  <label class="checkbox-inline"><input type="checkbox" value="" disabled>Seçenek 3</label>


Bootstrap Radio Butonlar

Radio butonlar kullanıcının seçeneklerden sadece birini seçmesini istediğinizde kullanacağınız elemanlardır. 

Aşağıda 3 seçenekli radio buton örneği var, ilki default seçili geliyor ve sonuncusu da disabled durumda.

<div class="radio">
  <label><input type="radio" name="optradio" checked>Seçenek 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Seçenek 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Seçenek 3</label>
</div>


Burada input elemanlarının hepsi name özelliği aynı olduğu için bir seçenek seçilince diğerleri otomatik olarak bırakılacakıtr. 

Bunların da aynı satırda görünmesi için bu sefer .radio-inline sınıfı kullanılır.

  <label class="radio-inline"><input type="radio" name="optradio" checked>Option 1</label>
  <label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
  <label class="radio-inline"><input type="radio" name="optradio" disabled>Option 3</label>



Bootstrap Select Elemanları

Select listeleri genelde formlar içinde kullanıcıya birden fazla seçeneğin listesini göstermek ve bir ya da birkaçını seçmesini istemek için kullanılır. Aşağıda tek seçimli ya da birden fazla seçime izin veren select eleman örnekleri var.

  <form>
    <div class="form-group">
      <label for="sel_1">Seçim listesi (birini seçin):</label>
      <select class="form-control" id="sel_1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel_2">Çoklu seçim listesi (ctrl veya shift tuşunu basılı tutarak
birden fazla seçim yapılabilir):</label>
      <select multiple class="form-control" id="sel_2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>




Bootstrap Form Statik Kontrol

Eğer bir yatay formda bir label'a bağlı ama değer girilmeyip sadece değer gösterilen bir sabit yazı için .form-control-static sınıfına sahip bir <p> elemanı kullanın.

  <form class="form-horizontal" action="/action_page.php">
    <div class="form-group">
      <label class="control-label col-sm-2">Email:</label>
      <div class="col-sm-10">
        <p class="form-control-static">someone@example.com</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>

someone@example.com



Bootstrap Input Grupları

Input grupları formlarda <input> elemanları başına bir label ile ayrı belirtici yazı koymak yerine elemana yapışık olarak bir sembol ya da açıklayıcı bir yazı göstermeye imkan sağlar. .input-group sınıfı kapsayıcı sınıf olarak kullanılır ve .input-group-addon sınıfı kullanarak da bir sembol ya da yazı eklenir.

<form>
  <div class="input-group">
    <span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i></span>
    <input id="email" type="email" class="form-control"
name="email" placeholder="Email">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><
i class="glyphicon glyphicon-lock"></i></span>
    <input id="password" type="password" class="form-control"
name="password" placeholder="Password">
  </div>
  <div class="input-group">
    <span class="input-group-addon">Text</span>
    <input id="msg" type="text" class="form-control"
name="msg" placeholder="Additional Info">
  </div>
</form>

Text


.input-group-btn ise input sonrasına sembollü bir buton ekler, bu genelde arama butonları için kullanılır.

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>



Bootstrap Form Kontrolleri Durumları

  • Odaklanılmış input : Bir input elemanının içine tıklanıp odaklandığında oluşur. Input elemanının çerçevesi kaldırılır, yerine gölgeli bir kutu görüntüsü gelir.
  • Disable input : Bir input elemanına bilgi girişinin engellendiği durumdur. Bunun için disabled özelliği kullanılır.
  • Disable alanlar : Bir alanın içindeki tüm elemanları disaled etmek için kapsayan alana disabled özelliği verilir.
  • Sadece okunabilir input : Bir input elemanına bilgi girişini engelleyip sadece okunabilir olması için readonly özelliği kullanılır. 
  • Doğrulama durumları : Bootstrap input değerlerinde hata, uyarı ve başarılı girdi gösterimi için onu kapsayan elemana .has-warning, .has-error, veya .has-success sınıfı eklenir. 
  • İkonlar : Kapsayan elemana .has-feedback sınıfı ekleyerek ve input elemanı sonrasına bir ikon ekleyerek input elemanına bilgilendirme feedbak sembolü eklenebilir.
  • Görünmez etiketler : Görünmeyen ama ekran okuyucu programların algılayacağı etiketler için .sr-only sınıfı eklenir. 

  <form class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">Odaklanılmış </label>
      <div class="col-sm-10">
        <input class="form-control" id="focusedInput" type="text"
           value="Odaklanmak için tıklayın...">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledInput" class="col-sm-2 control-label">Disable</label>
      <div class="col-sm-10">
        <input class="form-control" id="disabledInput" type="text"
           placeholder="Bu bir disabled input..." disabled>
      </div>
    </div>
    <fieldset disabled>
      <div class="form-group">
        <label for="disabledTextInput" class="col-sm-2 control-label">
            Disabled input ve select liste (Fieldset alan olarak disabled)</label>
        <div class="col-sm-10">
          <input type="text" id="disabledTextInput" class="form-control"
             placeholder="Disable input">
        </div>
      </div>
      <div class="form-group">
        <label for="disabledSelect" class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
          <select id="disabledSelect" class="form-control">
            <option>Disable select list</option>
          </select>
        </div>
      </div>
    </fieldset>
    <div class="form-group has-success has-feedback">
      <label class="col-sm-2 control-label" for="inputSuccess">
        Başarılı input ve glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputSuccess">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="col-sm-2 control-label" for="inputWarning">
        Uyarı input ve glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputWarning">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
    </div>
    <div class="form-group has-error has-feedback">
      <label class="col-sm-2 control-label" for="inputError">
        Hatalı input ve glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputError">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
    </div>
  </form>


Aşağıda satır içi elemanlarda benzer durumlar gösterilmiş.

<form class="form-inline">
  <div class="form-group">
    <label for="focusedInput">Odaklı</label>
    <input class="form-control" id="focusedInput" type="text">
  </div>
  <div class="form-group">
    <label for="inputPassword">Disable</label>
    <input class="form-control" id="disabledInput" type="text" disabled>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="inputSuccess2">Başarılı input</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label for="inputWarning2">Uyarılı input</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="inputError2">Hatalı input</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>



Sonraki sayfalar :






Hiç yorum yok:

Yorum Gönder

Kaydol: Yorumlar (Atom)