Greitos pradžios pavyzdžiai

Reikia greitų šablonų? Peržiūrėkite šiuos pagrindinius mūsų surinktus pavyzdžius:

Numatytasis tinklelis

Numatytoji tinklelio sistema, pateikiama kaip Bootstrap dalis, yra 940 pikselių pločio 16 stulpelių tinklelis. Tai populiarios 960 tinklelio sistemos skonis, bet be papildomos paraštės / užpildymo kairėje ir dešinėje pusėse.

Tinklelio žymėjimo pavyzdys

Kaip parodyta čia, pagrindinį išdėstymą galima sukurti su dviem „stulpeliais“, kurių kiekvienas apima 16 pagrindinių stulpelių, kuriuos apibrėžėme kaip tinklelio sistemos dalį. Daugiau variantų rasite toliau pateiktuose pavyzdžiuose.

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

Įdėti stulpelius

Jei reikia, įdėkite turinį sukurdami .rowesamame stulpelyje.

Įdėtų stulpelių pavyzdys

<div class = "row" > 
  <div class = "span12" > 
    1 stulpelio lygis
    <div class = "row" > 
      <div class = "span6" > 
        2 lygis
      </div>
      <div class = "span6" > 
        2 lygis
      </div>
    </div>
  </div>
</div>

Susukite savo tinklelį

„Bootstrap“ yra keletas kintamųjų, skirtų tinkinti numatytąją 940 pikselių tinklelio sistemą. Šiek tiek pritaikydami galite keisti stulpelių, jų latakų ir konteinerio, kuriame jie yra, dydį.

Tinklelio viduje

Šiuo metu visi kintamieji, reikalingi tinklelio sistemai modifikuoti, yra variables.less.

Dabar tinkinti

Keičiant tinklelį, reikia pakeisti tris @grid-*kintamuosius ir perkompiliuoti mažiau failų.

„Bootstrap“ yra pritaikyta valdyti tinklelio sistemą su iki 24 stulpelių; numatytasis yra tik 16. Štai kaip jūsų tinklelio kintamieji atrodytų pritaikyti 24 stulpelių tinkleliui.

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

Kai sukompiliuosite iš naujo, būsite pasiruošę!

Fiksuotas išdėstymas

Numatytasis ir paprastas 940 pikselių pločio, centre išdėstytas išdėstymas beveik bet kuriai svetainei ar puslapiui, kurį teikia vienas <div.container>.

<kūnas>
  <div class = "konteineris" > 
    ...
  </div>
</body>

Skysčių išdėstymas

Alternatyvi, lanksti sklandi puslapio struktūra su minimaliu ir maksimaliu pločiu bei kairiąja šonine juosta. Puikiai tinka programoms ir dokumentams.

<kūnas>
  <div class = "container-fluid" > 
    <div class = "šoninė juosta" > 
      ...
    </div>
    <div class = "turinys" > 
      ...
    </div>
  </div>
</body>

Antraštės ir kopija

Standartinė tipografinė hierarchija tinklalapiams struktūrizuoti.

Visas tipografinis tinklelis yra pagrįstas dviem Less kintamaisiais mūsų kintamieji.less faile: @basefontir @baseline. Pirmasis yra pagrindinis šrifto dydis, naudojamas visame pasaulyje, o antrasis yra pagrindinės linijos aukštis.

Naudojame tuos kintamuosius ir šiek tiek matematikos, kad sukurtume visų tipų paraštes, užpildus ir linijų aukštį ir dar daugiau.

h1. 1 antraštė

h2. 2 antraštė

h3. 3 antraštė

h4. 4 antraštė

h5. 5 antraštė

h6. 6 antraštė

Pastraipos pavyzdys

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.

Antraštės pavyzdys Turi paantraštę…

Įvairūs elementai

Pabrėžimų, adresų ir santrumpos naudojimas

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

Kada naudoti

