El cambio de datos es un atributo de datos HTML-5 definido en Bootstrap. La ventaja de usar esto es que puede seleccionar una clase o una identificación y conectar el elemento con un widget en particular. Por ejemplo, si selecciona un elemento y otorga la propiedad de cambio de datos como «colapsar», básicamente está haciendo que su div sea colapsable en solo minutos usando Bootstrap.
Hay 7 valores para este atributo.
1. data-toggle = “collapse” Se usa cuando desea ocultar una sección y hacer que aparezca solo cuando se hace clic en un div. Digamos que el div es un botón, por lo que cuando se hace clic en el botón, la sección que desea colapsar aparece y vuelve a aparecer usando el botón.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> Data Toggle - Collapse example </title> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <h2>Welcome To GFG</h2> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#learnMore"> Learn More </button> <div id="learnMore" class="collapse"> GeeksforGeeks is a computer science portal where you can learn programming. It is a platform where you can practice multiple languages content and many more. </div> </body> </html>
Producción:
A través de JavaScript –
Javascript
$('.collapse').collapse()
2. data-toggle = «dropdown» Esto se puede agregar a un botón para crear un menú desplegable de alternancia.
HTML
<!DOCTYPE html> <html> <head> <title> Data Toggle - Collapse example </title> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <h2>Welcome To GFG</h2> <div class="dropdown"> <button type="button" class="btn btn-primary" id="dropDownButton" data-toggle="dropdown" aria-expanded="false"> Programming Languages <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropDownButton"> <li><a href="#">C++</a></li> <li><a href="#">Python</a></li> <li><a href="#">R</a></li> <li><a href="#">Java</a></li> </ul> </div> </body> </html>
Producción:
A través de JavaScript –
Javascript
$('.dropdown-toggle').dropdown()
3. data-toggle = “modal” Modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de una página cuando ocurre un evento. Por ejemplo, cuando se hace clic en un botón, aparece una ventana emergente.
HTML
<!DOCTYPE html> <html> <head> <title> Data Toggle - Collapse example </title> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <h2>Welcome To GFG</h2> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExample"> Click here! </button> <!-- Modal --> <div class="modal fade" id="modalExample" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title"> Welcome! </h1> </div> <div class="modal-body"> <p> GeeksforGeeks is a computer science portal where you can learn programming. It is a platform where you can practice multiple languages content and many more. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary"> Go to GFG </button> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> </div> </div> </div> </div> </body> </html>
Producción:
A través de JavaScript-
Javascript
$("#myModal").modal()
4. data-toggle = “scrollspy” Scrollspy se usa para actualizar/resaltar los enlaces de navegación según la posición de desplazamiento. A medida que se desplaza hacia abajo, se resalta la navegación de esa sección en particular.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap Example
</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
body {
position: relative;
}
#about {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #510707;
}
#team {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #492020;
}
#Contact {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #165f8b;
}
</style>
</head>
<body data-spy="scroll"
data-target=".navbar"
data-offset="50">
<nav class="navbar navbar-inverse
navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand"
href="#">GFG</a>
</div>
<div>
<div class="collapse navbar-collapse"
id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#about">
About
</a></li>
<li><a href="#team">
Team
</a></li>
<li><a href="#contact">
Contact
</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="about" class="container-fluid">
<h1>About</h1>
<p>
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</p>
</div>
<div id="team" class="container-fluid">
<h1>The team</h1>
<p>
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</p>
</div>
<div id="contact" class="container-fluid">
<h1>Contact Us!</h1>
<p>
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</p>
</div>
</body>
</html>
Producción:
A través de JavaScript-
Javascript
$('body').scrollspy({target: ".navbar"})
5. data-toggle = “tab” Se utiliza para una transición fluida entre los enlaces de navegación y sus contenidos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#home">Home</a> </li> <li> <a data-toggle="tab" href="#about">About</a> </li> <li> <a data-toggle="tab" href="#team">Team</a> </li> <li><a data-toggle="tab" href="#contact">Contact</a> </li> </ul> <div class="tab-content"> <div id="home" class= "tab-pane fade in active"> <h3>HOME</h3> <p> GeeksforGeeks is a computer science portal where you can learn programming. It is a platform where you can practice multiple languages content and many more. </p> </div> <div id="about" class="tab-pane fade"> <h3>ABOUT</h3> <p> GeeksforGeeks is a computer science portal where you can learn programming. It is a platform where you can practice multiple languages content and many more. </p> </div> <div id="team" class="tab-pane fade"> <h3>TEAM</h3> <p> GeeksforGeeks is a computer science portal where you can learn programming. It is a platform where you can practice multiple languages content and many more. </p> </div> <div id="contact" class="tab-pane fade"> <h3>CONTACT</h3> <p> GeeksforGeeks is a computer science portal where you can learn programming. It is a platform where you can practice multiple languages content and many more. </p> </div> </div> </div> </body> </html>
Producción:
A través de JavaScript-
Javascript
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
$('.nav-tabs a[href="#home"]').tab('show')
$('.nav-tabs a:home').tab('show')
$('.nav-tabs a:team').tab('show')
6. data-toggle = “tooltip” Se utiliza para crear una pequeña ventana emergente cuando el usuario se desplaza sobre el div.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <a href="#" data-toggle="tooltip" title="Some tooltip text!"> Hover over me! </a> <div class="tooltip top" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> Hi, welcome! </div> </div> </body> </html>
Producción:
A través de JavaScript-
Javascript
// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified element
$('#myTooltip').tooltip();
7. data-toggle = “popover” Es muy similar a la información sobre herramientas, con la única diferencia de que puede contener más texto y puede tener un encabezado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus"> Popover on bottom </button> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por prachimantri y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA