Bootstrap

Alap CSS

Alapvető HTML-elemek stílusosan és bővíthető osztályokkal továbbfejlesztve.

Fel a fejjel! Ezek a dokumentumok a 2.3.2-es verzióhoz készültek, amely hivatalosan már nem támogatott. Tekintse meg a Bootstrap legújabb verzióját!

Tipográfia

Címsorok

Az összes HTML-címsor <h1>elérhető <h6>.

h1. 1. címsor

h2. 2. címsor

h3. 3. címsor

h4. 4. címsor

h5. 5. címsor
h6. 6. címsor

Testmásolat

A Bootstrap globális alapértelmezése font-size14 képpont , 20 képpontline-height mellett . Ez vonatkozik a és az összes bekezdésre. Ezenkívül a (bekezdések) alsó margót kapnak sormagasságuk felével (alapértelmezés szerint 10 képpont).<body><p>

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.

Cum sociis natoque penatibus et magnis dis parturient 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>

Vezető törzs másolata

Tegye kiemelhetővé a bekezdést a hozzáadásával .lead.

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

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

Kevesebbből épült

A tipográfiai skála két KEVESEBB változón alapul a változókban.less : @baseFontSizeés @baseLineHeight. Az első az egész használt alap betűméret, a második pedig az alapvonal magassága. Ezeket a változókat és néhány egyszerű matematikát használjuk a margók, kitöltések és vonalmagasságok létrehozásához minden típusunkhoz és még sok máshoz. Testreszabhatja őket, és a Bootstrap alkalmazkodik.

Hangsúly

Használja a HTML alapértelmezett kiemelő címkéit könnyű stílusokkal.

<small>

A szövegközi vagy szövegtömbök hangsúlytalanításához használja a kis címkét.

Ezt a szövegsort apró betűsként kell kezelni.

<p> <kicsi> Ezt a szövegsort apró betűsként kell kezelni. </small> </p>

Bátor

Nagyobb betűsúllyal rendelkező szövegrészlet kiemelésére.

A következő szövegrészlet félkövér szövegként jelenik meg .

<strong> félkövér szövegként jelenítve meg </strong>

Dőlt betűs

Egy szövegrészlet dőlt betűs kiemelésére.

A következő szövegrészlet dőlt betűs szövegként jelenik meg .

<em> dőlt betűs szövegként jelenik meg </em>

Fel a fejjel!Nyugodtan használhatja <b>és <i>HTML5-ben. <b>célja, hogy kiemelje a szavakat vagy kifejezéseket anélkül, hogy további jelentőséget tulajdonítana, míg <i>többnyire hang, szakkifejezések stb.

Igazítási osztályok

Könnyen igazíthatja újra a szöveget az összetevőkhöz a szövegigazítási osztályokkal.

Balra igazított szöveg.

Középre igazított szöveg.

Jobbra igazított szöveg.

  1. <p class = "text-left" > Balra igazított szöveg. </p> 
  2. <p class = "text-center" > Középre igazított szöveg. </p> 
  3. <p class = "text-right" > Jobbra igazított szöveg. </p>

Hangsúlyos osztályok

Egy maroknyi hangsúlyos használati osztály segítségével adja át a jelentést a színekkel.

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. Pellentesque ornare sem lacinia quam venenatis.

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

  1. <p class = "némított" > 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 = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Rövidítések

A HTML elem stilizált megvalósítása <abbr>a rövidítésekhez és a mozaikszavakhoz, hogy a kibővített verziót mutasson. Az attribútumot tartalmazó rövidítéseknek titlevilágos pontozott alsó szegélye van, és a súgó kurzor az egérmutatón, amely további kontextust biztosít az egérmutató lebegtetésekor.

<abbr>

Ha egy rövidítésen hosszú kurzort szeretne kibontani, akkor adja meg az titleattribútumot.

Az attribútum szó rövidítése az attr .

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

<abbr class="initialism">

Adjon .initialismhozzá egy rövidítést valamivel kisebb betűmérethez.

A HTML a legjobb dolog a szeletelt kenyér óta.

<abbr title = "HyperText Markup Language" class = "inicializmus" > HTML </abbr>

Címek

Mutassa be a legközelebbi ős vagy az egész munka elérhetőségi adatait.

<address>

A formázás megőrzéséhez az összes sort a -val fejezze be <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Teljes név
[email protected] 
  1. <cím>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Phone" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <cím>
  9.   <strong> Teljes név </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Blokkidézetek

Más forrásból származó tartalomblokkok idézéséhez a dokumentumban.

Alapértelmezett idézőjel

Tekerje <blockquote>körbe bármely HTML -kódot idézetként. Egyenes idézetekhez a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Idézetblokk opciók

Stílus- és tartalommódosítások a szabványos idézet egyszerű variációihoz.

Forrás megnevezése

Adjon hozzá <small>címkét a forrás azonosításához. A forrásmunka nevét burkolja be <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Valaki híres a Forrás címében 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Valaki híres <cite title = "Forráscím" > Forráscím </cite></small> 
  4. </blockquote>

Alternatív kijelzők

.pull-rightLebegtetett, jobbra igazított idézethez használja .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Valaki híres a Forrás címében 
  1. <blockquote class = "jobbra húzás" > 
  2.   ...
  3. </blockquote>

Listák

Rendeletlen

Azon tételek listája, amelyekben a sorrend nem kifejezetten számít.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem és massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Rendelve

Azon tételek listája, amelyekben a sorrend kifejezetten számít.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem és massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Stílus nélküli

Távolítsa el az alapértelmezett list-styleés bal oldali kitöltést a listaelemekről (csak az azonnali gyermekeknél).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem és massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Sorban

Helyezze az összes listaelemet egyetlen sorba, inline-blocknémi világos párnázással.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Leírás

A kifejezések listája a hozzájuk tartozó leírásokkal.

Leírás listák
A leírások listája tökéletes a kifejezések meghatározásához.
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>

Vízszintes leírás

<dl>Sorolja fel egymás mellett a kifejezéseket és leírásokat .

Leírás listák
A leírások listája tökéletes a kifejezések meghatározásához.
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>

Fel a fejjel!A vízszintes leíráslisták csonkolják azokat a kifejezéseket, amelyek túl hosszúak ahhoz, hogy elférjenek a bal oldali oszlop javításában text-overflow. Szűkebb nézetablakban az alapértelmezett halmozott elrendezésre váltanak.

Kód

Sorban

Burkolja be a soron belüli kódrészleteket a következővel: <code>.

Például <section>soron belüliként kell csomagolni. 
  1. Például : < kód> & lt ; szakaszt & gt ;</ code > soron belüliként kell tördelni .

Alap blokk

<pre>Többsoros kódhoz használja . Ügyeljen arra, hogy minden szögletes zárójelet elhagyjon a kódban a megfelelő megjelenítés érdekében.

<p>Minta szöveg itt...</p>
  1. <pre>
  2.   <p>Minta szöveg itt...</p>
  3. </pre>

Fel a fejjel!Ügyeljen arra, hogy a kód a <pre>címkéken belül legyen a lehető legközelebb a bal oldalhoz; az összes lapot megjeleníti.

Opcionálisan hozzáadhatja az .pre-scrollableosztályt, amely 350 képpont maximális magasságot állít be, és egy y-tengely görgetősávot biztosít.

Táblázatok

Alapértelmezett stílusok

Az alapvető stílushoz – könnyű párnázás és csak vízszintes elválasztók – adja hozzá az alaposztályt .tablebármely <table>.

# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @twitter 
  1. <table class = "tábla" > 
  2.   …
  3. </table>

Választható órák

Adja hozzá a következő osztályok bármelyikét az .tablealaposztályhoz.

.table-striped

Zebra-csíkozást ad a táblázat bármely sorához <tbody>a CSS-választón keresztül :nth-child(az IE7-8-ban nem érhető el).

# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @twitter 
  1. <table class = "tábla asztalcsíkos" > 
  2.   …
  3. </table>

.table-bordered

Adjon hozzá szegélyeket és lekerekített sarkokat az asztalhoz.

# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
Mark Ottó @getbootstrap
2 Jákób Thornton @zsír
3 Larry, a madár @twitter 
  1. <table class = "táblázat szegélyezett" > 
  2.   …
  3. </table>

.table-hover

Lebegési állapot engedélyezése a táblázaton belüli sorokon <tbody>.

# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Kompaktabbá teszi az asztalokat azáltal, hogy kettévágja a cellapárnázást.

# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @twitter 
  1. <table class = "táblázat-sűrített" > 
  2.   …
  3. </table>

Választható sorosztályok

Használjon környezetfüggő osztályokat a táblázat sorainak színezéséhez.

Osztály Leírás
.success Sikeres vagy pozitív cselekvést jelez.
.error Veszélyes vagy potenciálisan negatív tevékenységet jelez.
.warning Figyelmeztetést jelez, amely figyelmet igényel.
.info Az alapértelmezett stílusok alternatívájaként használják.
# Termék Fizetés megtörtént Állapot
1 TB – havonta 2012.01.04 Jóváhagyott
2 TB – havonta 2012.02.04 Elutasította
3 TB – havonta 2012.03.04 Függőben levő
4 TB – havonta 2012.04.04 Hívjon a megerősítéshez 
  1. ...
  2.   < tr class = "siker" >
  3.     <td> 1 < /td>
  4.     <td>TB – havonta</ td >
  5.     <td> 2012. 01. 04. < / td >
  6.     <td>Jóváhagyva</ td >
  7.   </ tr >
  8. ...

Támogatott táblázatjelölés

A támogatott HTML-táblázat-elemek listája és használatuk módja.

Címke Leírás
<table> Burkolat elem az adatok táblázatos formátumban történő megjelenítéséhez
<thead> Tárolóelem a táblázat fejlécsoraihoz ( <tr>) a táblázat oszlopainak címkézéséhez
<tbody> Tárolóelem a táblázat soraihoz ( <tr>) a táblázat törzsében
<tr> Tárolóelem a táblázatcellák ( <td>vagy <th>) halmazához, amely egyetlen sorban jelenik meg
<td> Alapértelmezett táblázatcella
<th> Speciális táblázatcella oszlop (vagy sor, hatókörtől és elhelyezéstől függően) címkéihez
<caption> A táblázat leírása vagy összefoglalása, különösen a képernyőolvasók számára hasznos 
  1. <tábla>
  2.   <caption> ... </caption>
  3.   <thead>
  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. </table>

Űrlapok

Alapértelmezett stílusok

<form>Az egyes űrlapvezérlők stílust kapnak, de a jelölésen vagy a jelölésben lévő szükséges alaposztály nélkül . Halmozott, balra igazított címkéket eredményez az űrlapvezérlők tetején.

Legenda Példa blokk szintű súgószöveg itt. 
  1. <form>
  2.   <mezőkészlet>
  3.     <legend> Jelmagyarázat </legend>
  4.     <label> Címke neve </label>
  5.     <input type = "text" placeholder = "Írjon be valamit..." >  
  6.     <span class = "help-block" > Példa blokkszintű súgószövegre itt. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Nézd meg 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Küldés </button>  
  11.   </fieldset>
  12. </form>

Választható elrendezések

A Bootstrap három választható űrlapelrendezést tartalmaz a gyakori használati esetekhez.

Keresés űrlap

Adja .form-searchhozzá az ��rlaphoz és .search-queryaz <input>extra kerek szövegbevitelhez.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Keresés </button>  
  4. </form>

Inline űrlap

Adja hozzá .form-inlinea balra igazított címkékhez és a soron belüli blokkvezérlőkhöz a kompakt elrendezés érdekében.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "E-mail" >   
  3.   <input type = "password" class = "input-small" placeholder = "Jelszó" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Emlékezzen rám 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Bejelentkezés </button>  
  8. </form>

