Kiirnäited

Kas vajate kiireid malle? Vaadake neid põhinäiteid, mille oleme kokku pannud:

Vaikimisi ruudustik

Bootstrapi osana pakutav vaikevõrgusüsteem on 940 piksli laiune 16 veeruga ruudustik. See on populaarse 960 ruudustiku süsteemi maitse, kuid ilma täiendava veeriseta/polsterduseta vasakul ja paremal küljel.

Võrgumärgistuse näide

Nagu siin näidatud, saab põhipaigutuse luua kahe "veeruga", millest igaüks hõlmab mitut 16 põhiveeru, mille määratlesime oma ruudustikusüsteemi osana. Rohkemate variatsioonide nägemiseks vaadake allolevaid näiteid.

<div class = "rida" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Pesastusveerud

Vajadusel pesastage oma sisu, luues .rowolemasolevasse veergu.

Pesastatud veergude näide

<div class = "rida" > 
  <div class = "span12" > 
    Veeru 1. tase
    <div class = "rida" > 
      <div class = "span6" > 
        2. tase
      </div>
      <div class = "span6" > 
        2. tase
      </div>
    </div>
  </div>
</div>

Rullige oma ruudustik

Bootstrapis on sisseehitatud käputäis muutujaid 940 piksli vaikevõrgusüsteemi kohandamiseks. Veidi kohandades saate muuta veergude, nende vihmaveerennide ja konteineri suurust, milles need asuvad.

Võre sees

Võrgusüsteemi muutmiseks vajalikud muutujad asuvad praegu kõik variables.less.

Nüüd kohandamiseks

Ruudustiku muutmine tähendab kolme @grid-*muutuja muutmist ja failide Less uuesti kompileerimist.

Bootstrap on varustatud kuni 24 veeruga võrgusüsteemi haldamiseks; vaikeväärtus on vaid 16. Nii näeksid teie ruudustiku muutujad välja kohandatud 24-veerulisele ruudustikule.

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

Kui olete uuesti kompileeritud, olete valmis!

Fikseeritud paigutus

Vaikimisi lihtne ja lihtne 940 piksli laiune tsentreeritud paigutus peaaegu iga veebisaidi või lehe jaoks, mille pakub üks <div.container>.

<keha>
  <div class = "konteiner" > 
    ...
  </div>
</body>

Vedeliku paigutus

Alternatiivne paindlik lehe struktuur minimaalse ja maksimaalse laiusega ning vasakpoolse külgribaga. Suurepärane rakenduste ja dokumentide jaoks.

<keha>
  <div class = "container-fluid" > 
    <div class = "külgriba" > 
      ...
    </div>
    <div class = "sisu" > 
      ...
    </div>
  </div>
</body>

Pealkirjad ja koopia

Standardne tüpograafiline hierarhia teie veebilehtede struktureerimiseks.

Kogu tüpograafiline ruudustik põhineb failis variables.less kahel Less muutujal: @basefontja @baseline. Esimene on läbivalt kasutatav põhifondi suurus ja teine ​​on baasjoone kõrgus.

Kasutame neid muutujaid ja mõningast matemaatikat kõigi meie tüüpide veeriste, polsterduste ja joonte kõrguste loomiseks ja palju muud.

h1. Pealkiri 1

h2. 2. pealkiri

h3. 3. pealkiri

h4. 4. pealkiri

h5. 5. pealkiri

h6. 6. pealkiri

Näidislõik

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.

Näidispealkirjal on alampealkiri…

Muu elemendid

Rõhu, aadresside ja lühendite kasutamine

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

Millal kasutada

Rõhumärke ( <strong>ja <em>) tuleks kasutada, et näidata sõna või fraasi täiendavat tähtsust või rõhuasetust ümbritseva koopia suhtes. Kasutage <strong>tähtsuse ja <em>stressi rõhutamiseks .

Rõhuasetus lõigus

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

Märkus . HTML5 -s on siiski lubatud kasutada <b>ja <i>silte ning need ei pea olema vastavalt paksus ja kaldkirjas (kuigi kui on semantilisem element, kasutage seda). <b>on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.

Aadressid

Elementi <address>kasutatakse selle lähima esivanema või kogu töö kontaktteabe saamiseks. Siin on kaks näidet selle kasutamise kohta:

Märkus . Sisu õigeks struktureerimiseks peab iga rida <address>lõppema reavahetusega ( <br />) või olema ümbritsetud plokitasemel märgendiga (nt ).<p>

Lühendid

