Eżempji ta' bidu malajr

Għandek bżonn xi mudelli ta' malajr? Ara dawn l-eżempji bażiċi li għamilna flimkien:

Grid default

Is-sistema ta' grilja awtomatika pprovduta bħala parti minn Bootstrap hija grilja ta' 16-il kolonna wiesgħa 940px. Huwa togħma tas-sistema popolari tal-grilja 960, iżda mingħajr il-marġni/ikkuttunar addizzjonali fuq in-naħat tax-xellug u tal-lemin.

Eżempju tal-markup tal-grilja

Kif muri hawn, jista 'jinħoloq tqassim bażiku b'żewġ "kolonni," kull wieħed ikopri numru ta' 16-il kolonna fundamentali li ddefinijna bħala parti mis-sistema tal-grilja tagħna. Ara l-eżempji hawn taħt għal aktar varjazzjonijiet.

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

Kolonni li jbejtu

Bejta l-kontenut tiegħek jekk trid billi toħloq .rowġewwa kolonna eżistenti.

Eżempju ta' kolonni mnaqqsa

<div class = "ringiela" > 
  <div class = "span12" > 
    Livell 1 tal-kolonna
    <div class = "ringiela" > 
      <div class = "span6" > 
        Livell 2
      </div>
      <div class = "span6" > 
        Livell 2
      </div>
    </div>
  </div>
</div>

Irrombla l-grilja tiegħek

Mibnija f'Bootstrap hemm numru żgħir ta 'varjabbli għall-personalizzazzjoni tas-sistema ta' grilja ta '940px default. Bi ftit ta 'adattament, tista' timmodifika d-daqs tal-kolonni, il-kanali tagħhom, u l-kontenitur li jgħixu fih.

Ġewwa l-grilja

Il-varjabbli meħtieġa biex tiġi modifikata s-sistema tal-grilja bħalissa kollha jgħixu f' variables.less.

Issa biex tippersonalizza

Li timmodifika l-grilja tfisser li tbiddel it-tliet @grid-*varjabbli u tikkompila mill-ġdid il-fajls Inqas.

Bootstrap jiġi mgħammar biex jimmaniġġja sistema ta 'grilja b'sa 24 kolonna; l-inadempjenza hija biss 16. Hawn kif il-varjabbli tal-grilja tiegħek jidhru personalizzati għal grilja ta '24 kolonna.

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

Ladarba jiġi kkompilat mill-ġdid, tkun issettjat!

Tqassim fiss

It-tqassim default u sempliċi ta' 940px wiesgħa, iċċentrat għal kważi kull websajt jew paġna pprovduta minn <div.container>.

<korp>
  <div class = "kontenitur" > 
    ...
  </div>
</body>

It-tqassim tal-fluwidu

Struttura ta' paġna fluwidu alternattiva u flessibbli b'wisa' min u max u bar tal-ġenb tax-xellug. Kbir għall-apps u docs.

<korp>
  <div class = "kontenitur-fluwidu" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "kontenut" > 
      ...
    </div>
  </div>
</body>

Intestaturi u kopja

Ġerarkija tipografika standard għall-istrutturar tal-paġni web tiegħek.

Il-grilja tipografika kollha hija bbażata fuq żewġ varjabbli Inqas fil-fajl variables.less tagħna: @basefontu @baseline. L-ewwel hija d-daqs tat-tipa bażi użata matul u t-tieni hija l-għoli tal-linja bażi.

Aħna nużaw dawk il-varjabbli, u xi matematika, biex noħolqu l-marġini, paddings, u line-heights tat-tip kollu tagħna u aktar.

h1. Intestatura 1

h2. Intestatura 2

h3. Intestatura 3

h4. Intestatura 4

h5. Intestatura 5

h6. Intestatura 6

Eżempju ta' paragrafu

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.

Eżempju ta' intestatura Għandu sotto-intestatura...

Misc. elementi

Uża enfasi, indirizzi, u abbrevjazzjonijiet

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

Meta tuża

Tikketti ta' enfasi ( <strong>u <em>) għandhom jintużaw biex jindikaw importanza jew enfasi addizzjonali ta' kelma jew frażi relattiva għall-kopja ta' madwarha. Uża <strong>għall-importanza u <em>għall -enfasi tal -istress .

Enfasi f'paragrafu

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

Nota: Għadu tajjeb li tuża <b>u <i>tags f'HTML5 u m'għandhomx għalfejn ikunu stiljati b'tipa grassa u korsiva, rispettivament (għalkemm jekk ikun hemm element aktar semantiku, użah). <b>huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali, filwaqt li <i>huwa l-aktar għal vuċi, termini tekniċi, eċċ.

Indirizzi

L- <address>element jintuża għall-informazzjoni ta 'kuntatt għall-eqreb antenat tiegħu, jew il-korp kollu tax-xogħol. Hawn żewġ eżempji ta’ kif tista’ tintuża:

Nota: Kull linja <address>f'must tispiċċa b'line-break ( <br />) jew tkun imgeżwer f'tikketta tal-livell ta' blokka (eż. <p>) biex tistruttura sew il-kontenut.

Abbrevjazzjonijiet

Għall-abbrevjazzjonijiet u l-akronimi, uża t- <abbr>tikketta ( <acronym>hija deprecata f'HTML5 ). Poġġi l-formola shorthand fit-tikketta u waqqaf titolu għall-isem sħiħ.

Blockquotes

<blockquote> <p> <small>

Kif tikkwota

Biex tinkludi blockquote, wrap <blockquote>around <p>u <small>tags. Uża l- <small>element biex tikkwota s-sors tiegħek u ikollok sing em —qabel.

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

Dr Julius Hibbert

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

Mhux ordnat<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

Unstyled<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

Ordnat<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

Deskrizzjonidl

Listi ta' deskrizzjoni

Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.

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.

Kodiċi

<code> <pre>

Pimp il-kodiċi tiegħek bl-istil b'żewġ tikketti sempliċi. Għal aktar awesomeness permezz ta 'javascript, waqa' fil-librerija prettify tal-kodiċi ta 'Google u int issettjat.

Jippreżenta kodiċi

Kodiċi, blokki ta' jew sempliċiment siltiet inline, jistgħu jintwerew bi stil biss billi jitgeżwru fit-tikketta t-tajba. Għal blokki ta' kodiċi li jkopru linji multipli, uża l- <pre>element. Għall-kodiċi inline, uża l- <code>element.

<div>
  <h1>Intestatura</h1>
  <p>Xi ħaġa hawn...</p>
</div>

<div> <h1> Intestatura </h1> <p> Xi ħaġa eżatt hawn... </p> </div>
  
  

Tikketti inline

<span class="label">

Iċċempel l-attenzjoni jew immarka kwalunkwe frażi fit-test tal-ġisem tiegħek.

Tikkettja xi ħaġa

Qatt kellu bżonn wieħed minn dawk ġodda fancy ! jew Bnadar importanti meta tikteb kodiċi? Ukoll, issa għandek minnhom. Hawn x'inhu inkluż awtomatikament:

Grid tal-midja

Uri thumbnails ta’ daqsijiet differenti fuq paġni b’impronta HTML baxxa u stili minimi.

Eżempju thumbnails

Thumbnails fil .media-gridjista 'jkun ta' kull daqs, iżda jaħdmu l-aħjar meta jiġu mmappjati direttament fis-sistema ta 'grilja Bootstrap mibnija. Wisgħat tal-immaġni bħal 90, 210, u 330 jingħaqdu ma 'ftit pixels ta' ikkuttunar biex ikunu ugwali għad- daqsijiet tal-kolonni .span2, .span4, u ..span6

Kbir

Medju

Żgħir

Jikkodifikawhom

Il-grilji tal-midja huma faċli biex jintużaw u pjuttost sempliċi min-naħa tal-markup. Id-dimensjonijiet tagħhom huma purament ibbażati fuq id-daqs tal-immaġini inklużi.

<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>

Imwejjed tal-bini

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

It-tabelli huma tajbin—għal ħafna affarijiet. Tabelli kbar, madankollu, jeħtieġu ftit imħabba ta 'markup biex ikunu utli, skalabbli, u jinqraw (fil-livell tal-kodiċi). Hawn huma ftit suġġerimenti biex jgħinu.

Dejjem wrap l-intestaturi tal-kolonni tiegħek b'tali mod li l - <thead>ġerarkija tkun <thead>>> <tr>.<th>

Simili għall-intestaturi tal-kolonni, il-kontenut kollu tal-korp tal-mejda tiegħek għandu jkun imgeżwer <tbody>f'tali mod li l-ġerarkija tiegħek tkun <tbody>> <tr>> <td>.

Eżempju: Stili ta' tabella default

It-tabelli kollha se jiġu stiljati awtomatikament bil-borduri essenzjali biss biex tiġi żgurata l-leġibbiltà u tinżamm l-istruttura. M'hemmx bżonn li żżid klassijiet jew attributi żejda.

<tabella>
  ...
</mejda>

Eżempju: Tabella kondensata

Għat-tabelli li jeħtieġu aktar data fi spazji aktar stretti, uża t-togħma kondensata li tnaqqas l-ikkuttunar bin-nofs. Jista 'jintuża wkoll flimkien ma' fruntieri u strixxi taż-żebra, bħall-istili tal-mejda default.

Eżempju: Tabella bil-borduri

Agħmel it-tabelli tiegħek jidhru ftit aktar sleeker billi ddawwar il-kantunieri tagħhom u żżid il-fruntieri fuq in-naħat kollha.

<table class = "tabella-border" > 
  ...
</mejda>

Eżempju: Zebra-striped

Ikseb ftit fancy mat-tabelli tiegħek billi żżid zebra-striping—sempliċement żid il- .zebra-stripedklassi.

Nota: Zebra-striping huwa titjib progressiv mhux disponibbli għal browsers anzjani bħal IE8 u taħt.

<table class = "zebra-striped" > 
  ...
</mejda>

Eżempju: Zebra-striped w/ TableSorter.js

Filwaqt li nieħdu l-eżempju ta 'qabel, intejbu l-utilità tat-tabelli tagħna billi nipprovdu funzjonalità ta' għażla permezz ta ' jQuery u l- plugin Tablesorter . Ikklikkja l-header ta 'kwalunkwe kolonna biex tibdel it-tip.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<skript > 
  $ ( funzjoni () { 
    $ ( "tabella#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</mejda>

Stili default

Il-formoli kollha jingħataw stili awtomatiċi biex jippreżentawhom b'mod li jinqara u skalabbli. L-istili huma pprovduti għal inputs ta’ test, listi ta’ għażla, żoni ta’ test, buttuni tar-radju u kaxxi ta’ kontroll, u buttuni.

Formoli f'munzelli

Żid .form-stackedmal-HTML tal-formola tiegħek u jkollok tikketti fuq l-oqsma tagħhom minflok fuq ix-xellug tagħhom. Dan jaħdem tajjeb jekk il-formoli tiegħek huma qosra jew għandek żewġ kolonni ta 'inputs għal forom itqal.

Daqsijiet tal-kamp tal-Formola

Ippersonalizza kwalunkwe forma input, select, jew textareawisa' billi żżid biss ftit klassijiet mal-markup tiegħek.

Minn v1.3.0, żidna l-klassijiet tad-daqs ibbażati fuq il-grilja għall-elementi tal-forma. Jekk jogħġbok uża dawn fuq il- klassijiet eżistenti .mini, , eċċ..small

Buttuni

Bħala konvenzjoni, il-buttuni jintużaw għall-azzjonijiet filwaqt li l-links jintużaw għall-oġġetti. Pereżempju, "Download" tista' tkun buttuna u "attività riċenti" tista' tkun link.

Il-buttuni kollha default għal stil griż ċar, iżda numru ta 'klassijiet funzjonali jistgħu jiġu applikati għal stili ta' kulur differenti. Dawn il-klassijiet jinkludu klassi blu .primary, klassi blu ċar .info, klassi ħadra .success, u klassi ħamra .danger.

Buttuni ta' eżempju

L-istili tal-buttuni jistgħu jiġu applikati għal kull ħaġa bl- .btnapplikata. Tipikament tkun trid tapplika dawn għal elementi biss <a>, <button>, u agħżel <input>. Ara kif tidher:

Daqsijiet alternattivi

Fancy buttuni akbar jew iżgħar? Ikollhom!

Stat b'diżabilità

Għal buttuni li mhumiex attivi jew li huma diżattivati ​​mill-app għal xi raġuni jew oħra, uża l-istat diżabbli. Dak .disabledgħall-links u :disabledgħall - <button>elementi.

Links

Buttuni

X'inhu

Topbar tagħna huwa bar fiss li fih il-logo jew l-isem ta' websajt, in-navigazzjoni primarja, u l-formola tat-tfittxija.

Customizable

L-elementi kollha ġewwa, u l-topbar kollu wkoll, huma fakultattivi. Tista' tagħżel li tinkludi logo/isem, nav, tfittxija, u nav sekondarju—jew kwalunkwe kombinazzjoni ta' dan.

Dropdowns inklużi

Bħala parti min-navigazzjoni ewlenija, inkludejna l-abbiltà għalik li żżid dropdowns man-nav tiegħek. Iċċekkja n-nav sekondarju hawn fuq (allinjat mal-lemin) biex tara kif isir. liIt -tikketti dropdowns jappoġġjaw ukoll .activebiex juru l-għażla tal-paġna attwali.

Tabs u pilloli

Oħloq navigazzjoni sekondarja sempliċi b' <ul>. Ibdel bejn tabs jew pilloli billi żżid il-klassi xierqa.

Kbira għal sub-taqsimiet tal-kontenut bħall-paġni tas-settings tal-kont tagħna u l-iskedi ta' żmien tal-utent biex taqleb bejn paġni ta' kontenut simili. Disponibbli fi stili tabbed jew pillola.

Eżempju ta' tabs bażiċi

Tabs jistgħu jintużaw bħala navigazzjoni regolari (tagħbija ta 'paġni esterni fl-istess tab) jew bħala żoni ta' kontenut tabbable għall-iskambju ta' panewijiet tal-kontenut. Għandna plugin ta 'tabs li jista' jintuża biex jintegra lil dan tal-aħħar.

• Dar
• Profil
• Messaġġi
• Settings
• Kuntatt
• Dropdown
  • Rabta sekondarja
  • Xi ħaġa oħra hawn
  • Rabta oħra

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Dar </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Messaġġi </a></li> 
  <li><a href = "#" > Settings </a></li> 
  <li><a href = "#" > Kuntatt </a></li> 
</ul>

Eżempju ta 'pilloli bażiċi

• Dar
• Profil
• Messaġġi
• Settings
• Kuntatt

<ul class = "pilloli" > 
  <li class = "active" ><a href = "#" > Dar </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Messaġġi </a></li> 
  <li><a href = "#" > Settings </a></li> 
  <li><a href = "#" > Kuntatt </a></li> 
</ul>

Frak tal-ħobż

In-navigazzjoni tal-breadcrumb tintuża bħala mod biex turi lill-utenti fejn qegħdin f'app jew f'sit, iżda mhux għan-navigazzjoni primarja.

• Dar

• dar /
• Paġna tan-nofs

• dar /
• Paġna tan-nofs /
• Oħra

• dar /
• Paġna tan-nofs /
• Ieħor /
• Inti qiegħed hawn

<ul class = "frak tal-ħobż" > 
  <li><a href = "#" > Dar </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Paġna tan-nofs </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Ieħor </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Inti hawn </li> 
</ul>

Paġnar

Paġnar ultra simplistiku u b'mod minimu ispirat minn Rdio. Il-blokka l-kbira hija diffiċli biex titlifha, tista 'tiġi skalata faċilment, u tipprovdi żoni ta' klikkjar kbar.

<div class = "paġinazzjoni" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Preċedenti </a></li>  
    <li class = "attiv" ><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 = "li jmiss" ><a href = "#" > Li jmiss → </a></li>  
  </ul>
</div>

Twissijiet bażiċi

.alert-message

Messaġġi f'linja waħda biex jenfasizzaw il-falliment, il-falliment possibbli, jew is-suċċess ta 'azzjoni. Partikolarment utli għall-formoli.

Ikseb il-javascript »

Eżempju ta' kodiċi

<div class = "twissija ta' messaġġ ta' twissija" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole Imqaddes! </strong> L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb. </p>
</div>

Imblokka messaġġi

.alert-message.block-message

Għal messaġġi li jeħtieġu ftit spjegazzjoni, għandna twissijiet ta 'stil ta' paragrafu. Dawn huma perfetti biex ibaxxu messaġġi ta 'żball itwal, iwissu lil utent dwar azzjoni pendenti, jew sempliċement jippreżentaw informazzjoni għal aktar enfasi fuq il-paġna.

Ikseb il-javascript »

Eżempju ta' kodiċi

<div class = "twissija ta' messaġġ ta' blokk-messaġġ ta' twissija" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole Imqaddes! Din hija twissija! </strong> L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "azzjonijiet-twissija" > 
    <a class = "btn small" href = "#" > Ħu din l-azzjoni </a> <a class = "btn small" href = "#" > Jew agħmel dan </a>     
  </div>
</div>

Modali

Il-modali—djalogi jew lightboxes—huma tajbin għal azzjonijiet kuntestwali f'sitwazzjonijiet fejn huwa importanti li jinżamm il-kuntest tal-isfond.

Ikseb il-javascript »

Tooltips

Twipsies huma super utli biex jgħinu utent konfuż u jippontahom fid-direzzjoni t-tajba.

Ikseb il-javascript »

Popovers

Uża popovers biex tipprovdi informazzjoni subtestwali lil paġna mingħajr ma taffettwa t-tqassim.

Ikseb il-javascript »

Nibdew

L-integrazzjoni tal-javascript mal-librerija Bootstrap hija super faċli. Hawn taħt nimxu fuq l-affarijiet bażiċi u nipprovdulek xi plugins tal-biża 'biex tibda!

Ara d-dokumenti tal-javascript »

X'inhu inkluż

Agħti xi wħud mill-komponenti primarji tal-Bootstrap għall-ħajja b'plugins personalizzati ġodda li jaħdmu ma ' jQuery u Ender . Inħeġġuk testendihom u timmodifikahom biex taqdi l-ħtiġijiet speċifiċi ta' żvilupp tiegħek.

Huwa meħtieġ javascript?

Le! Bootstrap huwa ddisinjat l-ewwel u qabel kollox biex ikun librerija CSS. Dan il-javascript jipprovdi saff interattiv bażiku fuq l-istili inklużi.

Madankollu, għal dawk li għandhom bżonn javascript, ipprovdejna l-plugins hawn fuq biex jgħinuk tifhem kif tintegra Bootstrap mal-javascript u biex jagħtuk għażla rapida u ħafifa għall-funzjonalità bażika minnufih.

Għal aktar informazzjoni u biex tara xi demos ħajjin, jekk jogħġbok irreferi għall- paġna tad-dokumentazzjoni tal-plugin tagħna .