如何正确过滤卡片引导程序HTMLDivElement？
我正在创建过滤功能。使用此功能，我们希望过滤应用程序卡，但是我无法正确显示该元素。该功能不显示已过滤卡片，按钮，图片或文本的一部分。我知道通过将“ #myDIV *”放在.filter函数中，它将搜索所有元素，即使知道这一点，我也没有找到正确的方法。 有人可以帮我吗？
我尝试使用以下代码：
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function () {
if ($(this).text().toLowerCase() != "abrir") {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
}
});
});
});.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
<a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
<a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
<a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
<a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
<a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
<a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
<a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
<a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
<a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
<a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
<a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
<a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
<a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
<a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
<a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
<a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
<a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
<a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
<a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
<a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content"> <div id="login"></div>
</div></div></div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="far fa-check-circle"></i>
</div><div class="modal-title"> Correcto
</div><div class="modal-body"> La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-envelope"></i>
</div><div class="modal-title"> Información
</div><div class="modal-body"> Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title"> Error
</div><div class="modal-body"> Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-warning"></i>
</div><div class="modal-title"> Alerta
</div><div class="modal-body"> Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>
3 个答案:
答案 0 :(得分：1)
您可以先在输入时隐藏所有卡片，然后仅根据搜索查询显示卡片。为了稍微简化过滤器，您也可以使用includes。
EXTRACT(MONTH FROM job.actual_start_date)$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("div[class^=col]")
.hide()
.filter(function() {
var cardTitle = $(this).find('.card-title').text().toLowerCase();
return cardTitle.includes(value);
})
.show();
});
});.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
答案 1 :(得分：0)
dlerror()答案 2 :(得分：0)
我找到了解决问题并防止卡显示不正确的方法：
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".card").filter(function () {
$(this.parentNode).toggle($(this).find('.card-title').text().toLowerCase().indexOf(value) > -1)
});
});
});.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.card {
min-height: 250px;
}<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
<a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
<a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
<a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
<a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
<a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
<a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
<a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
<a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
<a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
<a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
<a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
<a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
<a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
<a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
<a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
<a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
<a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
<a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
<a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
<a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content"> <div id="login"></div>
</div></div></div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="far fa-check-circle"></i>
</div><div class="modal-title"> Correcto
</div><div class="modal-body"> La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-envelope"></i>
</div><div class="modal-title"> Información
</div><div class="modal-body"> Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title"> Error
</div><div class="modal-body"> Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-warning"></i>
</div><div class="modal-title"> Alerta
</div><div class="modal-body"> Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？