Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • 31 Scrollspy en Bootstrap

    Загружено:

    GerenciaVirtual
    115 просмотров2 страницы
    Elaborado por: Francisco Reaño Silva

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Elaborado por: Francisco Reaño Silva

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    115 просмотров2 страницы

    31 Scrollspy en Bootstrap

    Загружено:

    GerenciaVirtual
    Elaborado por: Francisco Reaño Silva

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 2

    GERENCIA VIRTUAL

    “Capacitación y asesoría a solo un click”

    Scrollspy en BOOTSTRAP
    El Scrollspy se utiliza para actualizar automáticamente los enlaces en una lista de navegación
    basada en la posición de desplazamiento.

    Cómo crear un Scrollspy


    El siguiente ejemplo muestra cómo crear un Scrollspy:

    <!—área de scroll -->


    <body data-spy="scroll" data-target=".navbar" data-offset="50">
    <!-- NAVBAR – El elemento <a> se usa par air a la sección en el area scroll -->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    ...
    <ul class="navbar-nav">
    <li><a href="#section1">Sección 1</a></li>
    ...
    </nav>
    <!-- Sección 1 -->
    <div id="section1">
    <h1>Sección 1</h1>
    <p> haga scroll a esta página y observa la barra de navegación y vera el efecto</p>
    </div>
    ...
    </body>

    Ver: Código 187.html


    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    Explicación
    Agregar data-spy="scroll" al elemento que se debe utilizar como el área de desplazamiento (a
    menudo este es el elemento <body>).
    A continuación, añadir el atributo data-target con un valor de la identificación o el nombre de
    clase de la barra de navegación ( .navbar). Esto es para asegurarse de que la barra de navegación
    está conectada con el área de desplazamiento.
    Tenga en cuenta que los elementos desplazables deben coincidir con el ID de los enlaces dentro de
    los elementos de lista de la barra de navegación ( <div id="section1"> con <a href="#section1">).
    El opcional atributo data-offset especifica el número de píxeles para desplazar de arriba en el
    cálculo de la posición de desplazamiento. Esto es útil cuando se siente que los enlaces dentro de la
    barra de navegación cambian el estado activo demasiado pronto cuando se dirija a los elementos
    desplazables. El valor predeterminado es 10 píxeles.

    Requiere posicionamiento relativo en el estilo: El elemento data-spy = "scroll" requiere que el


    CSS tenga la propiedad de posición, con un valor de "relativo" para que funcione correctamente.

    Menú Scrollspy Vertical

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="1">


    <div class="container-fluid">
    <div class="row">
    <nav class="col-sm-3 col-4" id="myScrollspy">
    <ul class="nav nav-pills flex-column">
    <li class="nav-item">
    <a class="nav-link active" href="#section1">Sección 1</a>
    </li>
    ...
    </ul>
    </nav>
    <div class="col-sm-9 col-8">
    <div id="section1">
    <h1>Sección 1</h1>
    <p> haga scroll a esta página y observa la barra de navegación y vera el efecto!</p>
    </div>
    ...
    </div>
    </div>
    </div>
    </body>

    Ver: Código 188.html

    Вам также может понравиться