CSS bazë

Elementet themelore HTML të stilizuara dhe të zgjeruara me klasa të zgjeruara.

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>

Kursivë

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.

  1. <p class = "text-left" > Teksti i rreshtuar majtas. </p>
  2. <p class = "text-center" > Teksti i përafruar në qendër. </p>
  3. <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.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "tekst-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "tekst-info" > Aenean eu leo ​​quam. Pellenteske ornare sem lacinia quam venenatis. </p>
  5. <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]
  1. <adresa>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisko, CA 94107 <br>
  5. <abbr title = "Telefon" > P: </abbr> (123) 456-7890
  6. </adresa>
  7.  
  8. <adresa>
  9. <strong> Emri i plotë </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </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.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante. </p>
  3. </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
  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante. </p>
  3. <small> Dikush i famshëm <cite title = "Source Title" > Titulli i burimit </cite></small>
  4. </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
  1. <blockquote class = "tërheq djathtas" >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

porositur

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Lehtësimi në pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Enean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li> ... </li>
  3. </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
  1. <ul class = "pa stil" >
  2. <li> ... </li>
  3. </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
  1. <ul class = "inline" >
  2. <li> ... </li>
  3. </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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. <dl class = "dl-horizontal" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. 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>
  1. <para>
  2. <p>Shembull teksti këtu...</p>
  3. </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
  1. <table class = "tabela" >
  2. </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
  1. <table class = "tavolinë me shirita" >
  2. </tabela>

.table-bordered

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

# Emri Mbiemri Emri i përdoruesit
1 shenjë Oto @mdo
shenjë Oto @getbootstrap
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
  1. <table class = "tabela-bordered" >
  2. </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
  1. <table class = "table table-hover" >
  2. </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
  1. <table class = "table table-condensed" >
  2. </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
  1. ...
  2. < tr class = "sukses" >
  3. <td> 1 < /td>
  4. <td>TB - Mujore</ td >
  5. <td> 01 / 04 / 2012 < /td>
  6. <td>Miratuar</ td >
  7. </ tr >
  8. ...

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
  1. <tabela>
  2. <caption> ... </caption>
  3. <kokë>
  4. <tr>
  5. <th> ... </th>
  6. <th> ... </th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </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.

Legjenda Shembull teksti ndihmës në nivel blloku këtu.
  1. <forma>
  2. <set e fushave>
  3. <legend> Legjenda </legend>
  4. <label> Emri i etiketës </label>
  5. <input type = "text" placeholder = "Shkruaj diçka..." >
  6. <span class = "help-block" > Shembull i tekstit të ndihmës në nivel blloku këtu. </span>
  7. <label class = "checkbox" >
  8. <input type = "checkbox" > Më kontrollo
  9. </label>
  10. <button type = "submit" class = "btn" > Paraqit </button>
  11. </fieldset>
  12. </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-query<input>për një futje teksti shtesë të rrumbullakosura.

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

Forma inline

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

  1. <form class = "form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Fjalëkalimi" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Më mbaj mend
  6. </label>
  7. <button type = "submit" class = "btn" > Hyni </button>
  8. </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
  1. <form class = "formë-horizontal" >
  2. <div class = "kontrol-grup" >
  3. <label class = "control-label" for = "inputEmail" > Email </label>
  4. <div class = "kontrollet" >
  5. <input type = "text" id = "inputEmail" placeholder = "Email" >
  6. </div>
  7. </div>
  8. <div class = "kontrol-grup" >
  9. <label class = "control-label" for = "inputPassword" > Fjalëkalimi </label>
  10. <div class = "kontrollet" >
  11. <input type = "password" id = "inputPassword" placeholder = "Fjalëkalimi" >
  12. </div>
  13. </div>
  14. <div class = "kontrol-grup" >
  15. <div class = "kontrollet" >
  16. <label class = "checkbox" >
  17. <input type = "checkbox" > Më mbaj mend
  18. </label>
  19. <button type = "submit" class = "btn" > Hyni </button>
  20. </div>
  21. </div>
  22. </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.

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