Vízszintes forma

Igazítsa jobbra a címkéket, és lebegtesse őket balra, hogy a vezérlőkkel egy sorban jelenjenek meg. A legtöbb jelölésmódosítást igényli az alapértelmezett űrlaphoz képest:

  • Adja .form-horizontalhozzá az űrlaphoz
  • Csomagolja be a címkéket és a vezérlőket.control-group
  • Adja .control-labelhozzá a címkéhez
  • Tekerje be az összes kapcsolódó vezérlőt .controlsa megfelelő igazítás érdekében
  1. <form class = "form-horizontal" > 
  2.   <div class = "kontrollcsoport" > 
  3.     <label class = "control-label" for = "inputEmail" > E- mail </label>  
  4.     <div class = "vezérlők" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "E-mail" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrollcsoport" > 
  9.     <label class = "control-label" for = "inputPassword" > Jelszó </label>  
  10.     <div class = "vezérlők" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Jelszó" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrollcsoport" > 
  15.     <div class = "vezérlők" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Emlékezzen rám 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Bejelentkezés </button>  
  20.     </div>
  21.   </div>
  22. </form>

Támogatott űrlapvezérlők

Példák a szabványos űrlapvezérlőkre, amelyeket egy példa űrlap-elrendezés támogat.

Bemenetek

A leggyakoribb űrlapvezérlők, szöveges beviteli mezők. Támogatja az összes HTML5-típust: szöveg, jelszó, dátum és idő, dátum és helyi, dátum, hónap, idő, hét, szám, e-mail, URL, keresés, telefon és szín.

Mindenkor megköveteli a megadott használatát type.

  1. <input type = "text" placeholder = "Szövegbevitel" >

Textarea

Űrlapvezérlő, amely támogatja a többsoros szöveget. Szükség szerint módosítsa rowsaz attribútumot.

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

Jelölőnégyzetek és rádiók

A jelölőnégyzetek egy vagy több opció kiválasztására szolgálnak egy listában, míg a rádiók egy opció kiválasztására szolgálnak a sok közül.

Alapértelmezett (halmozott)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Az első lehetőség ez és az – feltétlenül írja le, miért nagyszerű
  4. </label>
  5.  
  6. <label class = "rádió" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "opció1" bejelölve >     
  8.   Az első lehetőség ez és az – feltétlenül írja le, miért nagyszerű
  9. </label>
  10. <label class = "rádió" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "opció2" >    
  12.   A második lehetőség lehet valami más, és ennek kiválasztása megszünteti az első opció kijelölését
  13. </label>

Soron belüli jelölőnégyzetek

Adja hozzá az .inlineosztályt egy sor jelölőnégyzethez, vagy a vezérlők rádiói ugyanabban a sorban jelennek meg.

  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 = "opció2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Kiválasztja

Használja az alapértelmezett beállítást, vagy adjon meg egyet multiple="multiple", hogy egyszerre több beállítást jelenítsen meg.


  1. <kiválasztás>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. < többszörös kijelölés = "többszörös" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Űrlapvezérlők kiterjesztése

A meglévő böngészővezérlők mellett a Bootstrap további hasznos űrlapösszetevőket is tartalmaz.

Előre és hozzáfűzött bemenetek

Szöveg vagy gombok hozzáadása bármely szövegalapú bevitel előtt vagy után. Vegye figyelembe, hogy az selectelemek itt nem támogatottak.

Alapértelmezett beállítások

A bemenet elé vagy hozzáfűzéséhez a két osztály valamelyikével tördeljen egy -et .add-onés egy -et.input

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput " type = "text" placeholder = "Felhasználónév" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "kiegészítő" > .00 </span> 
  8. </div>

Kombinált

Használja mind az osztályokat, mind a két példányát a .add-onbemenet elé és hozzáfűzéséhez.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "kiegészítő" > .00 </span> 
  5. </div>

Szöveg helyett gombok

