Ekzemploj de rapida komenco

Ĉu vi bezonas rapidajn ŝablonojn? Rigardu ĉi tiujn bazajn ekzemplojn, kiujn ni kunmetis:

Defaŭlta krado

La defaŭlta kradsistemo provizita kiel parto de Bootstrap estas 940px larĝa 16-kolumna krado. Ĝi estas gusto de la populara 960 kradsistemo, sed sen la aldona marĝeno/remburaĵo ĉe la maldekstraj kaj dekstraj flankoj.

Ekzempla krada markado

Kiel montrite ĉi tie, baza aranĝo povas esti kreita kun du "kolumnoj", ĉiu ampleksanta kelkajn el la 16 fundamentaj kolumnoj, kiujn ni difinis kiel parto de nia kradsistemo. Vidu la ekzemplojn malsupre por pli da varioj.

<div klaso = "vico" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Nestokolumnoj

Nestu vian enhavon, se vi devas, kreante .rowene de ekzistanta kolumno.

Ekzemplo de nestitaj kolumnoj

<div klaso = "vico" > 
  <div class = "span12" > 
    Nivelo 1 de kolumno
    <div klaso = "vico" > 
      <div class = "span6" > 
        Nivelo 2
      </div>
      <div class = "span6" > 
        Nivelo 2
      </div>
    </div>
  </div>
</div>

Rulu vian propran kradon

Enkonstruita en Bootstrap estas manpleno da variabloj por agordi la defaŭltan 940px kradsistemon. Kun iom da personigo, vi povas modifi la grandecon de kolonoj, iliaj defluiloj kaj la ujon en kiu ili loĝas.

Ene de la krado

La variabloj necesaj por modifi la kradsistemon nuntempe ĉiuj loĝas en preboot.less.

Nun por personecigi

Modifi la kradon signifas ŝanĝi la tri @grid-*variablojn kaj rekompili la Malpli dosierojn.

Bootstrap venas ekipita por manipuli kradsistemon kun ĝis 24 kolumnoj; la defaŭlta estas nur 16. Jen kiel viaj kradaj variabloj aspektus personecigitaj al 24-kolumna krado.

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

Fojo rekompilita, vi estos agordita!

Fiksa aranĝo

La defaŭlta kaj simpla 940px-larĝa, centrita aranĝo por preskaŭ ajna retejo aŭ paĝo provizita de ununura <div.container>.

<korpo>
  <div class = "ujo" > 
    ...
  </div>
</korpo>

Fluida aranĝo

Alternativa, fleksebla fluida paĝa strukturo kun min- kaj max-larĝoj kaj maldekstra flanka kolumno. Bonega por programoj kaj dokumentoj.

<korpo>
  <div class = "ujo-fluido" > 
    <div class = "flankmenuo" > 
      ...
    </div>
    <div class = "enhavo" > 
      ...
    </div>
  </div>
</korpo>

Titolo & kopio

Norma tipografia hierarkio por strukturi viajn retpaĝojn.

La tuta tipografia krado baziĝas sur du Malpli variabloj en nia preboot.less dosiero: @basefontkaj @baseline. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco.

Ni uzas tiujn variablojn, kaj iom da matematiko, por krei la randojn, kompletiĝojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli.

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5

h6. Titolo 6

Ekzempla alineo

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.

Ekzempla titolo Havas subtitolon...

Misc. elementoj

Uzante emfazon, adresojn kaj mallongigojn

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

Kiam uzi

Emfazaj etikedoj ( <strong>kaj <em>) estu uzataj por indiki plian gravecon aŭ emfazon de vorto aŭ frazo rilate al ĝia ĉirkaŭa kopio. Uzu <strong>por graveco kaj <em>por emfazo .

Emfazo en alineo

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

Noto: Estas ankoraŭ bone uzi <b>kaj <i>etikedojn en HTML5 kaj ili ne devas esti stilitaj respektive grasa kaj kursiva (kvankam se estas pli semantika elemento, uzu ĝin). <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon, dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.

Adresoj

La <address>elemento estas uzata por kontaktinformoj por sia plej proksima prapatro, aŭ la tuta laboro. Jen du ekzemploj de kiel ĝi povus esti uzata:

Noto: Ĉiu linio en <address>devas finiĝi per linio-rompo ( <br />) aŭ esti envolvita en bloknivela etikedo (ekz. <p>) por taŭge strukturi la enhavon.