Lühendite ja akronüümide jaoks kasutage <abbr>märgendit ( <acronym>on HTML5- s aegunud ). Pange stenogrammi vorm sildi sisse ja määrake täielikule nimele pealkiri.

Plokktsitaadid

<blockquote> <p> <small>

Kuidas tsiteerida

Tsitaadi lisamiseks mähkige <blockquote>ümber <p>ja <small>sildid. Kasutage <small>elementi allika viitamiseks ja selle ette kuvatakse kriips —.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr Julius Hibbert </small>
</blockquote>

Tellimata<ul>

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

Stiilita<ul.unstyled>

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

Tellitud<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Täisarv molestie lorem ja mass
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

Kirjeldusdl

Kirjeldusloendid

Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.

Euismod

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

Donec id elit non mi porta gravida ja eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kood

<code> <pre>

Viimistlege oma koodi stiilselt kahe lihtsa sildi abil. JavaScripti abil veelgi vingemaks muutmiseks sisestage Google'i koodi kaunistamise teeki ja oletegi valmis.

Koodi esitamine

Koodi, plokke või lihtsalt tekstisiseseid juppe saab kuvada stiilselt, lihtsalt mähkides õigesse sildi. Mitut rida hõlmavate koodiplokkide puhul kasutage <pre>elementi. Tekstisisese koodi jaoks kasutage <code>elementi.

<div>
  <h1>Pealkiri</h1>
  <p>Midagi siin...</p>
</div>

<div> <h1> Pealkiri </h1> <p> Midagi siin... </p> </div>
  
  

Tekstisisesed sildid

<span class="label">

Pöörake tähelepanu või märgistage mis tahes fraas oma kehatekstis.

Märgistage ükskõik mida

Oled kunagi vajanud üht sellist uhket uut! või Tähtsad lipud koodi kirjutamisel? Noh, nüüd on need teil olemas. Vaikimisi on kaasatud järgmine:

Meediumivõrk

Kuvage väikese HTML-i jalajälje ja minimaalse stiiliga lehtedel erineva suurusega pisipilte.

Pisipiltide näited

Pisipildid .media-gridvõivad olla mis tahes suurusega, kuid need töötavad kõige paremini, kui need on vastendatud otse sisseehitatud Bootstrapi ruudustikusüsteemiga. Pildi laiused, nagu 90, 210 ja 330, kombineeritakse mõne piksli täidisega, et võrdsustada .span2, .span4, ja .span6veeru suurust.

Suur

Keskmine

Väike

Nende kodeerimine

Meediumiruudud on hõlpsasti kasutatavad ja märgistuse poolel üsna lihtsad. Nende mõõtmed põhinevad ainult kaasasolevate piltide suurusel.

<ul class = "media-grid" > 
  <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>

Ehituslauad

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

Tabelid on suurepärased - paljude asjade jaoks. Suurepärased tabelid vajavad aga veidi märgistusarmastust, et olla kasulikud, skaleeritavad ja loetavad (koodi tasemel). Siin on mõned näpunäited, mis aitavad.

Mähkige veerupäised alati <thead>nii, et hierarhia oleks <thead>> <tr>> <th>.

Sarnaselt veerupäistele tuleks kogu tabeli põhisisu mähitud a-sse, <tbody>nii et teie hierarhia oleks <tbody>> <tr>> <td>.

Näide: tabeli vaikelaadid

Kõik tabelid kujundatakse automaatselt ainult oluliste ääristega, et tagada loetavus ja säilitada struktuur. Täiendavaid klasse ega atribuute pole vaja lisada.

<tabel>
  ...
</table>

Näide: tihendatud laud

Tabelite puhul, mis nõuavad kitsamates kohtades rohkem andmeid, kasutage tihendatud maitset, mis lõikab polstri pooleks. Seda saab kasutada ka koos ääriste ja sebratriipudega, nagu tabeli vaikestiile.

Näide: ääristatud tabel

Muutke oma lauad veidi elegantsemaks, ümardades nende nurki ja lisades igale poole ääriseid.

< tabeliklass = "ääristatud tabel" > 
  ...
</table>

Näide: sebratriibuline

Lisage sebraribad, lisades oma laudadele pisut elegantsi – lisage lihtsalt .zebra-stripedklass.

Märkus. Sebra-triibutamine on progresseeruv täiustus, mis pole saadaval vanematele brauseritele, nagu IE8 ja vanemad.

< tabeliklass = "sebratriibuline" > 
  ...
</table>

Näide: sebratriibuline koos TableSorter.js-iga

