Bootstrap - Giriş Grupları
Bu bölüm, Bootstrap'in desteklediği bir özellik olan Giriş Gruplarını açıklamaktadır. Giriş grupları, genişletilmiş Form Denetimleridir . Giriş gruplarını kullanarak, metin tabanlı girişlerin başına kolayca metin veya düğme ekleyebilirsiniz.
Bir giriş alanına eklenen ve eklenen içeriği ekleyerek, kullanıcının girişine ortak öğeler ekleyebilirsiniz. Örneğin, dolar simgesi, Twitter kullanıcı adı için @ veya uygulama arayüzünüz için ortak olabilecek başka herhangi bir şey ekleyebilirsiniz.
Bir öğenin başına veya sonuna eklemek için .form-control-
Sınıf ile bir <div> içine sarın .input-group
Bir sonraki adım olarak, aynı <div> içine, fazladan içeriğinizi bir <span> ile sınıfın içine yerleştirin .input-group-addon.
Şimdi bu <span> <input> öğesinin önüne veya arkasına yerleştirin.
Tarayıcılar arası uyumluluk için, WebKit tarayıcılarında tam olarak biçimlendirilemeyecekleri için burada <select> öğelerini kullanmaktan kaçının. Ayrıca, gruplar oluşturmak için giriş grubu sınıflarını doğrudan uygulamayın. Giriş grubu, yalıtılmış bir bileşendir.
Temel Giriş Grubu
Aşağıdaki örnek, temel giriş grubunu göstermektedir -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle">
</div>
<br>
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-addon">.00</span>
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control">
<span class = "input-group-addon">.00</span>
</div>
</form>
</div>Giriş Grubu Boyutlandırma
Giriş gruplarının boyutunu, göreli form boyutlandırma sınıfları ekleyerek değiştirebilirsiniz. .input-group-lg, input-group-sm, input-group-xs için .input-groupkendisi. İçindeki içerik otomatik olarak yeniden boyutlandırılacaktır.
Aşağıdaki örnekler bunu göstermektedir -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group input-group-lg">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group input-group-sm">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
</form>
</div>Onay Kutuları ve Radyo Eklentileri
Aşağıdaki örnekte gösterildiği gibi metin yerine radyo düğmelerini ve onay kutularının başına veya sonuna ekleyebilirsiniz -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Düğme Eklentileri
Hatta giriş gruplarında düğmeleri önceden veya ekleyebilirsiniz. Onun yerine.input-group-addon sınıf, sınıf kullanmanız gerekecek .input-group-btndüğmeleri sarmak için. Bu, geçersiz kılınamayan varsayılan tarayıcı stilleri nedeniyle gereklidir. Aşağıdaki örnekler bunu göstermektedir -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Açılır Menü İçeren Düğmeler
Giriş gruplarında açılır menülere sahip düğmeler eklemek, düğmeyi ve açılır menüyü bir .input-group-btn aşağıdaki örnekte gösterildiği gibi sınıf -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Parçalı Düğmeler
Giriş gruplarındaki düğme açılır listelerini bölümlere ayırmak için, açılır düğmeyle aynı genel stili kullanın, ancak aşağıdaki örnekte görülebileceği gibi açılır menüyle birlikte bir birincil eylem ekleyin -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default"
tabindex = "-1">Dropdown Menu</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href ="#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default" tabindex = "-1">
Dropdown Menu
</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>