Image form with Bootstrap

by xylab

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/imsky/holder/master/holder.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
 <div class="container" id="tabs">
 <ul class="nav nav-tabs" id="myForm">
      <li class="active"><a href="#one">Открытки 1</a></li>
      <li><a href="#two">Открытки 2</a></li>
      <li><a href="#three">Получатель</a></li>
      </ul>

    <form action="#" method="post" role="form">
      <div class="tab-content">

<div class="container tab-pane active" id="one">
<div class="sc-roll">

<div class="row" id="line1">  
  <div id="tab-container" class="col-xs-4">
      <label for="r1">
      <div id="sample1" class="holderjs">
        <input class="inpall" type="radio" id="r1" name="img-all">
      </div>
      </label>
   </div>
    <div id="tab-container" class="col-xs-4">
      <label for="r2">
      <div id="sample2" class="holderjs">
        <input class="inpall" type="radio" id="r2" name="img-all">
      </div>
      </label>
   </div>
     <div id="tab-container" class="col-xs-4">
      <label for="r3">
      <div id="sample3" class="holderjs">
        <input class="inpall" type="radio" id="r3" name="img-all">
      </div>
      </label>
   </div>
</div>

<div class="row">  
  <div id="tab-container" class="col-xs-4">
      <label for="r4">
      <div id="sample4" class="holderjs">
        <input class="inpall" type="radio" id="r4" name="img-all">
      </div>
      </label>
   </div>
    <div id="tab-container" class="col-xs-4">
      <label for="r5">
      <div id="sample5" class="holderjs">
        <input class="inpall" type="radio" id="r5" name="img-all">
      </div>
      </label>
   </div>
     <div id="tab-container" class="col-xs-4">
      <label for="r6">
      <div id="sample6" class="holderjs">
        <input class="inpall" type="radio" id="r6" name="img-all">
      </div>
      </label>
  ...

CSS

.tab-pane {
    padding:20px;
    margin-bottom:15px;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    width:auto;
}

.holderjs .inpall {
    margin:13px;
}

.holderjs {
    height:150px;
    width:150px;
}
.form-control {
   margin: 5px;
}

.container {
    min-width:500px;
}

#tabs {
    min-width:560px;
}

#topsub {
    margin-top:15px;
}

.row {
  margin-right:14px;
}

.sc-roll {
    height:320px;
    width:100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}

.sc-roll::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

.sc-roll::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(50,118,177,.3);
    -webkit-box-shadow: 0 1px 2px rgba(255,255,255,.9);
}

#sample1 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-1) no-repeat;
  }
#sample2 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-2) no-repeat;
  }
#sample3 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-3) no-repeat;
  }
#sample4 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-4) no-repeat;
  }
#sample5 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-5) no-repeat;
  }
#sample6 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-6) no-repeat;
  }
#sample7 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-7) no-repeat;
  }
#sample8 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-8) no-repeat;
  }
#sample9 {
  background:url(?holder.js/150x150?bg=3276b1&text=картинка-9) no-repeat;
  }

JavaScript

$('#myForm a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })