twitter bootstrap - How to put the thumbails correctly inside the tab content -
i wanted create ui layout twitter bootstrap. wanted achieve have list of thumbnails search results inside tab. except first row other rows having 3 items. not in css. please on achieving layout.
<div class="container-fluid"> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">title</a> <div class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <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 class="nav-header">nav header</li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> <form class="navbar-search pull-left" action="#"> <input type="text" class="search-query span5" placeholder="search"> </form> <ul class="nav pull-right"> <li><a href="#">link</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <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> </li> </ul> </div> <!-- /.nav-collapse --> </div> </div> <!-- /navbar-inner --> </div> <ul class="breadcrumb"> <li><a href="#">home</a> <span class="divider">/</span></li> <li><a href="#">library</a> <span class="divider">/</span></li> <li class="active">data</li> </ul> <div class="row-fluid"> <div class="span2"> <form class="form"> <!-- text input--> <div class="control-group"> <label class="control-label" for="brandname">brand</label> <div class="controls"> <input id="brandname" name="brandname" type="text" placeholder="enter brand name of item" class="input-large" data-bind="typeahead: { source: brandsuggestions, minlength: 2 }, value: brand"> <p class="inputerror" data-bind="validationmessage: brand"></p> </div> </div> <!-- button drop down --> <div class="control-group"> <label class="control-label" for="itemcategory">item category</label> <div class="controls"> <div> <select class="combobox" id="itemcategory" data-placeholder="select item category" data-bind="options: itemcategory, value: selecteditemcategory"></select> </div> <p class="inputerror" data-bind="validationmessage: itemcategory"></p> </div> </div> <!-- button drop down --> <div class="control-group"> <label class="control-label" for="itemsubcategory">item sub category</label> <div class="controls"> <div> <select class="combobox" id="itemsubcategory" data-placeholder="select item subcategory" data-bind="options: itemsubcategory, value: selecteditemsubcategory"></select> </div> <p class="inputerror" data-bind="validationmessage: itemsubcategory"></p> </div> </div> <!-- range slider--> <div class="control-group"> <label class="control-label" for="rating">rating</label> <div id="rating"></div> </div> <!-- button drop down --> <div class="control-group"> <label class="control-label" for="itemcondition">item condition</label> <div class="controls"> <div> <select class="combobox" id="itemcondition" data-placeholder="select item condition" data-bind="options: itemcondition, value: selecteditemcondition"></select> </div> <p class="inputerror" data-bind="validationmessage: itemcondition"></p> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> has image </label> </div> </div> <!-- button drop down --> <div class="control-group"> <label class="control-label" for="soldby">sold by</label> <div class="controls"> <div> <select class="combobox" id="soldby" data-placeholder="select items sold by" data-bind="options: soldby, value: selectedsoldby"></select> </div> <p class="inputerror" data-bind="validationmessage: soldby"></p> </div> </div> <input type="button" class="btn" data-bind="click: filter" value="filter search" /> </form> </div> <div class="span10"> <p>something search.</p> <div class="tabbable tabs-right"> <ul class="nav nav-tabs"> <li class="active"><a href="#ra" data-toggle="tab">tab1</a></li> <li><a href="#rb" data-toggle="tab">tab2</a></li> <li><a href="#rc" data-toggle="tab">tab3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="ra"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="300x200" style="width: 300px; height: 200px;" src="data:image/png;base64,ivborw0kggoaaaansuheugaaaswaaadicayaaabs39xvaaai7kleqvr4xu3bmu8uaxqg4cfekyiawmmlhctev09baiydstykvnsrqqlem9lkun9dz9ldzrbepy8lzsi5z/v5znyd9maz2t+dpwqieagq2fnyaskzkqcbuydcchaieigrufgxurmuaagf5qwqibajolbiojioaqikyxkgqcbgqghfrgvqagquljnagecmgmkkicqgbagolgeaaieyayuve5vbcrbqwm4aaqixagorjiqdeicgsjwbagribbrwtfqgjubaytkdbajeccismkgmsocawnigcbcievbymvezlaabheumecaqi6cwyqiykaeccsszieagrkbhxurluaiefjyzqibajidcionkoaqikcxngacbgagffrovqqkqufjoaaecmqikkyyqgxigolccaqieygquvkxubivaqge5awqixagorjiodeqagmjybggqibfqwdfrgzqaayxldbagecogsgkimigbagrlgsbaiezaycvezvacbbswm0caqiyawoqjyqaeccgsz4aagrgbhrutluejefbyzgabajeccismkomsikcwnaecbgieffzmvaylqebhoqmecmqikkyyqaxkgidccgyieigrufgxurmuaagf5qwqibajolbiojioaqikyxkgqcbgqghfrgvqagquljnagecmgmkkicqgbagolgeaaieyayuve5vbcrbqwm4aaqixagorjiqdeicgsjwbagribbrwtfqgjubaytkdbajeccismkgmsocawnigcbcievbymvezlaabheumecaqi6cwyqiykaeccsszieagrkbhxurluaiefjyzqibajidcionkoaqikcxngacbgagffrovqqkqufjoaaecmqikkyyqgxigolccaqieygquvkxubivaqge5awqixagorjiodeqagmjybggqibfqwdfrgzqaayxldbagecogsgkimigbagrlgsbaiezaycvezvacbbswm0caqiyawoqjyqaeccgsz4aagrgbhrutluejefbyzgabajeccismqqch/fxrv3d9fd3d3d09xnh8fnydnz2nvvdz58/dbdz79mvx5fzx40d3exnz/fz58/ele3t73adpn7rdw8pfvs1lz7vuxq6bvkbhteu7le8+9o9/+mfhr0fdx48fh+cyk7bnuhatrb9//959+/zt6utot0+7k5ot+d+/hnk32c210woorgl9t/ldv3792t3c3mx/1vv377sphz50y1/r/779+lambyemr9/02nuxbquovapq7/a+fpkyl6h3797ns/bnmzcvpu+6e7luowikazvok/2utgdaf+htaqwl1f7b3nmnfx2ta5evzvg59su0vbvcvpsb3vynrxzwcpd4nvc5550sdn94cggfntnxy/ya9jof4u6qfeu4+pnwcp1qen1pdmwy6trfo6ghijfdus0twsysttxwzbdpvc+tip/6twik628fx9nrfz8faj8pau+elhxachdzf3//+bzt1bx9h+sld3rn5+fd1dxv/ep19s5vgvdbpspd1jtzvrlyjlomgmjaeyrlsvyzqn7m9q3u1axqfv/+7dzdw8ocrs3nvxdx7fvtz5usqtn/e1byo3oaxv6xb6mannn8ykbvx9pezw1j3h2nf2fxulg7g23xlx4mtmnbve2ubz+baktmnburzwxvv1zh7fdh/mpvfnyfwiw8bnsfyo89m/xu51dplvxvo+v/eitkz8bfbrrw+kly5y5kki39/f3hxwtailn1wmoqawfc9voz/shp29vb+v+npxhfllx77fcbx7jhnp5r3vdos46vsmjjx7yrgxsytc2mqr4cbyuz/6d/4ulif78q1h7w3s6w+czwyhxtzrsee9nxfdyorl/4uvg70ujbsil+1wwdp9ehynrq14igudsn4keydwcil7ucwtqr6mekyfu//nw++7xsma2eux/r9/bt2yd/j7c/buyxodf538dnrt2r+musobdkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+qikkz9dgxaoi6cwykrtuql5agorp0mbecgjoldkrg1ravkccis/qxsqkcogsmpebvec+ql/ag1tkdptl19vaaaaaelftksuqmcc"> <div class="caption"> <h3>thumbnail label</h3> <p><a href="#" class="btn btn-primary">action</a> <a href="#" class="btn">action</a></p> </div> </div> </li> </ul> </div> <div class="tab-pane" id="rb"> <div data-bind="compose: 'viewmodels/checkinlist'"></div> </div> <div class="tab-pane" id="rc"> <div data-bind="compose: 'viewmodels/buylist'"></div> </div> </div> </div> </div> </div> </div> attached screenshot 
if want 7 thumbnails inside span10 should include 3 .span3 thumbnail classes in row because 4 span3 classes constitute span12 not fit span10. if following span10 division keep 3 span3 classes in row.
coming solution, include 3 thumbnails row div followed row div having 3 thumbnails , followed div containing 1 thumbnail.
the structure looks below:
<!-- 3 thumbnail div's in first row--> <div class="span10"> ...... <div class="row"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <img ...> <div class="caption"> <h3>thumbnail label</h3> <p> <a href="#" class="btn btn-primary">action</a> <a href="#"class="btn">action</a> </p> </div> </li> <li class="span3"> ... </li> <li class="span3"> ... </li> </ul> </div> <!-- followed 3 thumbnail div's in second row --> <div class="row"> <ul class="thumbnails"> <li class="span3"> ... </li> <li class="span3"> ... </li> <li class="span3"> ... </li> </ul> <!-- followed 1 thumbnail div's in second row --> <div class="row"> <ul class="thumbnails"> <li class="span3"> ... </li> </ul> </div> </div> hope helps.
Comments
Post a Comment