Kirčiavimo žymos ( <strong>ir <em>) turėtų būti naudojamos norint nurodyti papildomą žodžio ar frazės svarbą ar kirčiavimą, palyginti su jį supančia kopija. Naudokite <strong>svarbos ir <em>streso pabrėžimui .

Kirčiavimas pastraipoje

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.

Pastaba: HTML5 vis tiek galima naudoti <b>ir <i>žymas, jos nebūtinai turi būti atitinkamai paryškintos ir kursyvu (nors jei yra semantiškesnis elementas, naudokite jį). <b>skirtas paryškinti žodžius ar frazes, nesuteikiant papildomos svarbos, o <i>dažniausiai skirtas balsui, techniniams terminams ir pan.

Adresai

Elementas <address>naudojamas artimiausio protėvio kontaktinei informacijai arba visam darbui. Štai du pavyzdžiai, kaip jį galima naudoti:

Pastaba: kiekviena eilutė <address>turi baigtis eilutės lūžiu ( <br />) arba įterpta į bloko lygio žymą (pvz., <p>), kad būtų tinkamai struktūrizuotas turinys.

Santrumpos

Sutrumpinimams ir akronimams naudokite <abbr>žymą ( HTML5<acronym> nebenaudojama ). Įdėkite trumpąją formą į žymą ir nustatykite viso pavadinimo pavadinimą.

Blokinės citatos

<blockquote> <p> <small>

Kaip cituoti

Norėdami įtraukti bloko citatą, apvyniokite ir <blockquote>pažymėkite . Naudodami elementą nurodykite šaltinį ir prieš jį gausite brūkšnelį .<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Daktaras Julius Hibbertas

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Daktaras Julius Hibbertas </small>
</blockquote>

Neužsakyta<ul>

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

Nestiliuotas<ul.unstyled>

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

Užsakyta<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem ir masa
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

apibūdinimasdl

Aprašų sąrašai

Aprašų sąrašas puikiai tinka terminams apibrėžti.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kodas

<code> <pre>

Paruoškite kodą stilingai naudodami dvi paprastas žymas. Jei norite, kad javascript būtų dar nuostabesnis, įmeskite „Google“ kodo gražinimo biblioteką ir viskas.

Pristatomas kodas

Kodas, blokai ar tiesiog fragmentai gali būti rodomi stilingai, tiesiog įvyniojus į tinkamą žymą. Jei kodo blokai apima kelias eilutes, naudokite <pre>elementą. Eilutiniam kodui naudokite <code>elementą.

<div>
  <h1>Antraštė</h1>
  <p>Kažkas čia...</p>
</div>

<div> <h1> Antraštė </h1> <p> Kažkas čia... </p> </div>
  
  

Įdėtos etiketės

<span class="label">

Atkreipkite dėmesį į bet kurią teksto frazę arba pažymėkite ją.

Pažymėkite bet ką

Kada nors reikėjo vieno iš tų išgalvotų Naujų! arba Svarbios vėliavėlės rašant kodą? Na, dabar jūs juos turite. Štai kas įtraukta pagal numatytuosius nustatymus:

Medijos tinklelis

Rodyti įvairaus dydžio miniatiūras puslapiuose su mažu HTML pėdsaku ir minimaliais stiliais.

Miniatiūrų pavyzdžiai

Miniatiūros .media-gridgali būti bet kokio dydžio, tačiau jos geriausiai veikia, kai susiejamos tiesiogiai su integruota Bootstrap tinklelio sistema. Vaizdo plotis, pvz., 90, 210 ir 330, derinamas su keliais pikseliais užpildymo, kad būtų lygūs .span2, .span4, ir .span6stulpelių dydžiams.

Didelis

Vidutinis

Mažas

Jų kodavimas

Medijos tinklelius lengva naudoti ir gana paprasta žymėjimo pusėje. Jų matmenys priklauso tik nuo įtrauktų vaizdų dydžio.

<ul class = "medijos tinklelis" > 
  <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>

