4 EYLÜL 2013, ÇARŞAMBA
Nasıl Bootstrap 3 gezinti çubuğu simgesi ile bir arama kutusu eklemek için?
Yeni Twitter Bootstrap 3, ve böyle bir arama kutusu (aşağıda) yerleştirmek için çalışıyorum kullanıyorumüst gezinti çubuğu:
2, ben bu şekilde yapmış olabilir bu Önyükleme:
<form class="form-search" method="get" id="s" action="/">
<div class="input-append">
<input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
<button type="submit" class="add-on"><i class="icon-search"></i></button>
</div>
</form>
Ama çok değişmiş olarak Bootstrap 3 ile aynı üretmek için nasıl emin değilim.
Bootstrap 3 gezinti çubuğu arama kutusuna form için varsayılan HTML
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Nasıl ihtiyacım olanı elde etmek için değiştirmek?
CEVAP
4 EYLÜL 2013, ÇARŞAMBA
Dev bir site ve isteyen sensin/düzeni etkiler aşağıdaki üretiyor BS3 koşuyorum. Tabii ki glyphicons BS3 kurmak gerekir.
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="Aahan Krish's Blog - Homepage">ITSMEEE</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="/topic/notes/">/notes</a></li>
<li><a href="/topic/dev/">/dev</a></li>
<li><a href="/topic/good-reads/">/good-reads</a></li>
<li><a href="/topic/art/">/art</a></li>
<li><a href="/topic/bookmarks/">/bookmarks</a></li>
<li><a href="/all-topics/">/all</a></li>
</ul>
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
GÜNCELLEME: JSFiddle
Bunu Paylaş:
Nasıl gezinti çubuğu daraltmak eşik bo...
Nasıl çok amaçlı Adres çubuğu arama si...
Nasıl Açısal JS ile bootstrap gezinti ...
Nasıl bir kabuk için bir ilerleme çubu...
Nasıl Gezinti Çubuğu iOS 7 renk değişt...