Textarea

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

  1. <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)


  1. <label class = "checkbox" >
  2. <input type = "checkbox" value = "" >
  3. Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme
  4. </label>
  5.  
  6. <label class = "radio" >
  7. <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" u kontrollua >
  8. Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme
  9. </label>
  10. <label class = "radio" >
  11. <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
  12. Opsioni dy mund të jetë diçka tjetër dhe zgjedhja e tij do të çaktivizojë opsionin një
  13. </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ë.

  1. <label class = "checkbox inline" >
  2. <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1
  3. </label>
  4. <label class = "checkbox inline" >
  5. <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2
  6. </label>
  7. <label class = "checkbox inline" >
  8. <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3
  9. </label>

Zgjedh

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


  1. <zgjidh>
  2. <option> 1 </option>
  3. <option> 2 </option>
  4. <option> 3 </option>
  5. <option> 4 </option>
  6. <option> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "multiple" >
  10. <option> 1 </option>
  11. <option> 2 </option>
  12. <option> 3 </option>
  13. <option> 4 </option>
  14. <option> 5 </option>
  15. </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.

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "add-on" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "tekst" placeholder = "Emri i përdoruesit" >
  4. </div>
  5. <div class = "input-append" >
  6. <input class = "span2" id = "appendedInput " type = "tekst" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

Të kombinuara

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

$ .00
  1. <div class = "input-prepend input-append" >
  2. <span class = "add-on" > $ </span>
  3. <input class = "span2" id = "appendedPrependedInput " type = "tekst" >
  4. <span class = "add-on" > .00 </span>
  5. </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.

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButton " type = "tekst" >
  3. <button class = "btn" type = "button" > Shko! </button>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButtons " type = "tekst" >
  3. <button class = "btn" type = "button" > Kërko </button>
  4. <button class = "btn" type = "button" > Opsionet </button>
  5. </div>

Zbritje të butonave

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedDropdownButton " type = "tekst" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. Veprimi
  6. <span class = "caret" ></span>
  7. </button>
  8. <ul class = "meny-dropdown" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Veprimi
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "meny-dropdown" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton" type = "tekst" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Veprimi
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "meny-dropdown" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "appendedPrependedDropdownButton " type = "tekst" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. Veprimi
  15. <span class = "caret" ></span>
  16. </button>
  17. <ul class = "meny-dropdown" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Grupet rënëse të segmentuara

  1. <forma>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. < lloji i hyrjes = "tekst" >
  5. </div>
  6. <div class = "input-append" >
  7. < lloji i hyrjes = "tekst" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

Formulari i kërkimit

  1. <form class = "form-kërkim" >
  2. <div class = "input-append" >
  3. <input type = "text" class = "span2 search-query" >
  4. <button type = "submit" class = "btn" > Kërko </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > Kërko </button>
  8. <input type = "text" class = "span2 search-query" >
  9. </div>
  10. </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.

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

Madhësia relative

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
  6. <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.

  1. <input class = "span1" type = "text" placeholder = ".span1" >
  2. <input class = "span2" type = "text" placeholder = ".span2" >
  3. <input class = "span3" type = "text" placeholder = ".span3" >
  4. <select class = "span1" >
  5. ...
  6. </select>
  7. <select class = "span2" >
  8. ...
  9. </select>
  10. <select class = "span3" >
  11. ...
  12. </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.

  1. <div class = "kontrollet" >
  2. <input class = "span5" type = "text" placeholder = ".span5" >
  3. </div>
  4. <div class = "controls controls-row" >
  5. <input class = "span4" type = "text" placeholder = ".span4" >
  6. <input class = "span1" type = "text" placeholder = ".span1" >
  7. </div>
  8. ...

Inpute të paeditueshme

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

Disa vlera këtu
  1. <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.

  1. <div class = "form-veprime" >
  2. <button type = "submit" class = "btn btn-primary" > Ruaj ndryshimet </button>
  3. <button type = "button" class = "btn" > Anulo </button>
  4. </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ë

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

