Titujt

Të gjithë titujt <h1>në HTML <h6>janë të disponueshëm.

h1. Kreu 1

h2. Kreu 2

h3. Kreu 3

h4. Kreu 4

h5. Kreu 5

h6. Kreu 6

Kopje e trupit

Parazgjedhja globale e Bootstrap font-sizeështë 14pxline-height , me një 20px . Kjo zbatohet për të <body>gjithë paragrafët. Përveç kësaj, <p>(paragrafët) marrin një diferencë të poshtme prej gjysmës së lartësisë së rreshtit të tyre (10 px si parazgjedhje).

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

Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Kopje e trupit kryesor

Bëni një paragraf të dallohet duke shtuar .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Ndërtuar me më pak

Shkalla tipografike bazohet në dy variabla LESS në variabla.më pak : @baseFontSizedhe @baseLineHeight. E para është madhësia e fontit bazë të përdorur në të gjithë dhe e dyta është lartësia e linjës bazë. Ne përdorim ato variabla dhe disa matematikë të thjeshtë për të krijuar kufijtë, mbushjet dhe lartësitë e rreshtave të të gjitha llojeve tona dhe më shumë. Personalizojini ato dhe Bootstrap përshtatet.

Theksimi

Përdorni etiketat e paracaktuara të theksit të HTML me stile të lehta.

`<small>`

Për të hequr theksin brenda linjës ose blloqeve të tekstit, përdorni etiketën e vogël.

Ky rresht teksti është menduar të trajtohet si shtyp i imët.

<p> <small> Ky rresht teksti është menduar të trajtohet si shtyp i imët. </small> </p>

E guximshme

Për theksimin e një fragmenti teksti me një peshë më të rëndë të shkronjave.

Fragmenti i mëposhtëm i tekstit paraqitet si tekst i trashë .

<strong> përkthyer si tekst me shkronja të zeza </strong>

Shkrimet kursive

Për theksimin e një fragmenti teksti me shkronja të pjerrëta.

Pjesa e mëposhtme e tekstit përkthehet si tekst i pjerrët .

<em> përkthehet si tekst i pjerrët </em>

Kokat lart!Mos ngurroni të përdorni <b>dhe <i>në HTML5. <b>ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa <i>është kryesisht për zërin, termat teknike, etj.

Klasat e shtrirjes

Rivendosni lehtësisht tekstin me komponentët me klasa të shtrirjes së tekstit.

Teksti i rreshtuar majtas.

Teksti i rreshtuar në qendër.

Teksti i rreshtuar djathtas.

<p class = "text-left" > Teksti i rreshtuar majtas. </p> 
<p class = "text-center" > Teksti i përafruar në qendër. </p> 
<p class = "text-right" > Teksti i rreshtuar djathtas. </p>

Klasat e theksit

Përcillni kuptimin përmes ngjyrës me një sërë klasash të dobishme të theksuara.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellenteske ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "tekst-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "tekst-info" > Aenean eu leo quam. Pellenteske ornare sem lacinia quam venenatis. </p> 
<p class = "tekst-sukses" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Shkurtesat

Implementimi i stilizuar i <abbr>elementit HTML për shkurtesat dhe akronimet për të treguar versionin e zgjeruar në lëvizje. Shkurtesat me një titleatribut kanë një kufi të poshtëm me pika të lehta dhe një kursor ndihmës në lëvizje, duke ofruar kontekst shtesë në lëvizje.

`<abbr>`

Për tekstin e zgjeruar në lëvizje të gjatë të një shkurtimi, përfshini titleatributin.

Një shkurtim i fjalës atribut është attr .

<abbr title = "atribut" > attr </abbr>

`<abbr class="initialism">`

Shtoni .initialismnë një shkurtim për një madhësi fonti pak më të vogël.

HTML është gjëja më e mirë që nga buka e prerë.

<abbr title = "Gjuha e shënjimit të hipertekstit" class = "initializëm" > HTML </abbr>

Adresat

Paraqisni informacionin e kontaktit për paraardhësin më të afërt ose të gjithë trupin e punës.

`<address>`

Ruani formatimin duke i përfunduar të gjitha rreshtat me <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Emri i plotë
[email protected]

<adresa>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisko, CA 94107 <br>
  <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
</adresa>
 
