Hatun qhawariy

Sapakama utaq huñusqa

Pluginkuna sapalla churasqa kankuman (Bootstrap sapalla *.jswillañiqikunata llamk'achispa), utaq tukuy huk kutillapi (llamk'achispa bootstrap.jsutaq pisiyachisqa bootstrap.min.js).

Atributos de datos

Llapa Bootstrap plugins llamk'achiyta atikunki ch'uya API marcación kaqninta mana huk chiru JavaScript qillqaspa. Kayqa Bootstrap kaqpa ñawpaq clase API kaqnin chaymanta ñawpaq qhawayniyki kanan tiyan huk plugin llamk'achkaspa.

Chayta nispa, wakin situacionkunapi kay ruwayta wañuchiy munasqa kanman. Chayrayku, atiyta quykutaq willay laya API mana llamk'achiyta llapa ruwaykunata qillqa sutikuna t'aqasqa kaqpi mana watasqa kaqwan data-api. Kayqa kayhinam rikchakun:

$(document).off('.data-api')

Hukninpi, huk específico plugin kaqman targetta ruwanapaq, pluginpa sutinta huk sutinchana hina churaylla kayhina data-api sutinchanawan kuska:

$(document).off('.alert.data-api')

API programática nisqa

Hinallataq iñiyku llapa Bootstrap plugins llamk'achiyta atisqaykita ch'uya JavaScript API kaqnintakama. Llapan llapapaq APIkuna sapalla, kadenayuq ruwanakuna kanku, chaymanta huñusqa ruwasqa kutichiy.

$('.btn.danger').button('toggle').addClass('fat')

Llapan ruwanakuna huk akllana akllanakuna objetota chaskinanku tiyan, huk watiqa mayqinchus huk ruwanaman chayan, utaq mana ima (mayqinchus huk plugin ñawpaqmanta ruwaywan qallarichin):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

ConstructorSapa pluginpas huk propiedadpi raw ruwaqnintam qawachin : $.fn.popover.Constructor. Sichus huk plugin instanciata chaskiyta munanki, huk elementomanta chiqalla kutichiy: $('[rel="popover"]').data('popover').

Ñawpaqmanta churasqakuna

Huk pluginpaq ñawpaqmanta churasqakunata tikrayta atikunki pluginpa Constructor.DEFAULTSobjetonta tikraspa:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Mana ch’aqwayniyuq

Wakin kutiqa huk UI marcokunawan Bootstrap plugins llamk'achina tiyan. Kayhina kaqtinqa, sutikunap chiqan t'inkinakuyninkuna wakin kutipi kanman. Sichus kay ruwakun, chay plugin kaqman waqyayta .noConflictatikunki mayqinmantachus chanita kutichiyta munanki.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Eventos nisqakuna

Bootstrap sapanchasqa ruwaykunata qun aswan plugins sapalla ruwanakuna kaqpaq. Tukuypaq, kaykunaqa mana tukukuq, ñawpaq participio nisqa rikch'aypi hamunku - maypichus infinitivo (ex. show) huk suceso qallariypi llamk'achisqa, ñawpaq participio nisqa rikch'ayninqa (ex. shown) huk ruway tukukuptin llamk'achisqa.

3.0.0 kaqmanta, llapa Bootstrap ruwaykuna sutikuna chiqanchasqa kachkan.

Llapan mana tukukuq sucesokuna preventDefaultruwayta qun. Kayqa huk ruwayta manaraq qallarichkaptin sayachiy atiyta qun.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Desinfectante

Tooltips chaymanta Popovers ruwasqayku desinfectanteykuta llamk'achinku akllanakunata chuyanchanapaq mayqinkunachus HTML chaskinku.

Ñawpaqmanta churasqa whiteListchaniqa kaymi:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Sichus kay ñawpaqmanta musuq chanikunata yapayta munanki kaykunata whiteListruwayta atinki:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Sichus desinfectanteykumanta pasayta munanki imaraykuchus huk dedicada biblioteca llamk'ayta munanki, kayhina DOMPurify , kaykunata ruwanayki tiyan:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Versión yupaykuna

Sapa Bootstrap kaqpa jQuery plugins kaqpa laya VERSIONkaqninqa plugin ruwaqpa propiedadnin kaqninta yaykuyta atikun. Ejemplopaq, yanapakuypa yanapakuynin pluginpaq:

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