Mallongigoj

Por mallongigoj kaj akronimoj, uzu la <abbr>etikedon ( <acronym>estas malrekomendita en HTML5 ). Metu la stenografion en la etikedo kaj starigu titolon por la kompleta nomo.

Blokcitaĵoj

<blockquote> <p> <small>

Kiel citi

Por inkluzivi blokcitaĵon, envolvu kaj <blockquote>etikedu . Uzu la elementon por citi vian fonton kaj vi ricevos em streketon antaŭ ĝi.<p><small><small>&mdash;

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

D-ro Julius Hibbert

<blokcitaĵo>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> D-ro Julius Hibbert </small>
</blockquote>

Neordigita<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• 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

Senstila<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• 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

Ordonita<ol>

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

Priskribodl

Priskribolistoj

Priskriba listo estas perfekta por difini terminojn.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

Kodo

<code> <pre>

Pimpu vian kodon en stilo per du simplaj etikedoj. Por eĉ pli da mirindaĵo per javaskripto, enigu la kodon belan bibliotekon de Guglo kaj vi estas preta.

Prezentante kodon

Kodo, blokoj de aŭ nur fragmentoj enliniaj, povas esti montritaj kun stilo nur per envolvado en la ĝusta etikedo. Por blokoj de kodo ampleksanta plurajn liniojn, uzu la <pre>elementon. Por enlinia kodo, uzu la <code>elementon.

<div>
  <h1>Titolo</h1>
  <p>Io ĝuste ĉi tie...</p>
</div>

<div> <h1> Titolo </h1> <p> Io ĝuste ĉi tie... </p> </div>
  
  

Enliniaj etikedoj

<span class="label">

Atentu aŭ marki ajnan frazon en via korpa teksto.

Etikedu ion ajn

Iam bezonis unu el tiuj luksaj Novaj! aŭ Gravaj flagoj skribante kodon? Nu, nun vi havas ilin. Jen kio estas inkluzivita defaŭlte:

Media krado

Montru bildetojn de diversaj grandecoj sur paĝoj kun malalta HTML-signo kaj minimumaj stiloj.

Ekzemplaj bildetoj

Bildetoj en la .media-gridpovas esti ajna grandeco, sed ili funkcias plej bone kiam mapitaj rekte al la enkonstruita Bootstrap kradsistemo. Bildaj larĝoj kiel 90, 210 kaj 330 kombinas kun kelkaj pikseloj da kompletigo por egali la .span2, .span4, kaj .span6kolumngrandecojn.

Granda

Meza

Malgranda

Kodigi ilin

Amaskomunikilaj kradoj estas facile uzeblaj kaj sufiĉe simplaj ĉe la markado. Iliaj dimensioj baziĝas nur sur la grandeco de la bildoj inkluzivitaj.

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

Konstruante tablojn

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

Tabloj estas bonegaj—por multaj aferoj. Grandaj tabeloj, tamen, bezonas iom da markado-amo por esti utilaj, skaleblaj kaj legeblaj (ĉe la kodnivelo). Jen kelkaj konsiletoj por helpi.

Ĉiam envolvu viajn kolumnajn kapojn en <thead>tia, ke hierarkio estas <thead>><tr> > <th>.

Simile al la kolumnaj kapoj, la tuta korpenhavo de via tabelo estu envolvita en <tbody>tiel via hierarkio <tbody>> <tr>> <td>.

Ekzemplo: Defaŭltaj tabelstiloj

Ĉiuj tabeloj estos aŭtomate stilitaj kun nur la esencaj randoj por certigi legeblecon kaj konservi strukturon. Ne necesas aldoni kromajn klasojn aŭ atributojn.

<tablo>
  ...
</tablo>

Ekzemplo: Zebro-striita

Fariĝu iom per viaj tabloj aldonante zebro-striadon—nur aldonu la .zebra-stripedklason.

Noto: Zebra-striado estas progresema plibonigo ne havebla por pli malnovaj retumiloj kiel IE8 kaj sube.

<table class = "zebro-striita" > 
...
</tablo>

Ekzemplo: Zebro-striita kun TableSorter.js

