Assets WebClass
Estructura básica
Estructura básica de sitio 
                
                <?php include '../componentes/header.php' ?>

<div class="container-fluid">
    <div class="row">
        <div id="contenedorMenu" class="menu-section">
            <?php include '../componentes/menu.php' ?>
        </div>
        <div id="contenedorBody" class="content-section">
            <div class="menu-superior">
            <?php include '../componentes/menu-superior.php' ?>
            </div>
            <div class="info-content">
                <div class="container-fluid">
                    <?php include '../componentes/breadcrumbs.php' ?>
                    <!-- Inicio titulo y acciones, en algunos sitios no se necesita el botón de acciones -->
                    <div class="row">
                        <div class="col-8 titulos mt-3">Aquí agrega el título</div>
                        <!-- Inicio boton acciones (Borrame si no me necesitas) -->
                        <div class="col-4 text-right">
                            <button class="btn-superior" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ti ti-menu-2"></i> <div class="btn-acciones">Acciones</div>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#"><i class="ti ti-school"></i> Opción 1</a>
                                <a class="dropdown-item" href="#"><i class="ti ti-puzzle"></i> Opción 2</a>
                            </div>
                        </div>
                        <!-- Fin botón acciones -->
                    </div> 
                    <!-- fin titulo y acciones -->

                    <!-- Inicio row divisor (Borrame si no me necesitas) -->
                    <div class="col-12 my-3 px-0">
                        <div class="row">
                            <div class="col-12 col-md-6 col-lg-3 my-1 my-lg-0">
                                Aqui puedes
                            </div>
                            <div class="col-12 col-md-6 col-lg-3 my-1 my-lg-0">
                                Poner
                            </div>
                            <div class="col-12 col-md-6 col-lg-3 my-1 my-lg-0">
                                inputs
                            </div>
                            <div class="col-12 col-md-6 col-lg-3 my-1 my-lg-0">
                                por ejemplo
                            </div>
                        </div>
                    </div>
                    <!-- Fin row divisor -->

                    <!-- Aquí puedes poner todo el contenido que necesites -->
                    <div class="col-12 div-color p-3 my-3">
                        Aquí agrega el contenido
                    </div>  
                    <!-- Fin contenido que necesites -->
                    
                     <!--------------------------------------- Etiqueta de cierre estructura --------------------------------------->
                </div>
            </div>
        </div>
    </div>
</div>

<?php include '../componentes/footer.php' ?>
Input combobox
                
                    <div class="form-group">
                        <select class="main-input">
                        <option disabled selected>- Seleccione -</option>
                        <option value="1" class="opt">Ejemplo 01</option>
                        <option value="2" class="opt">Ejemplo 02</option>
                        <option value="3" class="opt">Ejemplo 03 etc...</option>
                        </select>
                    </div>
Campo de texto
                
                <input class="form-control input-text px-3" type="text" placeholder="Placeholder">
Input Buscador
                
                <div class="input-group mb-3 input-max-width-custom">
                    <div class="input-group-prepend">
                        <span class="input-group-text search-icon-custom" id="basic-addon1"><i class="ti ti-search"></i></span>
                    </div>
                    <input type="text" class="form-control search-custom" placeholder="Buscar" aria-label="Username" aria-describedby="basic-addon1">
                </div>
Tablas
Ejemplo 01 Ejemplo 02 Acción Detalles
Data 01 Data 02 
                
                <table class="table table-striped">
                    <thead>
                    <tr>
                    <th scope="col">Ejemplo 01</th>
                    <th class="hidde-item" scope="col">Ejemplo 02</th>
                    <th scope="col">Acción</th>
                    <th class="btn-details" scope="col">Detalles</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                    <td>Data 01</td>
                    <td class="hidde-item">Data 02</td>
                    <td><a href="#"><i class="ti ti-edit"></i></a> <a href="#"><i class="ti ti-trash"></i></a></td>
                    <td class="btn-details"><a href="#" class="table-icon-details" data-toggle="modal" data-target="#exampleModalCenter"><i class="ti ti-list-details"></i></a></td>
                    </tr>
                    </tbody>
                </table>
