Ohatra fanombohana haingana

Mila môdely haingana? Jereo ireto ohatra fototra natambatra ireto:

Grid default

Ny rafitra grid default nomena ho ampahany amin'ny Bootstrap dia tsanganana 16 tsanganana mirefy 940px. tsiron'ny rafitra 960 grid malaza izy io, saingy tsy misy sisiny / padding fanampiny amin'ny ilany havia sy havanana.

Ohatra grid markup

Araka ny aseho eto, dia azo amboarina miaraka amin'ny "tsanganana" roa ny lamina fototra iray, izay samy mamakivaky ny tsanganana fototra 16 izay nofaritanay ho ampahany amin'ny rafitry ny grid. Jereo ny ohatra etsy ambany raha te hahita fiovana bebe kokoa.

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

Andry fanatobiana

Asio ny atiny raha tsy maintsy mamorona .rowao anatin'ny tsanganana efa misy ianao.

Ohatra amin'ny tsanganana nested

<div class = "row" > 
  <div class = "span12" > 
    Ambaratonga 1 amin'ny tsanganana
    <div class = "row" > 
      <div class = "span6" > 
        Ambaratonga 2
      </div>
      <div class = "span6" > 
        Ambaratonga 2
      </div>
    </div>
  </div>
</div>

Arotsaho ny grid-nao manokana

Namboarina tao amin'ny Bootstrap dia karazany vitsivitsy ho an'ny fanamboarana ny rafitra grid 940px default. Miaraka amin'ny fanamboarana kely, azonao atao ny manova ny haben'ny tsanganana, ny tatatrany ary ny fitoeran-javatra misy azy.

Ao anatin'ny grid

Ny variables ilaina hanovana ny rafitra grid amin'izao fotoana izao dia mipetraka ao amin'ny preboot.less.

Ankehitriny mba ampanjifaina

Ny fanovana ny grid dia midika hoe manova ireo @grid-*variables telo ary mamerina indray ny rakitra Less.

Ny Bootstrap dia tonga fitaovana amin'ny fitantanana rafitra grid misy tsanganana 24; 16 fotsiny ny default. Toy izao no mety ho endriky ny fiovaovan'ny grid-nao amin'ny tsanganana misy tsanganana 24.

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

Rehefa tafaverina indray ianao dia ho tafapetraka!

Filaminana raikitra

Ny fandrindrana 940px mirefy 940px mivelatra, mivondrona ho an'ny tranokala na pejy rehetra omen'ny <div.container>.

<vatana>
  <div class = "container" > 
    ...
  </div>
</body>

Fametrahana ranon-javatra

Firafitry ny pejin'ny ranom-boankazo azo ampiasaina miaraka amin'ny sakany kely indrindra sy max ary sisiny havia. Tsara ho an'ny fampiharana sy doka.

<vatana>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Lohateny & kopia

Ambaratonga typografika mahazatra amin'ny fandrafetana ny pejin-tranonkalanao.

Ny grids typografika manontolo dia mifototra amin'ny fari-pitsipika Less roa ao amin'ny rakitra preboot.less: @basefontsy @baseline. Ny voalohany dia ny haben'ny endri-tsoratra ampiasaina manerana ary ny faharoa dia ny haavon'ny tsipika fototra.

Mampiasa ireo fari-pahalalana ireo izahay, ary ny matematika sasany, mba hamoronana ny sisiny, ny padding, ary ny haavon'ny tsipika amin'ny karazana rehetra misy anay sy ny maro hafa.

h1. Lohateny 1

h2. Lohateny 2

h3. Lohateny 3

h4. Lohateny 4

h5. Lohahevitra 5

h6. Lohateny 6

Ohatra paragrafy

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

Lohateny ohatra Misy lohateny kely…

Misc. singa

Mampiasa fanamafisana, adiresy ary fanafohezana

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

Rahoviana no hampiasaina

Ny mari- pamantarana fanamafisana ( <strong>sy <em>) dia tokony hampiasaina mba hanondroana ny lanjany fanampiny na ny fanamafisana ny teny na andian-teny iray mifandraika amin'ny dika mitovy aminy. Ampiasao <strong>ho zava-dehibe sy <em>ho an'ny fanamafisana ny adin-tsaina .

Fanamafisana amin'ny fehintsoratra iray

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.

Fanamarihana: Mbola tsy maninona ny mampiasa <b>sy ny <i>marika ao amin'ny HTML5 ary tsy voatery atao hoe bold sy italic izy ireo (na dia misy singa semantika kokoa aza dia ampiasao izany). <b>dia natao hanasongadinana teny na andian-teny nefa tsy mampita zava-dehibe fanampiny, fa <i>ny ankamaroan'ny feo, teny teknika, sns.