<adresa>
  <strong> Emri i plotë </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</adresa>

Blloqe kuotash

Për të cituar blloqe të përmbajtjes nga një burim tjetër brenda dokumentit tuaj.

Blloku i parazgjedhur

Mbështilleni <blockquote>rreth çdo HTML si citat. Për kuotat e drejta ne rekomandojmë një <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante. </p>
</blockquote>

Opsionet e bllokimit të kuotave

Ndryshimet e stilit dhe përmbajtjes për variacione të thjeshta në një kuotë standarde.

Emërtimi i një burimi

Shto <small>etiketë për të identifikuar burimin. Mbështillni emrin e punës burimore në <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.
Dikush i famshëm në Titullin e Burimit

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante. </p>
  <small> Dikush i famshëm <cite title = "Source Title" > Titulli i burimit </cite></small> 
</blockquote>

Shfaqje alternative

Përdorni .pull-rightpër një kuotë bllokimi të lëvizur, të rreshtuar djathtas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.
Dikush i famshëm në Titullin e Burimit

<blockquote class = "tërheq djathtas" > 
  ...
</blockquote>

Listat

E pa porositur

Një listë e artikujve në të cilat rendi nuk ka rëndësi në mënyrë të qartë.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Lehtësimi në 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
Enean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

porositur

Një listë e artikujve në të cilat rendi ka rëndësi të qartë.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Lehtësimi në pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Enean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

E pa stiluar

Hiqni mbushjen e paracaktuar list-styledhe të majtë në artikujt e listës (vetëm për fëmijët e menjëhershëm).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Lehtësimi në 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
Enean sit amet erat nunc
Eget porttitor lorem

<ul class = "pa stil" > 
  <li> ... </li>
</ul>

Në rradhë

Vendosni të gjithë artikujt e listës në një rresht të vetëm me inline-blockdhe disa mbushje të lehta.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Përshkrim

Një listë termash me përshkrimet e tyre të lidhura.

Listat e përshkrimeve: Një listë përshkrimi është e përkryer për përcaktimin e termave.
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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Përshkrimi horizontal

Bëni termat dhe përshkrimet në <dl>rresht krah për krah.

Listat e përshkrimeve: Një listë përshkrimi është e përkryer për përcaktimin e termave.
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.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Kokat lart!Listat e përshkrimeve horizontale do të shkurtojnë termat që janë shumë të gjatë për t'u përshtatur në rregullimin e kolonës së majtë text-overflow. Në pamjet më të ngushta, ato do të ndryshojnë në paraqitjen e paracaktuar të grumbulluar.

Në rradhë

Mbështillni pjesët e kodit në linjë me <code>.

Për shembull, <section>duhet të mbështillet si inline.

Për shembull , <code> & lt ; seksioni & gt ;</ code > duhet të mbështillet si inline .

Blloku bazë

Përdorni <pre>për linja të shumta kodi. Sigurohuni që të shmangni çdo kllapa këndore në kod për paraqitjen e duhur.

<p>Shembull teksti këtu...</p>

<para>
  <p>Shembull teksti këtu...</p>
</pre>

Kokat lart!Sigurohuni që të mbani kodin brenda <pre>etiketave sa më afër të jetë e mundur në të majtë; do t'i japë të gjitha skedat.

Mund të shtoni në mënyrë opsionale .pre-scrollableklasën e cila do të vendosë një lartësi maksimale prej 350 px dhe do të sigurojë një shirit lëvizës me bosht y.

Stilet e parazgjedhura

Për stilimin bazë - mbushje e lehtë dhe vetëm ndarëse horizontale - shtoni klasën bazë .tablenë çdo <table>.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

<table class = "tabela" > 
  …
</tabela>

Klasat me dëshirë

Shtoni ndonjë nga klasat e mëposhtme në .tableklasën bazë.

`.table-striped`

Shton vija zebra në çdo rresht të tabelës brenda përzgjedhësit <tbody>via :nth-childCSS (nuk disponohet në IE7-8).

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

<table class = "tavolinë me shirita" > 
  …
</tabela>

`.table-bordered`

Shtoni kufijtë dhe qoshet e rrumbullakosura në tryezë.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
1	shenjë	Oto	@getbootstrap
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

<table class = "tabela-bordered" > 
  …
</tabela>

`.table-hover`

