Modalei buruz

Javascript modalaren plugin arrunta, baina malgua, hartu behar den gutxieneko funtzionaltasun eta lehenespen adimendunekin soilik.

Adibide estatikoa

Jarraian estatikoki errendatutako modal bat dago.

Zuzeneko demoa

Aldatu modal bat javascript bidez beheko botoian klik eginez. Behera lerratu eta orriaren goialdetik lausotuko da.

Bootstrap-modal erabiliz

Deitu modala javascript bidez:

$ ( '#nireModala' ). modala ( aukerak )

Aukerak

Markatzea

Modalak zure orrialdean erraz aktibatu ditzakezu javascript lerro bakar bat idatzi beharrik gabe. Konfiguratu besterik ez dago elementu modaleko ID bati dagokion data-toggle="modal"kontroladore-elementu batean , eta sakatzean, zure modala abiaraziko du.data-target="#foo"href="#foo"

Gainera, zure instantzia modalari aukerak gehitzeko, sartu datu-atributu gehigarri gisa kontrol-elementuan edo marka modalean bertan.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Abiarazi modala </a>    

<div class = "modal hide" id = "nireModala" >  
  <div class = "goiburu-modala" > 
    <button type = "button" class = "close" data-dismiss = "modala" > × </button>   
    <h3> Goiburu modala </h3>
  </div>
  <div class = "gorputz-modala" > 
    <p> Gorputz fin bat... </p>
  </div>
  <div class = "modal-oina" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Itxi </a>   
    <a href = "#" class = "btn btn-primary" > Gorde aldaketak </a>  
  </div>
</div>

Metodoak

.modala(aukerak)

Zure edukia modal gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

$ ( '#nireModala' ). modala ({
  teklatua : faltsua 
})

.modal('toggle')

Modal bat eskuz aldatzen du.

$ ( '#nireModala' ). modala ( 'aldatu' )

.modal('erakutsi')

Eskuz modal bat irekitzen du.

$ ( '#nireModala' ). modala ( 'erakutsi' )

.modal('ezkutatu')

Eskuz ezkutatzen du modal bat.

$ ( '#nireModala' ). modala ( 'ezkutatu' )

Gertaerak

Bootstrap-en klase modalak funtzionalitate modalean konektatzeko gertaera batzuk erakusten ditu.

$ ( '#nireModala' ). on ( 'ezkutatuta' , funtzioa () {   
  // Zerbait egin…
})

Goitibeherei buruz

Gehitu goitibeherako menuak Bootstrap-en ia ezeri plugin sinple honekin. Bootstrap-ek goitibeherako menuaren laguntza osoa du nabigazio barran, fitxetan eta piluletan.

Adibideak

Egin klik goitibeherako nabigazio esteketan nabbarran eta beheko piluletan goitibeherako zerrendak probatzeko.

• Lotura arrunta
• Goitibehera
  • Action
  • Another action
  • Something else here
  • Separated link
• Goitibehera 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Goitibehera 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bootstrap-dropdown.js erabiliz

Deitu goitibehetara javascript bidez:

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

Markatzea

Edozein elementuri goitibeherako funtzionalitateak azkar gehitzeko, gehitu data-toggle="dropdown"eta baliozko edozein abiarazte goitibeherako goitibeherako aukera automatikoki aktibatuko da.

<ul class = "nav nav-pilulak" > 
  <li class = "active" ><a href = "#" > Esteka arrunta </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Goitibehera
      <b class = "caret" ></b> 
    </a>
    <ul class = "menua goitibeherako" > 
      <li><a href = "#" > Ekintza </a></li> 
      <li><a href = "#" > Beste ekintza bat </a></li> 
      <li><a href = "#" > Hemen beste zerbait </a></li> 
      <li class = "banatzailea" ></li> 
      <li><a href = "#" > Esteka bereizia </a></li> 
    </ul>
  </li>
  ...
</ul>

URLak osorik mantentzeko, erabili data-targetatributua href="#".

<ul class = "nav nav-pilulak" > 
  <li class = "goiburua" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Goitibehera
      <b class = "caret" ></b> 
    </a>
    <ul class = "menua goitibeherako" > 
      ...
    </ul>
  </li>
</ul>

Metodoak

$(). dropdown()

Nabigazio barra edo fitxadun nabigazio baterako menuak aktibatzeko API programatikoa.

ScrollSpy plugina nabigazio-helburuak automatikoki eguneratzeko da, korritze-posizioan oinarrituta.

Nabigazio barraren adibidea scrollspy-rekin

Joan beheko eremuan eta ikusi nabigazioaren eguneraketa. Goitibeherako azpielementuak ere nabarmenduko dira. Saiatu!

Bootstrap-scrollspy.js erabiliz

Deitu scrollspy javascript bidez:

$ ( '#navbar' ). scrollspy ()

Markatzea

Scrollspy portaera zure goiko barrako nabigazioan erraz gehitzeko, gehitu data-spy="scroll"espioi nahi duzun elementuari (normalean hau gorputza izango litzateke).

<body data-spy = "korritu" > ... </body>  

Metodoak

.scrollspy('freskatu')

Scrollspy DOMetik elementuak gehitzearekin edo kentzearekin batera erabiltzean, freskatzeko metodora deitu beharko duzu honela:

$ ( '[data-spy="scroll"]' ). bakoitza ( funtzioa () {  
  var $spy = $ ( hau ). scrollspy ( 'freskatu' )
});

Aukerak

Gertaerak

Plugin honek fitxa eta pilulen funtzionaltasun azkarrak eta dinamikoak gehitzen ditu tokiko edukitik igarotzeko.

Adibide fitxak

Egin klik beheko fitxetan ezkutuko panelen artean aldatzeko, baita goitibeherako menuen bidez ere.

• Hasiera
• Profila
• Goitibehera
  • @fat
  • @mdo

Bootstrap-tab.js erabiliz

Gaitu tabulatzeko fitxak javascript bidez (fitxa bakoitza banan-banan aktibatu behar da):

$ ( '#nireTab a' ). egin klik ( funtzioa ( e ) {  
  e . preventDefault ();
  $ ( hau ). fitxa ( 'erakutsi' );
})

Banakako fitxak hainbat modutara aktibatu ditzakezu:

$ ( '#myTab a[href="#profile"]' ). fitxa ( 'erakutsi' ); // Hautatu fitxa izenaren arabera 
$ ( '#nireTab a:lehena' ). fitxa ( 'erakutsi' ); // Hautatu lehen fitxa 
$ ( '#nireTab a:azkena' ). fitxa ( 'erakutsi' ); // Hautatu azken fitxa 
$ ( '#myTab li:eq(2) a' ). fitxa ( 'erakutsi' ); // Hautatu hirugarren fitxa (0-indexatua) 

Markatzea

Fitxa edo pilulen nabigazioa aktiba dezakezu javascriptik idatzi gabe elementu batean data-toggle="tab"edo zehaztu besterik ez baduzu. eta klaseak fitxara data-toggle="pill"gehitzeak bootstrap fitxaren estiloa aplikatuko du.navnav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hasiera </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profila </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mezuak </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Ezarpenak </a></li>  
</ul>

Metodoak

$().tab

Fitxa-elementu eta eduki-edukiontzi bat aktibatzen du. Tabulak DOM-eko edukiontzi-nodo bat izan behar data-targetdu href.

<ul class = "nav nav-tabs" id = "nireTab" >  
  <li class = "active" ><a href = "#home" > Hasiera </a></li>  
  <li><a href = "#profile" > Profila </a></li> 
  <li><a href = "#messages" > Mezuak </a></li> 
  <li><a href = "#settings" > Ezarpenak </a></li> 
</ul>
 
<div class = "tab-edukia" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profila" > ... </div>  
  <div class = "tab-pane" id = "mezuak" > ... </div>  
  <div class = "tab-pane" id = "ezarpenak" > ... </div>  
</div>
 
<gidoia>
  $ ( funtzioa () {  
    $ ( '#nireTab a:azkena' ). fitxa ( 'erakutsi' );
  })
</script>

Gertaerak

$ ( 'a[data-toggle="tab"]' ). on ( 'erakutsi' , funtzioa ( e ) {   
  e . xede // fitxa aktibatuta
  e . relatedTarget // aurreko fitxa
})

Tresna-aholkuei buruz

Jason Frame-k idatzitako jQuery.tipsy plugin bikainean inspiratuta; Tresna-aholkuak bertsio eguneratua dira, irudietan oinarritzen ez direnak, animazioetarako css3 erabiltzen dutenak eta titulu lokalak biltegiratzeko datu-atributuak.

Tooltips-en erabilera adibidea

Pasatu ondoko esteken gainean tresna-aholkuak ikusteko:

Bootstrap-tooltip.js erabiliz

Aktibatu tresna-informazioa javascript bidez:

$ ( '#adibidea' ). tresna-informazioa ( aukerak )

Aukerak

Markatzea

Errendimenduaren arrazoiengatik, Tooltip eta Popover datu-apiak aukeratzen dira. Erabili nahi badituzu, zehaztu hautatzaile-aukera bat.

<a href = "#" rel = "tooltip" title = "lehen tresna-aholkua" > pasatu pasa ezazu nire gainean </a>   

Metodoak

$().tooltip(aukerak)

Elementu bilduma bati tresna-informazio-kudeatzailea eransten dio.

.tooltip('erakutsi')