adiresy

Ny <address>singa dia ampiasaina amin'ny fampahalalana mifandray amin'ny razambeny akaiky indrindra, na ny asa manontolo. Ireto misy ohatra roa amin'ny fomba azo ampiasana azy:

Fanamarihana: Ny andalana tsirairay ao amin'ny an <address>dia tsy maintsy mifarana amin'ny tsipika tapaka ( <br />) na fonosina amin'ny tenifototra ambaratonga sakana (oh, <p>) mba handrafetana araka ny tokony ho izy ny atiny.

fanafohezan-teny

Ho an'ny fanafohezana sy fanafohezana, ampiasao ny <abbr>tenifototra ( <acronym>lany ao amin'ny HTML5 ). Apetraho ao anatin'ny marika ny endrika fohy ary asio lohateny ho an'ny anarana feno.

Blockquotes

<blockquote> <p> <small>

Ahoana no mitanisa

Mba hampidirana blockquote, fonosina <blockquote>ary <p>asio <small>marika. Ampiasao io <small>singa io mba hitanisana ny loharanonao ary hahazo tsipika em —aloha ianao.

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>
  <kely> Dr. Julius Hibbert </kely>
</blockquote>

Tsy voalamina<ul>

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

baiko<ol>

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

Descriptiondl

Lisitry ny famaritana

Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.

Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

fehezan-dalàna

<code> <pre>

Pimp ny kaodinao amin'ny fomba miaraka amin'ny marika roa tsotra. Mba hahafinaritra kokoa amin'ny alàlan'ny javascript, ampidiro ao amin'ny tranomboky prettify kaody Google ary efa vonona ianao.

Kaody fanolorana

Kaody, sakana na sombintsombiny fotsiny, dia azo aseho miaraka amin'ny fomba amin'ny famenoana ny marika havanana fotsiny. Ho an'ny sakana misy kaody mivelatra andalana maromaro, ampiasao ny <pre>singa. Ho an'ny code inline, ampiasao ny <code>singa.

<div>
  <h1>Lohateny</h1>
  <p>Misy zavatra eto...</p>
</div>

<div> <h1> Lohateny </h1> <p> Misy zavatra eto... </p> </div>
  
  

Labels inline

<span class="label">

Safidio ny saina amin'ny fehezanteny rehetra ao amin'ny lahatsoratry ny vatanao.

asio marika na inona na inona

Efa nila ny iray amin'ireo vaovao mahafinaritra ireo! na saina manan -danja rehefa manoratra kaody? Eny, manana azy ireo ianao izao. Ity ny zavatra tafiditra amin'ny default:

Grid media

Asehoy ny thumbnails amin'ny habe samihafa amin'ny pejy misy dian-tongotra HTML ambany sy fomba kely.

Ohatra thumbnails

Ny thumbnails ao amin'ny .media-griddia mety ho habe rehetra, saingy miasa tsara izy ireo rehefa voasokajy mivantana amin'ny rafitra grid Bootstrap naorina. Ny sakan'ny sary toy ny 90, 210, ary 330 dia mitambatra amin'ny pikantsary vitsivitsy amin'ny padding mba hitovy amin'ny haben'ny .span2, .span4, ary .span6tsanganana.

ankamaroan'ireo

SALASALANY

KELY

Kaody azy ireo

Ny grids media dia mora ampiasaina ary somary tsotra amin'ny lafiny marika. Ny refin'izy ireo dia mifototra amin'ny haben'ny sary tafiditra.

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

Manorina latabatra

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

Tsara ny latabatra—ho an'ny zavatra maro. Ny latabatra lehibe anefa dia mila fitiavana marika kely mba ho ilaina, azo scalable ary azo vakiana (amin'ny ambaratonga kaody). Ireto misy torohevitra vitsivitsy hanampy anao.

Fenoy foana ny lohatenin'ny tsangananao amin'ny <thead>hoe hierarchy dia <thead>>> <tr>.<th>

Mitovy amin'ny lohatenin'ny tsanganana, ny votoatin'ny vatan'ny latabatrao dia tokony hofonosina a <tbody>ka ny ambaratonganao dia <tbody>> <tr>> <td>.

Ohatra: Fomba latabatra mahazatra

Ny latabatra rehetra dia hamboarina ho azy miaraka amin'ny sisin-tany tena ilaina mba hiantohana ny famakian-teny sy ny fikojakojana ny rafitra. Tsy mila manampy kilasy na toetra fanampiny.

<latabatra>
  ...
</ table>

Ohatra: zebra miendrika