<span>A szöveges a helyett használja az a gombot, .btnhogy egy (vagy kettőt) gombot csatoljon a bemenethez.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Ugrás! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Keresés </button>  
  4.   <button class = "btn" type = "button" > Beállítások </button>  
  5. </div>

Gombok legördülő menüi

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "legördülő menü" >  
  5.       Akció
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "legördülő menü" > 
  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 = "legördülő menü" >  
  4.       Akció
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "legördülő menü" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton " type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "legördülő menü" >  
  4.       Akció
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "legördülő menü" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "legördülő menü" >  
  14.       Akció
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "legördülő menü" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Szegmentált legördülő csoportok

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <beviteli típus = "szöveg" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <beviteli típus = "szöveg" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Keresés űrlap

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Keresés </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Keresés </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Méretezés szabályozása

Használjon relatív méretezési osztályokat, .input-largevagy illessze bemeneteit a rács oszlopméreteihez .span*osztályok használatával.

Blokk szintű bemenetek

Bármelyik <input>vagy <textarea>elem blokkszintű elemként viselkedik.

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

Relatív méretezés

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

Fel a fejjel!A jövőbeli verziókban módosítani fogjuk ezeknek a relatív beviteli osztályoknak a használatát, hogy megfeleljenek a gombok méretének. Például .input-largenöveli a bemenet kitöltését és betűméretét.

Rács méretezése

Használja .span1az .span12olyan bemenetekhez, amelyek megegyeznek a rácsoszlopok méretével.

  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>

Soronként több rácsbemenet esetén használja a .controls-rowmódosító osztályt a megfelelő térközhöz . Lebegteti a bemeneteket a szóköz összecsukásához, beállítja a megfelelő margókat, és törli a lebegést.

  1. <div class = "vezérlők" > 
  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. ...

Nem szerkeszthető bemenetek

Az adatokat olyan formában jelenítse meg, amely nem szerkeszthető tényleges űrlapjelölés használata nélkül.

Itt van némi érték 
  1. <span class = "input-xlarge uneditable-input" > Valami érték van itt </span>

Űrlapműveletek

Az űrlap befejezése műveletek csoportjával (gombokkal). Ha a gombok közé helyezik .form-actions, a gombok automatikusan behúzódnak, hogy egy vonalba kerüljenek az űrlapvezérlőkkel.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Módosítások mentése </button>  
  3.   <button type = "button" class = "btn" > Mégse </button>  
  4. </div>

Súgó szöveg

Soron belüli és blokkszintű támogatás az űrlapvezérlők körül megjelenő súgószövegekhez.

Beépített súgó

Soron belüli súgószöveg 
  1. <input type = "text" ><span class = "help-inline" > Soron belüli súgószöveg </span>

Súgó letiltása

Hosszabb súgószöveg blokk, amely új sorra tör, és túlnyúlhat egy soron. 
  1. <input type = "text" ><span class = "help-block" > Egy hosszabb súgószöveg blokk, amely egy új sorba tör, és egy soron túl is terjedhet. </span>

Űrlapvezérlő állapotok

Adjon visszajelzést a felhasználóknak vagy a látogatóknak az űrlapvezérlőkkel és címkékkel kapcsolatos alapvető visszajelzési állapotokkal.

Bemeneti fókusz

Eltávolítjuk az alapértelmezett outlinestílusokat egyes űrlapvezérlőkről, és helyette egy karaktert alkalmazunk box-shadowa :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ez fókuszált..." >

Érvénytelen bemenetek

Stílusos bemenetek az alapértelmezett böngészőfunkción keresztül a segítségével :invalid. Adja meg a type, adja hozzá az requiredattribútumot, ha a mező nem kötelező, és (ha van) adjon meg egy pattern.

Ez nem érhető el az Internet Explorer 7–9 verzióiban a CSS pszeudoválasztók támogatásának hiánya miatt.

  1. <input class = "span3" type = "e-mail" kötelező >

Letiltott bemenetek

Adja hozzá az disabledattribútumot egy bemenethez, hogy megakadályozza a felhasználói bevitelt, és kissé eltérő megjelenést váltson ki.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "A bevitel itt letiltva..." letiltva >

