Gyorsindítási példák

Gyors sablonokra van szüksége? Tekintse meg ezeket az általunk összeállított alapvető példákat:

Alapértelmezett rács

A Bootstrap részeként biztosított alapértelmezett rácsrendszer egy 940 képpont széles, 16 oszlopos rács. Ez a népszerű 960-as rácsrendszer egy íze, de a bal és a jobb oldalon lévő további margó/párnázás nélkül.

Példa rácsjelölésre

Amint az itt látható, egy alapvető elrendezés két „oszlopból” is létrehozható, amelyek mindegyike a rácsrendszerünk részeként meghatározott 16 alaposzlop közül többen átfogható. További változatokért tekintse meg az alábbi példákat.

<div class="row">
  <div class="span6">
    ...
  </div>
  <div class="span10">
    ...
  </div>
</div>

Oszlopok egymásba ágyazása

Ha szükséges, helyezze be a tartalmat .rowegy meglévő oszlopon belüli létrehozásával.

Példa beágyazott oszlopokra

<div class="row">
  <div class="span12">
    Az oszlop 1. szintje
    <div class="row">
      <div class="span6">
        2. szint
      </div>
      <div class="span6">
        2. szint
      </div>
    </div>
  </div>
</div>

Roll a saját rács

A Bootstrapbe beépített néhány változó található az alapértelmezett 940 képpontos rácsrendszer testreszabásához. Egy kis testreszabással módosíthatja az oszlopok méretét, ereszcsatornáit és a tárolót, amelyben vannak.

A rács belsejében

A rácsrendszer módosításához szükséges változók jelenleg mind a -ben találhatók variables.less.

Most a testreszabáshoz

A rács módosítása a három @grid-*változó megváltoztatását és a Less fájlok újrafordítását jelenti.

A Bootstrap egy legfeljebb 24 oszlopból álló rácsrendszer kezelésére van felszerelve; az alapértelmezett érték csak 16. Így néznek ki a rácsváltozók egy 24 oszlopos rácsra szabva.

@rácsColumns: 24;
@rácsColumnWidth: 20px;
@gridGutterWidth: 20px;

Az újrafordítás után készen állsz!

Fix elrendezés

Az alapértelmezett és egyszerű, 940 képpont széles, középre igazított elrendezés szinte minden webhelyhez vagy oldalhoz, amelyet egyetlen <div.container>.

<test>
  <div class="container">
    ...
  </div>
</body>

Folyékony elrendezés

Alternatív, rugalmas, gördülékeny oldalstruktúra minimális és maximális szélességekkel és bal oldali oldalsávval. Nagyszerű alkalmazásokhoz és dokumentumokhoz.

<test>
  <div class="container-fluid">
    <div class="sidebar">
      ...
    </div>
    <div class="content">
      ...
    </div>
  </div>
</body>

Címsorok és másolás

Szabványos tipográfiai hierarchia a weboldalak strukturálásához.

A teljes tipográfiai rács két Less változón alapul a változók.less fájlunkban: @basefontés @baseline. 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.

h1. 1. címsor

h2. 2. címsor

h3. 3. címsor

h4. 4. címsor

h5. 5. címsor

h6. 6. címsor

Példa bekezdés

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.

Példa címsornak van alcíme…

Egyéb elemeket

Hangsúlyok, címek és rövidítések használata

<strong> <em> <address> <abbr>

Mikor kell használni

A kiemelő címkéket ( <strong>és <em>) kell használni egy szó vagy kifejezés további fontosságának vagy hangsúlyozásának jelzésére a környező példányhoz képest. Használja <strong>fontosságra és <em>stressz hangsúlyozására .

Kiemelés egy bekezdésben

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: Továbbra is rendben van a <b>és <i>címkék használata a HTML5-ben, és nem kell félkövérre, illetve dőltre szedni őket (bár ha van szemantikusabb elem, használja azt). <b>célja, hogy szavakat vagy kifejezéseket emeljen ki anélkül, hogy további jelentőséget tulajdonítana, míg <i>többnyire hang, szakkifejezések stb.

Címek

Az <address>elemet a legközelebbi ősének vagy a munka egészének elérhetőségi adataihoz használják. Íme két példa a használatára:

Megjegyzés: A tartalom megfelelő felépítése érdekében minden <address>sornak sortöréssel ( ) kell végződnie, <br />vagy blokkszintű címkébe kell csomagolnia (pl. ).<p>

Rövidítések

A rövidítésekhez és mozaikszavakhoz használja a ( HTML5 -ben elavult ) <abbr>címkét . Helyezze a gyorsított űrlapot a címkébe, és adjon meg egy címet a teljes névhez.<acronym>