JavaScript mana llamk'achisqa kaptin mana huk especial fallbacks kaqchu

Bootstrap kaqpa plugins mana qhipaman urmankuchu particularmente gracioso kaqwan JavaScript mana llamk'achisqa kaqtin. Sichus kay casopi ruwaqpa experiencianmanta llakikunki, llamk'achiy <noscript>situacionta sut'inchanapaq (hinallataq imayna JavaScript kaqmanta atichiyta) ruwaqniykikunaman, chaymanta/utaq kikiyki ruwasqa fallbacksniyki yapay.

Transiciones transición.js nisqa

Transiciones nisqamanta

Sasan tikray efectos kaqpaq, transition.jshuk kuti wak JS willañiqikunap ladunpi churay. Sichus huñusqa (utaq pisiyachisqa) llamk'achkanki bootstrap.js, mana kayta churanayki tiyanchu —chaypi kachkanña.

Imataq ukunpi kachkan

Transition.js huk sapsi yanapakuq transitionEndruwaykunapaq chaymanta huk CSS tikray emulador kaqpaq. Huk plugins kaqwan llamk'achisqa CSS tikray yanapakuyta qhawanapaq chaymanta warkusqa tikraykunata hap'inapaq.

Transiciones nisqakunata mana llamk’achispa

Tikraykunaqa tukuypaq mana llamk'achisqa kanman kay JavaScript t'aqawan, mayqinchus hamunan tiyan transition.js(utaq bootstrap.js, bootstrap.min.jsimaynachus kanman) kargasqa kaptin:

$.support.transition = false

Modales nisqakuna modal.js

Modalkuna allinchasqa kanku, ichaqa flexible, rimanakuna tapuykunata aswan pisi munasqa ruwanakunayuq chaymanta yuyaysapa ñawpaqmanta churasqakunayuq.

Imayna HTML5 semántica kaqninta riqsichisqanrayku, autofocusHTML atributo mana Bootstrap modales kaqpi ruwayniyuqchu. Kikin ruwayta aypanaykipaq, wakin ruwasqa JavaScript llamk'achiy:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Ejemplos

Ejemplo estático

Huk ruwasqa modal umawan, kurkuwan, chaymanta ruwanakuna huñuwan chaki kaqpi.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demostración en vivo

Huk modal JavaScript kaqninta tikray uraypi kaq ñit'inata ñit'ispa. Chayqa urayman llimp’inqa, chaymantataq p’anqa patamantapacha chinkapunqa.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tamaños opcionales

Modalkuna iskay akllana sayayniyuq kanku, huk .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Animación nisqamanta hurquy

Modalkuna qhawanapaq mana chinkaylla rikuriqllapaq, .fadeclaseta modal markaykimanta hurquy.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Sistema de rejilla nisqawan yanapachikuspa

Huk modal ukhupi Bootstrap rejilla sistemamanta ventajata hapinapaq, chaylla nido .rows ukhupi .modal-bodychaymanta chaymanta normal rejilla sistema clasekunata llamk'achiy.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Contenido modal nisqa tikray botón de gatillo nisqapi hapipakuspa

¿Huk qutu botonesniyuqchu kanki, chaytaq tukuyninku kikin modalllata llamk’achinku, juk chhika wak contenidoyuqlla? Utilizar event.relatedTargetchaymanta HTML data-*atributokuna (ichapas jQuery kaqnintakama ) modal kaqpa imayna kayninta tikranapaq mayqin ñit'ina ñit'isqa kasqanmanhina. Rikuy Modal Eventos docs nisqapi aswan sut'inchaykunapaq relatedTarget, .

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Uso

Modal plugin pakasqa willayniyki mañakuypi tikran, willay atributokuna utaq JavaScript kaqnintakama. Hinallataq yapan .modal-openchayman <body>ñawpaqmanta kuyuchiy ruwayta llallinanpaq chaymanta .modal-backdrophuk ñit'iy áreata qunanpaq rikuchisqa modalkunata qarqunapaq modal hawapi ñit'iypi ruwan.

Atributos de datos nisqawan

JavaScript qillqaspa mana huk modal nisqa llamk'achiy. Huk kamachiq elemento kaqpi churay data-toggle="modal", huk ñit'ina hina, huk data-target="#foo"utaq href="#foo"huk específico modal kaqman tikranapaq target kaqwan kuska.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript nisqawan