Ataovy mahafinaritra kely ny latabatrao amin'ny fampidirana zebra-striping—ampio fotsiny ny .zebra-stripedkilasy.

Fanamarihana: Zebra-striping dia fanatsarana mivoatra tsy misy ho an'ny navigateur taloha toa ny IE8 sy ambany.

< kilasy latabatra = "zebra-striped" > 
...
</ table>

Ohatra: Zebra-striped w/ TableSorter.js

Raha raisina ny ohatra teo aloha, dia manatsara ny maha-ilaina ny latabatray izahay amin'ny alàlan'ny fanomezana fandrindrana amin'ny alalan'ny jQuery sy ny plugin Tablesorter . Kitiho ny lohatenin'ny tsanganana rehetra hanovana ny karazana.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( asa () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< kilasy latabatra = "zebra-striped" > 
  ...
</ table>

Fomba mahazatra

Ny endrika rehetra dia omena fomba fanao mahazatra mba hanehoana azy ireo amin'ny fomba mora vakiana sy azo scalable. Styles dia omena ho an'ny fampidirana lahatsoratra, fifantenana lisitra, textareas, radio bokotra sy ny checkboxes, ary bokotra.

Endriky ny stacked

Ampio .form-stackedamin'ny HTML ny endrikao dia hanana etikety eo an-tampon'ny sahany ianao fa tsy eo ankaviany. Tena mety izany raha fohy ny endrikao na manana tsanganana roa ianao ho an'ny endrika mavesatra kokoa.

Haben'ny saha

Amboary ny endrika rehetra input, select, na textareasakany amin'ny fampidirana kilasy vitsivitsy amin'ny marikao.

Tamin'ny v1.3.0 dia nampiana ny kilasy fandrefesana mifototra amin'ny grid ho an'ny singa endrika. Azafady ampiasao ireto amin'ireo kilasy efa misy .mini, .small, sns.

bokotra

Amin'ny maha-convention azy, ny bokotra dia ampiasaina amin'ny hetsika ary ny rohy dia ampiasaina amin'ny zavatra. Ohatra, ny "Download" dia mety ho bokotra ary ny "activité vao haingana" dia mety ho rohy.

Ny bokotra rehetra dia natao ho an'ny endrika volondavenona maivana, saingy misy kilasy fiasa maromaro azo ampiharina amin'ny loko samihafa. Ireo kilasy ireo dia ahitana kilasy manga .primary, kilasy manga mazava, .infokilasy maitso .successary kilasy mena .danger.

Bokotra ohatra

Ny fomba bokotra dia azo ampiharina amin'ny zavatra rehetra miaraka amin'ny .btnfampiharana. Amin'ny ankapobeny dia tianao ny hampihatra ireto amin'ny singa <a>, <button>, ary mifantina ihany. <input>Toy izao ny endriny:

Habe mifandimby

Mitady bokotra lehibe kokoa na kely kokoa? Manàna izany!

Fanjakana kilemaina

Ho an'ny bokotra tsy mavitrika na kilemain'ny fampiharana noho ny antony iray na hafa, ampiasao ny fanjakana kilemaina. Izany dia .disabledho an'ny rohy sy :disabledho an'ny <button>singa.

rohy

bokotra

Inona ity

Ny topbar-nay dia bara raikitra misy ny logo na ny anaran'ny tranokala, ny fitetezana voalohany ary ny endrika fikarohana.

Customizable

Ny singa rehetra ao anatiny, ary ny topbar manontolo koa dia tsy voatery. Azonao atao ny misafidy ny hampiditra logo/anarana, nav, fikarohana, ary nav faharoa—na izay fitambaran'izany.

Anisan'izany ny dropdowns

Amin'ny maha-fitetezana lehibe indrindra, nampidirinay ny fahafahanao manampy ny fidinana amin'ny nav-nao. Jereo ny nav faharoa etsy ambony (milamina havanana) hahitana ny fomba nanaovana azy. liNy marika dropdowns dia manohana ihany koa .activeamin'ny fampisehoana ny fisafidianana pejy ankehitriny.

Tabs sy pilina

Mamorona navigateur faharoa tsotra miaraka amin'ny <ul>. Ampifamadiho eo anelanelan'ny tabilao na pilina amin'ny fampidirana ny kilasy mety.

Tsara ho an'ny fizarana votoaty toy ny pejin'ny firafitry ny kaontintsika sy ny fandaharam-potoanan'ny mpampiasa mba hivezivezena eo anelanelan'ny pejin'ny atiny mitovy. Misy amin'ny endrika takelaka na pilina.