Aktivizo një gjendje pezullimi në rreshtat e tabelës brenda një <tbody>.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

<table class = "table table-hover" > 
  …
</tabela>

`.table-condensed`

I bën tavolinat më kompakte duke e prerë mbushjen e qelizave në gjysmë.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

<table class = "table table-condensed" > 
  …
</tabela>

Klasat opsionale të rreshtave

Përdorni klasa kontekstuale për të ngjyrosur rreshtat e tabelave.

Klasa	Përshkrim
`.success`	Tregon një veprim të suksesshëm ose pozitiv.
`.error`	Tregon një veprim të rrezikshëm ose potencialisht negativ.
`.warning`	Tregon një paralajmërim që mund të ketë nevojë për vëmendje.
`.info`	Përdoret si një alternativë ndaj stileve të paracaktuara.

#	Produkt	Pagesa e marrë	Statusi
1	TB - Mujore	01/04/2012	Miratuar
2	TB - Mujore	02/04/2012	Refuzuar
3	TB - Mujore	03/04/2012	Në pritje
4	TB - Mujore	04/04/2012	Telefononi për të konfirmuar

...
  < tr class = "sukses" >
    <td> 1 < /td>
    <td>TB - Mujore</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Miratuar</ td >
  </ tr >
...

Shënimi i mbështetur i tabelës

Lista e elementeve të mbështetur HTML të tabelës dhe si duhet të përdoren.

Etiketë	Përshkrim
`<table>`	Element mbështjellës për shfaqjen e të dhënave në një format tabelor
`<thead>`	Elementi i kontejnerit për rreshtat e kokës së tabelës ( `<tr>`) për të etiketuar kolonat e tabelës
`<tbody>`	Elementi i kontejnerit për rreshtat e tabelës ( `<tr>`) në trupin e tabelës
`<tr>`	Elementi i kontejnerit për një grup qelizash të tabelës ( `<td>`ose `<th>`) që shfaqet në një rresht të vetëm
`<td>`	Qeliza e parazgjedhur e tabelës
`<th>`	Qelizë e veçantë e tabelës për etiketat e kolonave (ose rreshtit, në varësi të fushës dhe vendosjes).
`<caption>`	Përshkrimi ose përmbledhja e asaj që përmban tabela, veçanërisht e dobishme për lexuesit e ekranit

<tabela>
  <caption> ... </caption>
  <kokë>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</tabela>

Stilet e parazgjedhura

Kontrollet individuale të formës marrin stilim, por pa ndonjë klasë bazë të kërkuar <form>ose ndryshime të mëdha në shënim. Rezulton në etiketa të grumbulluara, të rreshtuara majtas në krye të kontrolleve të formularit.

<forma>
  <set e fushave>
    <legend> Legjenda </legend>
    <label> Emri i etiketës </label>
    <input type = "text" placeholder = "Shkruaj diçka..." >  
    <span class = "help-block" > Shembull i tekstit të ndihmës në nivel blloku këtu. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Më kontrollo 
    </label>
    <button type = "submit" class = "btn" > Paraqit </button>  
  </fieldset>
</form>

Paraqitjet opsionale

Të përfshira me Bootstrap janë tre paraqitje opsionale të formave për rastet e përdorimit të zakonshëm.

Formulari i kërkimit

Shtoni .form-searchnë formular dhe .search-querynë <input>për një futje teksti shtesë të rrumbullakosura.

<form class = "form-kërkim" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Kërko </button>  
</form>

Forma inline

Shto .form-inlinepër etiketat e rreshtuara majtas dhe kontrollet e blloqeve në linjë për një strukturë kompakte.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Fjalëkalimi" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Më mbaj mend 
  </label>
  <button type = "submit" class = "btn" > Hyni </button>  
</form>

Forma horizontale

Rreshtoni djathtas etiketat dhe vendosini në të majtë për t'i bërë ato të shfaqen në të njëjtën linjë me kontrollet. Kërkon më shumë ndryshime të shënimit nga një formë e paracaktuar:

Shtoni .form-horizontalnë formular
Mbështillni etiketat dhe kontrollet brenda.control-group
Shtoni .control-labelnë etiketë
Mbështillni çdo kontroll të lidhur .controlspër shtrirjen e duhur

<form class = "formë-horizontal" > 
  <div class = "kontrol-grup" > 
    <label class = "control-label" for = "inputEmail" > Email </label>  
    <div class = "kontrollet" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "kontrol-grup" > 
    <label class = "control-label" for = "inputPassword" > Fjalëkalimi </label>  
    <div class = "kontrollet" > 
      <input type = "password" id = "inputPassword" placeholder = "Fjalëkalimi" >   
    </div>
  </div>
  <div class = "kontrol-grup" > 
    <div class = "kontrollet" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Më mbaj mend 
      </label>
      <button type = "submit" class = "btn" > Hyni </button>  
    </div>
  </div>
</form>

Kontrollet e formave të mbështetura

Shembuj të kontrolleve standarde të formularit të mbështetur në një paraqitje të formularit shembull.

Inputet

Kontrolli më i zakonshëm i formës, fushat e futjes së bazuar në tekst. Përfshin mbështetje për të gjitha llojet e HTML5: teksti, fjalëkalimi, ora e datës, data-lokale, data, muaji, ora, java, numri, emaili, url, kërkimi, tel dhe ngjyra.

Kërkon përdorimin e një specifikimi typegjatë gjithë kohës.

<input type = "text" placeholder = "Input text" >

Textarea

Kontrolli i formës që mbështet linja të shumta teksti. Ndrysho rowsatributin sipas nevojës.

<textarea rows = " 3" ></textarea>

Kutitë e kontrollit dhe radiot

Kutitë e kontrollit janë për zgjedhjen e një ose disa opsioneve në një listë, ndërsa radiot janë për zgjedhjen e një opsioni nga shumë.

E parazgjedhur (e grumbulluar)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" u kontrollua >     
  Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Opsioni dy mund të jetë diçka tjetër dhe zgjedhja e tij do të çaktivizojë opsionin një
</label>

Kutitë e kontrollit në linjë

Shtoni .inlineklasën në një seri kuti kontrolli ose radio për kontrollet që shfaqen në të njëjtën linjë.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Zgjedh

Përdorni opsionin e paracaktuar ose specifikoni a multiple="multiple"për të shfaqur disa opsione në të njëjtën kohë.

<zgjidh>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Zgjerimi i kontrolleve të formularit

Duke shtuar në krye të kontrolleve ekzistuese të shfletuesit, Bootstrap përfshin përbërës të tjerë të dobishëm të formës.

Inputet e parashtruara dhe të bashkangjitura

Shtoni tekst ose butona përpara ose pas çdo futjeje të bazuar në tekst. Vini re se selectelementët nuk mbështeten këtu.

Opsionet e parazgjedhura

Mbështillni një .add-ondhe një inputme një nga dy klasat për të shtuar ose shtuar tekstin në një hyrje.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "tekst" placeholder = "Emri i përdoruesit" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "tekst" >   
  <span class = "add-on" > .00 </span> 
</div>

Të kombinuara

Përdorni të dyja klasat dhe dy instancat e .add-onpër të parashtruar dhe shtuar një hyrje.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "tekst" >   
  <span class = "add-on" > .00 </span> 
</div>

Butonat në vend të tekstit

Në vend të një <span>me tekst, përdorni a .btnpër të bashkangjitur një buton (ose dy) në një hyrje.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "tekst" >   
  <button class = "btn" type = "button" > Shko! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "tekst" >   
  <button class = "btn" type = "button" > Kërko </button>  
  <button class = "btn" type = "button" > Opsionet </button>  
</div>

Zbritje të butonave

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "tekst" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Veprimi
      <span class = "caret" ></span> 
    </button>
    <ul class = "meny-dropdown" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Veprimi
      <span class = "caret" ></span> 
    </button>
    <ul class = "meny-dropdown" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "tekst" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Veprimi
      <span class = "caret" ></span> 
    </button>
    <ul class = "meny-dropdown" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "tekst" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Veprimi
      <span class = "caret" ></span> 
    </button>
    <ul class = "meny-dropdown" > 
      ...
    </ul>
  </div>
</div>

Grupet rënëse të segmentuara

<forma>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < lloji i hyrjes = "tekst" > 
  </div>
  <div class = "input-append" > 
    < lloji i hyrjes = "tekst" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Formulari i kërkimit

<form class = "form-kërkim" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Kërko </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Kërko </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Kontrolloni madhësinë