Blloko ndihmën

Një bllok më i gjatë teksti ndihmës që kalon në një rresht të ri dhe mund të shtrihet përtej një rreshti.
  1. <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.

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

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

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

Diçka mund të ketë shkuar keq
Ju lutemi korrigjoni gabimin
Emri i përdoruesit është marrë
Woohoo!
  1. <div class = "paralajmërim i grupit të kontrollit" >
  2. <label class = "control-label" for = "inputWarning" > Hyrja me paralajmërim </label>
  3. <div class = "kontrollet" >
  4. <input type = "text" id = "inputWarning" >
  5. <span class = "help-inline" > Diçka mund të ketë shkuar keq </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "gabim i grupit të kontrollit" >
  10. <label class = "control-label" for = "inputError" > Hyrja me gabim </label>
  11. <div class = "kontrollet" >
  12. <input type = "text" id = "InputError" >
  13. <span class = "help-inline" > Ju lutemi korrigjoni gabimin </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "informacionet e grupit të kontrollit" >
  18. <label class = "control-label" for = "inputInfo" > Hyrja me informacion </label>
  19. <div class = "kontrollet" >
  20. <input type = "text" id = "inputInfo" >
  21. <span class = "help-inline" > Emri i përdoruesit është marrë tashmë </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "sukses i grupit të kontrollit" >
  26. <label class = "control-label" for = "inputSuccess" > Hyrja me sukses </label>
  27. <div class = "kontrollet" >
  28. <input type = "text" id = "inputSuccess" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </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ë.

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > Butoni i madh </button>
  3. <button class = "btn btn-large" type = "button" > Butoni i madh </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > Butoni i parazgjedhur </button>
  7. <button class = "btn" type = "button" > Butoni i parazgjedhur </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > Butoni i vogël </button>
  11. <button class = "btn btn-small" type = "button" > Butoni i vogël </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "button" > Butoni i vogël </button>
  15. <button class = "btn btn-mini" type = "button" > Butoni i vogël </button>
  16. </p>

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Butoni i nivelit të bllokimit </button>
  2. <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

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Lidhja primare </a>
  2. <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.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Butoni kryesor </button>
  2. <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>

Lidhje
  1. <a class = "btn" href = "" > Lidhja </a>
  2. <button class = "btn" type = "submit" > Butoni </button>
  3. <input class = "btn" type = "button" value = "Input" >
  4. <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.

140x140 140x140 140x140
  1. <img src = "..." class = "img-rrumbullakosur" >
  2. <img src = "..." class = "img-circle" >
  3. <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
  • icon-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
  • ikonë-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:

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

  1. <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
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>
  4. <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>
  5. <a class = "btn" href = "#" ><i class = "icon-align-right" </i></a>
  6. <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>
  7. </div>
  8. </div>
Dropdown në një grup butonash
  1. <div class = "btn-group" >
  2. <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" </i> Përdoruesi </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
  4. <ul class = "meny-dropdown" >
  5. <li><a href = "#" ><i class = "icon-pencil" ></i> Ndrysho </a></li>
  6. <li><a href = "#" ><i class = "icon-trash" ></i> Fshi </a></li>
  7. <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ndaloni </a></li>
  8. <li class = "ndarës" ></li>
  9. <li><a href = "#" ><i class = "i" ></i> Bëni administrator </a></li>
  10. </ul>
  11. </div>
Madhësitë e butonave
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Yll </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Yll </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Yll </a>

Navigimi

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

Fushat e formave

  1. <div class = "kontrol-grup" >
  2. <label class = "control-label" for = "inputIcon" > Adresa e emailit </label>
  3. <div class = "kontrollet" >
  4. <div class = "input-prepend" >
  5. <span class = "add-on" ><i class = "icon-zarf" </i></span>
  6. <input class = "span2" id = "inputIcon" type = "tekst" >
  7. </div>
  8. </div>
  9. </div>