Elementu baten argibidea erakusten du.

$ ( '#elementua' ). tresna -informazioa ( 'erakutsi' )

.tooltip('ezkutatu')

Elementu baten argibidea ezkutatzen du.

$ ( '#elementua' ). tresna -informazioa ( 'ezkutatu' )

.tooltip('toggle')

Elementu baten tresna-informazioa aktibatzen du.

$ ( '#elementua' ). tresna -informazioa ( 'aldatu' )

Popovers buruz

Gehitu edukiaren gainjartze txikiak, iPad-en bezalakoak, bigarren mailako informazioa gordetzeko edozein elementuri.

* Tresna -informazioa sartzea eskatzen du

Adibidea pasatzeko popover

Pasatu botoiaren gainean popover-a abiarazteko.

Bootstrap-popover.js erabiliz

Gaitu popover-ak javascript bidez:

$ ( '#adibidea' ). popover ( aukerak )

Aukerak

Markatzea

Errendimenduaren arrazoiengatik, Tooltip eta Popover datu-apiak aukeratzen dira. Erabili nahi badituzu, zehaztu hautatzaile-aukera bat.

Metodoak

$().popover(aukerak)

Elementu bilduma baterako popover-ak hasieratzen ditu.

.popover('erakutsi')

Elementu popover bat erakusten du.

$ ( '#elementua' ). popover ( 'erakutsi' )

.popover('ezkutatu')

Elementuen popover bat ezkutatzen du.

$ ( '#elementua' ). popover ( 'ezkutatu' )

.popover('toggle')

Elementu-jabea aktibatzen du.

$ ( '#elementua' ). popover ( 'aldatu' )

Alertari buruz

Alerta plugina abisuei funtzionaltasun hurbilak gehitzeko klase txikia da.

Adibide alertak

Alerta-pluginak alerta-mezu arruntetan funtzionatzen du eta blokeatzen ditu.

Bootstrap-alert.js erabiliz

Gaitu alerta bat baztertzeko javascript bidez:

$ ( ".alerta" ). alerta ()

Markatzea

Gehitu data-dismiss="alert"ixteko botoia automatikoki alerta ixteko funtzionaltasuna emateko.

<a class = "close" data-dismiss = "alerta" href = "#" > × </a>   

Metodoak

$().alerta()

Alerta guztiak funtzionaltasun estuarekin biltzen ditu. Itxitakoan alertak animatzeko, ziurtatu .fadeeta .inklasea dagoeneko aplikatuta daukatela.

.alert('itxi')

Alerta bat ixten du.

$ ( ".alerta" ). alerta ( 'itxi' )

Gertaerak

Bootstrap-en alerta-klaseak gertaera batzuk erakusten ditu alerta-funtzionalitatean konektatzeko.

$ ( '#nire-alerta' ). bind ( 'itxia' , funtzioa () {   
  // Zerbait egin…
})

Buruz

Egin gehiago botoiekin. Kontrolatu botoien egoerak edo sortu botoi-taldeak tresna-barrak bezalako osagai gehiagotarako.

Erabilera adibide

Erabili botoien plugina estatuetarako eta txandakatzeko.

Bootstrap-button.js erabiliz

Gaitu botoiak javascript bidez:

$ ( '.nav-tabs' ). botoia ()

Markatzea

Datu-atributuak botoiaren pluginaren osagaiak dira. Begiratu beheko adibideko kodea markaketa mota ezberdinetarako.

<!-- Gehitu data-toggle="button" botoi bakarrean txandakatzea aktibatzeko -->
<button class = "btn" data-toggle = "button" > Etengailu bakarra </button>  
 
<!-- Gehitu data-toggle="buttons-checkbox" btn-group-en kontrol-laukiaren estiloa aldatzeko -->
<div class = "btn-group" data-toggle = "botoiak-kontrol-laukia" >  
  <button class = "btn" > Ezkerrean </button> 
  <button class = "btn" > Erdikoa </button> 
  <button class = "btn" > Eskuinera </button> 
</div>
 
<!-- Gehitu data-toggle="buttons-radio" btn-group-en irrati-estiloa aldatzeko -->
<div class = "btn-group" data-toggle = "botoiak-irratia" >  
  <button class = "btn" > Ezkerrean </button> 
  <button class = "btn" > Erdikoa </button> 
  <button class = "btn" > Eskuinera </button> 
</div>

Metodoak

$().button('toggle')

Bultza-egoera aktibatzen du. Botoiari aktibatuta dagoen itxura ematen dio.

<button class = "btn" data-toggle = "botoia" > … </button>   

$().button('kargatzen')

Botoiaren egoera kargatzeko ezartzen du - botoia desgaitzen du eta testua kargatzeko testuarekin aldatzen du. Testua kargatzeko botoiaren elementuan definitu behar da datu-atributua erabiliz data-loading-text.