Përdorni klasa të madhësisë relative si .input-largeose përshtatni hyrjet tuaja me madhësitë e kolonave të rrjetit duke përdorur .span*klasa.

Blloko hyrjet e nivelit

Bëj që ndonjë element <input>ose <textarea>element të sillet si një element në nivel blloku.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Madhësia relative

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Kokat lart!Në versionet e ardhshme, ne do të ndryshojmë përdorimin e këtyre klasave të hyrjes relative për t'u përshtatur me madhësitë tona të butonave. Për shembull, .input-largedo të rrisë mbushjen dhe madhësinë e shkronjave të një hyrjeje.

Përmasat e rrjetit

Përdorni .span1për .span12për hyrje që përputhen me të njëjtat madhësi të kolonave të rrjetit.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Për hyrje të shumta të rrjetit për rresht, përdorni .controls-rowklasën e modifikuesit për ndarjen e duhur . Ai noton hyrjet për të kolapsuar hapësirën e bardhë, vendos kufijtë e duhur dhe pastron notimin.

<div class = "kontrollet" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Inpute të paeditueshme

Paraqisni të dhënat në një formë që nuk mund të modifikohet pa përdorur shënimin aktual të formularit.

<span class = "input-xlarge uneditable-input" > Disa vlera këtu </span>

Formoni veprime

Përfundoni një formular me një grup veprimesh (butona). Kur vendosen brenda një .form-actions, butonat do të futen automatikisht për t'u rreshtuar me kontrollet e formularit.

<div class = "form-veprime" > 
  <button type = "submit" class = "btn btn-primary" > Ruaj ndryshimet </button>  
  <button type = "button" class = "btn" > Anulo </button>  
</div>

Teksti i ndihmës

Mbështetje e nivelit të brendshëm dhe të bllokut për tekstin e ndihmës që shfaqet rreth kontrolleve të formularit.

Ndihmë në linjë

<input type = "text" ><span class = "help-inline" > Teksti i ndihmës në linjë </span>

Blloko ndihmën

<input type = "text" ><span class = "help-block" > Një bllok më i gjatë teksti ndihmës që kalon në një rresht të ri dhe mund të shtrihet përtej një rreshti. </span>

Gjendjet e kontrollit të formës

Jepni reagime përdoruesve ose vizitorëve me gjendjet bazë të komenteve mbi kontrollet dhe etiketat e formularëve.

Fokusi në hyrje

Ne heqim outlinestilet e paracaktuara në disa kontrolle të formularit dhe aplikojmë një box-shadownë vend të tij për :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Kjo është e fokusuar..." >

Të dhëna të pavlefshme

Stiloni hyrjet nëpërmjet funksionalitetit të parazgjedhur të shfletuesit me :invalid. Specifikoni a type, shtoni requiredatributin nëse fusha nuk është opsionale dhe (nëse aplikohet) specifikoni një pattern.

Kjo nuk është e disponueshme në versionet e Internet Explorer 7-9 për shkak të mungesës së mbështetjes për pseudo përzgjedhësit CSS.

<input class = "span3" type = "email" kërkohet >

Inputet e çaktivizuara

Shtoni disabledatributin në një hyrje për të parandaluar hyrjen e përdoruesit dhe për të shkaktuar një pamje paksa të ndryshme.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Hyrja e çaktivizuar këtu..." çaktivizuar >

Gjendjet e vlefshmërisë

Bootstrap përfshin stilet e vlefshmërisë për mesazhet e gabimit, paralajmërimit, informacionit dhe suksesit. Për ta përdorur, shtoni klasën e duhur në mjedisin përreth .control-group.

<div class = "paralajmërim i grupit të kontrollit" > 
  <label class = "control-label" for = "inputWarning" > Hyrja me paralajmërim </label>  
  <div class = "kontrollet" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Diçka mund të ketë shkuar keq </span> 
  </div>
</div>
 
<div class = "gabim i grupit të kontrollit" > 
  <label class = "control-label" for = "inputError" > Hyrja me gabim </label>  
  <div class = "kontrollet" > 
    <input type = "text" id = "InputError" >  
    <span class = "help-inline" > Ju lutemi korrigjoni gabimin </span> 
  </div>
</div>
 
