Mga halimbawa ng mabilisang pagsisimula

Kailangan mo ng ilang mabilis na template? Tingnan ang mga pangunahing halimbawang ito na pinagsama-sama namin:

Default na grid

Ang default na grid system na ibinigay bilang bahagi ng Bootstrap ay isang 940px na lapad na 16-column na grid. Isa itong lasa ng sikat na 960 grid system, ngunit walang karagdagang margin/padding sa kaliwa at kanang bahagi.

Halimbawang grid markup

Gaya ng ipinapakita dito, maaaring gumawa ng pangunahing layout gamit ang dalawang "column," bawat isa ay sumasaklaw sa isang bilang ng 16 na pundasyong column na tinukoy namin bilang bahagi ng aming grid system. Tingnan ang mga halimbawa sa ibaba para sa higit pang mga variation.

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

Mga nesting column

I-nest ang iyong content kung kailangan mo sa pamamagitan ng paggawa ng .rownasa loob ng kasalukuyang column.

Halimbawa ng mga nested column

<div class = "row" > 
  <div class = "span12" > 
    Level 1 ng column
    <div class = "row" > 
      <div class = "span6" > 
        Level 2
      </div>
      <div class = "span6" > 
        Level 2
      </div>
    </div>
  </div>
</div>

I-roll ang iyong sariling grid

Ang built in na Bootstrap ay isang maliit na variable para sa pag-customize ng default na 940px grid system. Sa kaunting pag-customize, maaari mong baguhin ang laki ng mga column, ang kanilang mga gutter, at ang container kung saan sila nakatira.

Sa loob ng grid

Ang mga variable na kailangan upang baguhin ang grid system na kasalukuyang naninirahan lahat sa preboot.less.

Ngayon upang i-customize

Ang pagbabago sa grid ay nangangahulugan ng pagbabago sa tatlong @grid-*variable at muling pagsasama-sama ng Mas kaunting mga file.

Ang Bootstrap ay nilagyan upang mahawakan ang isang grid system na may hanggang 24 na column; ang default ay 16 lang. Narito kung paano magiging customized ang iyong mga variable ng grid sa isang 24 na column na grid.

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

Kapag na-recompile na, itatakda ka!

Nakapirming layout

Ang default at simpleng 940px-wide, nakasentro na layout para sa halos anumang website o page na ibinigay ng iisang <div.container>.

<katawan>
  <div class = "lalagyan" > 
    ...
  </div>
</body>

Layout ng likido

Isang alternatibo, nababaluktot na istraktura ng tuluy-tuloy na pahina na may min- at max-width at isang kaliwang sidebar. Mahusay para sa mga app at doc.

<katawan>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "nilalaman" > 
      ...
    </div>
  </div>
</body>

Mga pamagat at kopya

Isang karaniwang typographic hierarchy para sa pagbubuo ng iyong mga webpage.

Ang buong typographic grid ay batay sa dalawang Less variable sa aming preboot.less file: @basefontat @baseline. Ang una ay ang base font-size na ginamit sa kabuuan at ang pangalawa ay ang base line-height.

Ginagamit namin ang mga variable na iyon, at ilang matematika, upang gawin ang mga margin, padding, at line-height ng lahat ng aming uri at higit pa.

h1. Pamagat 1

h2. Pamagat 2

h3. Pamagat 3

h4. Pamagat 4

h5. Pamagat 5

h6. Pamagat 6

Halimbawang talata

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.

Halimbawang heading May sub-heading…

Misc. mga elemento

Paggamit ng diin, mga address, at mga pagdadaglat

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

Kailan gagamitin

Dapat gamitin ang mga emphasis tag ( <strong>at <em>) upang ipahiwatig ang karagdagang kahalagahan o diin ng isang salita o parirala na nauugnay sa nakapaligid na kopya nito. Gamitin <strong>para sa kahalagahan at <em>para sa diin na diin.

Diin sa isang talata

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.

Tandaan: Okay pa rin ang paggamit <b>at mga <i>tag sa HTML5 at hindi kailangang i-istilong bold at italic ang mga ito, ayon sa pagkakabanggit (bagaman kung mayroong mas semantic na elemento, gamitin ito). <b>ay nilalayong i-highlight ang mga salita o parirala nang hindi nagbibigay ng karagdagang kahalagahan, habang <i>kadalasan ay para sa boses, teknikal na termino, atbp.

Mga address

Ginagamit ang <address>elemento para sa impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno nito, o ang buong katawan ng trabaho. Narito ang dalawang halimbawa kung paano ito magagamit:

Tandaan: Ang bawat linya sa isang <address>ay dapat magtapos sa isang line-break ( <br />) o balot sa isang block-level na tag (hal., <p>) upang maayos na buuin ang nilalaman.

Mga pagdadaglat

Para sa mga pagdadaglat at acronym, gamitin ang <abbr>tag ( <acronym>ay hindi na ginagamit sa HTML5 ). Ilagay ang shorthand form sa loob ng tag at magtakda ng pamagat para sa kumpletong pangalan.

Blockquotes

<blockquote> <p> <small>

Paano mag-quote

Upang magsama ng blockquote, balutin at <blockquote>mga tag. Gamitin ang elemento upang banggitin ang iyong pinagmulan at makakakuha ka ng em dash bago ito.<p><small><small>&mdash;

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

Hindi nakaayos<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at masa
• Facilisis sa 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 umupo amet erat nunc
• Eget porttitor lorem

Walang istilo<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at masa
• Facilisis sa 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 umupo amet erat nunc
• Eget porttitor lorem

Inutusan<ol>

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

Paglalarawandl

Mga listahan ng paglalarawan

Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.

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.

Code

<code> <pre>

Mambugaw sa iyong code sa istilo gamit ang dalawang simpleng tag. Para sa higit pang kahanga-hanga sa pamamagitan ng javascript, ilagay ang code ng Google prettify library at handa ka na.

Ipinapakita ang code

Ang code, mga bloke ng o mga snippet lang na inline, ay maaaring ipakita nang may istilo sa pamamagitan lamang ng pagbalot sa tamang tag. Para sa mga bloke ng code na sumasaklaw sa maraming linya, gamitin ang <pre>elemento. Para sa inline na code, gamitin ang <code>elemento.

<div>
  <h1>heading</h1>
  <p>Isang bagay dito...</p>
</div>

<div> <h1> Heading </h1> <p> Isang bagay dito mismo... </p> </div>
  
  

Mga inline na label

<span class="label">

Tawagan ang pansin o i-flag ang anumang parirala sa iyong body text.

Lagyan ng label ang kahit ano

Kailanman kailangan ng isa sa mga magarbong Bago! o Mahalagang mga flag kapag nagsusulat ng code? Well, ngayon mayroon ka na sa kanila. Narito kung ano ang kasama bilang default:

Media grid

Magpakita ng mga thumbnail na may iba't ibang laki sa mga pahina na may mababang HTML na bakas ng paa at minimal na mga istilo.

Halimbawa ng mga thumbnail

Ang mga thumbnail sa .media-griday maaaring maging anumang laki, ngunit pinakamahusay na gumagana ang mga ito kapag direktang nakamapa sa built-in na Bootstrap grid system. Ang mga lapad ng larawan tulad ng 90, 210, at 330 ay pinagsama sa ilang pixel ng padding upang katumbas ng .span2, .span4, at mga .span6laki ng column.

Malaki

Katamtaman

Maliit

Pag-coding sa kanila

Ang mga media grid ay madaling gamitin at medyo simple sa markup side. Ang kanilang mga sukat ay puro batay sa laki ng mga larawang kasama.

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

Pagbuo ng mga mesa

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

Mahusay ang mga mesa—para sa maraming bagay. Gayunpaman, ang magagandang talahanayan ay nangangailangan ng kaunting pag-ibig sa markup upang maging kapaki-pakinabang, nasusukat, at nababasa (sa antas ng code). Narito ang ilang mga tip upang makatulong.

Palaging balutin ang iyong mga header ng column sa isang <thead>tulad na hierarchy ay <thead>> <tr>> <th>.

Katulad ng mga header ng column, ang lahat ng nilalaman ng katawan ng iyong talahanayan ay dapat na nakabalot sa isang <tbody>upang ang iyong hierarchy ay <tbody>> <tr>> <td>.

Halimbawa: Mga default na istilo ng talahanayan

Ang lahat ng mga talahanayan ay awtomatikong i-istilo na may mga mahahalagang hangganan lamang upang matiyak ang pagiging madaling mabasa at mapanatili ang istraktura. Hindi na kailangang magdagdag ng mga karagdagang klase o katangian.

<talahanayan>
  ...
</table>

Halimbawa: Zebra-striped

Maging medyo magarbo sa iyong mga talahanayan sa pamamagitan ng pagdaragdag ng zebra-striping—idagdag lang ang .zebra-stripedklase.

