Vinnige begin voorbeelde

Het jy vinnige sjablone nodig? Kyk na hierdie basiese voorbeelde wat ons saamgestel het:

Verstek rooster

Die verstek roosterstelsel wat as deel van Bootstrap verskaf word, is 'n 940px wye 16-kolom rooster. Dit is 'n geur van die gewilde 960-roosterstelsel, maar sonder die bykomende marge/opvulling aan die linker- en regterkant.

Voorbeeld roosteropmerking

Soos hier getoon, kan 'n basiese uitleg geskep word met twee "kolomme", wat elk oor 'n aantal van die 16 grondkolomme strek wat ons as deel van ons roosterstelsel gedefinieer het. Sien die voorbeelde hieronder vir meer variasies.

<div klas = "ry" > 
  <div klas = "span6" > 
    ...
  </div>
  <div klas = "span10" > 
    ...
  </div>
</div>

Nestende kolomme

Nest jou inhoud as jy moet deur 'n .rowbinne 'n bestaande kolom te skep.

Voorbeeld van geneste kolomme

<div klas = "ry" > 
  <div klas = "span12" > 
    Vlak 1 van kolom
    <div klas = "ry" > 
      <div klas = "span6" > 
        Vlak 2
      </div>
      <div klas = "span6" > 
        Vlak 2
      </div>
    </div>
  </div>
</div>

Rol jou eie rooster

In Bootstrap is 'n handvol veranderlikes ingebou om die standaard 940px-roosterstelsel aan te pas. Met 'n bietjie aanpassing kan jy die grootte van kolomme, hul geute en die houer waarin hulle woon, verander.

Binne die rooster

Die veranderlikes wat nodig is om die roosterstelsel te wysig, is tans almal in variables.less.

Nou om aan te pas

Om die rooster te wysig beteken om die drie @grid-*veranderlikes te verander en die Less-lêers weer saam te stel.

Bootstrap is toegerus om 'n roosterstelsel met tot 24 kolomme te hanteer; die verstek is net 16. Hier is hoe jou roosterveranderlikes gepasmaak vir 'n 24-kolom-rooster sal lyk.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Sodra dit hersaamgestel is, sal jy gereed wees!

Vaste uitleg

Die verstek en eenvoudige 940px-wye, gesentreerde uitleg vir omtrent enige webwerf of bladsy wat deur 'n enkele <div.container>.

<liggaam>
  <div klas = "houer" > 
    ...
  </div>
</body>

Vloeibare uitleg

'n Alternatiewe, buigsame vloeibare bladsystruktuur met min- en maksimum-breedtes en 'n linkerkantste sybalk. Ideaal vir toepassings en dokumente.

<liggaam>
  <div klas = "houer-vloeistof" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div klas = "inhoud" > 
      ...
    </div>
  </div>
</body>

Opskrifte en kopie

'n Standaard tipografiese hiërargie vir die strukturering van jou webblaaie.

Die hele tipografiese rooster is gebaseer op twee Less veranderlikes in ons variables.less lêer: @basefonten @baseline. Die eerste is die basiese lettergrootte wat deurgaans gebruik word en die tweede is die basislynhoogte.

Ons gebruik daardie veranderlikes, en 'n mate van wiskunde, om die marges, opvullings en lynhoogtes van al ons tipe en meer te skep.

h1. Opskrif 1

h2. Opskrif 2

h3. Opskrif 3

h4. Opskrif 4

h5. Opskrif 5

h6. Opskrif 6

Voorbeeld paragraaf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Voorbeeldopskrif Het subopskrif...

Misc. elemente

Gebruik klem, adresse en afkortings

<strong> <em> <address> <abbr>

Wanneer om te gebruik

Klemmerkers ( <strong>en <em>) moet gebruik word om bykomende belangrikheid of klem van 'n woord of frase aan te dui relatief tot die omliggende kopie. Gebruik <strong>vir belangrikheid en <em>vir stresbeklemtoning .

Beklemtoning in 'n paragraaf

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , uit fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, 'n pharetra augue.

