"Alta Plan - Pasos Plan"
Bootstrap 3.2.0 Snippet by gbg933

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6"><br>
<div class="panel panel-primary">
<div class="panel-heading">Alta Plan <a class="close add-paso" aria-label="Close" href="#"><i class="glyphicon glyphicon-plus "></i></a></div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" id="nombre" placeholder="">
</div>
<div class="form-group">
<label for="apellido">Descripcion</label>
<textarea name="desc0" placeholder="Description" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="email">Tipo de Plan</label>
<select name="sel0" class="form-control">
<option value"">Select Option</option>
<option value"1">Option 1</option>
<option value"2">Option 2</option>
<option value"3">Option 3</option>
</select>
</div>
<div class="form-group">
<label for="">Tipo de Catastrofe</label>
<select name="sel0" class="form-control">
<option value"">Select Option</option>
<option value"1">Option 1</option>
<option value"2">Option 2</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
.table-sortable tbody tr {
cursor: move;
}
.borde{
border:1px solid red;
}
.add-paso:hover:after{
content:" Paso";
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function() {
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
var id=0;
$(".add-paso").on("click", function() {
id+=1;
$('.contenedor_pasos').append('<div class="col-md-12" id="paso'+id+'"><div class="panel panel-primary">'+
'<div class="panel-heading">Paso <a class="close" onclick="remover('+id+');" aria-label="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a></div>'+
'<div class="panel-body">'+
'<div class="form-group">'+
'<label class="sr-only" for="nombre_paso">Nombre</label>'+
'<input type="text" class="form-control" id="nombre_paso" placeholder="Nombre paso">'+
'</div>'+
'<div class="form-group">'+
'<label class="sr-only" for="desc_paso">Descripcion</label>'+
'<textarea name="desc0" id="desc_paso" placeholder="Descripcion ..." class="form-control"></textarea>'+
'</div>'+
'</div>'+
'</div>'+
'</div></div>');
});
});
function remover(id){
//alert(id);
var dato = "paso"+id;
//alert(dato);
$('#'+dato).remove();
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard
Lesson plan example

Questions / Comments: