<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 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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!-- Include the above in your HEAD tag -------- --> <div class="container"> <div class="row "> <div class="col-md-12"> <ul class="breadcrumb"> <li><a href="#">Conceptual Data</a></li> <li><a href="#">Data Entity</a></li> <li><a href="#">Logical Data Components</a></li> </ul> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Logical Data Component</h3> </div> <div class="panel-body"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-body"> <div class="col-sm-6"> <div class="form-horizontal"> <label class="col-xs-4 control-label">Conceptual Data :</label> <p class="form-control-static">ลูกค้า</p> <label class="col-xs-4 control-label">Data Entity :</label> <p class="form-control-static">ผู้ชำระเบี้ยประกัน</p> </div> </div> <div class="col-sm-6"> <div class="form-horizontal"> <label class="col-xs-4 control-label">Description : </label> <p class="form-control-static">...</p> <label class="col-xs-4 control-label">Description :</label> <p class="form-control-static">...</p> </div> </div> </div> </div> <table class="table table-striped custab"> <thead> <tr> <th>ID</th> <th>Logical Data Component</th> <th>Description</th> <th class="text-center">Classification Level</th> <th class="text-center">Status</th> <th class="text-center">Retention</th> </tr> </thead> <tr> <td>1</td> <td><a href="#">ข้อมูลระบุตัวบุคคล</a> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" title="Data owner"> <button class="btn btn-default btn-xs" > <span class="glyphicon glyphicon-user"></span></button> </a> <div id="collapseOne" class="panel-collapse collapse"> <div class="form-group"> <ul> <li><a href="#">สายงานโฆษณาและลูกค้าสัมพันธ์ </a> </li> <li><a href="#">สายงานรับประกันชีวิตรายบุคคล</a></li> </ul> </div> </div> </td> <td></td> <td class="text-center"><span class="label label-info">Internal Use</span></td> <td class="text-center"><span class="label label-success">Active</span></td> <td class="text-center"> <a class='btn btn-default btn-xs' href="#retention" data-toggle="modal" > <span class="glyphicon glyphicon-search"></span> </a> <!-- Modal --> <div class="modal fade" id="retention" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header modal-header-default"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3> Retention</h3> </div> <div class="modal-body "> <div class="form-group"> <label for="Conceptual" class="col-xs-4 control-label">Conceptual Data</label> <p class="form-control-static text-left" >ลูกค้า</p> </div> <div class="form-group"> <label for="Entity" class="col-xs-4 control-label">Data Entity</label> <p class="form-control-static text-left" >ผู้ชำระเบี้ยประกัน</p> </div> <div class="form-group"> <label for="LDC" class="col-xs-4 control-label">LDC</label> <p class="form-control-static text-left" >ข้อมูลระบุตัวบุคคล</p> </div> <div class="form-group"> <label for="ReName" class="col-xs-4 control-label">Retention Name</label> <p class="form-control-static text-left" >...</p> </div> <div class="form-group"> <label for="ReName" class="col-xs-4 control-label">Description</label> <p class="form-control-static text-left" >...</p> </div> <div class="form-group"> <label for="ReName" class="col-xs-4 control-label">Retention Period</label> <p class="form-control-static text-left" > 5 Years</p> </div> <div class="form-group"> <label for="ReName" class="col-xs-4 control-label">Storage Type </label> <p class="form-control-static text-left" > <span class="label label-warning">File</span> <span class="label label-danger">Delete</span> </p> </div> <div class="form-group"> <label for="ReName" class="col-xs-4 control-label">Start Date</label> <p class="form-control-static text-left" > yyyymmdd</p> </div> <div class="form-group"> <label for="ReName" class="col-xs-4 control-label">End Date </label> <p class="form-control-static text-left" > yyyymmdd </p> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- Modal --> </td> </tr> <tr> <td>2</td> <td><a href="#">การติดต่อ</a> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <button class="btn btn-default btn-xs" > <span class="glyphicon glyphicon-user"></span></button> </a> <div id="collapseTwo" class="panel-collapse collapse"> <div class="form-group"> <ul> <li><a href="#">ส่วนสนับสนุนข้อมูลการตลาด </a> </li> <li><a href="#">สายงานโฆษณาและลูกค้าสัมพันธ์ </a></li> </ul> </div> </div> </td> <td></td> <td class="text-center"><span class="label label-info">Internal Use</span></td> <td class="text-center"><span class="label label-success">Active</span></td> <td class="text-center"><a class='btn btn-default btn-xs' href="#"><span class="glyphicon glyphicon-search"></span> </a></td> </tr> <tr> <td>3</td> <td><a href="#">การประกันชีวิต</a> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <button class="btn btn-default btn-xs" > <span class="glyphicon glyphicon-user"></span></button> </a> </td> <td></td> <td class="text-center"><span class="label label-info">Internal Use</span></td> <td class="text-center"><span class="label label-default">Inactive</span></td> <td class="text-center"><a class='btn btn-default btn-xs' href="#"><span class="glyphicon glyphicon-search"></span> </a></td> </tr> <tr> <td>4</td> <td><a href="#">Bankruptcy</a> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <button class="btn btn-default btn-xs" > <span class="glyphicon glyphicon-user"></span></button> </a> </td> <td></td> <td class="text-center"><span class="label label-default">Confidential</span></td> <td class="text-center"><span class="label label-default">Inactive</span></td> <td class="text-center"><a class='btn btn-default btn-xs' href="#"><span class="glyphicon glyphicon-search"></span> </a></td> </tr> </table> </div> </div> </div> </div> </div> <div class="row"> <form> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Logical Data Component</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Description Logical Data Component</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="name">Conceptual Data</label> <input id="name" name="name" type="text" placeholder="ลูกค้า" class="form-control input-md"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="email">Data Entity</label> <input id="email" name="email" type="text" placeholder="ผู้ชำระเบี้ยประกัน" class="form-control input-md"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="name">Logical Data Component</label> <input id="name" name="name" type="text" placeholder="" class="form-control input-md"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="email">Description</label> <input id="email" name="email" type="text" placeholder="" class="form-control input-md"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="time">Classification Level</label> <select id="time" name="time" class="form-control"> <option value="1">Secret</option> <option value="2">Confidential</option> <option value="3">Internal Use Only</option> <option value="4">Public</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="email">Status</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="femaleRadio" name="statusRadio" value="Female">Active </label> <label class="radio-inline"> <input type="radio" id="maleRadio" name="statusRadio" value="Male">Inactive </label> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Retention</h3> </div> <div class="panel-body"> <!-- Form start --> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="name">Name</label> <input id="name" name="name" type="text" placeholder="Name" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="email">Description</label> <input id="email" name="email" type="text" placeholder="Description" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="date">Retention Period</label> <input id="date" name="date" type="text" placeholder="Retention Period" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="time">Storage Type</label> <select id="time" name="time" class="form-control"> <option value="F">File</option> <option value="D">Delete</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="name">Start Date</label> <input id="name" name="name" type="text" placeholder="Start Date" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="email">End Date</label> <input id="email" name="email" type="text" placeholder="End Date" class="form-control input-md"> </div> </div> </div> <!-- form end --> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Data Owner</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-8"> <p><span class="label label-info label-medium">สายงานพัฒนาผลิตภัณฑ์ 1 <i class="glyphicon glyphicon-remove"></i></span></p> <p> <span class="label label-info">สายงานพัฒนาผลิตภัณฑ์ 2 <i class="glyphicon glyphicon-remove"></i></span></p> <p><span class="label label-info">สายงานพัฒนาผลิตภัณฑ์ 3 <i class="glyphicon glyphicon-remove"></i></span> </p> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Attribute</h3> </div> <div class="panel-body"> <div class="row"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-body"> <div class="form-group"> <label class="col-md-5 control-label" for="button1id"></label> <div class="col-md-6"> <button id="button1id" name="button1id" class="btn btn-primary">Create</button> <button id="button2id" name="button2id" class="btn btn-danger">Cancel</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </form> </div> </div>

.custab{ border: 1px solid #ccc; padding: 5px; margin: 5% 0; box-shadow: 3px 3px 2px #ccc; transition: 0.5s; } .custab:hover{ box-shadow: 3px 3px 0px transparent; transition: 0.5s; } /***** DEMO ONLY *****/ .container { margin: 10rem; } .badge { margin-right: .3rem; } /***** REQUIRED STYLES *****/ .badge-labeled { padding-top: 0; padding-bottom: 0; padding-right: 0.2rem; } .badge-labeled i { padding: 0.25em 0.3rem; cursor: pointer; position: relative; display: inline-block; right: -0.2em; background-color: #000000; background-color: rgba(0,0,0,0.2); border-left: solid 1px rgba(255,255,255,.5); border-radius: 0 0.25rem 0.25rem 0; } .label-medium { vertical-align: super; font-size: 20px; } .modal-header-info { color:#fff; padding:9px 15px; border-bottom:1px solid #eee; background-color: #5bc0de; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }

$('i').on('click', function(e) { $(e.target).closest('span').remove(); })