Az állványzat tetején az alapvető HTML-elemek stílusosan és bővíthető osztályokkal vannak kiegészítve, hogy friss, egységes megjelenést és hangulatot biztosítsanak.
A teljes tipográfiai rács két Less változón alapul a változók.less fájlunkban: @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émi matematikát használunk a margók, kitöltések és vonalmagasságok létrehozásához minden típusunkhoz és még sok máshoz.
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.
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.
| Elem | Használat | Választható |
|---|---|---|
<strong> |
Egy szövegrészlet fontos hangsúlyozására | Egyik sem |
<em> |
Egy szövegrészlet hangsúlyozására | Egyik sem |
<abbr> |
A rövidítéseket és a mozaikszavakat becsomagolja, hogy a kibővített változatot mutasson |
.initialismaz osztályt a nagybetűs rövidítésekhez. |
<address> |
A legközelebbi ősének vagy az egész munkának elérhetőségeiért | A formázás megőrzéséhez az összes sort a következővel fejezze be<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Megjegyzés: Nyugodtan használhatja <b>és <i>HTML5-ben, de a használatuk megváltozott egy kicsit. <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.
Íme két példa a <address>címke használatára:
Az attribútumot tartalmazó rövidítések titlealsó szegélye világos pontozott, és a súgó kurzor lebeg. Ez extra jelzést ad a felhasználóknak, hogy valami megjelenik a lebegtetéskor.
Adja hozzá az initialismosztályt egy rövidítéshez, hogy növelje a tipográfiai harmóniát azáltal, hogy valamivel kisebb szövegméretet ad neki.
A HTML a legjobb dolog a szeletelt kenyér óta.
Az attribútum szó rövidítése az attr .
| Elem | Használat | Választható |
|---|---|---|
<blockquote> |
Blokkszintű elem egy másik forrásból származó tartalom idézéséhez | Attribútum hozzáadása .pull-leftés .pull-rightosztályokat a lebegtetett opciókhoz |
<small> |
Opcionális elem a felhasználónak szánt idézet hozzáadásához, jellemzően egy szerző a mű címével | Helyezze a <cite>jelet a forrás címe vagy neve köré |
Idézet beillesztéséhez <blockquote>bármilyen HTML -kódot körbefűzhet idézetként. Egyenes idézetekhez a <p>.
Adjon meg egy opcionális <small>elemet a forrásra hivatkozva, és —előtte egy em kötőjelet kap stílusozási célból.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Valaki híres </small>
- </blockquote>
Az alapértelmezett idézőjelek stílusa a következő:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Valaki híres a Body of work -ban
Az idézet jobb oldali lebegtetéséhez adja hozzá a class="pull-right"következőt:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Valaki híres a Body of work -ban
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Burkolja be a soron belüli kódrészleteket a következővel: <code>.
- Például a <code> szakaszt </ code > soron belüliként kell tördelni .
<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>
- <pre>
- <p>Minta szöveg itt...</p>
- </pre>
Megjegyzés: Ü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.
Vegyük ugyanazt az <pre>elemet, és adjunk hozzá két opcionális osztályt a továbbfejlesztett megjelenítés érdekében.
- <p> Minta szöveg itt... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Minta szöveg itt...</p>
- </pre>
Töltse le a google-code-prettify programot, és tekintse meg a readme-t a használatához.
| 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 A belül kell használni <thead> |
<caption> |
A táblázat leírása vagy összefoglalása, különösen a képernyőolvasók számára hasznos |
- <tábla>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Név | Osztály | Leírás |
|---|---|---|
| Alapértelmezett | Egyik sem | Nincsenek stílusok, csak oszlopok és sorok |
| Alapvető | .table |
Csak vízszintes vonalak a sorok között |
| Szegélyezett | .table-bordered |
Lekerekíti a sarkokat és külső szegélyt ad hozzá |
| Zebra-csík | .table-striped |
Világosszürke háttérszínt ad a páratlan sorokhoz (1, 3, 5 stb.) |
| Sűrítve | .table-condensed |
Félbevágja a függőleges párnázást, 8 képpontról 4 képpontra, az összes tdés az thelemeken belül |
A táblázatok stílusa automatikusan csak néhány szegéllyel történik az olvashatóság és a szerkezet fenntartása érdekében. 2.0 esetén az .tableosztály kötelező.
- <table class = "tábla" >
- …
- </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 |
Tegye egy kicsit divatosabbá az asztalait zebracsíkok hozzáadásával – csak adja hozzá az .table-stripedosztályt.
Megjegyzés: A csíkos táblázatok a :nth-childCSS-választót használják, és nem érhetők el az IE7-IE8-ban.
- <table class = "tábla asztalcsíkos" >
- …
- </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 |
Esztétikai okokból adjon hozzá szegélyeket az egész asztalhoz és lekerekített sarkokat.
- <table class = "táblázat szegélyezett" >
- …
- </table>
| # | 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 | ||
Tegye kompaktabbá táblázatait az .table-condensedosztály hozzáadásával a táblázatcellák kitöltésének felére (8 képpontról 4 képpontra).
- <table class = "táblázat-sűrített" >
- …
- </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 | ||
Nyugodtan kombinálhatja az asztali osztályok bármelyikét, hogy a rendelkezésre álló osztályok bármelyikének felhasználásával különböző megjelenést érjen el.
- <table class = "tábla táblázat-csíkos táblázat-szegélyezett táblázat-sűrített" >
- ...
- </table>
| Teljes név | |||
|---|---|---|---|
| # | 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 | ||
A Bootstrap űrlapjainak legjobb része az, hogy minden bemenete és vezérlőeleme nagyszerűen néz ki, függetlenül attól, hogy hogyan építi fel őket a jelölésben. Nincs szükség felesleges HTML-re, de a mintákat biztosítjuk azoknak, akiknek szüksége van rá.
A bonyolultabb elrendezésekhez tömör és méretezhető osztályok tartoznak az egyszerű stílus és eseménykötés érdekében, így Ön minden lépésben lefedett.
A Bootstrap négyféle űrlapelrendezést támogat:
A különböző típusú űrlapelrendezések bizonyos változtatásokat igényelnek a jelölésben, de maguk a vezérlők változatlanok maradnak, és ugyanúgy viselkednek.
A Bootstrap űrlapjai stílusokat tartalmaznak az összes alapvető űrlapvezérlőhöz, például a bevitelhez, a szövegterülethez és a kívánt kijelöléshez. De számos egyéni összetevővel is rendelkezik, például hozzáfűzött és elejére fűzött bemenetekkel, valamint a jelölőnégyzetek listájának támogatásával.
Az olyan állapotok, mint a hiba, a figyelmeztetés és a siker, minden típusú űrlapvezérlőnél szerepelnek. A letiltott vezérlők stílusait is tartalmazza.
A Bootstrap egyszerű jelölést és stílusokat biztosít a gyakori webes űrlapok négy stílusához.
| Név | Osztály | Leírás |
|---|---|---|
| Függőleges (alapértelmezett) | .form-vertical (nem szükséges) |
Halmozott, balra igazított címkék a vezérlők felett |
| Sorban | .form-inline |
Balra igazított címke és soros blokkvezérlők a kompakt stílus érdekében |
| Keresés | .form-search |
Extra lekerekített szövegbevitel a tipikus keresési esztétika érdekében |
| Vízszintes | .form-horizontal |
Balra, jobbra igazított címkék lebegtetése ugyanazon a sorban, mint a vezérlők |
Intelligens és könnyű alapértelmezések extra jelölés nélkül.
- <form class = "kút" >
- <label> Címke neve </label>
- <input type = "text" class = "span3" placeholder = "Írjon be valamit..." >
- <span class = "help-block" > Példa blokkszintű súgószövegre itt. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Nézd meg
- </label>
- <button type = "submit" class = "btn" > Küldés </button>
- </form>
Adja .form-searchhozzá az űrlaphoz és .search-querya input.
- <form class = "jól űrlap-keresés" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Keresés </button>
- </form>
Adja hozzá .form-inlineaz űrlapvezérlők függőleges igazítását és térközét.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "E-mail" >
- <input type = "password" class = "input-small" placeholder = "Jelszó" >
- <label class = "checkbox" >
- <input type = "checkbox" > Emlékezzen rám
- </label>
- <button type = "submit" class = "btn" > Bejelentkezés </button>
- </form>
A jobb oldalon látható az összes általunk támogatott alapértelmezett űrlapvezérlő. Íme a pontozott lista:
A fenti űrlapelrendezési példa alapján itt van az első bemeneti és vezérlőcsoporthoz társított jelölés. A .control-group, .control-label, és .controlsosztályok mindegyike szükséges a stílushoz.
- <form class = "form-horizontal" >
- <mezőkészlet>
- <legend> Jelmagyarázat szövege </legend>
- <div class = "kontrollcsoport" >
- <label class = "control-label" for = "input01" > Szövegbevitel </label>
- <div class = "vezérlők" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Támogató súgószöveg </p>
- </div>
- </div>
- </fieldset>
- </form>
A Bootstrap stílusokat tartalmaz a böngésző által támogatott fókuszáláshoz és disabledállapotokhoz. Eltávolítjuk az alapértelmezett Webkit -et outline, és box-shadowa helyére a-t alkalmazunk :focus.
Tartalmazza a hibák, a figyelmeztetések és a siker érvényesítési stílusait is. A használathoz adja hozzá a hibaosztályt a környezőhöz .control-group.
- <fieldset
- class = "vezérlőcsoport hiba" >
- …
- </fieldset>
A beviteli csoportok – hozzáfűzött vagy hozzáfűzött szöveggel – egyszerű módot kínálnak arra, hogy több kontextust biztosítsanak a bemenetekhez. Jó példa erre a @ jel a Twitter-felhasználónevekre vagy a $ pénzügyekre.
Az 1.4-es verzióig a Bootstrap extra jelölést igényelt a jelölőnégyzetek és a rádiók körül, hogy egymásra helyezze őket. <label class="checkbox">Most már csak annyit kell tennie, hogy megismételjük a <input type="checkbox">.
A beépített jelölőnégyzetek és a rádiók is támogatottak. Csak adja hozzá .inlinebármelyik .checkboxvagy -hoz .radio, és kész.
Ha az elő- vagy hozzáfűzés bemeneteket soron belüli formában szeretné használni, ügyeljen arra, hogy a .add-onés inputa szóközök nélkül ugyanabba a sorban legyen.
Ha súgószöveget szeretne hozzáadni az űrlapbevitelhez, illesszen be soron belüli súgószöveget a beviteli elem után <span class="help-inline">vagy egy súgószöveg blokkot .<p class="help-block">
Ahelyett, hogy minden ikont külön kérésnek tennénk, egy sprite-ba állítottuk össze őket – egy csomó kép egy fájlban, amely CSS segítségével pozícionálja a képeket a -val background-position. Ez ugyanaz a módszer, amit a Twitter.com-on használunk, és nálunk jól bevált.
Minden ikonosztály előtagja van .icon-a megfelelő névtér és hatókör érdekében, hasonlóan a többi komponensünkhöz. Ez segít elkerülni a konfliktusokat más eszközökkel.
A Glyphicons engedélyezte számunkra a nyílt forráskódú eszköztárunkban található Halflings készlet használatát mindaddig, amíg linket és hitelt adunk meg itt a dokumentumokban. Kérjük, fontolja meg ugyanezt a projektjei során.
A Bootstrap <i>minden ikonhoz címkét használ, de nincs kis- és nagybetűosztályuk – csak egy megosztott előtag. A használathoz helyezze el a következő kódot szinte bárhol:
- <i class = "icon-search" ></i>
A fordított (fehér) ikonokhoz is rendelkezésre állnak stílusok, amelyek egy extra osztállyal készültek:
- <i class = "icon-search icon-white" ></i>
140 osztály közül választhat az ikonjaihoz. Csak adjon hozzá egy <i>címkét a megfelelő osztályokkal, és már kész is. A teljes listát megtalálja a sprites.less oldalon vagy itt, ebben a dokumentumban.
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.
Az ikonok nagyszerűek, de hol lehet őket használni? Íme néhány ötlet:
Lényegében bárhová elhelyezhet egy <i>címkét, elhelyezhet egy ikont.
Használja őket gombokban, gombcsoportokban az eszköztárhoz, a navigációhoz vagy az űrlap elé fűzött bevitelekhez.