Érvényesítési állapotok

A Bootstrap érvényesítési stílusokat tartalmaz a hibákhoz, figyelmeztetésekhez, információkhoz és sikerüzenetekhez. A használathoz adja hozzá a megfelelő osztályt a környezőhöz .control-group.

Lehet, hogy valami elromlott
Kérjük, javítsa ki a hibát
a felhasználónév foglalt
Ju Hú! 
  1. <div class = "kontrollcsoport figyelmeztetés" > 
  2.   <label class = "control-label" for = "inputWarning" > Bevitel figyelmeztetéssel </label>  
  3.   <div class = "vezérlők" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Valami hiba történt </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "vezérlőcsoport-hiba" > 
  10.   <label class = "control-label" for = "inputError" > Hibás bevitel </label>  
  11.   <div class = "vezérlők" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Kérjük, javítsa ki a hibát </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "vezérlőcsoport információ" > 
  18.   <label class = "control-label" for = "inputInfo" > Adatbevitel </label>  
  19.   <div class = "vezérlők" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > A felhasználónév már foglalt </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrollcsoport sikere" > 
  26.   <label class = "control-label" for = "inputSuccess" > Sikeres bevitel </label>  
  27.   <div class = "vezérlők" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Gombok

Alapértelmezett gombok

A gombstílusok bármire alkalmazhatók, ha az .btnosztályt alkalmazzák. Általában azonban ezeket csak a <a>és <button>elemekre érdemes alkalmazni a legjobb megjelenítés érdekében.

Gomb class="" Leírás
btn Normál szürke gomb színátmenettel
btn btn-primary Extra vizuális súlyt biztosít, és egy gombkészletben azonosítja az elsődleges műveletet
btn btn-info Az alapértelmezett stílusok alternatívájaként használják
btn btn-success Sikeres vagy pozitív cselekvést jelez
btn btn-warning Azt jelzi, hogy ezzel a művelettel óvatosan kell eljárni
btn btn-danger Veszélyes vagy potenciálisan negatív tevékenységet jelez
btn btn-inverse Alternatív sötétszürke gomb, amely nincs szemantikai művelethez vagy használathoz kötve
btn btn-link Csökkentse a gombok hangsúlyát azáltal, hogy úgy néz ki, mint egy hivatkozás, miközben megtartja a gomb viselkedését

Böngészők közötti kompatibilitás

Az IE9 nem vágja le a háttér színátmeneteket a lekerekített sarkokon, ezért eltávolítjuk. Ehhez kapcsolódóan az IE9 kijavítja a letiltott buttonelemeket, és a szöveget szürkévé teszi, csúnya szövegárnyékkal, amelyet nem tudunk javítani.

A gombok méretei

Nagyobb vagy kisebb gombokat szeretne? Adja hozzá .btn-largea , .btn-small, vagy .btn-minia további méretekhez.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Nagy gomb </button>  
  3.   <button class = "btn btn-large" type = "button" > Nagy gomb </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Alapértelmezett gomb </button>  
  7.   <button class = "btn" type = "button" > Alapértelmezett gomb </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Kis gomb </button>  
  11.   <button class = "btn btn-small" type = "button" > Kis gomb </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini gomb </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini gomb </button>  
  16. </p>

Hozzon létre blokkszintű gombokat – azokat, amelyek átfogják a szülő teljes szélességét – a hozzáadásával .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Blokkszint gomb </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Letiltás szintű gomb </button>

Letiltott állapot

Tegye kattinthatatlanná a gombokat úgy, hogy 50%-kal visszahalványítja őket.

Horgony elem

Adja hozzá az .disabledosztályt a <a>gombokhoz.

Elsődleges link Link 

  1. <a href = "#" class = "btn btn-large btn-primary letiltva" > Elsődleges link </a>  
  2. <a href = "#" class = "btn btn-large letiltva" > Link </a>

