Mifano ya kuanza haraka

Je, unahitaji violezo vya haraka? Angalia mifano hii ya msingi ambayo tumeweka pamoja:

Gridi chaguo-msingi

Mfumo wa gridi chaguo-msingi uliotolewa kama sehemu ya Bootstrap ni gridi ya safu wima 16 yenye upana wa 940px. Ni ladha ya mfumo maarufu wa gridi ya 960, lakini bila ukingo wa ziada kwenye pande za kushoto na kulia.

Mfano wa alama ya gridi

Kama inavyoonyeshwa hapa, mpangilio msingi unaweza kuundwa kwa "safu" mbili, kila moja ikijumuisha idadi ya safu wima 16 tulizofafanua kama sehemu ya mfumo wetu wa gridi ya taifa. Tazama mifano hapa chini kwa tofauti zaidi.

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

Safu wima za kuota

Weka maudhui yako ikiwa ni lazima kwa kuunda .rowndani ya safu wima iliyopo.

Mfano wa safu wima zilizowekwa

<div class = "safu" > 
  <div class = "span12" > 
    Kiwango cha 1 cha safu wima
    <div class = "safu" > 
      <div class = "span6" > 
        Kiwango cha 2
      </ div>
      <div class = "span6" > 
        Kiwango cha 2
      </ div>
    </ div>
  </ div>
</ div>

Pindua gridi yako mwenyewe

Imejengwa ndani ya Bootstrap ni vigeu vichache vya kubinafsisha mfumo chaguomsingi wa gridi ya 940px. Ukiwa na ubinafsishaji kidogo, unaweza kurekebisha saizi ya safu wima, mifereji ya maji na chombo wanachoishi.

Ndani ya gridi ya taifa

Vigezo vinavyohitajika kurekebisha mfumo wa gridi kwa sasa vyote viko katika variables.less.

Sasa ili kubinafsisha

Kurekebisha gridi ina maana ya kubadilisha @grid-*vigezo vitatu na kurejesha faili za Chini.

Bootstrap huja ikiwa na vifaa vya kushughulikia mfumo wa gridi ya taifa na hadi safu wima 24; chaguo-msingi ni 16 tu. Hivi ndivyo vigeu vya gridi yako vinaweza kuonekana vimegeuzwa kukufaa kwa gridi ya safuwima 24.

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

Mara baada ya kujumuishwa, utawekwa!

Mpangilio usiohamishika

Mpangilio chaguomsingi na rahisi wa upana wa 940px, unaozingatia katikati kwa takriban tovuti au ukurasa wowote uliotolewa na <div.container>.

<mwili>
  <div class = "chombo" > 
    ...
  </ div>
</ mwili>

Mpangilio wa maji

Muundo mbadala, unaonyumbulika wa ukurasa wenye upana wa chini na wa juu na utepe wa upande wa kushoto. Inafaa kwa programu na hati.

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

Vichwa na nakala

Daraja la kawaida la uchapaji kwa ajili ya kuunda kurasa zako za tovuti.

Gridi nzima ya uchapaji inategemea vigezo viwili vya Chini katika faili zetu za vigezo.less: @basefontna @baseline. Ya kwanza ni saizi ya msingi ya fonti inayotumika kote na ya pili ni urefu wa mstari wa msingi.

Tunatumia vigezo hivyo, na baadhi ya hesabu, ili kuunda kando, paddings, na urefu wa mstari wa aina zetu zote na zaidi.

h1. Kichwa 1

h2. Kichwa cha 2

h3. Kichwa cha 3

h4. Kichwa cha 4

h5. Kichwa cha 5

h6. Kichwa cha 6

Mfano aya

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.

Mfano wa kichwa Kina kichwa kidogo...

Nyingine. vipengele

Kwa kutumia msisitizo, anwani na vifupisho

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

Wakati wa kutumia

Lebo za kusisitiza ( <strong>na <em>) zinapaswa kutumiwa kuonyesha umuhimu wa ziada au msisitizo wa neno au kifungu cha maneno kuhusiana na nakala yake inayoizunguka. Tumia <strong>kwa umuhimu na <em>kwa msisitizo wa mkazo.

Mkazo katika aya

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, pharetra augue.

Kumbuka: Bado ni sawa kutumia <b>na <i>tagi katika HTML5 na si lazima ziwekewe mtindo wa herufi nzito na italiki, mtawalia (ingawa ikiwa kuna kipengele cha kisemantiki zaidi, kitumie). <b>inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada, huku <i>zaidi ikiwa ni ya sauti, maneno ya kiufundi, n.k.

Anwani

Kipengele <address>kinatumika kwa habari ya mawasiliano kwa babu yake wa karibu, au kazi nzima ya kazi. Hapa kuna mifano miwili ya jinsi inaweza kutumika:

Kumbuka: Kila mstari katika mstari <address>lazima umalizike na uvunjaji mstari ( <br />) au ufunikwe kwenye lebo ya kiwango cha kuzuia (km, <p>) ili kupanga maudhui vizuri.

Vifupisho

Kwa vifupisho na vifupisho, tumia <abbr>lebo ( <acronym>imeacha kutumika katika HTML5 ). Weka fomu ya mkato ndani ya lebo na weka kichwa cha jina kamili.

Nukuu za kuzuia

<blockquote> <p> <small>

Jinsi ya kunukuu

Ili kujumuisha nukuu ya kuzuia, funika <blockquote>na <p>lebo <small>. Tumia <small>kipengele kutaja chanzo chako na utapata kistari —kabla yake.

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

Julius Hibbert

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

Haijaagizwa<ul>

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

Isiyo na mtindo<ul.unstyled>

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

Imeagizwa<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Uwezeshaji katika pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Maelezodl

Orodha za maelezo

Orodha ya maelezo ni kamili kwa kufafanua maneno.

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.

Kanuni

<code> <pre>

Badilisha msimbo wako kwa mtindo na vitambulisho viwili rahisi. Kwa uzuri zaidi kupitia javascript, dondosha maktaba ya Google ya urembo na umewekwa.

Inawasilisha msimbo

Msimbo, vijisehemu vya au vijisehemu vilivyo ndani ya mstari, vinaweza kuonyeshwa kwa mtindo kwa kukunja lebo sahihi. Kwa vizuizi vya nambari inayozunguka mistari mingi, tumia <pre>kipengee. Kwa msimbo wa ndani, tumia <code>kipengele.

<div>
  <h1>Kichwa</h1>
  <p>Kitu hapa...</p>
</ div>

<div> <h1> Kichwa </h1> <p> Kitu hapa... </p> </div>
  
  

Lebo za ndani

<span class="label">

Eleza au uripoti kifungu chochote kwenye maandishi ya mwili wako.

Andika chochote

Umewahi kuhitaji moja ya hizo mpya za kupendeza! au bendera muhimu wakati wa kuandika msimbo? Kweli, sasa unayo. Hii ndio iliyojumuishwa na chaguo-msingi:

Gridi ya media

Onyesha vijipicha vya ukubwa tofauti kwenye kurasa zilizo na alama ya chini ya HTML na mitindo ndogo.

Vijipicha vya mfano

Vijipicha kwenye .media-gridfaili vinaweza kuwa vya ukubwa wowote, lakini hufanya kazi vyema zaidi vinapochorwa moja kwa moja kwenye mfumo wa gridi ya Bootstrap uliojengewa ndani. Upana wa picha kama 90, 210, na 330 huchanganyika na pikseli chache za pedi ili sawa na .span2, .span4, na .span6saizi za safuwima.

Kubwa

Kati

Ndogo

Kuweka msimbo

Gridi za media ni rahisi kutumia na badala yake ni rahisi kwa upande wa alama. Vipimo vyao vinategemea tu saizi ya picha zilizojumuishwa.

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

Kujenga meza

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

Meza ni nzuri - kwa vitu vingi. Jedwali kubwa, hata hivyo, zinahitaji upendo wa kuashiria ili ziwe na manufaa, scalable, na kusomeka (katika kiwango cha msimbo). Hapa kuna vidokezo vichache vya kusaidia.

Daima funga vichwa vya safu yako kwa <thead>namna ambayo uongozi ni <thead>> <tr>> <th>.

Sawa na vichwa vya safu wima, maudhui yote ya jedwali lako yanapaswa kufungwa a <tbody>ili daraja lako liwe <tbody>> <tr>> <td>.

Mfano: Mitindo chaguomsingi ya jedwali

Majedwali yote yatawekwa kiotomatiki kwa kutumia mipaka muhimu pekee ili kuhakikisha usomaji na kudumisha muundo. Hakuna haja ya kuongeza madarasa ya ziada au sifa.

<meza>
  ...
</ meza>

Mfano: Jedwali lililofupishwa

Kwa majedwali ambayo yanahitaji data zaidi katika nafasi zilizobanana zaidi, tumia ladha iliyofupishwa ambayo hukata pedi katikati. Inaweza pia kutumika kwa kushirikiana na mipaka na milia ya pundamilia, kama vile mitindo chaguo-msingi ya jedwali.

Mfano: Jedwali la mipaka

Fanya meza zako zionekane laini zaidi kwa kuzungusha pembe zao na kuongeza mipaka pande zote.

<table class = "bordered-table" > 
  ...
</ meza>

Mfano: Zebra-striped

Pata kupendeza kidogo na meza zako kwa kuongeza zebra-striping-ongeza tu .zebra-stripeddarasa.

Kumbuka: Zebra-striping ni uboreshaji unaoendelea ambao haupatikani kwa vivinjari vya zamani kama vile IE8 na chini.

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