• an-trano
• TANTARANY
• Hafatra
• Fikirana
• Contact
• Velarina
  • Rohy faharoa
  • Zavatra hafa eto
  • Rohy iray hafa

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Hafatra </a></li> 
  <li><a href = "#" > Fikirana </a></li> 
  <li><a href = "#" > Fifandraisana </a></li> 
</ul>

• an-trano
• TANTARANY
• Hafatra
• Fikirana
• Contact

<ul class = "pills" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Hafatra </a></li> 
  <li><a href = "#" > Fikirana </a></li> 
  <li><a href = "#" > Fifandraisana </a></li> 
</ul>

Mofo

Ny navigateur Breadcrumb dia ampiasaina ho fomba iray hanehoana amin'ny mpampiasa ny toerana misy azy ao anatin'ny fampiharana na tranokala iray, fa tsy ho an'ny fitetezana voalohany.

• an-trano

• Home /
• Pejy afovoany

• Home /
• Pejy afovoany /
• Iray hafa

• Home /
• Pejy afovoany /
• iray hafa /
• Eto ianao

<ul class = "mofo" > 
  <li><a href = "#" > Home </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Pejy afovoany </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Iray hafa </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Eto ianao </li> 
</ul>

Pagination

pagination faran'izay tsotra sy bitika indrindra aingam-panahy avy amin'ny Rdio. Ny sakana lehibe dia sarotra adino, mora miendrika, ary manome faritra kitiho lehibe.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Teo aloha </a></li>  
    <li class = "active" ><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 = "manaraka" ><a href = "#" > Manaraka → </a></li>  
  </ul>
</div>

Fanairana fototra

.alert-message

Hafatra tokana hanasongadinana ny tsy fahombiazana, ny mety ho tsy fahombiazana, na ny fahombiazan'ny hetsika iray. Tena ilaina amin'ny endrika.

Raiso ny javascript »

Kaody ohatra

<div class = "fampitandremana hafatra fampitandremana" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Masina guacamole! </strong> Jereo tsara ny tenanao, tsy dia tsara loatra ianao. </p>
</div>

Sakanana ny hafatra

.alert-message.block-message

Ho an'ny hafatra mila fanazavana kely dia manana fanairana momba ny fomba paragrafy izahay. Ireo dia tonga lafatra amin'ny famoahana hafatra diso lava kokoa, fampitandremana ny mpampiasa iray amin'ny hetsika miandry, na fanolorana fampahalalana fotsiny mba hanamafisana bebe kokoa ny pejy.

Raiso ny javascript »

Kaody ohatra

<div class = "fampitandremana momba ny fanakanana hafatra" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Masina guacamole! Fampitandremana izany! </strong> Jereo tsara ny tenanao, tsy dia tsara loatra ianao. 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 = "#" > Raiso ity hetsika ity </a> <a class = "btn small" href = "#" > Na ataovy izany </a>     
  </div>
</div>

Modals

Modals—dialogues na lightboxes—dia tsara ho an'ny hetsika mifandraika amin'ny toe-javatra izay zava-dehibe ny fitazonana ny contexte background.

Raiso ny javascript »

Tooltips

Tena ilaina tokoa ny Twipsies amin'ny fanampiana mpampiasa misavoritaka ary manondro azy ireo amin'ny lalana marina.

Raiso ny javascript »

Popovers

Mampiasà popover mba hanomezana fampahalalana subtextual amin'ny pejy iray tsy misy fiantraikany amin'ny layout.

Raiso ny javascript »

Hanomboka

Ny fampidirana javascript amin'ny tranomboky Bootstrap dia tena mora. Ity ambany ity dia mijery ny fototra ary manome anao plugins mahafinaritra hanombohana anao!

Jereo ny javascript docs »

Inona no tafiditra

Ampiaina ny sasany amin'ireo singa fototra ao amin'ny Bootstrap miaraka amin'ny plugins manokana vaovao izay miasa miaraka amin'ny jQuery sy Ender . Mamporisika anao izahay hanitatra sy hanova azy ireo hifanaraka amin'ny filanao manokana.

Ilaina ve ny javascript?

Tsia! Bootstrap dia natao voalohany indrindra ho tranomboky CSS. Ity javascript ity dia manome sosona ifanakalozan-kevitra fototra eo an-tampon'ireo fomba tafiditra.

Na izany aza, ho an'ireo izay mila javascript dia nanome ireo plugins etsy ambony izahay mba hanampiana anao hahatakatra ny fomba fampidirana Bootstrap amin'ny javascript ary hanome anao safidy haingana sy maivana ho an'ny fiasa fototra avy hatrany.

Raha mila fanazavana fanampiny sy hahitana demo mivantana sasany, azafady jereo ny pejy fanangonam-baovao plugin .