Odeme planı

by salt

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<div class="row row-title">
    <div class="col-lg-12"><h1>Ödeme Planı</h1></div>
</div>
<div class="container-highlight table-bordered">
<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
        <div class="row form-row">
            <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12 text-right">
                <label class="control-label">Ürün</label>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-8 col-xs-12 text-col">
                1. EL OTO (S)
            </div>
        </div>
        <div class="row form-row">
            <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12 text-right">
                <label class="control-label">Kredi Tutarı</label>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-8 col-xs-12 text-col">
                10.500.00 TL
            </div>
        </div>
        <div class="row form-row">
            <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12 text-right">
                <label class="control-label">Baz %</label>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-8 col-xs-12 text-col">
                %0.90 (Ay) / %10.80 (Yıl)
            </div>
        </div>
        <div class="row form-row">
            <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12 text-right">
                <label class="control-label">Ödeme Planı</label>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-8 col-xs-12 text-col">
                EŞİT ÖDEME
            </div>
        </div>
        <div class="row form-row">
        ...

CSS

/****************************

 TEB Appendix.css

*****************************/


.login-container .login-box .sifre-giris .btn-cont #ContentPlaceHolderLogin_ButtonGiris{
	width:160px;
}
.login-container .login-box .sifre-giris .btn-cont #ContentPlaceHolderLogin_ButtonTemizle{
	clear:both!important;
	padding: 5px 10px!important;
    font-size: 12px!important;
    line-height: 1.5!important;
    border-radius: 3px!important;
}







.input-custom label {
    width: 100%;
    font-weight: normal;
    display:inline-block;
    text-align:center;
}
.input-custom input[type="radio"]:empty, 
.input-custom input[type="checkbox"]:empty {
    display: none;
}
.input-custom input[type="radio"]:empty ~ label,
.input-custom input[type="checkbox"]:empty ~ label {
      position: relative;
      line-height: 22px;
      font-size: 22px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      color:#fff;
      width:22px;
      height:22px;
      display:inline-block;
      margin:0;
}
.input-custom input[type="radio"]:empty ~ label:before,
.input-custom input[type="checkbox"]:empty ~ label:before {
      content: '';
      position: relative;
      display: inline-block;
      width: 22px;
      height: 22px;
      text-align:center;
      color:#fff;
      font-size:16px!important;
      line-height:22px;
      border-radius:4px;
}
.input-custom input[type="radio"]:empty ~ label:before,
.input-custom input[type="checkbox"]:empty ~ label:before {
      content: '\A';
}
.input-custom input[type="radio"]:checked ~ label:before,
.input-custom input[type="checkbox"]:checked ~ label:before {
      content: '\e013'!important;
      font-family:'Glyphicons Halflings'!important;

}







.panel.panel-form{
	margin-bottom:30px;
      -webkit-box-shadow:none;
            box-shadow:none;
}
.panel.panel-form .panel-body label .btn-group{
    display: -webkit-box;
    display: -ms-flexbox;
   ...

JavaScript

$(function () {
       $(".table .row-table input").on("change",function(e){
       if($(this).type=="radio"){
          $(this).closest(".table").find(".row-table.active").removeClass("active");
       }
       if($(this).is(":checked")){
          $(this).closest(".row-table").addClass("active");
       }else{
          $(this).closest(".row-table").removeClass("active");
       }
    }).trigger("change");
    
    $('[data-toggle="popover"]').popover();
     
});