<div class = "informacionet e grupit të kontrollit" > 
  <label class = "control-label" for = "inputInfo" > Hyrja me informacion </label>  
  <div class = "kontrollet" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Emri i përdoruesit është marrë tashmë </span> 
  </div>
</div>
 
<div class = "sukses i grupit të kontrollit" > 
  <label class = "control-label" for = "inputSuccess" > Hyrja me sukses </label>  
  <div class = "kontrollet" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Butonat e parazgjedhur

Stilet e butonave mund të aplikohen për çdo gjë me .btnklasën e aplikuar. Megjithatë, zakonisht ju do të dëshironi t'i zbatoni këto vetëm në <a>elemente <button>për paraqitjen më të mirë.

Butoni	class = ""	Përshkrim
	`btn`	Buton standard gri me gradient
	`btn btn-primary`	Ofron peshë shtesë vizuale dhe identifikon veprimin parësor në një grup butonash
	`btn btn-info`	Përdoret si një alternativë ndaj stileve të paracaktuara
	`btn btn-success`	Tregon një veprim të suksesshëm ose pozitiv
	`btn btn-warning`	Tregon se duhet pasur kujdes me këtë veprim
	`btn btn-danger`	Tregon një veprim të rrezikshëm ose potencialisht negativ
	`btn btn-inverse`	Butoni alternativ gri i errët, jo i lidhur me një veprim ose përdorim semantik
	`btn btn-link`	Theksoni një buton duke e bërë atë të duket si një lidhje duke ruajtur sjelljen e butonit

Përputhshmëria e ndërthurjes së shfletuesit

IE9 nuk pret gradientet e sfondit në qoshet e rrumbullakosura, kështu që ne e heqim atë. Lidhur me këtë, IE9 jankifikon buttonelementët me aftësi të kufizuara, duke e kthyer tekstin gri me një hije të keqe teksti që ne nuk mund ta rregullojmë.

Madhësitë e butonave

Dëshironi butona më të mëdhenj apo më të vegjël? Shto .btn-large, .btn-smallose .btn-minipër madhësi shtesë.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Butoni i madh </button>  
  <button class = "btn btn-large" type = "button" > Butoni i madh </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Butoni i parazgjedhur </button>  
  <button class = "btn" type = "button" > Butoni i parazgjedhur </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Butoni i vogël </button>  
  <button class = "btn btn-small" type = "button" > Butoni i vogël </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Butoni i vogël </button>  
  <button class = "btn btn-mini" type = "button" > Butoni i vogël </button>  
</p>

Krijoni butona të nivelit të bllokut—ato që përfshijnë gjerësinë e plotë të një prindi—duke shtuar .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Butoni i nivelit të bllokimit </button>  
<button class = "btn btn-large btn-block" type = "button" > Butoni i nivelit të bllokimit </button>

Gjendja me aftësi të kufizuara

Bëjini butonat të duken të paklikueshëm duke i zbehur 50%.

Elementi i ankorimit

Shtoni .disabledklasën te <a>butonat.

Lidhja kryesore Lidhje

<a href = "#" class = "btn btn-large btn-primary disabled" > Lidhja primare </a>  
<a href = "#" class = "btn btn-large disabled" > Lidhja </a>

Kokat lart!Ne përdorim .disabledsi një klasë të shërbimeve këtu, të ngjashme me .activeklasën e zakonshme, kështu që nuk kërkohet prefiks. Gjithashtu, kjo klasë është vetëm për estetikë; ju duhet të përdorni JavaScript të personalizuar për të çaktivizuar lidhjet këtu.

Elementi i butonit

Shtoni disabledatributin te <button>butonat.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Butoni kryesor </button>   
<button type = "button" class = "btn btn-large" i çaktivizuar > Butoni </button>

Një klasë, etiketa të shumta

Përdorni .btnklasën në një element <a>, <button>, ose .<input>

<a class = "btn" href = "" > Lidhja </a>  
<button class = "btn" type = "submit" > Butoni </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Dorëzo" >

Si një praktikë më e mirë, përpiquni të përputhni elementin për kontekstin tuaj për të siguruar përputhshmërinë e interpretimit të tërthortë të shfletuesit. Nëse keni një input, përdorni një <input type="submit">për butonin tuaj.

Shtoni klasa në një <img>element për të stiluar lehtësisht imazhet në çdo projekt.

