<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif; margin-top:20px"> <div class="row"> <div class="col-md-12"> <!-- tab başlangıç --> <ul id="myTabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#home" id="gelen-yorum" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true"> Yorumlar <span class="badge">123</span></a> </li> <li role="presentation" class=""> <a href="#profile" role="tab" id="ortak-online" data-toggle="tab" aria-controls="profile" aria-expanded="false">Online <span class="badge">456</span></a> </li> </ul> <div id="myTabContent" class="tab-content"> <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="gelen-yorum"> <!-- gelen yorumlar başlangıç --> <div class="input-group yorum-gonder-panel"> <input id="btn-input" type="text" class="form-control input-sm" placeholder="Yorum giriniz..." /> <span class="input-group-btn"> <button class="btn btn-warning btn-sm" id="btn-chat"><i class="fa fa-send"></i> Gönder</button> </span> </div> <ul class="chat"> <li class="left clearfix"><span class="chat-img pull-left"> <img src="https://i.pinimg.com/736x/27/52/c4/2752c45b7c3bfa90192171439f3a3ee0--monkey-primates.jpg" alt="User Avatar" width="40" class="img-circle"> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Champ</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>12 mins ago</small> </div> <p> Champ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="left clearfix"><span class="chat-img pull-left"> <img src="https://i.pinimg.com/236x/bf/42/85/bf42855d50f2a491e26344c1b9683527.jpg" alt="User Avatar" width="40" class="img-circle"> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Monkey</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>12 mins ago</small> </div> <p> Monkey Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="left clearfix"><span class="chat-img pull-left"> <img src="https://i.pinimg.com/236x/ac/2d/dc/ac2ddceb9076a7d9933061e382bf007e--moth-caterpillar.jpg" width="40" class="img-circle"> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Orangutan</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>12 mins ago</small> </div> <p> Orangutan ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> <!-- gelen yorumlar bitiş --> </div> <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="ortak-online"> <!-- bu konuya online olanlar başlangıç --> <ul class="ortakonline"> <li class="left clearfix">1. nci item</li> </ul> <!-- bu konuya online olanlar bitiş --> </div> </div> <!-- tab bitiş --> </div> </div> </div>

/* -------------------------------------- konuya atılan yorumlar tabta unsurları -------------------------------------- */ .chat, .ortakonline { list-style: none; margin: 0; padding: 10px; border:1px solid #ccc; border-bottom-style:none; border-top-style:none; } .chat { border-bottom:1px solid #ccc; } .ortakonline { border-bottom-style:solid; } .chat li { padding-top:10px; padding-bottom: 5px; border-top: 1px dotted #B3A9A9; } .chat li.left .chat-body { margin-left: 60px; } .chat li.right .chat-body { margin-right: 60px; } .chat li .chat-body p { margin: 0; color: #777777; } .chat .glyphicon { margin-right: 5px; } .yorum-gonder-panel { border:1px solid #ccc; border-top-style:none; border-bottom-style:none; padding:10px 10px 0 10px; } /* -------------------------------------- yorum tab unsurları -------------------------------------- */ .nav-tabs > li> a { background-color:#337AB7; color:#fff; } .nav-tabs > li> a:hover { background-color:#ccc; color:#4C4C4C; border:1px solid #ccc; } .nav-tabs > li> a >.badge { background-color:#CD0000; }