Mehlala ea ho qala kapele

U hloka litempele tse potlakileng? Sheba mehlala ena ea mantlha eo re e kopantseng:

Gridi ea kamehla

Sistimi ea grid ea kamehla e fanoeng e le karolo ea Bootstrap ke gridi e bophara ba 16-column ea 940px. Ke tatso ea sistimi e tsebahalang ea grid ea 960, empa ntle le marang-rang / padding ka lehlakoreng le letšehali le le letona.

Mohlala oa marang-rang

Joalokaha ho bontšitsoe mona, moralo oa motheo o ka etsoa ka "likholomo" tse peli, e 'ngoe le e' ngoe e nka palo ea litšiea tse 16 tseo re li hlalositseng e le karolo ea tsamaiso ea rona ea marang-rang. Sheba mehlala e ka tlase bakeng sa mefuta e meng e fapaneng.

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

Litšiea tsa Nesting

Hlaha litaba tsa hau haeba u tlameha ka ho theha .rowkholomo e teng.

Mohlala oa litšiea tse entsoeng sehlaheng

<div class = "row" > 
  <div class = "span12" > 
    Boemo ba 1 ba kholomo
    <div class = "row" > 
      <div class = "span6" > 
        Mohato oa 2
      </ div>
      <div class = "span6" > 
        Mohato oa 2
      </ div>
    </ div>
  </ div>
</ div>

Tsamaisa grid ea hau

E hahiloe ka har'a Bootstrap ho na le mefuta e mengata e fapaneng bakeng sa ho iketsetsa sistimi ea grid ea 940px. Ka mokhoa o ikhethileng, o ka fetola boholo ba litšiea, li-gutters tsa tsona le setshelo seo ba lulang ho sona.

Ka hare ho marang-rang

Liphetoho tse hlokahalang ho fetola sistimi ea grid hajoale kaofela li lula ho variables.less.

Joale ho Customize

Ho fetola grid ho bolela ho fetola @grid-*mefuta e meraro le ho khutlisetsa lifaele tse Nyane.

Bootstrap e tla e hlomelloa ho sebetsana le sistimi ea grid e nang le litšiea tse ka bang 24; ya kamehla ke tse 16 feela. Mona ke ka moo mefuta e fapaneng ya gridi ya hao e ka shebahalang e kgethehile ho grid ya mela e 24.

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

Hang ha u se u hlophisitsoe, u tla be u le teng!

Sebopeho se tsitsitseng

Sebopeho sa kamehla le se bonolo sa 940px-wide, se bohareng bakeng sa sebaka sa marang-rang sefe kapa sefe kapa leqephe le fanoeng ke <div.container>.

<'mele>
  <div class = "setshelo" > 
    ...
  </ div>
</ mmele>

Sebopeho sa mokelikeli

Sebopeho se seng, se feto-fetohang sa leqephe le nang le min- le max-widths le karolo e ka letsohong le letšehali. E loketse lisebelisoa le litokomane.

<'mele>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </ div>
    <div class = "dikahare" > 
      ...
    </ div>
  </ div>
</ mmele>

Lihlooho & kopi

Lethathamo le tloaelehileng la typographic bakeng sa ho hlophisa maqephe a hau a tepo.

Keriti eohle ea typographic e thehiloe holim'a mefuta e 'meli e Nyane ho mefuta ea rona.faele e se nang letho: @basefontle @baseline. Ea pele ke boholo ba fonte e sebelisoang hohle 'me ea bobeli ke bophahamo ba mohala.

Re sebelisa mefuta-futa eo, le lipalo tse ling, ho theha marang-rang, li-padding, le bophahamo ba mela ea mefuta eohle ea rona le tse ling.

h1. Sehlooho sa 1

h2. Sehlooho sa 2

h3. Sehlooho sa 3

h4. Sehlooho sa 4

h5. Sehlooho sa 5

h6. Sehlooho sa 6

Serapa sa mohlala

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.

Sehloho sa mohlala Se na le sehloohoana...

Tse ling likarolo

Ho sebelisoa khatiso, liaterese le khutsufatso

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

Nako ea ho sebelisoa