<img src = "..." class = "img-rrumbullakosur" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Kokat lart! .img-roundeddhe .img-circlenuk punojnë në IE7-8 për shkak të mungesës së border-radiusmbështetjes.

Glyphs ikonave

140 ikona në formë sprite, të disponueshme në gri të errët (e parazgjedhur) dhe të bardhë, të ofruara nga Glyphicons .

ikonë-xham
ikonë-muzikë
kërkimi i ikonave
ikonë-zarf
ikonë-zemër
ikonë-yll
ikonë-yll-bosh
ikonë-përdorues
ikonë-film
ikona e madhe
ikona-të
listën e ikonave
ikona-ok
hiq ikonën
zmadhimi i ikonave
zmadhimi i ikonave
ikon-off
ikonë-sinjal
ikonë-kog
ikonë-plehra
ikonë-shtëpi
skedar-ikonë
kohë-ikonë
ikonë-rrugë
ikonë-shkarkim-alt
shkarkimi i ikonave
ngarkimi i ikonave
ikonë-inbox
ikonë-luaj-rreth
ikonë-përsërit
rifreskimi i ikonave
icon-list-alt
bllokimi i ikonave
ikonë-flamur
ikonë-kufje
icon-volum-off
ikona-volumi-poshtë
ikona-volumi-rritje
ikonë-qrcode
ikonë-barkodi
ikonë-etiketë
etiketa-ikona
ikonë-libër
ikonë-shënues
printim ikonë
ikonë-kamerë
ikonë-font
ikonë-e guximshme
ikonë-kursive
ikonë-tekst-lartësi
ikonë-tekst-gjerësi
ikonë-rreshtoj-majtas
icon-align-center
ikonë-rreshtoj-djathtas
ikonë-rreshtoj-justifikoj
listë-ikona
ikonë-indent-majtas
ikonë-indent-djathtas
ikonë-facetime-video
ikonë-foto
ikonë-laps
ikonë-hartë-shënues
ikona-rregulloj
ikonë-ngjyrë
redaktimi i ikonave
ikona-share
kontrolli i ikonave
ikonë-lëvizje
ikonë-hap-prapa
icon-fast-backward
ikona-prapa
ikon-luaj
ikonë-pauzë
ikonë-ndal
ikonë-përpara
icon-fast-forward
ikonë-hap-përpara
nxjerrja e ikonave
ikonë-chevron-majtas
ikonë-chevron-djathtas
ikonë-plus-shenjë
ikona-minus-shenjë
icon-remove-shenjë
ikona-ok-shenjë
ikonë-pyetje-shenjë
ikonë-informacion-shenjë
ikona-screenshot
icon-remove-rreth
ikona-ok-rreth
ikonë-ban-rreth
ikonë-shigjeta-majtas
ikona-shigjeta-djathtas
ikonë-shigjeta-lart
ikona-shigjeta-poshtë
icon-share-alt
icon-ridimensioni-plotë
icon-ridimensioni-i vogël
ikonë-plus
ikona-minus
ikonë-yll
ikonë-pasthirrmë-shenjë
ikonë-dhuratë
fletë-ikona
ikonë-zjarr
ikonë-sy-hapur
ikona-sy-mbyll
ikonë-shenjë paralajmëruese
ikonë-aeroplan
ikonë-kalendar
ikonë e rastësishme
ikonë-koment
ikonë-magnet
ikonë-chevron-up
ikonë-chevron-poshtë
ikona-retweet
ikonë-karrocë
ikonë-dosje-mbyll
ikonë-dosje-hap
icon-ridimensioni-vertikal
icon-ridimension-horizontal
ikonë-hdd
ikonë-bullhorn
ikonë-zile
ikonë-certifikatë
ikonë-bravo
ikona-gishti i madh-poshtë
ikonë-djathtas
ikonë-dorë-majtas
ikona-dora lart
ikonë-dorë-poshtë
ikonë-rreth-shigjeta-djathtas
ikonë-rreth-shigjeta-majtas
ikona-rreth-shigjeta-lart
ikona-rreth-shigjeta-poshtë
ikonë-glob
pikëllim ikonë
ikona-detyrat
ikonë-filtër
ikonë-çantë
ikonë me ekran të plotë