Mfano: Zebra-striped w/ TableSorter.js

Kwa kuchukua mfano uliopita, tunaboresha manufaa ya jedwali zetu kwa kutoa utendakazi wa kupanga kupitia jQuery na programu-jalizi ya Tablesorter . Bofya kichwa cha safu wima yoyote ili kubadilisha aina.

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

Mitindo chaguomsingi

Fomu zote hupewa mitindo chaguo-msingi ili kuziwasilisha kwa njia inayoweza kusomeka na inayoweza kupanuka. Mitindo hutolewa kwa ingizo za maandishi, chagua orodha, sehemu za maandishi, vitufe vya redio na visanduku vya kuteua, na vitufe.

Fomu zilizopangwa

Ongeza .form-stackedkwenye HTML ya fomu yako na utakuwa na lebo juu ya sehemu zao badala ya kushoto kwao. Hii inafanya kazi vizuri ikiwa fomu zako ni fupi au una safu wima mbili za pembejeo za fomu nzito zaidi.

Ukubwa wa uga wa fomu

Geuza kukufaa aina yoyote input, select, au textareaupana kwa kuongeza madarasa machache tu kwenye lebo yako.

Kufikia v1.3.0, tumeongeza madarasa ya ukubwa kulingana na gridi ya vipengele vya fomu. Tafadhali tumia hizi kwenye madarasa yaliyopo .mini, .small, nk.

Vifungo

Kama mkusanyiko, vifungo hutumiwa kwa vitendo wakati viungo vinatumiwa kwa vitu. Kwa mfano, "Pakua" inaweza kuwa kitufe na "shughuli za hivi majuzi" inaweza kuwa kiungo.

Vifungo vyote chaguomsingi kwa mtindo wa kijivu hafifu, lakini idadi ya madarasa ya utendaji yanaweza kutumika kwa mitindo tofauti ya rangi. Madarasa haya ni pamoja na darasa la bluu .primary, darasa la bluu-nyepesi .info, darasa la kijani kibichi .success, na darasa nyekundu .danger.

Vifungo vya mfano

Mitindo ya vifungo inaweza kutumika kwa kitu chochote .btnkilichowekwa. Kwa kawaida utataka kutumia hizi kwa pekee <a>, <button>, na kuchagua <input>vipengele. Hivi ndivyo inavyoonekana:

Ukubwa mbadala

Ungependa vitufe vikubwa au vidogo? Kuwa na hayo!

Jimbo la walemavu

Kwa vitufe ambavyo havitumiki au vimezimwa na programu kwa sababu moja au nyingine, tumia hali ya ulemavu. Hiyo ni .disabledkwa viungo na :disabledkwa <button>vipengele.

Viungo

Vifungo

Ni nini

Upau wetu wa juu ni upau usiobadilika unaohifadhi nembo au jina la tovuti, urambazaji msingi, na fomu ya utafutaji.

Inaweza kubinafsishwa

Vipengele vyote ndani, na upau wa juu wote pia, ni chaguo. Unaweza kuchagua kujumuisha nembo/jina, nav, utafutaji, na nav ya pili—au mchanganyiko wowote wa hayo.

Kunjuzi pamoja

Kama sehemu ya urambazaji mkuu, tumejumuisha uwezo wako wa kuongeza menyu kunjuzi kwenye nav yako. Angalia nav ya pili hapo juu (iliyopangiliwa kulia) ili kuona jinsi inavyofanywa. liLebo za menyu kunjuzi pia zinatumika .activekwa kuonyesha uteuzi wa sasa wa ukurasa.

Vichupo na vidonge

Unda urambazaji rahisi wa upili na <ul>. Badilisha kati ya vichupo au vidonge kwa kuongeza darasa linalofaa.

Inafaa kwa sehemu ndogo za maudhui kama vile kurasa za mipangilio ya akaunti yetu na kalenda ya matukio ya mtumiaji ya kubadilisha kati ya kurasa za maudhui kama hayo. Inapatikana katika mitindo ya vichupo au vidonge.

Mfano wa tabo za msingi

Vichupo vinaweza kutumika kama urambazaji wa kawaida (kupakia kurasa za nje kwenye kichupo kimoja) au kama sehemu za maudhui yanayoweza kutekelezeka kwa kubadilisha vidirisha vya maudhui. Tuna programu- jalizi ya vichupo ambayo inaweza kutumika kuunganisha ya mwisho.

• Nyumbani
• Wasifu
• Ujumbe
• Mipangilio
• Wasiliana
• Kunjuzi
  • Kiungo cha pili
  • Kitu kingine hapa
  • Kiungo kingine

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Nyumbani </a></li>  
  <li><a href = "#" > Wasifu </a></li> 
  <li><a href = "#" > Ujumbe </a></li> 
  <li><a href = "#" > Mipangilio </a></li> 
  <li><a href = "#" > Wasiliana </a></li> 