Let wel: Dit is steeds in orde om <b>en <i>merkers in HTML5 te gebruik en hulle hoef nie onderskeidelik vet en kursief gestileer te word nie (hoewel as daar 'n meer semantiese element is, gebruik dit). <b>is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>dit meestal vir stem, tegniese terme, ens.

Adresse

Die <address>element word gebruik vir kontakinligting vir sy naaste voorouer, of die hele liggaam van werk. Hier is twee voorbeelde van hoe dit gebruik kan word:

Let wel: Elke reël in 'n <address>moet eindig met 'n reëlbreuk ( <br />) of toegedraai word in 'n blokvlakmerker (bv. <p>) om die inhoud behoorlik te struktureer.

Afkortings

Vir afkortings en akronieme, gebruik die <abbr>merker ( <acronym>is afgekeur in HTML5 ). Plaas die snelskrifvorm binne die etiket en stel 'n titel vir die volledige naam.

Blokaanhalings

<blockquote> <p> <small>

Hoe om aan te haal

Om 'n blokaanhaling in te sluit, draai <blockquote>om <p>en <small>merk. Gebruik die <small>element om jou bron aan te haal en jy sal 'n em-streep —voor dit kry.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

<blokaanhaling>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Ongeorden<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Heelgetal molestie lorem by massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat by
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ongestileer<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Heelgetal molestie lorem by massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat by
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Bestel<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Heelgetal molestie lorem by massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Beskrywingdl

Beskrywing lyste

'n Beskrywingslys is perfek om terme te definieer.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida by eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kode

<code> <pre>

Pimp jou kode in styl met twee eenvoudige etikette. Vir nog meer ongelooflikheid deur JavaScript, gaan in Google se kode-pretify-biblioteek en jy is gereed.

Bied kode aan

Kode, blokke van of net brokkies inlyn, kan met styl vertoon word net deur die regte merker in te vou. Vir blokke kode wat oor verskeie reëls strek, gebruik die <pre>element. Vir inlyn kode, gebruik die <code>element.

<div>
  <h1>Opskrif</h1>
  <p>Iets hier...</p>
</div>

<div> <h1> Opskrif </h1> <p> Iets hier... </p> </div>
  
  

Inlyn etikette

<span class="label">

Vestig aandag op of vlag enige frase in jou liggaamsteks.

Merk enigiets

Het al ooit een van daardie fancy Nuwe nodig gehad! of Belangrike vlae wanneer kode geskryf word? Wel, nou het jy hulle. Hier is wat by verstek ingesluit is:

Media rooster

Vertoon duimnaels van verskillende groottes op bladsye met 'n lae HTML-voetspoor en minimale style.

Voorbeeld-kleinkiekies

Kleinkiekies in die .media-gridkan enige grootte wees, maar hulle werk die beste wanneer dit direk na die ingeboude Bootstrap-roosterstelsel gekarteer word. Prentwydtes soos 90, 210 en 330 kombineer met 'n paar pixels vulling om gelyk te wees aan die .span2, .span4, en .span6kolomgroottes.

Groot

Medium

Klein

Koder hulle

Mediaroosters is maklik om te gebruik en redelik eenvoudig aan die opmaakkant. Hul afmetings is suiwer gebaseer op die grootte van die beelde wat ingesluit is.

<ul klas = "media-rooster" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Die bou van tafels

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tafels is wonderlik - vir baie dinge. Groot tabelle het egter 'n bietjie opmaakliefde nodig om bruikbaar, skaalbaar en leesbaar te wees (op die kodevlak). Hier is 'n paar wenke om te help.

Draai altyd jou kolomopskrifte <thead>so in dat hiërargie <thead>> <tr>> is <th>.

Soortgelyk aan die kolomopskrifte, moet al jou tabel se liggaamsinhoud in 'n toegedraai word <tbody>sodat jou hiërargie <tbody>> <tr>> is <td>.

Voorbeeld: Verstek tabelstyle

Alle tabelle sal outomaties gestileer word met slegs die noodsaaklike grense om leesbaarheid te verseker en struktuur te behou. Dit is nie nodig om ekstra klasse of eienskappe by te voeg nie.

<tabel>
  ...
</tabel>

Voorbeeld: Gekondenseerde tafel

Vir tabelle wat meer data in nouer spasies benodig, gebruik die gekondenseerde geur wat vulling in die helfte sny. Dit kan ook saam met grense en sebrastrepe gebruik word, net soos die standaard tafelstyle.

Voorbeeld: Bordered tabel

Laat jou tafels net 'n bietjie slanker lyk deur hul hoeke af te rond en rande aan alle kante by te voeg.

<table class = "bordered-table" > 
  ...
</tabel>

Voorbeeld: Sebra-gestreepte

Raak 'n bietjie fyn met jou tafels deur sebrastrepe by te voeg—voeg net die .zebra-stripedklas by.

Let wel: Zebra-striping is 'n progressiewe verbetering wat nie beskikbaar is vir ouer blaaiers soos IE8 en onder nie.

<tafelklas = " sebra-gestreepte" > 
  ...
</tabel>

Voorbeeld: Sebra-gestreep met TableSorter.js

As ons die vorige voorbeeld neem, verbeter ons die bruikbaarheid van ons tabelle deur sorteerfunksies te verskaf via jQuery en die Tablesorter- inprop. Klik op enige kolom se opskrif om die sortering te verander.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<skrif > 
  $ ( funksie () { 
    $ ( "tabel#sorteerTabelVoorbeeld" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<tafelklas = " sebra-gestreepte" > 
  ...
</tabel>

Verstek style

Alle vorms kry verstekstyle om dit op 'n leesbare en skaalbare manier aan te bied. Style word verskaf vir teksinvoere, kieslyste, teksareas, radioknoppies en merkblokkies, en knoppies.

Gestapelde vorms

Voeg .form-stackedby jou vorm se HTML en jy sal etikette bo-op hul velde hê in plaas van aan hul linkerkant. Dit werk uitstekend as jou vorms kort is of as jy twee kolomme insette het vir swaarder vorms.

Vorm veldgroottes

Pas enige vorm input, select, of textareabreedte aan deur net 'n paar klasse by jou opmaak te voeg.

Vanaf v1.3.0 het ons die roostergebaseerde grootteklasse vir vormelemente bygevoeg. Gebruik asseblief hierdie oor die bestaande .mini, .small, ens klasse.

Knoppies

As 'n konvensie word knoppies vir aksies gebruik terwyl skakels vir voorwerpe gebruik word. Byvoorbeeld, "Laai af" kan 'n knoppie wees en "onlangse aktiwiteit" kan 'n skakel wees.

Alle knoppies is standaard 'n liggrys styl, maar 'n aantal funksionele klasse kan vir verskillende kleurstyle toegepas word. Hierdie klasse sluit 'n blou .primaryklas, 'n ligblou .infoklas, 'n groen .successklas en 'n rooi .dangerklas in.

Voorbeeld knoppies

Knoppiestyle kan op enigiets met die .btntoegepaste toegepas word. Tipies sal jy dit net op <a>, <button>, en selekteer <input>-elemente wil toepas. Hier is hoe dit lyk:

Alternatiewe groottes

Lus vir groter of kleiner knoppies? Hou dit aan!

Gestremde toestand

Vir knoppies wat nie aktief is nie of om een ​​of ander rede deur die toepassing gedeaktiveer word, gebruik die gedeaktiveerde toestand. Dit is .disabledvir skakels en :disabledvir <button>elemente.

Skakels

Knoppies

Wat is dit

Ons boonste balk is 'n vaste balk wat 'n webwerf se logo of naam, primêre navigasie en soekvorm bevat.

Aanpasbaar

Alle elemente binne, en ook die hele boonste balk, is opsioneel. U kan kies om 'n logo/naam, navigasie, soektog en 'n sekondêre navigasie in te sluit—of enige kombinasie daarvan.

Aftrekkies ingesluit

As deel van die hoofnavigasie het ons die vermoë ingesluit vir jou om aftreklys by jou navigasie te voeg. Kyk na die sekondêre navigasie hierbo (regsbelyn) om te sien hoe dit gedoen word. Dropdown- lietikette ondersteun ook .activeom huidige bladsykeuse te wys.

Tabs en pille

Skep eenvoudige sekondêre navigasie met 'n <ul>. Wissel tussen oortjies of pille deur die toepaslike klas by te voeg.

Ideaal vir onderafdelings van inhoud soos ons rekeninginstellingsbladsye en gebruikerstydlyne om tussen bladsye met soortgelyke inhoud te wissel. Beskikbaar in oortjies of pilstyle.

Voorbeeld van basiese oortjies

Oortjies kan gebruik word as gereelde navigasie (laai eksterne bladsye in dieselfde oortjie) of as oortjiebare inhoudsareas om inhoudsruite uit te ruil. Ons het 'n tabs-inprop wat gebruik kan word om laasgenoemde te integreer.

• Tuis
• Profiel
• Boodskappe
• Instellings
• Kontak
• Aftreklys
  • Sekondêre skakel
  • Iets anders hier
  • Nog 'n skakel

<ul klas = "tabs" > 
  <li klas = "aktief" ><a href = "#" > Tuis </a></li>  
  <li><a href = "#" > Profiel </a></li> 
  <li><a href = "#" > Boodskappe </a></li> 
  <li><a href = "#" > Instellings </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

Basiese pille voorbeeld

• Tuis
• Profiel
• Boodskappe
• Instellings
• Kontak

<ul klas = "pille" > 
  <li klas = "aktief" ><a href = "#" > Tuis </a></li>  
  <li><a href = "#" > Profiel </a></li> 
  <li><a href = "#" > Boodskappe </a></li> 
  <li><a href = "#" > Instellings </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

Broodkrummels

Broodkrummelnavigasie word gebruik as 'n manier om gebruikers te wys waar hulle binne 'n toepassing of 'n werf is, maar nie vir primêre navigasie nie.

• Tuis

• Tuis /
• Middelblad

• Tuis /
• Middelblad /
• Nog een

• Tuis /
• Middelblad /
• Nog een /
• Jy is hier

<ul class = "broodkrummel" > 
  <li><a href = "#" > Tuis </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Middelbladsy </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Nog een  </a> <span class = "divider" > / </span></li>  
  <li class = "aktief" > Jy is hier </li> 
</ul>

Paginering

Ultra simplisties en minimaal gestileer paginering geïnspireer deur Rdio. Die groot blok is moeilik om te mis, maklik skaalbaar en bied groot klikareas.

<div klas = "paginering" > 
  <ul>
    <li class = "prev disabled" ><a href = "#"> & larr ; Vorige </a></li>  
    <li klas = "aktief" ><a href = "#" > 1 </a></li>  
    <li><a href = "#"> 2 </a> </li> 
    <li><a href = "#"> 3 </a> </li> 
    <li><a href = "#"> 4 </a> </li> 
    <li><a href = "#"> 5 </a> </li> 
    <li klas = "volgende" ><a href = "#" > Volgende → </a></li>  
  </ul>
</div>

Basiese waarskuwings

.alert-message

Eenlynboodskappe om die mislukking, moontlike mislukking of sukses van 'n aksie uit te lig. Veral nuttig vir vorms.

Kry die javascript »

Voorbeeld kode

<div class = "waarskuwingsboodskapwaarskuwing" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Heilige guacamole! </strong> Beste kyk self, jy lyk nie te goed nie. </p>
</div>

Blokkeer boodskappe

.alert-message.block-message

Vir boodskappe wat 'n bietjie verduideliking vereis, het ons paragraafstylwaarskuwings. Dit is perfek om langer foutboodskappe op te borrel, 'n gebruiker te waarsku oor 'n hangende handeling, of om net inligting aan te bied vir meer klem op die bladsy.

Kry die javascript »

Voorbeeld kode

<div class = "waarskuwing-boodskap blok-boodskap waarskuwing" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Heilige guacamole! Dit is 'n waarskuwing! </strong> Beste kyk self, jy lyk nie te goed nie. Nulla vitae elit libero, 'n pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div klas = "waarskuwing-aksies" > 
    <a class = "btn small" href = "#" > Neem hierdie aksie </a> <a class = "btn small" href = "#" > Of doen dit </a>     
  </div>
</div>

Modale

Modale—dialoë of ligkassies—is ideaal vir kontekstuele aksies in situasies waar dit belangrik is dat die agtergrondkonteks behou word.

Kry die javascript »

Gereedskapwenke

Twipsies is baie nuttig om 'n verwarde gebruiker te help en hulle in die regte rigting te wys.

Kry die javascript »

Popovers

Gebruik opspringers om subtekstuele inligting aan 'n bladsy te verskaf sonder om uitleg te beïnvloed.

Kry die javascript »

Aan die gang kom

Die integrasie van javascript met die Bootstrap-biblioteek is baie maklik. Hieronder gaan ons oor die basiese beginsels en bied u 'n paar wonderlike inproppe om u aan die gang te kry!

Bekyk javascript-dokumente »

Wat ingesluit is

Bring sommige van Bootstrap se primêre komponente tot lewe met nuwe pasgemaakte inproppe wat met jQuery en Ender werk . Ons moedig u aan om dit uit te brei en aan te pas om by u spesifieke ontwikkelingsbehoeftes te pas.

Is javascript nodig?

Nope! Bootstrap is eerstens ontwerp om 'n CSS-biblioteek te wees. Hierdie javascript bied 'n basiese interaktiewe laag bo-op die ingeslote style.

Vir diegene wat wel javascript nodig het, het ons die plugins hierbo verskaf om jou te help verstaan ​​hoe om Bootstrap met javascript te integreer en om jou dadelik 'n vinnige, liggewig opsie vir die basiese funksionaliteit te gee.

Vir meer inligting en om 'n paar lewendige demonstrasies te sien, verwys asseblief na ons inpropdokumentasiebladsy .