Li-tag tsa khatiso ( <strong>le <em>) li lokela ho sebelisoa ho bontša bohlokoa bo eketsehileng kapa khatiso ea lentsoe kapa poleloana e amanang le kopi e potolohileng eona. Sebelisa <strong>bakeng sa bohlokoa le <em>bakeng sa ho hatisa khatello .

Ho hatisoa serapeng

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

Tlhokomeliso: Ho ntse ho lokile ho sebelisa <b>le <i>li-tag ho HTML5 'me ha ho hlokahale hore li ngotsoe ka sebete le ka mongolo o tšekaletseng, ka ho latellana (leha ho na le karolo ea semantic, e sebelise). <b>e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng, athe <i>hangata e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.

Liaterese

The <address>element e sebelisetsoa tlhahisoleseling bakeng sa moholo-holo oa eona ea haufi, kapa sehlopha sohle sa mosebetsi. Mona ke mehlala e 'meli ea kamoo e ka sebelisoang kateng:

Tlhokomeliso: Mola o mong le o mong o <address>tlameha ho qetella ka ho khaoha ( <br />) kapa o phuthetsoe ka lebokose la "block-level" (mohlala, <p>) ho hlophisa litaba hantle.

Likgutsufatso

Bakeng sa khutsufatso le li-acronyms, sebelisa <abbr>tag ( <acronym>e tlositsoe ho HTML5 ). Beha foromo e khuts'oane ka har'a tag ebe u beha sehlooho sa lebitso le felletseng.

Mantsoe a thibelang

<blockquote> <p> <small>

Mokhoa oa ho qotsa

Ho kenyelletsa blockquote, thatela <blockquote>hohle <p>le <small>li-tag. Sebelisa <small>element ho qotsa mohloli oa hau mme o tla fumana lebelo la em —pele ho lona.

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

Ngaka Julius Hibbert

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

Ha ea laeloa<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem le massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Likokoana-hloko tsa Purus sodales
  • 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 le massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Likokoana-hloko tsa Purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

E laetsoe<ol>

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

Tlhalosodl

Manane a tlhaloso

Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.

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.

Khoutu

<code> <pre>

Ngola khoutu ea hau ka setaele ka li-tag tse peli tse bonolo. Bakeng sa botle le ho feta ka javascript, kenya laeborari ea hau ea Google 'me u se u ikemiselitse.

E hlahisa khoutu

Khoutu, li-blocks kapa snippets inline, li ka hlahisoa ka setaele ka ho phuthela ka tag e nepahetseng. Bakeng sa li-blocks tsa khoutu tse arolang mela e mengata, sebelisa <pre>element. Bakeng sa khoutu ea inline, sebelisa <code>element.

<div>
  <h1>Sehlooho</h1>
  <p>Ho hong hona mona...</p>
</ div>

<div> <h1> Sehlooho </h1> <p> Ho hong hona mona... </p> </div>
  
  

Li-labels tse ka hare

<span class="label">

Lebisa tlhokomelo ho kapa ho tšoaea poleloana efe kapa efe 'meleng oa hau.

Ngola eng kapa eng

O kile oa hloka e 'ngoe ea tse ncha tse majabajaba! kapa Lifolakha tsa bohlokoa ha u ngola khoutu? Joale, u na le tsona. Mona ke se kenyellelitsoeng ke default:

Mecha ea litaba

Hlahisa li-thumbnail tsa boholo bo fapaneng maqepheng a nang le HTML e tlase le mekhoa e fokolang.

Mehlala ea li-thumbnails

Lits'oants'o tse ka har'a eona .media-gridli ka ba boholo bofe kapa bofe, empa li sebetsa hantle ha li entsoe 'mapa ka kotloloho ho sistimi ea grid ea Bootstrap e hahiloeng. Bophara ba setšoantšo joalo ka 90, 210, le 330 bo kopana le lipikselse tse 'maloa tsa padding ho lekana le .span2, .span4, le .span6boholo ba kholomo.

E kholoanyane

Mahareng

Nyenyane

Ho li khouta

Li-grid tsa mecha ea litaba li bonolo ho li sebelisa ebile li bonolo ka lehlakoreng la markup. Litekanyo tsa bona li ipapisitse le boholo ba litšoantšo tse kenyellelitsoeng.

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

Ho aha litafole

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

