WIKI de apuntes de Billy Rondón

Herramientas de usuario

Herramientas del sitio

Traza: • bootstrap_tabs
informatica:formato_etiquetado_diseno:bootstrap:bootstrap_tabs

Tabla de Contenidos

Bootstrap Tabs

<div class="container">
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="tabs">
                <li class="nav-item">
                    <button class="active nav-link active" href="#post" data-toggle="tab">Post</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" href="#link" data-toggle="tab">Link</button>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane active" id="post">post</div>
                <div class="tab-pane" id="link">link</div>
            </div>
        </div>
    </div>
</div>

Bootstrap Tabs mi forma de usar

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Solicitud Clientes</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="libs/fontawesome-free-5.15.2-web/css/all.css" />
	<script type="" src="template/js/jquery-3.2.1.min.js?<?= time() ?>"></script>
 
	<link rel="stylesheet" href="../libs/bootstrap-4.5.3/dist/css/bootstrap.css">
	<script type="text/javascript" src="../libs/bootstrap-4.5.3/dist/js/bootstrap.js"></script>
 
 
	<link rel="stylesheet" href="../libs/icheck-bootstrap-master/icheck-bootstrap.css?<?= time() ?>">
 
	<script type="text/javascript">
 
$(document).ready( function(){
 
	// d-none d-lg-block
	$("button[data-btn_tabnom=usuarios]").on("click", function(){
		$("div[data-tabnom=usuarios]").removeClass("d-none");
		$("div[data-tabnom=usuarios]").removeClass("d-lg-block");
 
		$("div[data-tabnom=configuracion]").addClass("d-none");
		$("div[data-tabnom=configuracion]").addClass("d-lg-block");
	});
 
	$("button[data-btn_tabnom=configuracion]").on("click", function(){
		$("div[data-tabnom=usuarios]").addClass("d-none");
		$("div[data-tabnom=usuarios]").addClass("d-lg-block");
 
		$("div[data-tabnom=configuracion]").removeClass("d-none");
		$("div[data-tabnom=configuracion]").removeClass("d-lg-block");
	});
	//Comienza escondiendo configuración, se le agregá d-none d-lg-block
	$("div[data-tabnom=usuarios]").removeClass("d-none");
	$("div[data-tabnom=usuarios]").removeClass("d-lg-block");
 
	$("div[data-tabnom=configuracion]").addClass("d-none");
	$("div[data-tabnom=configuracion]").addClass("d-lg-block");
 
});
 
	</script>
</head>
<body>
    <div class="card text-center d-lg-none d-block" style="border-bottom:0px;">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="tabs">
                <li class="nav-item">
                    <button class="active nav-link active" href="javascript:void(0)" data-toggle="tab" data-btn_tabnom="usuarios">Usuarios API</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" href="javascript:void(0)" data-toggle="tab" data-btn_tabnom="configuracion">Configuración API</button>
                </li>
            </ul>
        </div>
	</div>
 
<div class="container-fluid">
 
	<div class="row">
		<div class="col-12 col-lg-6 pl-2 pt-1 block_repartosolicita_ladoizquierda" data-tabnom="usuarios"><!--  d-none d-lg-block //-->
			<div class="d-lg-flex d-none">
				<div class="mr-auto">
					<h6>Usuarios API</h6>
				</div>
			</div>
			abc
		</div>
		<div class="col-12 col-lg-6 p-1" style="" data-tabnom="configuracion">
			<div class="d-lg-flex d-none">
				<div class="mr-auto">
					<h6>Configuración API</h6>
				</div>
			</div>
			cba
		</div>
	</div>
 
</div>
 
</body>
</html>

Bootstrap5 Tab minimal

<ul class="nav">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">Home</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile">Profile</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#contact">Contact</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane show active" id="home" >a</div>
  <div class="tab-pane" id="profile"  >b</div>
  <div class="tab-pane" id="contact"  >c</div>
</div>

Fuente: https://getbootstrap.com/docs/5.0/components/navs-tabs/

Bootstrap5 Tab responsive

mostrar solo cuando es pequeño -lg- 

d-lg-none d-block
<div class="card text-center d-lg-none d-block" style="border-bottom:0px;">
	<div class="card-header">
		<ul class="nav nav-tabs card-header-tabs">
		  <li class="nav-item">
			<button class="nav-link text-dark active" data-bs-toggle="tab" data-bs-target="#TabSoliReparto">Repartos</button>
		  </li>
		  <li class="nav-item">
			<button class="nav-link text-dark"  data-bs-toggle="tab" data-bs-target="#TabRepProgramados">Repartos Programados</button>
		  </li>
		</ul>
	</div>
</div>

y hacer visible cuando es grande 

d-lg-block
<div class="tab-content">
	<div class="tab-pane show active col-12 col-lg-6 bg-warning d-lg-block" id="TabSoliReparto" >
 
        </div>
        <div class="tab-pane col-12 col-lg-6 bg-primary d-lg-block" id="TabRepProgramados" >
 
        </div>
</div>

Tab con responsive Bootstrap 5.1

sin javascript: 

	<div class="card text-center d-lg-none d-block" style="border-bottom:0px;">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="tabs">
                <li class="nav-item" role="presentation">
                    <button id="home-tab" data-bs-toggle="tab"  role="tab" aria-controls="usuarios"  class="active nav-link active" href="javascript:void(0)" data-toggle="tab" data-btn_tabnom="usuarios" data-bs-target="#usuarios">Usuarios API</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button id="profile-tab" data-bs-toggle="tab" role="tab" aria-controls="configuracion" class="nav-link" href="javascript:void(0)" data-toggle="tab" data-btn_tabnom="configuracion" data-bs-target="#configuracion">Configuración API</button>
                </li>
            </ul>
        </div>
	</div>
 
<div class="container-fluid">
 
	<div class="row tab-content">
		<div class="tab-pane active col-12 col-lg-6 pl-2 pt-1 d-lg-block" role="tabpanel" data-tabnom="usuarios" id="usuarios" aria-labelledby="usuarios"><!--  d-none d-lg-block //-->
			abc
		</div>
		<div class="tab-pane col-12 col-lg-6 p-1 d-lg-block" role="tabpanel" style="" data-tabnom="configuracion" id="configuracion" aria-labelledby="configuracion">
			cba
		</div>
	</div>
 
</div>
informatica/formato_etiquetado_diseno/bootstrap/bootstrap_tabs.txt · Última modificación: 2025/07/05 06:13 por admin