Tipográfiai lépték

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.

Példa törzsszöveg

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Hangsúly használata

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.

Példa címek

Íme két példa a <address>címke használatára:

Példa rövidítések

A rövidítések stílusa nagybetűs szöveggel és világos pontozott alsó szegéllyel történik. Súgó kurzorral is rendelkeznek, így a felhasználók extra jelzést kapnak arról, hogy valami megjelenik a lebegtetés közben.

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

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

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

Rendeletlen

<ul>

• 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

Stílus nélküli

<ul class="unstyled">

• 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

Rendelve

<ol>

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

Leírás

<dl>

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.

Sorban

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 .  

Alap blokk

<pre>Többsoros kódhoz használja . Ügyeljen arra, hogy a careteket unicode karakterekké alakítsa 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.

Google Prettify

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.

<tábla>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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>

Tegye egy kicsit divatosabbá az asztalait zebracsíkok hozzáadásával – csak adja hozzá az .table-stripedosztályt.

Megjegyzés: A szórt 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>

Esztétikai okokból adjon hozzá szegélyeket az egész asztalhoz és lekerekített sarkokat.

<table class = "táblázat szegélyezett" > 
  …
</table>

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>

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>

Rugalmas HTML és CSS

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.

Négy elrendezést tartalmaz

A Bootstrap négyféle űrlapelrendezést támogat:

• Függőleges (alapértelmezett)
• Keresés
• Sorban
• Vízszintes

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.

Kontrollállapotok és egyebek

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 v2.0-val könnyebb és intelligensebb alapértelmezett űrlapstílusaink vannak. Nincs extra jelölés, csak űrlapvezérlők.

Az alapértelmezett WebKit stílusokat tükrözi, csak adja hozzá .form-searchaz extra kerekített keresési mezőkért.

A bemenetek blokkszintűek az indításhoz. A .form-inlineés .form-horizontalesetén inline-blockot használunk.

Amit tartalmaz

A bal oldalon látható az összes általunk támogatott alapértelmezett űrlapvezérlő. Íme a pontozott lista:

• szövegbevitel (szöveg, jelszó, e-mail stb.)
• jelölőnégyzetet
• rádió
• válassza ki
• többszörös kijelölés
• fájl bemenet
• textarea

Új alapértelmezések a v2.0-val

A 1.4-es verzióig a Bootstrap alapértelmezett űrlapstílusai a vízszintes elrendezést használták. A Bootstrap 2-vel eltávolítottuk ezt a megszorítást, hogy intelligensebb, jobban méretezhető alapértelmezések legyenek bármilyen űrlaphoz.

Újratervezett böngésző állapotok

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, és a helyére outlineegy jelet alkalmazunk a .box-shadow:focus

Űrlap érvényesítése

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>

Bemenetek elő- és hozzáfűzése

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.

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

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.

Soron belüli űrlapok és hozzáfűzés/előbefűzés

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.

Űrlap súgószövege

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

Gombok a műveletekhez

Megállapodás szerint a gombokat csak műveletekhez, míg a hiperhivatkozásokat objektumokhoz kell használni. Például a „Letöltés” ​​egy gomb, míg a „legutóbbi tevékenység” egy hivatkozás.

Horgonyokhoz és formákhoz

A gombstílusok bármire alkalmazhatók az .btnalkalmazottal. Általában azonban ezeket csak a <a>és <button>elemekre érdemes alkalmazni.

Megjegyzés: Minden gombnak tartalmaznia kell az .btnosztályt. <button>A konzisztencia érdekében a gombstílusokat és <a>az elemeket kell alkalmazni .

Több méretben

Nagyobb vagy kisebb gombokat szeretne? Fogadd el!

Elsődleges intézkedés Akció

Elsődleges intézkedés Akció

Letiltott állapot

Letiltott gombok esetén használja .btn-disabledhivatkozásokhoz és :disabledelemekhez <button>.

Elsődleges intézkedés Akció

Elsődleges intézkedés Akció

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

Az IE9-ben minden gombon eldobjuk a színátmenetet a lekerekített sarkok javára, mivel az IE9 nem vágja le a háttér színátmeneteit a sarkokra.

Ehhez kapcsolódóan az IE9 kijavítja a letiltott buttonelemeket, és csúnya szövegárnyékkal szürkíti meg a szöveget – ezt sajnos nem tudjuk javítani.

Spriteként épült

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.

Hogyan kell használni

A 2.0.0 verzióban úgy döntöttünk, hogy minden ikonunkhoz <i>címkét használunk, 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> 

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

Használati esetek

Az ikonok nagyszerűek, de hol lehet őket használni? Íme néhány ötlet:

• Vizuális eszközként az oldalsáv navigációjához
• Egy tisztán ikonvezérelt navigációhoz
• A gombokért, amelyek segítenek átadni egy művelet jelentését
• Linkekkel, amelyek segítségével megoszthatja a környezetet a felhasználó célhelyén

Lényegében bárhová elhelyezhet egy <i>címkét, elhelyezhet egy ikont.

Frissítés Pénztár Töröl

Megjegyzés Beállítások Több információ