Litafole li ntle - bakeng sa lintho tse ngata. Litafole tse kholo, leha ho le joalo, li hloka lerato la "markup" hore le be molemo, le fokotsehe, 'me le balehe (boemong ba khoutu). Litlhahiso tse 'maloa tse ka u thusang ke tsena.

Ka linako tsohle phuthela lihlooho tsa kholomo ea hau ka tsela <thead>eo bolaoli bo leng teng <thead>> <tr>> <th>.

Joalo ka lihlooho tsa kholomo, litaba tsohle tsa 'mele oa tafole ea hau li lokela ho koaheloa ka hore sehlopha sa <tbody>hau sa maemo ke <tbody>> <tr>> <td>.

Mohlala: Mekhoa ea litafole ea kamehla

Litafole tsohle li tla etsoa ka mokhoa oa boiketsetso ka meeli ea bohlokoa feela ho netefatsa hore li balehe le ho boloka sebopeho. Ha ho hlokahale ho eketsa litlelase kapa litšobotsi tse ling.

<tafole>
  ...
</tafole>

Mohlala: Tafole e khutsufalitsoeng

Bakeng sa litafole tse hlokang boitsebiso bo bongata libakeng tse thata, sebelisa tatso e khutsitseng e fokotsang padding ka halofo. E ka boela ea sebelisoa hammoho le meeli le liqoaha tsa liqoaha, joalo ka mefuta ea litafole ea kamehla.

Mohlala: Tafole e moeling

Etsa hore litafole tsa hau li shebahale li le boreleli ka ho pota-pota likhutlo tsa tsona le ho eketsa meeli ka mahlakoreng 'ohle.

< sehlopha sa tafole = "tafole e moeling" > 
  ...
</tafole>

Mohlala: Qoaha e metsero

Fumana monate ka litafole tsa hau ka ho eketsa liqoaha-tsenya .zebra-stripedsehlopha.

Tlhokomeliso: Zebra-striping ke ntlafatso e tsoelang pele ha e fumanehe bakeng sa libatli tsa khale joalo ka IE8 le ka tlase.

< sehlopha sa tafole = "zebra-striped" > 
  ...
</tafole>

Mohlala: Zebra-striped w/ TableSorter.js