</ul>

Vidonge vya msingi mfano

• Nyumbani
• Wasifu
• Ujumbe
• Mipangilio
• Wasiliana

<ul class = "vidonge" > 
  <li class = "active" ><a href = "#" > Nyumbani </a></li>  
  <li><a href = "#" > Wasifu </a></li> 
  <li><a href = "#" > Ujumbe </a></li> 
  <li><a href = "#" > Mipangilio </a></li> 
  <li><a href = "#" > Wasiliana </a></li> 
</ul>

Makombo ya mkate

Uelekezaji wa Breadcrumb hutumiwa kama njia ya kuonyesha watumiaji mahali walipo ndani ya programu au tovuti, lakini si kwa urambazaji msingi.

• Nyumbani

• Nyumbani /
• Ukurasa wa kati

• Nyumbani /
• Ukurasa wa kati /
• Mwingine

• Nyumbani /
• Ukurasa wa kati /
• Mwingine /
• Uko hapa

<ul class = "breadcrumb" > 
  <li><a href = "#" > Nyumbani </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Ukurasa wa kati </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Nyingine </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Uko hapa </li> 
</ul>

Pagination

Urahisi wa hali ya juu na uundaji wa muundo wa chini uliochochewa na Rdio. Kizuizi kikubwa ni ngumu kukosa, kinaweza kuongezwa kwa urahisi, na hutoa maeneo makubwa ya kubofya.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Iliyotangulia </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 = "#" > Inayofuata → </a></li>  
  </ul>
</ div>

Tahadhari za msingi

.alert-message

Ujumbe wa mstari mmoja wa kuangazia kutofaulu, kutofaulu kunakowezekana, au kufaulu kwa kitendo. Hasa muhimu kwa fomu.

Pata javascript »

Msimbo wa mfano

<div class = "onyo la ujumbe wa tahadhari" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole takatifu! </strong> Bora jiangalie mwenyewe, huonekani kuwa mzuri sana. </ p>
</ div>

Zuia ujumbe

.alert-message.block-message

Kwa ujumbe unaohitaji maelezo kidogo, tuna arifa za mtindo wa aya. Hizi ni bora kwa kuburudisha ujumbe mrefu wa makosa, kuonya mtumiaji juu ya kitendo kinachosubiri, au kuwasilisha tu habari kwa msisitizo zaidi kwenye ukurasa.

Pata javascript »

Msimbo wa mfano

<div class = "onyo la kuzuia-ujumbe wa tahadhari" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole takatifu! Hili ni onyo! </strong> Bora jiangalie mwenyewe, huonekani kuwa mzuri sana. Nulla vitae elit libero, pharetra augue. Karibu commodo cursus magna, vel scelerisque nisl consectetur et. </ p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Chukua hatua hii </a> <a class = "btn small" href = "#" > Au fanya hivi </a>     
  </ div>
</ div>

Mitindo

Mipangilio—vidirisha au visanduku vyepesi—ni vyema kwa vitendo vya muktadha katika hali ambapo ni muhimu kwamba muktadha wa usuli udumishwe.

Pata javascript »

Vidokezo vya zana

Twipsies ni muhimu sana kwa kumsaidia mtumiaji aliyechanganyikiwa na kuwaelekeza katika mwelekeo sahihi.

Pata javascript »

Popovers

Tumia popover kutoa maelezo ya maandishi kwa ukurasa bila kuathiri mpangilio.

Pata javascript »

Kuanza

Kuunganisha javascript na maktaba ya Bootstrap ni rahisi sana. Hapo chini tunapitia misingi na kukupa programu-jalizi nzuri ili uanze!

Tazama hati za javascript »

Ni nini kimejumuishwa

Sahihisha baadhi ya vipengele vya msingi vya Bootstrap ukitumia programu-jalizi mpya maalum zinazofanya kazi na jQuery na Ender . Tunakuhimiza kuzipanua na kuzirekebisha ili ziendane na mahitaji yako mahususi ya ukuzaji.

Javascript inahitajika?

Hapana! Bootstrap imeundwa kwanza kabisa kuwa maktaba ya CSS. Javascript hii hutoa safu ya msingi ya mwingiliano juu ya mitindo iliyojumuishwa.

Hata hivyo, kwa wale wanaohitaji javascript, tumetoa programu-jalizi hapo juu ili kukusaidia kuelewa jinsi ya kuunganisha Bootstrap na javascript na kukupa chaguo la haraka na jepesi kwa utendakazi msingi mara moja.

Kwa habari zaidi na kuona baadhi ya maonyesho ya moja kwa moja, tafadhali rejelea ukurasa wetu wa nyaraka wa programu-jalizi .