Tab
Tab 01
Tab 02 
            
            <div class="col-lg-12 px-0">
            <ul class="nav nav-tabs mt-custom-top" id="myTab" role="tablist">
                <li class="nav-item nav-reorder">
                    <a class="tab-custom nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Tab 01</a>
                </li>
                <li class="nav-item nav-reorder">
                    <a class="tab-custom nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Tab 02</a>
                </li>
            </ul>
            <div class="tab-content bg-tab" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        Tab 01
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        Tab 02
                </div>
            </div>
            </div>
Menú superior
Opción 01 Opción 02 Opción 03 Opción 04 
                    
                    <button class="btn-superior" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="ti ti-menu-2"></i> <div class="btn-acciones">Acciones</div>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#"><i class="ti ti-accessible"></i> Opción 01</a>
                        <a class="dropdown-item" href="#"><i class="ti ti-accessible"></i> Opción 02</a>
                        <a class="dropdown-item" href="#"><i class="ti ti-accessible"></i> Opción 03</a>
                        <a class="dropdown-item" href="#"><i class="ti ti-accessible"></i> Opción 04</a>
                    </div>
Toggle
Contenido Toggle 
                    
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                    Contenido Toggle
Menu superior motivación
Opciones
 
                
                <a href="#">
                <div class="cube-menu">
                    <i class="ti ti-eye"></i>
                    <div class="txt-cube-menu">Ver</div>
                </div>
                </a>
Input de examinar
                
                    <input class="form-control exam-button" type="file" id="formFile">
Text área
                
                    <div class="form-group">
                    <textarea class="form-control px-2" id="#" placeholder="Nombre del incidente" style="height: 100px !important;border-radius:10px !important;" rows="3"></textarea>
                    </div>
Botón
Botón
 
            
            <a href="#"><div class="btn-modal-aceptar mx-auto">Boton</div></a>
Botón
Boton
 
            
            <a href="#"><div class="btn-modal-anular mx-auto">Botón</div></a>