Blokkidézetek

<blockquote> <p> <small>

Hogyan kell idézni

Idézet beillesztéséhez csavarja <blockquote>körbe <p>és <small>címkézze. Használja az <small>elemet a forrás hivatkozására, és előtte egy em kötőjelet kap —.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
  <small>Dr. Julius Hibbert</small>
</blockquote>

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.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ásdl

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.

Kód

<code> <pre>

Két egyszerű címkével stílusosan módosíthatja a kódot. A javascript használatával még több fantasztikusat szeretne elérni, ha bedobja a Google kód szépítő könyvtárát, és már kész is.

Kód bemutatása

A kód, blokkok vagy csak szövegrészletek stílusosan jeleníthetők meg, pusztán a megfelelő címkébe csomagolva. Több sort átívelő kódblokkok esetén használja az <pre>elemet. Inline kódhoz használja az <code>elemet.

<div>
  <h1>Címsor</h1>
  <p>Itt van valami...</p>
</div>

<div>
  <h1>Címsor</h1>
  <p>Itt van valami...</p>
</div>

Soron belüli címkék

<span class="label">

Hívja fel a figyelmet vagy jelölje meg bármely kifejezést a törzsszövegében.

Címkézz fel bármit

Valaha szüksége volt egy ilyen divatos Új! vagy Fontos zászlók kód írásakor? Nos, most megvannak. A következőket tartalmazza alapértelmezés szerint:

Médiarács

Különböző méretű bélyegképek megjelenítése alacsony HTML-használattal és minimális stílusokkal rendelkező oldalakon.

Példa miniatűrökre

A bélyegképek .media-gridbármilyen méretűek lehetnek, de akkor működnek a legjobban, ha közvetlenül a beépített Bootstrap rácsrendszerre vannak leképezve. A 90-es, 210-es és 330-as képszélességek néhány pixeles kitöltéssel kombinálva megegyeznek a .span2, .span4, és .span6oszlopméretekkel.

Nagy

Közepes

Kicsi

Kódolásuk

A médiarácsok könnyen használhatók, és meglehetősen egyszerűek a jelölési oldalon. A méretük kizárólag a mellékelt képek méretén alapul.

<ul class="media-grid">
  <li>
    <a href="#">
      <img class="thumbnail" src="https://placehold.it/330x230" alt="">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumbnail" src="https://placehold.it/330x230" alt="">
    </a>
  </li>
</ul>

Építőasztalok

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Az asztalok nagyszerűek – sok mindenre. A nagyszerű tábláknak azonban egy kis jelölési szeretetre van szükségük ahhoz, hogy hasznosak, méretezhetők és olvashatóak legyenek (kódszinten). Íme néhány tipp a segítségedre.

Az oszlopfejléceket mindig <thead>úgy csomagolja be, hogy a hierarchia <thead>> <tr>> legyen <th>.

Az oszlopfejlécekhez hasonlóan a táblázat összes törzstartalmát a-ba kell csomagolni, <tbody>így a hierarchia <tbody>> <tr>> <td>.

Példa: Alapértelmezett táblázatstílusok

Az olvashatóság és a szerkezet fenntartása érdekében minden táblázat automatikusan stílusossá válik, csak a lényeges szegélyekkel. Nincs szükség extra osztályok vagy attribútumok hozzáadására.

<tábla>
  ...
</table>

Példa: Sűrített asztal

A szűkebb helyeken több adatot igénylő táblázatok esetében használja a sűrített ízt, amely felére csökkenti a párnázást. Szegélyekkel és zebracsíkokkal együtt is használható, csakúgy, mint az alapértelmezett táblázatstílusok.

Példa: Szegélyezett táblázat

Tedd asztalaid egy picit elegánsabbá a sarkok lekerekítésével, és minden oldalukon szegélyekkel.

<table class="bordered-table">
  ...
</table>

Példa: Zebracsíkos

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

Megjegyzés: A zebracsíkozás egy progresszív továbbfejlesztés, amely nem érhető el régebbi böngészőkhöz, például IE8-hoz és régebbiekhez.

<table class="zebra-striped">
  ...
</table>

Példa: Zebra-csíkos w/ TableSorter.js

Az előző példát figyelembe véve javítjuk táblázataink hasznosságát azáltal, hogy rendezési funkciót biztosítunk a jQuery és a Tablesorter bővítmény segítségével. Kattintson bármelyik oszlop fejlécére a rendezés módosításához.