Statybiniai stalai

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

Stalai puikiai tinka daugeliui dalykų. Tačiau puikioms lentelėms reikia šiek tiek žymėjimo, kad jos būtų naudingos, keičiamos ir skaitomos (kodo lygiu). Štai keletas patarimų, kurie padės.

Visada apvyniokite stulpelių antraštes <thead>taip, kad hierarchija būtų <thead>> <tr>> <th>.

Panašiai kaip ir stulpelių antraštės, visas lentelės turinys turėtų būti suvyniotas į a <tbody>, kad jūsų hierarchija būtų <tbody>> <tr>> <td>.

Pavyzdys: numatytieji lentelės stiliai

Visos lentelės bus automatiškai suformuotos tik su esminėmis kraštinėmis, kad būtų užtikrintas skaitomumas ir išlaikyta struktūra. Nereikia pridėti papildomų klasių ar atributų.

<lentelė>
  ...
</table>

Pavyzdys: sutrumpintas stalas

Lentelėms, kurioms reikia daugiau duomenų siauresnėse erdvėse, naudokite sutirštinto skonį, kuris sumažina užpildą per pusę. Jis taip pat gali būti naudojamas kartu su kraštinėmis ir zebro juostelėmis, kaip ir numatytieji lentelės stiliai.

Pavyzdys: lentelė su apvadu

Kad jūsų stalai atrodytų šiek tiek aptakesni, suapvalinkite jų kampus ir pridėkite kraštelius iš visų pusių.

<lentelės klasė = "lentelė su rėmeliais" > 
  ...
</table>

Pavyzdys: Zebra dryžuotas

Pamėginkite savo stalus pridėję zebrų juosteles – tiesiog pridėkite .zebra-stripedklasę.

Pastaba: „Zebra-Striping“ yra laipsniškas patobulinimas, neprieinamas senesnėms naršyklėms, pvz., IE8 ir senesnėms naršyklėms.

<lentelės klasė = "zebras dryžuotas" > 
  ...
</table>

Pavyzdys: zebra dryžuotas su TableSorter.js

Atsižvelgiant į ankstesnį pavyzdį, pageriname savo lentelių naudingumą, suteikdami rūšiavimo funkciją per „ jQuery “ ir „ Tablesorter “ papildinį. Spustelėkite bet kurio stulpelio antraštę, kad pakeistumėte rūšiavimą.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funkcija () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<lentelės klasė = "zebras dryžuotas" > 
  ...
</table>

Numatytieji stiliai

Visoms formoms suteikiami numatytieji stiliai, kad jos būtų skaitomos ir keičiamos. Pateikiami teksto įvesties, pasirinkimo sąrašų, teksto sričių, radijo mygtukų ir žymimųjų laukelių bei mygtukų stiliai.

Sukrautos formos

Pridėkite .form-stackedprie formos HTML ir etiketes turėsite jų laukų viršuje, o ne kairėje. Tai puikiai tinka, jei formos yra trumpos arba turite du sunkesnių formų įvesties stulpelius.

Formos laukelių dydžiai

Tinkinkite bet kokią formą input, select, arba textareaplotį, pridėdami tik keletą klasių prie žymėjimo.

Nuo 1.3.0 versijos pridėjome tinklelio formos elementų dydžio klases. Naudokite šias klases per esamas .mini, .smallir kt.

Mygtukai

Paprastai mygtukai naudojami veiksmams, o nuorodos – objektams. Pavyzdžiui, „Atsisiųsti“ gali būti mygtukas, o „naujausia veikla“ gali būti nuoroda.

Pagal numatytuosius nustatymus visi mygtukai yra šviesiai pilkos spalvos, tačiau skirtingiems spalvų stiliams galima pritaikyti keletą funkcinių klasių. Šios klasės apima mėlyną .primary, šviesiai mėlyną .info, žalią .successir raudoną .dangerklasę.