Huk modal id myModalkaqwan huk sapalla chiru JavaScript kaqwan waqyay:

$('#myModal').modal(options)

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Métodos

.modal(options)

Contenidoykita huk modal hina activan. Huk akllana akllanakunata chaskikun object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Manualmente huk modal nisqatam tikran. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.modalutaq hidden.bs.modalruway ruwakuchkaptin).

$('#myModal').modal('toggle')

.modal('show')

Manualmente kichan huk modal. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.modalruway ruwakuchkaptin).

$('#myModal').modal('show')

.modal('hide')

Manualmente pakakun huk modal. Llamaqman kutimun manaraq modal chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.modalruway ruwakuchkaptin).

$('#myModal').modal('hide')

.modal('handleUpdate')

Modalpa churayninta musuqmanta allichan huk barra de desplazamiento kaqwan contrapi ruwanapaq sichus huk rikhurinman, chaytaq modal saltayta ruwanman lluq'iman.

Kichasqa kachkaptin modalpa sayaynin tikrakuptinllam necesitakun.

$('#myModal').modal('handleUpdate')

Eventos nisqakuna

Bootstrap kaqpa modal clase huk pisi ruwaykunata rikuchin modal ruwanakunaman enganche kaqpaq.

Llapan modal ruwaykuna kikin modal kaqpi (ichataq <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Urmachiykuna dropdown.js

Ejemplos

Yaqa imamanpas urayk'aq menúkunata yapay kay sasan plugin kaqwan, navbar kaqwan, tablakuna chaymanta pastillas kaqwan.

Huk navbar ukhupi

Pastillas ukhupi

Uso

Willay atributokuna utaq JavaScript kaqnintakama, urayk'aq plugin pakasqa willayta (urquq menúkuna) tikran .opentayta lista kaqpi claseta tikraspa.

Dispositivokuna apaykachanakunapi, huk urayk'aq kichay huk .dropdown-backdrophuk ñit'iy área hina yapan urayk'aq menúkuna wichq'anapaq mayk'aq menú hawapi ñit'iy, huk mañakuy allin iOS yanapakuypaq. Kayqa niyta munan huk kichasqa urayk'aq menú kaqmanta huk urayk'aq menú kaqman tikray huk yapasqa ñit'iy movil kaqpi munan.

Qhaway: data-toggle="dropdown"Atributo huk ruwana patapi urayk'aq menúkuna wichq'anapaq hapipakun, chayrayku allin yuyay sapa kuti llamk'achinapaq.

Atributos de datos nisqawan

data-toggle="dropdown"Huk t'inkiman utaq ñit'inaman yapay huk urayk'achiqta tikranaykipaq.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

URLkuna t'inkikuna ñit'inakunawan mana imayuq kananpaq, llamk'achiy data-targetatributota ranti href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScript nisqawan

JavaScript nisqawan urayk'achiqkunata waqyay:

$('.dropdown-toggle').dropdown()

Akllanakuna

Mana mayqinpas

Métodos

$().dropdown('toggle')

Huk qusqa navbar utaq tablayuq puriypa urayk'aq menú kaqninta tikran.

Eventos nisqakuna

Llapan urayk'aq ruwaykuna .dropdown-menu's tayta elemento kaqpi llamk'achisqa.

Llapan urayk'aq ruwaykuna huk relatedTargetpropiedadniyuq kanku, mayqinpa chaninmi toggling ancla elemento.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy nisqa scrollspy.js nisqa

Ejemplo en navbar

ScrollSpy plugin kikinmanta musuqyachiypaq nav metakuna kuyuchiy posición kaqpi. Navbar urapi kaq áreata kuyuchiy chaymanta qhaway activo clase tikrayta. Chay urayk’aq sub elementokuna hinallataq resaltasqa kanqa.

Uso

Requiere posicionamiento relativo nisqa

Mana imapas ruway ñan, scrollspy llamk'ayta munan chaymanta position: relative;elemento espionaje kaqpi. Yaqa llapanpiqa kaymi <body>. Cuando scrollspiying en elementos otros que el <body>, asegúrate de tener un heightconjunto y overflow-y: scroll;aplicado.

Atributos de datos nisqawan

Scrollspy ruwayta mana sasachu yapanaykipaq pata barra puriyniykiman, yapay data-spy="scroll"elementoman yapay mayqinpichus espionayta munanki (aswan típicamente kay kanman chay <body>). Chaymanta yapay data-targetatributo ID kaqwan utaq clase kaqwan tayta elementomanta mayqin Bootstrap .navcomponente kaqmanta.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript nisqawan

CSS nisqaykipi yapasqaykimanta position: relative;, JavaScript nisqawan scrollspy nisqaman waqyay:

$('body').scrollspy({ target: '#navbar-example' })

Métodos

.scrollspy('refresh')

Scrollspy DOM kaqmanta elementokuna yapay utaq hurquywan kuska llamk'achkaspa, musuqyachiy ñanta chayhina waqyanayki tiyan:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-offset="".

Eventos nisqakuna

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Pestañas cambiables tab.js

Ejemplo de tablas

Yanapakuy utqaylla, kallpasapa tabla ruwanakunata kitipi kaqpa paneles kaqninta tikrayman, urayk'aq menúkuna kaqnintakamapas. Anidado tablakuna mana yanapasqachu.

Uso

JavaScript kaqnintakama tablakuna ruwanakuna atichiy (sapa tablakuna sapalla llamk'achinan tiyan):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Sapa tablakunata achka ruwaykunapi llamk'achiyta atikunki:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

Huk tabla utaq pastilla puriyta mana ima JavaScript qillqaspa llamk'achiyta atikunki huk elemento kaqpi willaylla data-toggle="tab"utaq data-toggle="pill"huk elemento kaqpi. navchaymanta chaymanta nav-tabsclasekuna tablaman yapayqa ulBootstrap tabla estilotanav ruwanqa , chaymanta chaymanta clasekuna yapayqa pastilla estilotanav-pills churanqa .

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Efecto de desvanecer

Pestañakuna chinkananpaqqa, .fadesapakamaman yapay .tab-pane. Ñawpaq kaq tabla panelpas .inqallariy contenido rikukuq kananpaq kanan tiyan.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Métodos

$().tab

Huk elemento de pestaña chaymanta contenido waqaychanata llamk'achin. Tab huk data-targetutaq huk hreftargeting huk contenedor nodo DOM kaqpi kanan tiyan. Hawa rikch'anakunapiqa, tablakuna atributoyuq <a>s nisqakunam.data-toggle="tab"

.tab('show')

Qusqa tablata akllan chaymanta chaywan tinkisqa contenidota rikuchin. Ima wak tabla ñawpaq akllasqa kaqtapas mana akllasqaman tukun chaymanta tinkisqa kaqnin pakasqa. Llamaqman kutimun manaraq tabla panel chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.tabruway ruwakuchkaptin).

$('#someTab').tab('show')

Eventos nisqakuna

Musuq tablata rikuchispa, sucesokuna kay ordenpi ninawan:

1. hide.bs.tab(kunan llamk'aq tablapi)
2. show.bs.tab(qhawanapaq kaq tablapi)
3. hidden.bs.tab(ñawpaq ruwaq tablapi, kikin hide.bs.tabruwaypaq)
4. shown.bs.tab(musuq-ruray chayraq rikuchisqa ñiqipi, kikin show.bs.tabruwaypaq)

Sichus mana mayqin tablapas ruwasqañachu karqan, chaymanta hide.bs.tabchaymanta hidden.bs.tabruwaykuna mana llamk'achisqachu kanqa.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Yanapakuykuna tooltip.js

Jason Framepa qillqasqan allin jQuery.tipsy pluginmanta yuyaychasqa; Llamkanakuna huk musuqchasqa laya kanku, mayqinkunachus mana siq'ikunapi hapipakunkuchu, CSS3 llamk'achinku kawsachiykunapaq, chaymanta willay-atributokuna llaqta titulu waqaychaypaq.

Cero sayayniyuq tituluyuq llamkanakunap yuyaychayninkunaqa manam hayk'appas rikuchisqachu.

Ejemplos

Uraypi t'inkikuna patapi makiwan ñit'iy yanapakuykunata qhawanaykipaq:

Consejo de herramientas estáticas

Tawa akllanakuna kan: pata, paña, uray, lluq'i chiqanchasqa.

Tawa ñankuna

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Uso

Yanapakuypa yanapakuynin plugin ruwanakuna chaymanta markakuna mañakuypi ruwan, chaymanta ñawpaqmanta yanapakuypa yanapakuyninkunata elemento gatillo kaqninkumanta qhipaman churan.

JavaScript nisqawan yanapakuypa yuyaychayninta llamk'achiy:

$('#example').tooltip(options)

Markup

Huk yanapakuypa yanapakuypaq munasqa markaqa huk layallam datachaymanta titleHTML elementopi huk yanapakuypa yanapakuyniyuq kayta munanki. Huk yanapakuypa paqarichisqan markasqa aswan sasan, ichaqa huk posiciónta munan (ñawpaqmanta, topplugin kaqwan churasqa).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Métodos

$().tooltip(options)

Huk elemento huñusqaman huk yanapakuypa yanapaqninta k'askachin.

.tooltip('show')

Huk elementopa yanapakuypa yuyaychaynintam qawachin. Llamaqman kutimun manaraq yanapakuypa yanapakuy chiqap rikuchisqa kachkaptin (icha manaraq shown.bs.tooltipruway ruwakuchkaptin). Kayqa huk "makiwan" llamkanakunap llamk'achiynin hina qhawasqa. Cero sayayniyuq tituluyuq llamkanakunap yuyaychayninkunaqa manam hayk'appas rikuchisqachu.

$('#element').tooltip('show')

.tooltip('hide')

Huk elementopa yanapakuypa yuyaychayninta pakan. Llamaqman kutimun manaraq yanapakuypa yuyaychaynin chiqamanta pakasqa kachkaptin (icha manaraq ...hidden.bs.tooltip ruway ruwakuchkaptin). Kayqa huk "makiwan" llamkanakunap llamk'achiynin hina qhawasqa.

$('#element').tooltip('hide')

.tooltip('toggle')

Huk elementopa yanapakuypa yuyaychaynintam tikran. Llamaqman kutimun manaraq yanapakuypa yuyaychaynin chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.tooltiputaq hidden.bs.tooltipruway ruwakuchkaptin). Kayqa huk "makiwan" llamkanakunap llamk'achiynin hina qhawasqa.

$('#element').tooltip('toggle')

.tooltip('destroy')

Huk elementopa yanapakuypa yuyaychayninta pakaspa chinkachin. Delegacionta llamk'achiq yanapakuykuna ( kay selectorakllanawan ruwasqa ) mana sapalla chinkachiyta atikunmanchu miray llamk'achiq elementokunapi.

$('#element').tooltip('destroy')

Eventos nisqakuna

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers nisqa popover.js nisqa

Yanapakuy uchuy llanthukuna contenidomanta, iPad kaqpi hina, mayqin elementomanpas iskay kaq willayta wasichaypaq.

Popovers mayqinkunachus iskaynin titulonku chaymanta contenidonku cero-largo kanku mana hayk'aqpas rikuchisqachu.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Ejemplos

Popover estático

Tawa akllanakuna kan: pata, paña, uray, lluq'i chiqanchasqa.

Demostración en vivo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Tawa ñankuna

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<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>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Qatiqnin ñit’iypiqa qarquy

Gatillota llamk'achiy focuspopovers kaqmanta qarqunapaq qatiq ñit'iypi mayqinchus ruwaq ruwan.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Uso

JavaScript nisqawan popovers nisqakunata atichiy:

$('#example').popover(options)

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Métodos

$().popover(options)

Huk elemento huñunapaq popovers nisqakunata qallarichin.

.popover('show')

Huk elementopa popover nisqa kaynintam qawarichin. Llamaqman kutimun manaraq popover chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.popoverruway ruwakuchkaptin). Kayqa huk "manual" desencadenante hina qhawasqa kay popover kaqmanta. Popovers mayqinkunachus iskaynin titulonku chaymanta contenidonku cero-largo kanku mana hayk'aqpas rikuchisqachu.