Atribuimi i glyphicons

Glyphicons Halflings zakonisht nuk ofrohen falas, por një marrëveshje midis Bootstrap dhe krijuesve të Glyphicons e ka bërë të mundur këtë pa kosto për ju si zhvillues. Si falënderim, ju kërkojmë të përfshini një lidhje opsionale për Glyphicons sa herë që është e mundur.

Si të përdorni

Të gjitha ikonat kërkojnë një <i>etiketë me një klasë unike, të parashtesuar me icon-. Për ta përdorur, vendosni kodin e mëposhtëm pothuajse kudo:

<i class = "icon-search" ></i>

Ekzistojnë gjithashtu stile të disponueshme për ikonat e përmbysura (të bardha), të përgatitura me një klasë shtesë. Ne do ta zbatojmë në mënyrë specifike këtë klasë në gjendjet e pezullimit dhe aktive për lidhjet naviguese dhe ato me zbritje.

<i class = "icon-search icon-white" ></i>

Kokat lart!Kur përdorni pranë vargjeve të tekstit, si në butonat ose lidhjet naviguese, sigurohuni që të lini një hapësirë pas <i>etiketës për ndarjen e duhur.

Shembuj ikonash

Përdorini ato në butona, grupe butonash për një shirit veglash, navigim ose hyrje të formularit të paracaktuar.

Butonat

Grupi i butonave në shiritin e veglave të butonave

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" </i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>   
  </div>
</div>

Dropdown në një grup butonash

Përdoruesi

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" </i> Përdoruesi </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "meny-dropdown" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Ndrysho </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Fshi </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ndaloni </a></li>  
    <li class = "ndarës" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Bëni administrator </a></li>  
  </ul>
</div>

Madhësitë e butonave

Yll Yll Yll

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Yll </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Yll </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Yll </a>

Navigimi

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Faqja kryesore </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Biblioteka </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikacionet </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Të ndryshme </a></li>  
</ul>

Fushat e formave

<div class = "kontrol-grup" > 
  <label class = "control-label" for = "inputIcon" > Adresa e emailit </label>  
  <div class = "kontrollet" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-zarf" </i></span>  
      <input class = "span2" id = "inputIcon" type = "tekst" >   
    </div>
  </div>
</div>

Tipografia

Titujt

h1. Kreu 1

h2. Kreu 2

h3. Kreu 3

h4. Kreu 4

h5. Kreu 5

h6. Kreu 6

Kopje e trupit

Kopje e trupit kryesor

Ndërtuar me më pak

Theksimi

<small>

E guximshme

Shkrimet kursive

Klasat e shtrirjes

Klasat e theksit

Shkurtesat

<abbr>

<abbr class="initialism">

Adresat

<address>

Blloqe kuotash

Blloku i parazgjedhur

Opsionet e bllokimit të kuotave

Emërtimi i një burimi

Shfaqje alternative

Listat

E pa porositur

porositur

E pa stiluar

Në rradhë

Përshkrim

Përshkrimi horizontal

Kodi

Në rradhë

Blloku bazë

Tabelat

Stilet e parazgjedhura

Klasat me dëshirë

.table-striped

.table-bordered

.table-hover

.table-condensed

Klasat opsionale të rreshtave

Shënimi i mbështetur i tabelës

Format

Stilet e parazgjedhura

Paraqitjet opsionale

Formulari i kërkimit

Forma inline

Forma horizontale

Kontrollet e formave të mbështetura

Inputet

Textarea

Kutitë e kontrollit dhe radiot

E parazgjedhur (e grumbulluar)

Kutitë e kontrollit në linjë

Zgjedh

Zgjerimi i kontrolleve të formularit

Inputet e parashtruara dhe të bashkangjitura

Opsionet e parazgjedhura

Të kombinuara

Butonat në vend të tekstit

Zbritje të butonave

Grupet rënëse të segmentuara

Formulari i kërkimit

Kontrolloni madhësinë

Blloko hyrjet e nivelit

Madhësia relative

Përmasat e rrjetit

Inpute të paeditueshme

Formoni veprime

Teksti i ndihmës

Ndihmë në linjë

Blloko ndihmën

Gjendjet e kontrollit të formës

Fokusi në hyrje

Të dhëna të pavlefshme

Inputet e çaktivizuara

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`