Mygtukų pavyzdžiai

Mygtukų stiliai gali būti taikomi bet kam su .btntaikoma. Paprastai juos norėsite taikyti tik <a>, <button>ir pasirinktiems <input>elementams. Štai kaip tai atrodo:

Alternatyvūs dydžiai

Mėgstate didesnius ar mažesnius mygtukus? Turėk tai!

Neįgalus būsena

Mygtukams, kurie nėra aktyvūs arba kuriuos programa dėl vienos ar kitos priežasties išjungia, naudokite išjungtą būseną. Tai .disabledskirta nuorodoms ir :disabledelementams <button>.

Nuorodos

Mygtukai

Kas tai

Mūsų viršutinė juosta yra fiksuota juosta, kurioje yra svetainės logotipas arba pavadinimas, pagrindinė naršymo priemonė ir paieškos forma.

Pritaikoma

Visi elementai viduje ir visa viršutinė juosta yra neprivalomi. Galite pasirinkti įtraukti logotipą / pavadinimą, navigaciją, paiešką ir antrinę navigaciją arba bet kurį jų derinį.

Įtraukti išskleidžiamieji meniu

Kaip pagrindinio naršymo dalį įtraukėme galimybę prie navigacijos pridėti išskleidžiamųjų meniu. Peržiūrėkite aukščiau esančią antrinę navigaciją (sulygiuotą dešinėje), kad sužinotumėte, kaip tai daroma. Išskleidžiamųjų meniu ližymos taip pat palaiko .activedabartinį puslapio pasirinkimą.

Tabletės ir tabletės

Sukurkite paprastą antrinį naršymą naudodami <ul>. Keiskite skirtukus ar tabletes pridėdami atitinkamą klasę.

Puikiai tinka turinio poskyriams, pvz., paskyros nustatymų puslapiams ir naudotojų laiko juostoms, skirtoms perjungti panašaus turinio puslapius. Galima įsigyti su skirtukais arba tabletėmis.

Pagrindinių skirtukų pavyzdys

Skirtukus galima naudoti kaip įprastą naršymą (įkeliami išoriniai puslapiai tame pačiame skirtuke) arba kaip skirtukų turinio sritis, norint pakeisti turinio sritis. Turime skirtukų papildinį , kurį galima naudoti pastarajam integruoti.

• Namai
• Profilis
• Žinutės
• Nustatymai
• kontaktas
• Išskleidžiamasis meniu
  • Antrinė nuoroda
  • Čia dar kažkas
  • Dar viena nuoroda

<ul class = "skirtukai" > 
  <li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>  
  <li><a href = "#" > Profilis </a></li> 
  <li><a href = "#" > Žinutės </a></li> 
  <li><a href = "#" > Nustatymai </a></li> 
  <li><a href = "#" > Susisiekite su </a></li> 
</ul>

Pagrindinių tablečių pavyzdys

• Namai
• Profilis
• Žinutės
• Nustatymai
• kontaktas

<ul klasė = "tabletės" > 
  <li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>  
  <li><a href = "#" > Profilis </a></li> 
  <li><a href = "#" > Žinutės </a></li> 
  <li><a href = "#" > Nustatymai </a></li> 
  <li><a href = "#" > Susisiekite su </a></li> 
</ul>

Duonos trupiniai

Naršymas naršymo žingsnyje naudojamas kaip būdas parodyti naudotojams, kur jie yra programoje ar svetainėje, bet ne kaip pagrindinė naršymo funkcija.

• Namai

• Pagrindinis puslapis /
• Vidurinis puslapis

• Pagrindinis puslapis /
• Vidurinis puslapis /
• Kitas

• Pagrindinis puslapis /
• Vidurinis puslapis /
• dar vienas /
• Tu esi čia