$('#element').popover('show')

.popover('hide')

Huk elementopa popover nisqa kayninta pakan. Llamaqman kutimun manaraq popover chiqamanta pakasqa kachkaptin (icha manaraq chay ...hidden.bs.popover ruway ruwakuchkaptin). Kayqa huk "manual" desencadenante hina qhawasqa kay popover kaqmanta.

$('#element').popover('hide')

.popover('toggle')

Huk elementopa popover nisqatam tikran. Llamaqman kutimun manaraq popover chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.popoverutaq hidden.bs.popoverruway ruwakuchkaptin). Kayqa huk "manual" desencadenante hina qhawasqa kay popover kaqmanta.

$('#element').popover('toggle')

.popover('destroy')

Huk elementopa popover nisqa kayninta pakaspa chinkachin. Popovers delegación llamk'achiqkuna (mayqinkuna akllana llamk'achispa kamasqaselector ) mana sapalla chinkachiyta atikunmanchu miray gatillo elementokunapi.

$('#element').popover('destroy')

Eventos nisqakuna

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Willakuykuna willakuy alert.js

Ejemplo de alertas

Kay plugin kaqwan llapa willay willaykunaman qarquy ruwayta yapay.

Huk .closeñit'inata llamk'achkaspa, ñawpaq wawa kanan tiyan .alert-dismissiblechaymanta mana qillqa contenido ñawpaqninpi hamunmanchu chay marcapi.