Prenante la antaŭan ekzemplon, ni plibonigas la utilecon de niaj tabeloj provizante ordigan funkcion per jQuery kaj la aldonaĵo Tablesorter . Alklaku la kaplinion de iu ajn kolumno por ŝanĝi la ordigon.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<skripto > 
  $ ( funkcio () { 
    $ ( "tabelo#sortTabeloEkzemplo" ). tabelordigilo ({ sortListo : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebro-striita" > 
  ...
</tablo>

Defaŭltaj stiloj

Ĉiuj formoj ricevas defaŭltajn stilojn por prezenti ilin en legebla kaj skalebla maniero. Stiloj estas provizitaj por tekstaj enigaĵoj, elektaj listoj, tekstaj areoj, radiobutonoj kaj markobutonoj kaj butonoj.

Stakitaj formoj

Aldonu .form-stackedal la HTML de via formularo kaj vi havos etikedojn supre de iliaj kampoj anstataŭ maldekstre. Ĉi tio bonege funkcias se viaj formoj estas mallongaj aŭ vi havas du kolumnojn da enigaĵoj por pli pezaj formoj.

Form-kampaj grandecoj

Agordu ajnan formon input, select, aŭtextarea larĝon aldonante nur kelkajn klasojn al via markado.

Ekde v1.3.0, ni aldonis la krad-bazitajn grandecoklasojn por formalementoj. Bonvolu uzi ĉi tiujn super la ekzistantaj .mini, .small, ktp klasoj.

Butonoj

Kiel konvencio, butonoj estas uzataj por agoj dum ligiloj estas uzataj por objektoj. Ekzemple, "Elŝutu" povus esti butono kaj "lasta agado" povus esti ligilo.

Ĉiuj butonoj defaŭlte al helgriza stilo, sed kelkaj funkciaj klasoj povas esti aplikataj por malsamaj kolorstiloj. Ĉi tiuj klasoj inkluzivas bluan .primaryklason, helbluan .infoklason, verdan .successklason kaj ruĝan .dangerklason.

Ekzemplaj butonoj

Butonstiloj povas esti aplikitaj al io ajn kun la .btnaplikata. Kutime vi volas apliki ĉi tiujn nur al <a>, <button>, kaj elektaj <input>elementoj. Jen kiel ĝi aspektas:

Alternaj grandecoj

Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Havu ĝin!

Malfunkciigita ŝtato

Por butonoj, kiuj ne estas aktivaj aŭ estas malŝaltitaj de la programo ial aŭ alia, uzu la malfunkciigitan staton. Tio estas .disabledpor ligiloj kaj :disabledpor <button>elementoj.

Ligiloj

Butonoj

Kio estas tio

Nia supra stango estas fiksa trinkejo, kiu enhavas emblemon aŭ nomon de retejo, ĉefa navigado kaj serĉformo.

Agordigebla

Ĉiuj elementoj ene, kaj ankaŭ la tuta supra stango, estas laŭvolaj. Vi povas elekti inkluzivi emblemon/nomon, navigacion, serĉon kaj sekundaran navigacion—aŭ ajnan kombinaĵon de tio.

Dropdowns inkluzivita

Kiel parto de la ĉefa navigado, ni inkluzivis la kapablon por vi aldoni falmenuojn al via navigacio. Rigardu la sekundaran navigacion supre (dekstre vicigita) por vidi kiel ĝi estas farita. Dropdowns- lietikedoj ankaŭ subtenas .activepor montri aktualan paĝo-elekton.

Tabs kaj piloloj

Kreu simplan sekundaran navigadon per <ul>. Interŝanĝu inter langetoj aŭ piloloj aldonante la taŭgan klason.

Bonega por subsekcioj de enhavo kiel niaj kontaj agordaj paĝoj kaj uzanttempaj linioj por ŝanĝi inter paĝoj de simila enhavo. Havebla en klapeta aŭ pilolo stiloj.

• Hejmo
• Profilo
• Mesaĝoj
• Agordoj
• Kontaktu
• Dropdown
  • Malĉefa ligilo
  • Io alia ĉi tie
  • Alia ligilo

<ul class = "langetoj" > 
  <li class = "active" ><a href = "#" > Hejmo </a></li>  
  <li><a href = "#" > Profilo </a></li> 
  <li><a href = "#" > Mesaĝoj </a></li> 
  <li><a href = "#" > Agordoj </a></li> 
  <li><a href = "#" > Kontakto </a></li> 
</ul>

• Hejmo
• Profilo
• Mesaĝoj
• Agordoj
• Kontaktu

<ul class = "piloloj" > 
  <li class = "active" ><a href = "#" > Hejmo </a></li>  
  <li><a href = "#" > Profilo </a></li> 
  <li><a href = "#" > Mesaĝoj </a></li> 
  <li><a href = "#" > Agordoj </a></li> 
  <li><a href = "#" > Kontakto </a></li> 
</ul>

Panpecetoj

Breadcrumb navigado estas uzata kiel maniero montri uzantojn kie ili estas ene de aplikaĵo aŭ retejo, sed ne por primara navigado.

• Hejmo

• Hejmo /
• Meza paĝo

• Hejmo /
• Meza paĝo /
• Alia

• Hejmo /
• Meza paĝo /
• Alia /
• Vi estas ĉi tie

<ul class = "panpeceto" > 
  <li><a href = "#" > Hejmo </a> <span class = "dividilo" > / </span></li>   
  <li><a href = "#" > Meza paĝo </a> <span class = "dividilo" > / </span></li>   
  <li><a href = "#" > Alia </a> <span class = "dividanto" > / </span></li>   
  <li class = "active" > Vi estas ĉi tie </li> 
</ul>

Paĝigo

Ultra simplisma kaj minimume stilita paĝigo inspirita de Rdio. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.

<div class = "paĝigo" > 
  <ul>
    <li class = "antaŭa malŝaltita" ><a href = "#" > ← Antaŭa </a></li>  
    <li class = "aktiva" ><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 = "sekva" ><a href = "#" > Sekva → </a></li>  
  </ul>
</div>

Bazaj atentigoj

.alert-message

Unu-liniaj mesaĝoj por reliefigi la fiaskon, eblan malsukceson aŭ sukceson de ago. Aparte utila por formoj.

Akiru la Javaskripton »

Ekzempla kodo

<div class = "averto-mesaĝo" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sankta guacamole! </strong> Plej bone kontrolu vin mem, vi ne aspektas tro bona. </p>
</div>

Bloki mesaĝojn

.alert-message.block-message

Por mesaĝoj, kiuj postulas iom da klarigo, ni havas alineajn stilajn atentigojn. Ĉi tiuj estas perfektaj por bobeli pli longajn erarmesaĝojn, averti uzanton pri pritraktata ago aŭ simple prezenti informojn por pli emfazo sur la paĝo.

Akiru la Javaskripton »

Ekzempla kodo

<div class = "averto-mesaĝo blok-mesaĝo averto" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sankta guacamole! Ĉi tio estas averto! </strong> Plej bone kontrolu vin mem, vi ne aspektas tro bona. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "atentigoj" > 
    <a class = "btn small" href = "#" > Faru ĉi tiun agon </a> <a class = "btn small" href = "#" > Aŭ faru ĉi tion </a>     
  </div>
</div>

Modaloj

Modaloj—dialogoj aŭ lumketoj—estas bonegaj por kontekstaj agoj en situacioj kie gravas, ke la fonkunteksto estu konservita.

Akiru la Javaskripton »

Konsiletoj

Twipsies estas tre utilaj por helpi konfuzitan uzanton kaj direkti ilin en la ĝustan direkton.

Akiru la Javaskripton »

Popovers

Uzu popovers por provizi subtekstan informon al paĝo sen tuŝi aranĝon.

Akiru la Javaskripton »

Komencante

Integri javaskripton kun la biblioteko Bootstrap estas tre facila. Malsupre ni ekzamenas la bazaĵojn kaj provizas al vi kelkajn mirindajn kromaĵojn por komenci!

Rigardu Javaskripto-dokumentojn »

Kio estas inkluzivita

Vivu kelkajn el la ĉefaj komponantoj de Bootstrap per novaj kutimaj kromprogramoj, kiuj funkcias kun jQuery kaj Ender . Ni instigas vin etendi kaj modifi ilin por konveni viajn specifajn disvolvajn bezonojn.

Ĉu Javaskripto estas necesa?

Ne! Bootstrap estas desegnita unue por esti CSS-biblioteko. Ĉi tiu Javaskripto provizas bazan interagan tavolon aldone al la inkluzivitaj stiloj.

Tamen, por tiuj, kiuj bezonas Javaskripton, ni provizis la ĉi-suprajn kromaĵojn por helpi vin kompreni kiel integri Bootstrap kun Javaskripto kaj doni al vi rapidan, malpezan opcion por la baza funkcieco tuj.

Por pliaj informoj kaj por vidi kelkajn vivajn pruvojn, bonvolu raporti al nia paĝo pri dokumentado de kromprogramoj .