Tandaan: Ang zebra-striping ay isang progresibong pagpapahusay na hindi available para sa mga mas lumang browser tulad ng IE8 at mas mababa.

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

Halimbawa: Zebra-striped w/ TableSorter.js

Sa pagkuha sa nakaraang halimbawa, pinapabuti namin ang pagiging kapaki-pakinabang ng aming mga talahanayan sa pamamagitan ng pagbibigay ng pag-uuri ng functionality sa pamamagitan ng jQuery at ang Tablesorter plugin. I-click ang anumang header ng column upang baguhin ang pag-uuri.

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

Mga default na istilo

Ang lahat ng mga form ay binibigyan ng mga default na istilo upang ipakita ang mga ito sa isang nababasa at nasusukat na paraan. Ibinibigay ang mga istilo para sa mga text input, mga piling listahan, mga textarea, mga radio button at checkbox, at mga button.

Mga nakasalansan na form

Idagdag .form-stackedsa HTML ng iyong form at magkakaroon ka ng mga label sa ibabaw ng kanilang mga field sa halip na sa kanilang kaliwa. Mahusay itong gumagana kung maikli ang iyong mga form o mayroon kang dalawang column ng mga input para sa mas mabibigat na form.

Mga laki ng field ng form

I-customize ang anumang form input, select, o textarealapad sa pamamagitan ng pagdaragdag lamang ng ilang klase sa iyong markup.

Simula sa v1.3.0, idinagdag namin ang mga klase ng sizing batay sa grid para sa mga elemento ng form. Mangyaring gamitin ang mga ito sa mga kasalukuyang klase na .mini, .small, atbp.

Mga Pindutan

Bilang isang convention, ang mga button ay ginagamit para sa mga aksyon habang ang mga link ay ginagamit para sa mga bagay. Halimbawa, ang "I-download" ay maaaring isang button at ang "kamakailang aktibidad" ay maaaring isang link.

Default ang lahat ng button sa isang light grey na istilo, ngunit maaaring ilapat ang ilang functional class para sa iba't ibang istilo ng kulay. Kasama sa mga klaseng ito ang isang asul .primaryna klase, isang mapusyaw na asul na .infoklase, isang berdeng .successklase, at isang pulang .dangerklase.

Halimbawang mga pindutan

Maaaring ilapat ang mga istilo ng button sa anumang bagay na may .btninilapat. Karaniwang gugustuhin mong ilapat ang mga ito sa <a>, <button>, at mga piling <input>elemento lamang. Narito ang hitsura nito:

Mga kahaliling laki

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Gawin mo ito!

Estadong may kapansanan

Para sa mga button na hindi aktibo o hindi pinagana ng app para sa isang dahilan o iba pa, gamitin ang disabled na estado. Iyon ay .disabledpara sa mga link at :disabledpara sa mga <button>elemento.

Mga link

Mga Pindutan

Ano ito

Ang aming topbar ay isang nakapirming bar na naglalaman ng logo o pangalan ng website, pangunahing nabigasyon, at form ng paghahanap.

Nako-customize

Ang lahat ng elemento sa loob, at ang buong topbar din, ay opsyonal. Maaari mong piliing magsama ng logo/pangalan, nav, paghahanap, at pangalawang nav—o anumang kumbinasyon niyan.

Kasama ang mga dropdown

Bilang bahagi ng pangunahing nabigasyon, isinama namin ang kakayahan para sa iyo na magdagdag ng mga dropdown sa iyong nav. Tingnan ang pangalawang nav sa itaas (naka-align sa kanan) upang makita kung paano ito ginagawa. Sinusuportahan din ng mga dropdown litag .activepara sa pagpapakita ng kasalukuyang pagpili ng page.

Mga tab at tabletas

Lumikha ng simpleng pangalawang nabigasyon gamit ang isang <ul>. Magpalit sa pagitan ng mga tab o tableta sa pamamagitan ng pagdaragdag ng naaangkop na klase.

Mahusay para sa mga sub-section ng nilalaman tulad ng aming mga pahina ng mga setting ng account at mga timeline ng user para sa pagpalipat-lipat sa pagitan ng mga pahina ng katulad na nilalaman. Magagamit sa mga istilo ng tab o tableta.

• Bahay
• Profile
• Mga mensahe
• Mga setting
• Makipag-ugnayan
• Dropdown
  • Pangalawang link
  • Iba dito
  • Isa pang link

<ul class = "mga tab" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Mga Mensahe </a></li> 
  <li><a href = "#" > Mga Setting </a></li> 
  <li><a href = "#" > Makipag -ugnayan sa </a></li> 