Eelneva näite puhul parandame oma tabelite kasulikkust, pakkudes sortimisfunktsiooni jQuery ja Tablesorteri pistikprogrammi kaudu. Sordi muutmiseks klõpsake mis tahes veeru päist.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funktsioon () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< tabeliklass = "sebratriibuline" > 
  ...
</table>

Vaikimisi stiilid

Kõigile vormidele antakse vaikestiilid, et neid loetaval ja skaleeritaval viisil esitada. Tekstisisestuse, valikuloendite, tekstialade, raadionuppude ja märkeruutude ning nuppude stiilid on saadaval.

Virnastatud vormid

Lisage .form-stackedoma vormi HTML-i ja teil on sildid nende väljade kohal, mitte vasakul. See toimib suurepäraselt, kui teie vormid on lühikesed või kui teil on raskemate vormide jaoks kaks sisendi veergu.

Vormi väljade suurused

Kohandage mis tahes vormi input, selectvõi textarealaiust, lisades märgistusele vaid mõned klassid.

Alates versioonist 1.3.0 oleme lisanud vormielementide ruudustikupõhised suuruseklassid. Kasutage neid olemasolevate .mini, .smalljne klasside asemel.

Nupud

Tavapäraselt kasutatakse nuppe toimingute jaoks, linke aga objektide jaoks. Näiteks "Laadi alla" võib olla nupp ja "hiljutine tegevus" võib olla link.

Kõik nupud on vaikimisi helehalli stiiliga, kuid erinevate värvistiilide jaoks saab rakendada mitmeid funktsionaalseid klasse. Nende klasside hulka kuuluvad sinine .primaryklass, helesinine .infoklass, roheline .successklass ja punane .dangerklass.

Näidisnupud

Nupu stiile saab rakendusega kõigele .btnrakendada. Tavaliselt soovite neid rakendada ainult <a>, <button>ja valitud <input>elementidele. See näeb välja järgmiselt:

Alternatiivsed suurused

Kas soovite suuremaid või väiksemaid nuppe? Tehke seda!

Puudega olek

Nuppude puhul, mis ei ole aktiivsed või mille rakendus ühel või teisel põhjusel keelab, kasutage keelatud olekut. Seda .disabledlinkide ja elementide :disabledjaoks .<button>

Lingid

Nupud

Mis see on

Meie ülemine riba on fikseeritud riba, millel on veebisaidi logo või nimi, peamine navigeerimine ja otsinguvorm.

Kohandatav

Kõik sees olevad elemendid ja ka kogu ülemine riba on valikulised. Saate valida, kas lisada logo/nime, navi, otsingu ja teisese navi – või nende mis tahes kombinatsiooni.

Kaasas rippmenüüd

Põhinavigeerimise osana oleme lisanud võimaluse lisada oma navigeerimisseadmele rippmenüüd. Vaadake ülaltoodud teisest navigeerimisnuppu (paremale joondatud), et näha, kuidas see on tehtud. Rippmenüüde lisildid toetavad .activeka praeguse lehevaliku kuvamist.

Vahelehed ja pillid

Looge lihtne sekundaarne navigeerimine <ul>. Vahetage vahekaarte või tablette, lisades sobiva klassi.

Suurepärane sisu alamjaotiste jaoks, nagu meie konto seadete lehed ja kasutajate ajaskaala sarnase sisuga lehtede vahel liikumiseks. Saadaval sakkide või pillidega.

Põhiliste vahekaartide näide

Vahekaarte saab kasutada tavalise navigeerimisena (väliste lehtede laadimine samale vahelehele) või vahekaartide sisualadena sisupaanide vahetamiseks. Meil on vahekaartide pistikprogramm , mida saab kasutada viimase integreerimiseks.

• Kodu
• Profiil
• Sõnumid
• Seaded
• Võtke ühendust
• Rippmenüü
  • Sekundaarne link
  • Midagi muud siin
  • Veel üks link

<ul class = "tabs" > 
  <li class = "aktiivne" ><a href = "#" > Avaleht </a></li>  
  <li><a href = "#" > Profiil </a></li> 
  <li><a href = "#" > Sõnumid </a></li> 
  <li><a href = "#" > Seaded </a></li> 
  <li><a href = "#" > Võtke ühendust </a></li> 
</ul>

Põhiliste pillide näide

• Kodu
• Profiil
• Sõnumid
• Seaded
• Võtke ühendust