Step
            
            <div class="col-12 col-lg-4 my-3">
    <div class="col-12 bdcomponent text-center">
        <div class="desc mb-3">Step</div>
        <div class="col-12">
            <div id="multi-step-form-container">
                <!-- Form Steps / Progress Bar -->
                <ul class="col-12 col-lg-8 form-stepper form-stepper-horizontal text-center mx-auto pl-0">
                    <!-- Step 1 -->
                    <li class="form-stepper-active text-center form-stepper-list" step="1">
                        <a class="mx-2">
                            <span class="form-stepper-circle">
                                <span>1</span>
                            </span>
                            <div class="label">Paso 01</div>
                        </a>
                    </li>
                    <!-- Step 2 -->
                    <li class="form-stepper-unfinished text-center form-stepper-list" step="2">
                        <a class="mx-2">
                            <span class="form-stepper-circle text-muted">
                                <span>2</span>
                            </span>
                            <div class="label text-muted">Paso 02</div>
                        </a>
                    </li>
                    <!-- Step 3 -->
                    <li class="form-stepper-unfinished text-center form-stepper-list" step="3">
                        <a class="mx-2">
                            <span class="form-stepper-circle text-muted">
                                <span>3</span>
                            </span>
                            <div class="label text-muted">Paso 03</div>
                        </a>
                    </li>
                    <!-- Step 4 -->
                    <li class="form-stepper-unfinished text-center form-stepper-list" step="4">
                        <a class="mx-2">
                            <span class="form-stepper-circle text-muted">
                                <span>4</span>
                            </span>
                            <div class="label text-muted">Paso 04</div>
                        </a>
                    </li>
                    <!-- Step 5 -->
                    <li class="form-stepper-unfinished text-center form-stepper-list" step="5">
                        <a class="mx-2">
                            <span class="form-stepper-circle text-muted">
                                <span>5</span>
                            </span>
                            <div class="label text-muted">Paso 05</div>
                        </a>
                    </li>
                </ul>
                <!-- Step Wise Form Content -->
                <form id="userAccountSetupForm" name="userAccountSetupForm" enctype="multipart/form-data" method="POST">
                    <!-- Step 1 Content -->
                    <section id="step-1" class="form-step">
                        <div class="font-normal">Título 01</div>
                        <!-- Step 1 input fields -->
                        <div class="mt-3">
                            <div class="col-12">
                                Sección 01
                            </div>
                        </div>
                        <div class="mt-3 text-center">
                            <button class="button btn-navigate-form-step mx-3" type="button" step_number="2">Siguente <i class="ti ti-chevron-right"></i></button>
                        </div>
                    </section>
                    <!-- Step 2 Content, default hidden on page load. -->
                    <section id="step-2" class="form-step d-none">
                        <div class="font-normal">Título 02</div>
                        <!-- Step 2 input fields -->
                            <div class="mt-3">
                                <div class="col-12">
                                    Sección 02
                                </div>
                            </div>
                            <button class="button btn-navigate-form-step mx-3" type="button" step_number="1"><i class="ti ti-chevron-left"></i> Anterior</button>
                            <button class="button btn-navigate-form-step mx-3" type="button" step_number="3">Siguente <i class="ti ti-chevron-right"></i></button>
                        </div>
                    </section>
                    <!-- Step 3 Content, default hidden on page load. -->
                    <section id="step-3" class="form-step d-none">
                        <div class="font-normal">Título 03</div>
                        <!-- Step 3 input fields -->
                        <div class="mt-3">
                            <div class="col-12">
                                Sección 03
                            </div>
                        </div>
                        <div class="mt-3 text-center">
                            <button class="button btn-navigate-form-step mx-3" type="button" step_number="2"><i class="ti ti-chevron-left"></i> Anterior</button>
                            <button class="button btn-navigate-form-step mx-3" type="button" step_number="4">Siguente <i class="ti ti-chevron-right"></i></button>
                        </div>
                    </section>
                    <!-- Step 4 Content, default hidden on page load. -->
                    <section id="step-4" class="form-step d-none">
                        <div class="font-normal">Título 04</div>
                        <!-- Step 4 input fields -->
                        <div class="mt-3">
                            <div class="col-12">
                                Sección 04
                            </div>
                        </div>
                        <div class="mt-3 text-center">
                            <button class="button btn-navigate-form-step mx-3" type="button" step_number="3"><i class="ti ti-chevron-left"></i> Anterior</button>
                            <button class="button btn-navigate-form-step mx-3" type="button" step_number="5">Siguente <i class="ti ti-chevron-right"></i></button>
                        </div>
                    </section>
                    <!-- Step 5 Content, default hidden on page load. -->
                    <section id="step-5" class="form-step d-none">
                        <div class="font-normal">Título 05</div>
                        <!-- Step 4 input fields -->
                        <div class="mt-3">
                            <div class="col-12">
                                Sección 05
                            </div>
                        </div>
                        <div class="mt-3 text-center">
                            <button class="button btn-navigate-form-step mx-3" type="button" step_number="4"><i class="ti ti-chevron-left"></i> Anterior</button>
                            <button class="button submit-btn mx-3" type="button" data-toggle="modal" data-target="#exampleModal"><i class="ti ti-checklist"></i> Finalizar</button>
                        </div>
                    </section>
                </form>
            </div>        
        </div>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title title-modal-custom" id="exampleModalLabel">Finalizar proceso de matrícula</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body text-center">
                        Estoy seguro de matricular al alumn@:<br><span class="bold-font">Sebastían Ignacio Barra Calderón</span>
                    </div>
                    <div class="text-center">
                        <a href="#" data-dismiss="modal"><button type="button" class="btn-modal-cerrar mx-3" data-dismiss="modal">Cancelar</button></a>
                        <a href="#" data-dismiss="modal"><button type="button" class="btn-modal-aceptar mx-3">Aceptar</button></a>
                    </div>
                    </div>
                </div>
            </div>
Paginador
            
            <div class="col-6 col-sm-3 col-lg-2 mx-auto text-center mt-3">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">«</span>
                            <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">»</span>
                            <span class="sr-only">Next</span>
                            </a>
                        </li>
                        </ul>
                    </nav>
                </div>
Barra de progreso
25%
            
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                </div>
Checkbox
            
            <div class="form-check d-inline-none mx-3">
            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                    Texto de prueba
                </label>
            </div>
Botón sólo para tablas
Importar
            
            <div class="btn-celdas">Importar</div></a>
Radio button
            
            <div class="form-check radio-custom ml-0 pl-0 mb-2">
            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                <label class="form-check-label" for="flexRadioDefault1">
                    Ingrese texto complementario
                </label>
            </div>
Estrellas de evaluación
            
            <i class="star ti ti-star-filled"></i><i class="star ti ti-star-filled"></i><i class="star ti ti-star-filled"></i><i class="star ti ti-star"></i><i class="star ti ti-star"></i>