<script src="js/jquery/jquery.tablesorter.min.js"></script>
<script>
  $(function() {
    $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
  });
</script>
<table class="zebra-striped">
  ...
</table>

Alapértelmezett stílusok

Minden űrlap alapértelmezett stílust kapott, hogy olvasható és méretezhető módon jelenítse meg őket. Stílusok állnak rendelkezésre a szövegbevitelhez, a kiválasztási listákhoz, a szövegterületekhez, a rádiógombokhoz és a jelölőnégyzetekhez, valamint a gombokhoz.

Halmozott űrlapok

Adja .form-stackedhozzá az űrlap HTML-kódjához, és a címkék a mezők tetején jelennek meg, nem pedig a bal oldalon. Ez nagyszerűen működik, ha az űrlapok rövidek, vagy ha két oszlopot tartalmaz a nehezebb űrlapokhoz.

Űrlapmezők méretei

inputBármilyen formát , select, vagy szélességet testreszabhat textareaúgy, hogy csak néhány osztályt ad hozzá a jelöléshez.

A v1.3.0-tól kezdve hozzáadtuk a rács alapú méretosztályokat az űrlapelemekhez. Kérjük, használja ezeket a meglévő .mini, .smallstb osztályokhoz.

Gombok

Konvencióként a gombokat műveletekhez, míg a hivatkozásokat objektumokhoz használják. Például a „Letöltés” ​​lehet egy gomb, a „legutóbbi tevékenység” pedig egy hivatkozás.

Alapértelmezés szerint minden gomb világosszürke stílus, de számos funkcionális osztály alkalmazható a különböző színstílusokhoz. Ezek az osztályok egy kék .primaryosztályt, egy világoskék .infoosztályt, egy zöld .successosztályt és egy piros .dangerosztályt tartalmaznak.

Példa gombok

A gombstílusok bármire alkalmazhatók az .btnalkalmazottal. Ezeket általában csak <a>a , <button>és a kiválasztott <input>elemekre szeretné alkalmazni. Így néz ki:

Alternatív méretek

Nagyobb vagy kisebb gombokat szeretne? Fogadd el!

Letiltott állapot

Azoknál a gomboknál, amelyek nem aktívak, vagy amelyeket az alkalmazás valamilyen okból letilt, használja a letiltott állapotot. Ez .disableda linkekre és :disabledaz <button>elemekre vonatkozik.

Linkek

Gombok

Mi az

Felső sávunk egy rögzített sáv, amely egy webhely logójának vagy nevének, elsődleges navigációjának és keresési űrlapjának ad helyet.

Testreszabható

A benne lévő összes elem és a teljes felső sáv is opcionális. Választhat, hogy belefoglal-e egy logót/nevet, navigációt, keresést és másodlagos navigációt – vagy ezek bármilyen kombinációját.

A legördülő listákat tartalmazza

A fő navigáció részeként lehetőséget adtunk legördülő menük hozzáadására a navigációhoz. Tekintse meg a fenti másodlagos navigációt (jobbra igazítva), hogy megtudja, hogyan működik. A legördülő címkék az aktuális oldalválasztás megjelenítését liis támogatják ..active

Fülek és tabletták

Hozzon létre egyszerű másodlagos navigációt a <ul>. A megfelelő osztály hozzáadásával válthat a lapok vagy tabletták között.

Kiválóan alkalmas tartalom alszakaszaihoz, például fiókbeállítási oldalainkhoz és felhasználói idővonalainkhoz a hasonló tartalmú oldalak közötti váltáshoz. Kapható füles vagy tabletta stílusban.

Példa az alapvető lapokra

A lapok használhatók normál navigációként (külső oldalak betöltése ugyanazon a lapon), vagy lapozható tartalomterületként a tartalompanelek kicseréléséhez. Van egy tabs bővítményünk , amivel ez utóbbit integrálhatjuk.

• itthon
• Profil
• üzenetek
• Beállítások
• Kapcsolatba lépni
• Ledob
  • Másodlagos link
  • Itt még valami
  • Még egy link

<ul class="tabs">
  <li class="active"><a href="#">Főoldal</a></li>
  <li><a href="#">Profil</a></li>
  <li><a href="#">Üzenetek</a></li>
  <li><a href="#">Beállítások</a></li>
  <li><a href="#">Kapcsolatfelvétel</a></li>
</ul>

Példa az alapvető tablettákra

• itthon
• Profil
• üzenetek
• Beállítások
• Kapcsolatba lépni