<ul class = "džiūvėsėlis" > 
  <li><a href = "#" > Pagrindinis puslapis </a> <span class = "daliklis" > / </span></li>   
  <li><a href = "#" > Vidurinis puslapis </a> <span class = "daliklis" > / </span></li>   
  <li><a href = "#" > Dar vienas </a> <span class = "daliklis" > / </span></li>   
  <li class = "aktyvus" > Esate čia </li> 
</ul>

Puslapių rašymas

Itin supaprastinta ir minimalaus stiliaus puslapių numeracija, įkvėpta Rdio. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.

<div class = "pagination" > 
  <ul>
    <li class = "ankstesnis išjungtas" ><a href = "#" > ← Ankstesnis </a></li>  
    <li class = "aktyvus" ><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 = "kitas" ><a href = "#" > Kitas → </a></li>  
  </ul>
</div>

Pagrindiniai įspėjimai

.alert-message

Vienos eilutės pranešimai, skirti pabrėžti veiksmo nesėkmę, galimą nesėkmę ar sėkmę. Ypač naudinga formoms.

Gaukite javascript »

Kodo pavyzdys

<div class = "alert-message įspėjimas" > 
  <a class = "uždaryti" href = "#" > × </a>  
  <p><strong> Šventoji gvakamolė! </strong> Geriausia pasitikrinti, ar neatrodote per gerai. </p>
</div>

Blokuoti pranešimus

.alert-message.block-message

Pranešimams, kuriuos reikia šiek tiek paaiškinti, turime pastraipos stiliaus įspėjimus. Jie puikiai tinka ilgesniems klaidų pranešimams paskelbti, vartotojui įspėti apie laukiantį veiksmą arba tiesiog pateikti informaciją, kad būtų daugiau dėmesio skiriama puslapyje.

Gaukite javascript »

Kodo pavyzdys

<div class = "alert-message block-message įspėjimas" > 
  <a class = "uždaryti" href = "#" > × </a>  
  <p><strong> Šventoji gvakamolė! Tai įspėjimas! </strong> Geriausia pasitikrinti, ar neatrodote per gerai. 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 = "#" > Atlikite šį veiksmą </a> <a class = "btn small" href = "#" > Arba atlikite tai </a>     
  </div>
</div>

Modalai

Modalai – dialogo langai arba šviesdėžės – puikiai tinka kontekstiniams veiksmams tais atvejais, kai svarbu išlaikyti foninį kontekstą.

Gaukite javascript »

Patarimai

Twipsis yra labai naudingi, kad padėtų sutrikusiam vartotojui ir nukreiptų juos tinkama kryptimi.

Gaukite javascript »

Popovers

Naudokite iššokančius langus, kad pateiktumėte puslapio potekstinę informaciją nepaveikdami išdėstymo.

Gaukite javascript »

Darbo pradžia

Integruoti javascript su Bootstrap biblioteka yra labai paprasta. Toliau apžvelgsime pagrindus ir pateiksime jums keletą nuostabių papildinių, kad galėtumėte pradėti!

Peržiūrėti javascript dokumentus »

Kas įtraukta

Atgaivinkite kai kuriuos pagrindinius „Bootstrap“ komponentus naudodami naujus pasirinktinius papildinius, kurie veikia su „ jQuery “ ir „ Ender “ . Raginame juos išplėsti ir modifikuoti, kad atitiktų jūsų konkrečius plėtros poreikius.

Ar javascript reikalingas?

Ne! „Bootstrap“ visų pirma sukurta kaip CSS biblioteka. Šis javascript suteikia pagrindinį interaktyvų sluoksnį, esantį ant įtrauktų stilių.

Tačiau tiems, kuriems reikia „Javascript“, pateikėme aukščiau pateiktus papildinius, kurie padės suprasti, kaip integruoti „Bootstrap“ su „Javascript“ ir iš karto suteikti greitą, lengvą pagrindinių funkcijų parinktį.

Norėdami gauti daugiau informacijos ir pamatyti kai kurias tiesiogines demonstracines versijas, žr. mūsų papildinio dokumentacijos puslapį .