Fel a fejjel!.disabledHasznossági osztályként használjuk itt, hasonlóan a közös .activeosztályhoz, tehát nem szükséges előtag. Ezenkívül ez az osztály csak esztétikai; egyéni JavaScriptet kell használnia a linkek letiltásához.

Gomb elem

Adja hozzá az disabledattribútumot a <button>gombokhoz.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" enabled = "disabled" > Elsődleges gomb </button>   
  2. <button type = "button" class = "btn btn-large" tiltva > Gomb </button>

Egy osztály, több címke

Használja az .btnosztályt egy <a>, <button>, vagy <input>elemen.

Link 
  1. <a class = "btn" href = "" > Link </a>  
  2. <button class = "btn" type = "submit" > Gomb </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Küldés" >

Bevált gyakorlatként próbálja meg az elemet a kontextushoz igazítani, hogy biztosítsa az egyező böngészők közötti megjelenítést. Ha van egy input, használjon egyet <input type="submit">a gombhoz.

Képek

Adjon hozzá osztályokat egy <img>elemhez, hogy könnyen stílusozhassa a képeket bármely projektben.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-kerekített" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Fel a fejjel! .img-roundedés .img-circlenem működnek az IE7-8-ban a border-radiustámogatás hiánya miatt.

Ikonok a Glyphiconstól

Ikon jelképek

140 ikon sprite formában, sötétszürke (alapértelmezett) és fehér színben, a Glyphicons által biztosított .

  • ikon-üveg
  • ikon-zene
  • ikon-keresés
  • ikon-boríték
  • ikon-szív
  • ikon-csillag
  • ikon-csillag-üres
  • ikon-felhasználó
  • ikon-film
  • ikon-th-nagy
  • ikon-th
  • icon-th-list
  • ikon-ok
  • ikon-eltávolítás
  • ikon-nagyítás
  • ikon-kicsinyítés
  • ikon kikapcsolva
  • ikon-jel
  • ikon-fogaskerék
  • ikon-kuka
  • ikon-home
  • ikon-fájl
  • ikon-idő
  • ikon-út
  • ikon-letöltés-alt
  • ikon-letöltés
  • ikon-feltöltés
  • ikon-beérkező levelek
  • ikon-játék-kör
  • ikon-ismétlés
  • ikon-frissítés
  • ikon-lista-alt
  • ikon-zár
  • ikon-zászló
  • ikon-fejhallgató
  • ikon-hangerő-ki
  • ikon-hangerő-csökkentés
  • ikon-hangerő-növelés
  • ikon-qrcode
  • ikon-vonalkód
  • ikon-címke
  • ikon-címkék
  • ikon-könyv
  • ikon-könyvjelző
  • ikon-nyomtatás
  • ikon-kamera
  • ikon-betűtípus
  • ikon-félkövér
  • ikon-dőlt
  • ikon-szöveg magassága
  • ikon-szöveg-szélesség
  • ikon-igazítás-balra
  • icon-align-center
  • ikon-igazítás-jobbra
  • ikon-igazítás-igazítás
  • ikon-lista
  • ikon-behúzás-bal
  • ikon-behúzás-jobbra
  • ikon-facetime-videó
  • ikon-kép
  • ikon-ceruza
  • ikon-térkép-jelölő
  • ikon-beállítás
  • ikon-árnyalat
  • ikon-szerkesztés
  • ikon-megosztás
  • ikon-ellenőrzés
  • ikon-mozgatás
  • ikon-lépés-hátra
  • ikon-gyors vissza
  • ikon-vissza
  • ikon-játék
  • ikon-szünet
  • ikon-stop
  • ikon-előre
  • ikon-gyors előre
  • ikon-lépés előre
  • ikon-kiadás
  • icon-chevron-bal
  • icon-chevron-right
  • ikon-plusz-jel
  • ikon-mínusz-jel
  • ikon-eltávolítás-jel
  • ikon-ok-jel
  • ikon-kérdés-jel
  • ikon-info-jel
  • ikon-képernyőkép
  • ikon-eltávolítás-kör
  • ikon-ok-kör
  • ikon-ban-kör
  • ikon-nyíl-balra
  • ikon-nyíl-jobbra
  • ikon-nyil felfelé
  • ikon-nyíl-lefelé
  • icon-share-alt
  • ikon-resize-full
  • ikon-resize-small
  • ikon-plusz
  • ikon-mínusz
  • ikon-csillag
  • ikon-felkiáltó-jel
  • ikon-ajándék
  • ikon-levél
  • ikon-tűz
  • ikon-szem-nyitva
  • ikon-szem-csukva
  • ikon-figyelmeztető jel
  • ikon-sík
  • ikon-naptár
  • ikon-véletlen
  • ikon-megjegyzés
  • ikon-mágnes
  • icon-chevron-up
  • icon-chevron-down
  • ikon-retweet
  • ikon-bevásárlókosár
  • ikon-mappa-bezárás
  • ikon-mappa-nyitás
  • ikon-átméretezés-függőleges
  • ikon-átméretezés-vízszintes
  • ikon-hdd
  • ikon-bikakürt
  • ikon-csengő
  • ikon-tanúsítvány
  • ikon-hüvelykujj felfelé
  • ikon-hüvelykujj lefelé
  • ikon-kéz-jobb
  • ikon-kéz-bal
  • ikon-kéz-fel
  • ikon-lefelé
  • ikon-kör-nyíl-jobbra
  • ikon-kör-nyíl balra
  • ikon-kör-nyil felfelé
  • ikon-kör-nyíl-lefelé
  • ikon-gömb
  • ikon-csavarkulcs
  • ikon-feladatok
  • ikon-szűrő
  • ikon-aktatáska
  • ikon-teljes képernyő