<ul class="pills">
  <li class="active"><a href="#">Főoldal</a></li>
  <li><a href="#">Profil</a></li>
  <li><a href="#">Üzenetek</a></li>
  <li><a href="#">Beállítások</a></li>
  <li><a href="#">Kapcsolatfelvétel</a></li>
</ul>

Zsemlemorzsa

A navigációs navigáció arra szolgál, hogy megmutassa a felhasználóknak, hol tartózkodnak az alkalmazáson vagy a webhelyen belül, de nem az elsődleges navigációhoz.

• itthon

• Kezdőlap /
• Középső oldal

• Kezdőlap /
• Középső oldal /
• Másik

• Kezdőlap /
• Középső oldal /
• Még egy /
• Ön itt van

<ul class="breadcrumb">
  <li><a href="#">Főoldal</a> <span class="divider">/</span></li>
  <li><a href="#">Középső oldal</a> <span class="divider">/</span></li>
  <li><a href="#">Még egy</a> <span class="divider">/</span></li>
  <li class="active">Itt vagy</li>
</ul>

Lapszámozás

Rendkívül leegyszerűsített és minimális stílusú oldalszámozás, amelyet az Rdio ihletett. A nagy blokkot nehéz kihagyni, könnyen méretezhető, és nagy kattintási területeket biztosít.

<div class="lapozás">
  <ul>
    <li class="prev letiltva"><a href="#">← Előző</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">Következő →</a></li>
  </ul>
</div>

Alapvető figyelmeztetések

.alert-message

Egysoros üzenetek egy művelet kudarcának, lehetséges kudarcának vagy sikerének kiemelésére. Formáknál különösen hasznos.

Szerezd meg a javascriptet »

Példa kód

<div class="alert-message warning">
  <a class="close" href="#">×</a>
  <p><strong>Szent guacamole!</strong> A legjobb, ha ellenőrizze magát, nem néz ki túl jól.</p>
</div>

Üzenetek blokkolása

.alert-message.block-message

A kis magyarázatot igénylő üzenetekhez bekezdésstílus-figyelmeztetéseink vannak. Ezek tökéletesek arra, hogy hosszabb hibaüzeneteket bugyborékoljanak, figyelmeztessék a felhasználót egy függőben lévő műveletre, vagy egyszerűen csak információkat mutassanak be, hogy nagyobb hangsúlyt kapjanak az oldalon.

Szerezd meg a javascriptet »

Példa kód

<div class="alert-message block-message warning">
  <a class="close" href="#">×</a>
  <p><strong>Szent guacamole! Ez egy figyelmeztetés!</strong> A legjobb, ha ellenőrizze magát, nem néz ki túl jól. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
  <div class="alert-actions">
    <a class="btn small" href="#">Végezze el ezt a műveletet</a> <a class="btn small" href="#">Vagy tegye ezt</a>
  </div>
</div>

Modálok

A modálok – párbeszédpanelek vagy átvilágítódobozok – kiválóan alkalmasak a kontextuális műveletekhez olyan helyzetekben, ahol fontos a háttér kontextusának megőrzése.

Szerezd meg a javascriptet »

Eszköztippek

A Twipsiek rendkívül hasznosak abban, hogy segítsenek a zavarodott felhasználónak, és a helyes irányba tereljék őket.

Szerezd meg a javascriptet »

Popovers

Használjon felugró ablakokat, hogy szöveg alatti információkat biztosítson az oldalnak az elrendezés befolyásolása nélkül.

Szerezd meg a javascriptet »

Elkezdeni

A javascript integrálása a Bootstrap könyvtárba rendkívül egyszerű. Az alábbiakban áttekintjük az alapokat, és néhány fantasztikus bővítményt kínálunk a kezdéshez!

Javascript dokumentumok megtekintése »

Amit tartalmaz

Keltsd életre a Bootstrap néhány elsődleges összetevőjét új egyéni bővítményekkel, amelyek együttműködnek a jQuery -vel és az Ender -rel . Javasoljuk, hogy bővítse és módosítsa azokat, hogy megfeleljenek saját fejlesztési igényeinek.

Javascript szükséges?

Dehogy! A Bootstrap mindenekelőtt CSS-könyvtárnak készült. Ez a javascript egy alapvető interaktív réteget biztosít a benne foglalt stílusok tetején.

Mindazonáltal azoknak, akiknek szükségük van javascriptre, a fenti beépülő modulokat biztosítjuk, hogy megértsék, hogyan lehet integrálni a Bootstrap-ot javascript-tel, és azonnali, egyszerű lehetőséget kínálunk az alapvető funkciókhoz.

További információért és néhány élő demó megtekintéséhez tekintse meg a bővítmény dokumentációs oldalát .