Uso

Yanapakuylla data-dismiss="alert"botón wichq'ayniykiman kikillanmanta huk alerta wichq'ay ruwayta qunaykipaq. Huk willayta wichqaspaqa DOM nisqamanta hurqun.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Alertakunayki animacionta llamk'achinankupaq wichq'achkaspa, allinta qhaway chaymanta .fadechaymanta .inclasekuna paykunaman churasqaña kasqankuta.

Métodos

$().alert()

Huk willayta uyariyta ruwan ñit'iy ruwaykunamanta miray elementokunapi mayqinkunachus data-dismiss="alert"atributoyuq kanku. (Mana necesariochu data-api kaqpa auto-inicializacionninta llamk'achkaspa).

$().alert('close')

Huk willayta DOM kaqmanta hurquspa wichq'an. Si el .fadey.in clasekuna elementopi kachkan, alerta manaraq hurqusqa kachkaptin chinkapunqa.

Eventos nisqakuna

Bootstrap kaqpa willay plugin huk pisi ruwaykunata riqsichin willay ruwanaman enganche kaqpaq.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Botones nisqa botón.js

Astawan ruway botoneswan. Control ñit'ina willan utaq huñukuna botones ruwan aswan componentes kaqpaq imayna llamkanakuna barrakuna.

Estadoyuq