Ho nka mohlala o fetileng, re ntlafatsa molemo oa litafole tsa rona ka ho fana ka ts'ebetso ea ho hlophisa ka jQuery le plugin ea Tablesorter . Tobetsa sehlooho sa kholomo efe kapa efe ho fetola mofuta.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( mosebetsi () { 
    $ ( "tafole#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< sehlopha sa tafole = "zebra-striped" > 
  ...
</tafole>

Mekhoa ea kamehla

Liforomo tsohle li fuoa mekhoa e sa lekanyetsoang ho li hlahisa ka mokhoa o balehang le o qhekellang. Litaele li fanoe bakeng sa ho kenya mongolo, ho khetha manane, libaka tsa mongolo, likonopo tsa seea-le-moea le li-checkbox, le likonopo.

Liforomo tse pakiloeng

Eketsa .form-stackedho HTML ea foromo ea hau 'me u tla ba le lileibole ka holim'a masimo a tsona ho fapana le ho le letšehali. Sena se sebetsa hantle haeba liforomo tsa hau li le khuts'oane kapa u na le mela e 'meli ea litlatsetso bakeng sa liforomo tse boima.

Etsa boholo ba masimo

Iketsetse mofuta ofe kapa ofe input, selectkapa textareabophara ka ho kenyelletsa litlelase tse 'maloa ho markup ea hau.

Ho tloha ka v1.3.0, re kentse lihlopha tsa boholo ba grid-based bakeng sa likarolo tsa foromo. Ka kopo sebelisa tsena ho litlelase tse teng .mini, , joalo-joalo..small

Likonopo

Joalo ka kopano, likonopo li sebelisetsoa liketso ha lihokelo li sebelisetsoa lintho. Mohlala, "Khoasolla" e ka ba konopo mme "ts'ebetso ea morao-rao" e ka ba sehokelo.

Likonopo tsohle li ikamahanya le setaele se boputsoa bo bobebe, empa ho ka sebelisoa lihlopha tse 'maloa tse sebetsang bakeng sa mefuta e fapaneng ea mebala. Lihlopha tsena li kenyelletsa sehlopha sa 'mala o moputsoa .primary, ​​​​boputsoa bo khanyang .info, sehlopha se setala .success, le sehlopha se sefubelu .danger.

Likonopo tsa mohlala

Mefuta ea likonopo e ka sebelisoa ho eng kapa eng e .btnsebelisitsoeng. Ka tloaelo u tla batla ho sebelisa tsena feela ho <a>, <button>, le ho khetha <input>likarolo. Mona ke kamoo e shebahalang kateng:

Mefuta e fapaneng

U batla likonopo tse kholoanyane kapa tse nyane? E be le eona!

Boemo ba bokooa

Bakeng sa likonopo tse sa sebetseng kapa tse koetsoeng ke sesebelisoa ka mabaka a mang, sebelisa boemo ba batho ba holofetseng. Ke tsa .disabledlihokelo le :disabledtsa <button>likarolo.

Lihokelo

Likonopo

Ke eng

Topbar ea rona ke bar e tsitsitseng e bolokang logo kapa lebitso la sebaka sa Marang-rang, navigation ea mantlha, le foromo ea ho batla.

Customizable

Likarolo tsohle tse ka hare, le topbar kaofela, ke boikhethelo. U ka khetha ho kenyelletsa logo/lebitso, nav, search, le nav ea bobeli-kapa motsoako ofe kapa ofe oa seo.

Li-dropdown li kenyelelitsoe

Joalo ka karolo ea mantlha ea ho sesa, re kenyelelitse bokhoni ba ho kenya litheolelo ho nav ea hau. Sheba nav ea bobeli ka holimo (e eme ka ho le letona) ho bona hore na e etsoa joang. Li-tag tsa Dropdown lili boetse li tšehetsa .activeho bonts'a khetho ea hajoale ea maqephe.

Li-tab le lipilisi

Etsa mokhoa o bonolo oa ho tsamaea oa bobeli ka <ul>. Fetola pakeng tsa li-tab kapa lipilisi ka ho eketsa sehlopha se nepahetseng.

E nepahetse bakeng sa likaroloana tsa litaba joalo ka maqephe a litlhophiso tsa ak'haonte le linako tsa basebelisi bakeng sa ho fetola maqephe a litaba tse tšoanang. E fumaneha ka mefuta ea li-tabbed kapa lipilisi.

Mohlala oa li-tab tsa mantlha

Li-tab li ka sebelisoa e le mokhoa oa ho tsamaea o tloaelehileng (ho kenya maqephe a ka ntle tepong e le 'ngoe) kapa e le libaka tsa litaba tse fumanehang bakeng sa ho fapanyetsana liphasejene tsa litaba. Re na le plugin ea li-tab e ka sebelisoang ho kopanya ea morao-rao.

• Lehae
• Profile
• Melaetsa
• Litlhophiso
• Ikopanye
• Theosa
  • Sehokelo sa bobeli
  • Ntho e 'ngoe mona
  • Sehokelo se seng

<ul class = "tabs" > 
  <li class = "active" ><a href = "#"> Lehae </a></li >  
  <li><a href = "#"> Boemo </a> </li> 
  <li><a href = "#"> Melaetsa </a> </li> 
  <li><a href = "#"> Litlhophiso </a> </li> 
  <li><a href = "#"> Ikopanye </a> </li> 
</ul>

Mohlala oa lipilisi tsa motheo

• Lehae
• Profile
• Melaetsa
• Litlhophiso
• Ikopanye

<ul sehlopha = "lipilisi" > 
  <li class = "active" ><a href = "#"> Lehae </a></li >  
  <li><a href = "#"> Boemo </a> </li> 
  <li><a href = "#"> Melaetsa </a> </li> 
  <li><a href = "#"> Litlhophiso </a> </li> 
  <li><a href = "#"> Ikopanye </a> </li> 
</ul>

Li-breadcrumbs

Breadcrumb navigation e sebelisoa e le mokhoa oa ho bonts'a basebelisi moo ba leng teng ka har'a sesebelisoa kapa sebaka sa marang-rang, empa eseng bakeng sa ho sesa ka tsela ea mantlha.

• Lehae

• Lehae /
• Leqephe le bohareng

• Lehae /
• Leqephe le bohareng /
• E 'ngoe hape

• Lehae /
• Leqephe le bohareng /
• E 'ngoe /
• U mona

<ul sehlopha = "breadcrumb" > 
  <li><a href = "#" > Lehae </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Leqephe le mahareng </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > E 'ngoe </a> <span class = "divider" > / </span></li>   
  <li class = "active" > O teng </li> 
</ul>

Pagination

Mokhoa o bonolo le o sa reng letho oa pagination o khothalelitsoeng ke Rdio. Sebaka se seholo se thata ho fosa, se ka senyeha habonolo, 'me se fana ka libaka tse kholo tsa ho tobetsa.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← E fetileng </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 = "next" ><a href = "#"> E latelang & rarr ; </a></li>  
  </ul>
</ div>

Litemoso tsa mantlha

.alert-message

Melaetsa ea mola o le mong bakeng sa ho totobatsa ho hloleha, ho hloleha ho ka bang teng, kapa katleho ea ketso. E bohlokoa haholo bakeng sa liforomo.

Fumana javascript »

Mohlala oa khoutu

<div class = "temoso ea molaetsa oa tlhokomeliso" > 
  <a class = "close" href = "#"> × </a> _  
  <p><strong> Guacamole e halalelang! </strong> Molemo ka ho fetisisa hlahloba u self, ha u shebahale hantle haholo. </p>
</ div>

Thibela melaetsa

.alert-message.block-message

Bakeng sa melaetsa e hlokang tlhaloso e nyenyane, re na le litlhokomeliso tsa mokhoa oa lirapa. Tsena li nepahetse bakeng sa ho fana ka melaetsa e telele ea liphoso, ho lemosa mosebelisi ka ketso e sa lebelloang, kapa ho hlahisa tlhahisoleseling bakeng sa khatiso e eketsehileng leqepheng.

Fumana javascript »

Mohlala oa khoutu

<div class = "temoso ea molaetsa thibela molaetsa" > 
  <a class = "close" href = "#"> × </a> _  
  <p><strong> Guacamole e halalelang! Ena ke temoso! </strong> Molemo ka ho fetisisa hlahloba u self, ha u shebahale hantle haholo. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "temoso-ketso" > 
    <a class = "btn small" href = "#"> Etsa ketso ena </a> <a class = "btn small" href = "#" > Kapa etsa sena </a>     
  </ div>
</ div>

Mekhoa e metle

Li-modals-dialogs kapa lightboxes-li ntle bakeng sa liketso tsa maemo maemong ao ho leng bohlokoa hore maemo a ka morao a bolokehe.

Fumana javascript »

Lisebelisoa

Li-Twipsies li bohlokoa haholo ho thusa mosebelisi ea ferekaneng le ho ba supa tseleng e nepahetseng.

Fumana javascript »

Bafutsana

Sebelisa li-popovers ho fana ka lintlha tse tlase ho leqephe ntle le ho ama sebopeho.

Fumana javascript »

Rea qala

Ho kopanya javascript le laeborari ea Bootstrap ho bonolo haholo. Ka tlase re sheba lintlha tsa motheo mme re u fa li-plugins tse makatsang ho u qalisa!

Sheba litokomane tsa javascript »

Se kenyellelitsoeng

Phelisa tse ling tsa likarolo tsa mantlha tsa Bootstrap ka li-plugins tse ncha tsa tloaelo tse sebetsang le jQuery le Ender . Re u khothalletsa hore u li atolose le ho li fetola hore li lumellane le litlhoko tsa hau tse khethehileng tsa nts'etsopele.

Na javascript ea hlokahala?

Che! Bootstrap e etselitsoe pele ebile e le laeborari ea CSS. Javascript ena e fana ka karolo ea mantlha ea ho sebelisana holim'a mefuta e kenyellelitsoeng.

Leha ho le joalo, bakeng sa ba hlokang javascript, re fane ka li-plugins tse ka holimo ho u thusa ho utloisisa mokhoa oa ho kopanya Bootstrap le javascript le ho u fa khetho e potlakileng, e bobebe bakeng sa ts'ebetso ea mantlha hang-hang.

Bakeng sa tlhaiso-leseling e batsi le ho bona li-demos tse ling, ka kopo sheba leqephe la rona la litokomane tsa plugin .