<button class = "btn" data-loading-text = "gauzak kargatzen..." > ... </button>   

$().button('berrezarri')

Botoiaren egoera berrezartzen du - testua jatorrizko testuarekin aldatzen du.

$().button(katea)

Botoiaren egoera berrezartzen du - testua definitutako edozein testu-egoera aldatzen du.

<button class = "btn" data-complete-text = "amaitu!" > ... </button>   
<gidoia>
  $ ( '.btn' ). botoia ( 'osatu' )
</script>

Buruz

Lortu oinarrizko estiloak eta laguntza malgua osagai tolesgarrietarako, hala nola akordeoiak eta nabigazioa.

* Transitions plugina sartzea eskatzen du.

Adibide akordeoia

Collapse plugina erabiliz, akordeoi estiloko widget sinple bat eraiki dugu:

Bootstrap-collapse.js erabiliz

Gaitu javascript bidez:

$ ( ".kolapsoa" ). kolapsatu ()

Aukerak

Markatzea

Gehitu data-toggle="collapse"eta a data-targetelementua tolesgarria den elementu baten kontrola automatikoki esleitzeko. Atributuak css hautatzaile bat onartzen du data-targetkolapsoa aplikatzeko. Ziurtatu klasea gehitzen duzula collapseelementu tolesgarrian. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria in.

<button class = "btn btn-danger" data-toggle = "kolapso" data-target = "#demo" >   
  tolesgarri sinplea
</button>
 
<div id = "demo" class = "kolapsoa" > … </div>  

Metodoak

.kolapso(aukerak)

Zure edukia elementu tolesgarri gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

$ ( '#nireTolesgarria' ). tolestu ({
  toggle : faltsu 
})

.kolapso('toggle')

Elementu tolesgarri bat bistaratzen edo ezkutuan jartzen du.

.kolapso('erakutsi')

Elementu tolesgarria erakusten du.

.kolapso('ezkutatu')

Elementu tolesgarri bat ezkutatzen du.

Gertaerak

Bootstrap-en kolapso-klaseak kolapso-funtzionalitatean konektatzeko gertaera batzuk erakusten ditu.

$ ( '#nireTolesgarria' ). on ( 'ezkutatuta' , funtzioa () {   
  // Zerbait egin…
})

Buruz

Elementuetan zehar bizikletaz ibiltzeko plugin generikoa. Zalditxo bat.

Carrusel adibidea

Ikusi beheko aurkezpena.

Lehenengo irudi txikiaren etiketa

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Bootstrap-carousel.js erabiliz

Deitu javascript bidez:

$ ( '.karrusela' ). karrusela ()

Aukerak

Markatzea

Datu-atributuak aurreko eta hurrengo kontroletarako erabiltzen dira. Begiratu beheko adibideko markaketa.

<div id = "myCarousel" class = "karruselaren diapositiba" >  
  <!-- Karruselaren elementuak -->
  <div class = "karruselaren barne" > 
    <div class = "elementu aktiboa" > … </div> 
    <div class = "elementua" > … </div> 
    <div class = "elementua" > … </div> 
  </div>
  <!-- Karruselaren nabigazioa -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "aurrekoa" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "hurrengoa" > › </a>   
</div>

Metodoak

.carousel(aukerak)

Karrusela hautazko aukera batekin hasieratzen du objecteta elementuen bidez bizikletaz hasten da.

$ ( '.karrusela' ). karrusela ({
  tartea : 2000 
})

.carousel('zikloa')

Karruselaren elementuetan zehar ibiliko da ezkerretik eskuinera.

.carousel('pausa')

Karrusela elementuetan zehar bizikletaz ibiltzeari uzten dio.

.karrusela(zenbakia)

Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera).

.carousel('aurrekoa')

Zikloak aurreko elementura.

.carousel('hurrengo')

Zikloak hurrengo elementura.

Gertaerak

Bootstrap-en karrusel klaseak bi gertaera erakusten ditu karruselaren funtzionalitatera konektatzeko.

Buruz

Oinarrizko eta erraz hedatzen den plugin bat idazkera dotoreak azkar sortzeko edozein inprimakiko testu sarrerarekin.

Adibidea

Hasi beheko eremuan idazten aurretik idatzitako emaitzak erakusteko.

Bootstrap-typeahead.js erabiliz

Deitu typeahead javascript bidez:

$ ( '.typeahead' ). idatzi aurretik ()

Aukerak

Markatzea

Gehitu datu-atributuak idazteko aurretiko funtzionaltasuna duen elementu bat erregistratzeko.

<input type = "text" data- provide = "typeahead" >  

Metodoak

.typeahead(aukerak)

Sarrera bat idazketa batekin hasieratzen du.