data-loading-text="Loading..."Huk ñit'inapi huk karga estadota llamk'achinapaq yapay .

Kay ruwana v3.3.5 kaqmanta manaña llamk'achisqachu chaymanta v4 kaqpi hurqusqa.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Huklla toggle

data-toggle="button"Huklla ñit'inapi tikrayta llamk'achinapaq yapay .

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Caja de verificación / Radio nisqa

Yanapakuy data-toggle="buttons"huk .btn-groupqutu qhawaypi utaq radio yaykuykunaman yapay sapan estilonkupi tikrayta atichinanpaq.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio 3
  </label>
</div>

Métodos

$().button('toggle')

Toggles estado de empuje. Chay botónmanmi qun chay rikchayta activasqa kasqanmanta.

$().button('reset')

Botón estadota kutichin - qillqata ñawpaq qillqaman tikran. Kay ñanqa asíncrono kaq chaymanta kutimun manaraq chiqamanta kutichiy tukusqa kachkaptin.

$().button(string)

Qillqata mayqin willayta riqsichisqa qillqa estadomanpas tikran.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Urmachiy collapse.js

Flexible plugin mayqinchus huk maki clasekuna llamk'achin mana sasa tikray ruwaypaq.

Qatina

Uraypi kaq ñit'inakunata ñit'iy huk elementota rikuchinaykipaq chaymanta pakanaykipaq clase tikraykunawan:

• .collapsecontenidota pakan
• .collapsingtransiciones nisqapi churakun
• .collapse.incontenido nisqatam qawachin

Huk t'inkita llamk'achiyta atinki hrefatributowan, icha huk ñit'inata data-targetatributowan. Iskayninpipas, chay data-toggle="collapse"nisqa kamachisqa kachkan.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Ejemplo de acordeón

Panel componentewan huk acordeón ruwanapaq ñawpaqmanta churasqa urmachiy ruwayta mast'ariy.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

También es posible intercambio de .panel-bodys con .list-groups.

Uso

Urmachiy plugin huk pisi clasekunata llamk'achin llasa hoqariyta llamk'achinapaq:

• .collapsechaypi kaqta pakaykun
• .collapse.inchaypi kaqta rikuchin
• .collapsingtikray qallariptin yapasqa, tukuptintaq hurqusqa