Glyphicons attribúció

A Glyphicons Halflings általában nem érhető el ingyen, de a Bootstrap és a Glyphicons alkotói közötti megállapodás lehetővé tette ezt Önnek, mint fejlesztőnek, költség nélkül. Köszönetképpen arra kérünk, hogy adjon meg egy opcionális hivatkozást a Glyphiconshoz , amikor csak lehetséges.

Hogyan kell használni

Minden ikonhoz szükség <i>van egy egyedi osztályú címkére, amely előtagja icon-. A használathoz helyezze el a következő kódot szinte bárhol:

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

A fordított (fehér) ikonokhoz is rendelkezésre állnak stílusok, amelyek egy extra osztállyal készülnek. Ezt az osztályt kifejezetten a lebegtetés és az aktív állapotok esetén fogjuk bevezetni a navigációs és legördülő hivatkozások esetében.

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

Fel a fejjel!Ha szöveges karakterláncok mellett használ, mint például a gombokban vagy a navigációs hivatkozásokban, ügyeljen arra, hogy hagyjon szóközt a <i>címke után a megfelelő térköz érdekében.

Ikon példák

Használja őket gombokban, gombcsoportokban az eszköztárhoz, a navigációhoz vagy az űrlap elé fűzött bevitelekhez.

Gombok

Gombcsoport a gomb eszköztárában
  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>
Legördülő menü egy gombcsoportban
Felhasználó 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Felhasználó </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "legördülő menü" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Szerkesztés </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Törlés </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Kitiltás </a></li>  
  8.     <li class = "osztó" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Legyen adminisztrátor </a></li>  
  10.   </ul>
  11. </div>
A gombok méretei
Csillag Csillag Csillag 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Csillag </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Csillag </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Csillag </a>

Navigáció

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktív" ><a href = "#" ><i class = "icon-home icon-white" ></i> Kezdőlap </a></li>   
  3.   <li><a href = "#" ><i class = "ikonkönyv" ></i> Könyvtár </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Alkalmazások </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Egyéb </a></li>  
  6. </ul>

Űrlapmezők

  1. <div class = "kontrollcsoport" > 
  2.   <label class = "control-label" for = "inputIcon" > E- mail cím </label>  
  3.   <div class = "vezérlők" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "kiegészítő" ><i class = "ikon-boríték" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>