</ul>

• Bahay
• Profile
• Mga mensahe
• Mga setting
• Makipag-ugnayan

<ul class = "mga tabletas" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Mga Mensahe </a></li> 
  <li><a href = "#" > Mga Setting </a></li> 
  <li><a href = "#" > Makipag -ugnayan sa </a></li> 
</ul>

Mga mumo ng tinapay

Ginagamit ang Breadcrumb navigation bilang isang paraan upang ipakita sa mga user kung nasaan sila sa loob ng isang app o isang site, ngunit hindi para sa pangunahing nabigasyon.

• Bahay

• Home /
• Gitnang pahina

• Home /
• Gitnang pahina /
• Isa pa

• Home /
• Gitnang pahina /
• isa pa /
• Narito ka

<ul class = "breadcrumb" > 
  <li><a href = "#" > Home </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Gitnang pahina </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Isa pa </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Nandito ka </li> 
</ul>

Pagbilang ng pahina

Ultra simplistic at minimally styled pagination na inspirasyon ng Rdio. Ang malaking bloke ay mahirap makaligtaan, madaling masusukat, at nagbibigay ng malalaking lugar ng pag-click.

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

Mga pangunahing alerto

.alert-message

Isang linyang mensahe para sa pag-highlight ng kabiguan, posibleng pagkabigo, o tagumpay ng isang aksyon. Lalo na kapaki-pakinabang para sa mga form.

Kunin ang javascript »

Halimbawang code

<div class = "babala ng alerto sa mensahe" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Banal na guacamole! </strong> Tingnan mo ang sarili mo, hindi ka masyadong maganda. </p>
</div>

I-block ang mga mensahe

.alert-message.block-message

Para sa mga mensaheng nangangailangan ng kaunting paliwanag, mayroon kaming mga alerto sa istilo ng talata. Ang mga ito ay perpekto para sa pagbubula ng mas mahabang mga mensahe ng error, babala sa isang gumagamit ng isang nakabinbing aksyon, o pagpapakita lamang ng impormasyon para sa higit na diin sa pahina.

Kunin ang javascript »

Halimbawang code

<div class = "alerto-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Banal na guacamole! Ito ay isang babala! </strong> Tingnan mo ang sarili mo, hindi ka masyadong maganda. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alerto-actions" > 
    <a class = "btn small" href = "#" > Gawin ang pagkilos na ito </a> <a class = "btn small" href = "#" > O gawin ito </a>     
  </div>
</div>

Mga modal

Ang mga modal—mga dialog o lightbox—ay mahusay para sa mga aksyong ayon sa konteksto sa mga sitwasyon kung saan mahalagang mapanatili ang konteksto ng background.

Kunin ang javascript »

Mga tooltip

Ang Twipsies ay sobrang kapaki-pakinabang para sa pagtulong sa isang nalilitong user at pagturo sa kanila sa tamang direksyon.

Kunin ang javascript »

Mga Popover

Gumamit ng mga popover upang magbigay ng subtextuwal na impormasyon sa isang pahina nang hindi naaapektuhan ang layout.

Kunin ang javascript »

Nagsisimula

Ang pagsasama ng javascript sa Bootstrap library ay napakadali. Sa ibaba ay susuriin namin ang mga pangunahing kaalaman at bibigyan ka ng ilang kahanga-hangang mga plugin upang makapagsimula ka!

Tingnan ang javascript docs »

Ano ang kasama

Buhayin ang ilan sa mga pangunahing bahagi ng Bootstrap gamit ang mga bagong custom na plugin na gumagana sa jQuery at Ender . Hinihikayat ka naming palawigin at baguhin ang mga ito upang umangkop sa iyong mga partikular na pangangailangan sa pag-unlad.

Kailangan ba ang javascript?

Hindi! Ang Bootstrap ay unang-una at pangunahin na idinisenyo upang maging isang CSS library. Nagbibigay ang javascript na ito ng pangunahing interactive na layer sa itaas ng mga kasamang istilo.

Gayunpaman, para sa mga nangangailangan ng javascript, ibinigay namin ang mga plugin sa itaas upang matulungan kang maunawaan kung paano isama ang Bootstrap sa javascript at upang bigyan ka kaagad ng mabilis, magaan na opsyon para sa pangunahing pagpapagana.

Para sa higit pang impormasyon at upang makita ang ilang mga live na demo, mangyaring sumangguni sa aming pahina ng dokumentasyon ng plugin .