Kay clasekunataqa tarinki component-animations.less.

Atributos de datos nisqawan

Yanapakuylla data-toggle="collapse"chaymanta huk data-targetelementoman kikinmanta asignar control de un elemento colapsible. Atributo data-targethuk CSS akllanata chaskikun chayman urmachiyta churanapaq. Aswan allinta yapay chay claseta collapsechay elemento collapsible nisqaman. Sichus ñawpaqmanta kichasqa kananta munanki, yapasqa claseta yapay in.

Acordeón hina huñu kamachiyta huk llalliq kamachiyman yapanaykipaq, willay laya yapay data-parent="#selector". Kayta ruwaypi qhawanaykipaq demo nisqapi qhaway.

JavaScript nisqawan

Makiwan atichiy kaykunawan:

$('.collapse').collapse()

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-parent="".

Métodos

.collapse(options)

Contenidoykita huk elemento collapsible hina activan. Huk akllana akllanakunata chaskikun object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Huk ñit'isqa elementota rikuchisqaman icha pakasqaman tikran. Llamaqman kutimun manaraq llalliq elemento chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.collapseutaq hidden.bs.collapseruway ruwakuchkaptin).

.collapse('show')

Huk llalliq elementota rikuchin. Llamaqman kutimun manaraq t'inkisqa elemento chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.collapseruway ruwakuchkaptin).

.collapse('hide')

Huk llalliq elementota pakan. Llamaqman kutimun manaraq t'inkisqa elemento chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.collapseruway ruwakuchkaptin).

Eventos nisqakuna

Bootstrap kaqpa urmachiy clase huk pisi ruwaykunata riqsichin urmachiy ruwanaman enganche kaqpaq.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carrusel carrusel.js

Elementokuna chawpipi bicicletapi purinapaq diapositivakuna rikuchiy componente, carrusel hina. Carrusel anidado nisqakunaqa manam yanapasqachu.

Ejemplos

Ñawpaq Qatiq

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Capciones opcionales

Diapositivaykikunaman qillqakunata yapay mana sasachakuspa .carousel-captionmayqin ukhupi kaq elementowan .item. Chay ukhupi yaqa mayqin HTML akllana kaqtapas churay chaymanta kikillanmanta chiqanchasqa chaymanta formatochasqa kanqa.

Ñawpaq kaq diapositiva etiqueta

Nulla vitae elit libero nisqa, huk pharetra augue mollis interdum nisqa.

Iskay kaq diapositiva etiqueta

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit.

Kimsa kaq diapositiva etiqueta

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Ñawpaq Qatiq

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Uso

Achka carruselkuna

Carruselkunaqa huk idhawa kaq waqaychanapi (chay .carousel) llamk'achiyta munan, carrusel kamachiykuna allinta llamk'ananpaq. Achka carruselkunata yapaspa, utaq huk carruselpa kaqta tikrachkaspa id, ama hina kaspa tupaq kamachiykunata musuqyachiy.

Atributos de datos nisqawan

Atributos de datos nisqawan yanapachikuy carruselpa maypi kayninta mana sasachakuspalla kamachinaykipaq. data-slidellalliq simikunata chaskikun prevutaq next, chaymi diapositivapa kayninta kunan kasqanman hina tikran. Hukninpiqa, data-slide-tohuk raw diapositiva indiceta carruselman pasananpaq llamk'achiy data-slide-to="2", chaymi diapositivapa kayninta huk indice particularman tikran ,wan qallarispa 0.

Atributo data-ride="carousel"nisqaqa huk carrusel nisqa p'anqa kargamanta qallarispa kawsachiq hina markanapaqmi llamk'achisqa. Mana llamk'achiy atikunmanchu (redundante chaymanta mana necesario) sut'i JavaScript qallariywan kikin carrusel kaqwan kuskachasqa.

JavaScript nisqawan

Llama a carrusel manualmente con:

$('.carousel').carousel()

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-interval="".

Métodos

.carousel(options)

Carruselta huk opcional akllanakunawan objectqallarichin chaymanta bicicletapi puriyta qallarikun imakuna kaqnintakama.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Carrusel nisqa imakunatapas lluq’imanta pañaman muyurin.

.carousel('pause')

Carruselta imakuna chawpinta bicicletapi purinanta harkan.

.carousel(number)