<ul klass = "pillid" > 
  <li class = "aktiivne" ><a href = "#" > Avaleht </a></li>  
  <li><a href = "#" > Profiil </a></li> 
  <li><a href = "#" > Sõnumid </a></li> 
  <li><a href = "#" > Seaded </a></li> 
  <li><a href = "#" > Võtke ühendust </a></li> 
</ul>

Riivsai

Koormustee navigeerimist kasutatakse kasutajatele nende asukoha näitamiseks rakenduses või saidil, kuid mitte esmase navigeerimise jaoks.

• Kodu

• Avaleht /
• Keskmine leht

• Avaleht /
• Keskmine leht /
• Veel üks

• Avaleht /
• Keskmine leht /
• Veel üks /
• Sa oled siin

<ul class = "leivapuru" > 
  <li><a href = "#" > Avaleht </a> <span class = "jagaja" > / </span></li>   
  <li><a href = "#" > Keskmine leht </a> <span class = "jagaja" > / </span></li>   
  <li><a href = "#" > Veel üks </a> <span class = "jagaja" > / </span></li>   
  <li class = "active" > Olete siin </li> 
</ul>

Leheküljed

Rdiost inspireeritud ülilihtsustatud ja minimaalse stiiliga lehekülgede lehekülg. Suurt plokki on raske mööda vaadata, see on kergesti skaleeritav ja pakub suuri klõpsamisalasid.

<div class = "lehekülgede jagamine" > 
  <ul>
    <li class = "eelmine keelatud" ><a href = "#" > ← Eelmine </a></li>  
    <li class = "aktiivne" ><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 class = "next" ><a href = "#" > Järgmine → </a></li>  
  </ul>
</div>

Põhilised hoiatused

.alert-message

Üherealised sõnumid toimingu ebaõnnestumise, võimaliku ebaõnnestumise või õnnestumise esiletõstmiseks. Eriti kasulik vormide jaoks.

Hankige javascript »

Näidiskood

<div class = "alert-message warning" > 
  <a class = "sulge" href = "#" > × </a>  
  <p><strong> Püha guacamole! </strong> Kontrollige ennast, te ei näe liiga hea välja. </p>
</div>

Blokeeri sõnumid

.alert-message.block-message

Pisut selgitust vajavate sõnumite jaoks on meil lõigu stiili hoiatused. Need sobivad suurepäraselt pikemate veateadete esilekutsumiseks, kasutaja hoiatamiseks ootel oleva toimingu eest või lihtsalt teabe esitamiseks, et lehel rohkem rõhku panna.

Hankige javascript »

Näidiskood

<div class = "alert-message block-message warning" > 
  <a class = "sulge" href = "#" > × </a>  
  <p><strong> Püha guacamole! See on hoiatus! </strong> Kontrollige ennast, te ei näe liiga hea välja. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Tehke see toiming </a> <a class = "btn small" href = "#" > Või tehke seda </a>     
  </div>
</div>

Modaalid

Modaalid – dialoogid või valguskastid – sobivad suurepäraselt kontekstuaalsete toimingute jaoks olukordades, kus on oluline säilitada taustakontekst.

Hankige javascript »

Tööriistanõuanded

Twipsid on väga kasulikud segaduses kasutaja abistamiseks ja õiges suunas suunamiseks.

Hankige javascript »

Popovers

Kasutage hüpikaknaid, et anda lehele subtekstilist teavet ilma paigutust mõjutamata.

Hankige javascript »

Alustamine

JavaScripti integreerimine Bootstrapi teegiga on ülilihtne. Allpool käsitleme põhitõdesid ja pakume teile alustamiseks suurepäraseid pistikprogramme!

Vaata javascripti dokumente »

Mis on kaasas

Äratage mõned Bootstrapi põhikomponendid ellu uute kohandatud pistikprogrammidega, mis töötavad koos jQuery ja Enderiga . Soovitame teil neid laiendada ja muuta, et need vastaksid teie konkreetsetele arendusvajadustele.

Kas javascript on vajalik?

Ei! Bootstrap on mõeldud eelkõige CSS-i teegiks. See javascript pakub kaasatud stiilide peale põhilist interaktiivset kihti.

Neile, kes aga JavaScripti vajavad, oleme pakkunud ülalolevad pistikprogrammid, mis aitavad teil mõista, kuidas Bootstrap javascriptiga integreerida, ja pakkuda teile kohe kiiret ja kerget valikut põhifunktsioonide jaoks.

Lisateabe saamiseks ja mõne reaalajas demo vaatamiseks vaadake meie pistikprogrammi dokumentatsiooni lehte .