Carruselta huk marco particularman muyuchin (0 kaqpi, huk matrizman rikch'akuq).

.carousel('prev')

Ñawpaq kaq kaqman muyurin.

.carousel('next')

Qatiqnin kaqman muyurin.

Eventos nisqakuna

Bootstrap kaqpa carrusel clase iskay ruwaykunata rikuchin carrusel ruwanaman enganche kaqpaq.

Iskaynin ruwaykuna kay yapasqa propiedadesniyuq kanku:

• direction: Carrusel maymanchus llimp’isqan (yaqapas "left"utaq "right").
• relatedTarget: DOM elemento mayqinchus llamk'aq elemento hina maychus kananman llimp'isqa kachkan.

Llapan carrusel ruwaykuna kikin carruselpi (ichataq chay <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix.js nisqawan churana

Qatina

Affix plugin llamk'achiyta position: fixed;chaymanta wañuchiyta tikran, kaqwan tarisqa efectota qatipaspa position: sticky;. Paña kaqpi subnavigacionqa huk kawsaq demo affix plugin kaqmanta.

Uso

Affix plugin llamk'achiy willay layakuna kaqninta utaq makiwan kikin JavaScript kaqwan. Iskaynin situacionkunapi, CSS qunayki tiyan churanapaq chaymanta anchopaq k'askasqa contenidoykimanta.

Qhaway: Ama huk elementopi huk elementopi, huk aysasqa utaq tanqasqa columnapi, huk Safari ruway pantasqarayku , affix plugin llamk'achiychu .

CSS nisqawan churay

Affix plugin kimsa clasekunapura tikran, sapa huk estadota riqsichin: .affix, .affix-top, chaymanta .affix-bottom. Estilokunata qunayki tiyan, position: fixed;on kaqmanta .affixmana, kay clasekuna qam kikiykipaq (kay pluginmanta mana sapanchasqa) chiqa tiyaykuna llamk'achinapaq.

Kaypi imayna affix plugin llamk'an:

1. Qallarinapaq, plugin yapan .affix-topelemento aswan pata-aswan kayninpi kasqanmanta rikuchinanpaq. Kaypiqa mana CSS churayqa necesitakunchu.
2. K'askachiy munasqayki elementomanta ñawpaqman puriyqa chiqap k'askachiyta qallarinan tiyan. Kaypi maypi .affixtikran .affix-topchaymanta churan position: fixed;(Bootstrap kaqpa CSS kaqwan qusqa).
3. .affixSichus huk uray offset nisqa sut'inchasqa kachkan, chaymanta pasaspa kuyuchiyqa .affix-bottom. Offsetkuna munasqa kasqanrayku, hukta churayqa CSS tupaq churanayki tiyan. position: absolute;Chayna kaptinqa, necesario kaptin yapay . Pluginqa willay laya utaq JavaScript akllanata llamk'achin maypi chaymanta elementota churanapaq.

Hawa ruwanakunata qatiy CSSniyki churanaykipaq mayqinpas uraypi llamkana akllanakunapaq.

Atributos de datos nisqawan

Ima elementomanpas affix ruwayta mana sasachakuspa yapanaykipaq data-spy="affix", chay elementoman yapaylla espia munasqaykiman. Huk elementopa pinchayninta hayk'aq tikranapaqmi offset nisqakunata llamk'achiy.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

JavaScript nisqawan

JavaScript nisqawan affix plugin nisqaman waqyay:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-offset-top="200".

Métodos

.affix(options)

Contenidoykita contenido pegado hina activan. Huk akllana akllanakunata chaskikun object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Affixpa kayninta musuqmanta yupan, chayman hina elementokuna dimensiones, posición, desplazamiento posición nisqapi. Chay .affix, .affix-top, chaymanta .affix-bottomclasekuna musuq estadomanhina k'askasqa contenidoman yapasqa utaq hurqusqa. Kay métodota waqyana tiyan mayk'aqllapas dimensiones kay contenido fijado kaqmanta utaq kay elemento meta kaqmanta tikrasqa kaqtin, chaymanta allinta posicionamiento kaqmanta kay contenido fijado kaqmanta qhawanapaq.

$('#myAffix').affix('checkPosition')

Eventos nisqakuna

Bootstrap kaqpa affix plugin huk pisi ruwaykunata affix ruwanaman enganche kaqpaq riqsichin.