Bazinis CSS

Be pastolių, pagrindiniai HTML elementai yra stilizuoti ir patobulinti išplečiamomis klasėmis, kad būtų suteikta nauja, nuosekli išvaizda ir pojūtis.

Antraštės ir teksto kopija

Tipografinis mastelis

Visas tipografinis tinklelis yra pagrįstas dviem Less kintamaisiais mūsų kintamieji.less faile: @baseFontSizeir @baseLineHeight. Pirmasis yra pagrindinis šrifto dydis, naudojamas visame pasaulyje, o antrasis yra pagrindinės linijos aukštis.

Naudojame tuos kintamuosius ir šiek tiek matematikos, kad sukurtume visų tipų paraštes, užpildus ir linijų aukštį ir dar daugiau.

Turinio teksto pavyzdys

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.

Pagrindinio teksto kopija

Išryškinkite pastraipą pridėdami .lead.

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

h1. 1 antraštė

h2. 2 antraštė

h3. 3 antraštė

h4. 4 antraštė

h5. 5 antraštė
h6. 6 antraštė

Kirčiavimas, adresas ir santrumpa

Elementas Naudojimas Neprivaloma
<strong> Už teksto fragmento pabrėžimą su svarbiu Nė vienas
<em> Už teksto fragmento pabrėžimą su kirčiavimu Nė vienas
<abbr> Apvynioja santrumpas ir akronimus, kad būtų rodoma išplėstinė versija užvedus pelės žymeklį

Įtraukite pasirenkamą titleišplėstojo teksto atributą

Naudokite .initialismklasę didžiųjų raidžių santrumpos.
<address> Dėl artimiausio protėvio kontaktinės informacijos arba viso darbo Išsaugokite formatavimą užbaigdami visas eilutes<br>

Naudojant kirčiavimą

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.

Pastaba: nedvejodami naudokite <b>ir <i>HTML5, tačiau jų naudojimas šiek tiek pasikeitė. <b>skirtas paryškinti žodžius ar frazes, nesuteikiant papildomos svarbos, o <i>dažniausiai skirtas balsui, techniniams terminams ir pan.

Adresų pavyzdžiai

Pateikiame du pavyzdžius, kaip <address>galima naudoti žymą:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Visas vardas
[email protected]

Santrumpos pavyzdžiai

Santrumpos su titleatributu turi šviesiai punktyruotą apatinę kraštinę ir pagalbos žymeklį užvedus pelės žymeklį. Tai suteikia naudotojams papildomos informacijos, kad kažkas bus rodoma užvedus pelės žymeklį.

Pridėkite initialismklasę prie santrumpos, kad padidintumėte tipografijos harmoniją, suteikdami jai šiek tiek mažesnį teksto dydį.

HTML yra geriausias dalykas nuo pjaustytos duonos.

Žodžio atributas santrumpa yra attr .

Blokinės citatos

Elementas Naudojimas Neprivaloma
<blockquote> Bloko lygio elementas, skirtas turiniui cituoti iš kito šaltinio

Pridėkite citešaltinio URL atributą

Naudojimas .pull-leftir .pull-rightklasės plaukiojančioms parinktims
<small> Pasirenkamas elementas, skirtas pridėti naudotojui skirtą citatą, paprastai autorių su kūrinio pavadinimu Padėkite <cite>aplink pavadinimą arba šaltinio pavadinimą

Norėdami įtraukti blokinę citatą, apvyniokite <blockquote>bet kurį HTML kaip citatą. Tiesioms citatoms rekomenduojame <p>.

Įtraukite pasirenkamą <small>elementą, kad nurodytumėte šaltinį, ir prieš jį gausite brūkšnelį &mdash;stiliaus tikslais.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante venenatis. </p>
  3. <small> Kažkas žinomas </small>
  4. </blockquote>

Blokų kabučių pavyzdys

Numatytosios blokinės kabutės formuojamos taip:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante venenatis.

Kažkas, žinomas „ Darbo kūne“.

Norėdami perkelti savo bloko citatą į dešinę, pridėkite class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante venenatis.

Kažkas, žinomas „ Darbo kūne“.

Sąrašai

Neužsakyta

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ir masa
  • 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

Nestiliuotas

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ir masa
  • 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

Užsakyta

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem ir masa
  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

apibūdinimas

<dl>

Aprašų sąrašai
Aprašų sąrašas puikiai tinka terminams apibrėžti.
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.

Horizontalus aprašymas

<dl class="dl-horizontal">

Aprašų sąrašai
Aprašų sąrašas puikiai tinka terminams apibrėžti.
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.

Galvas aukštyn! Horizontaliuose aprašų sąrašuose bus sutrumpinti terminai, kurie yra per ilgi, kad tilptų kairiajame stulpelyje text-overflow. Siauresnėse peržiūros srityse jie pasikeis į numatytąjį sudėtinį išdėstymą.

Inline

Įterptuosius kodo fragmentus apvyniokite <code>.

  1. Pavyzdžiui , <code> sekcija < / code > turėtų būti įterpta į eilutę .

Pagrindinis blokas

Naudokite <pre>kelioms kodo eilutėms. Kad būtų galima tinkamai atvaizduoti, kode būtinai pašalinkite kampinius skliaustus.

<p>Teksto pavyzdys čia...</p>
  1. <prieš>
  2. <p>Teksto pavyzdys čia...</p>
  3. </pre>

Pastaba: kodą būtinai palikite <pre>žymose kuo arčiau kairės; jis parodys visus skirtukus.

Pasirinktinai galite pridėti .pre-scrollableklasę, kuri nustatys maksimalų 350 pikselių aukštį ir pateiks y ašies slinkties juostą.

Google Prettify

Paimkite tą patį <pre>elementą ir pridėkite dvi pasirenkamas klases, kad pagerintumėte atvaizdavimą.

  1. <p> Teksto pavyzdys čia... </p>
  1. <pre class = "gražus atspaudas
  2. linenums" >
  3. <p>Teksto pavyzdys čia...</p>
  4. </pre>

Atsisiųskite „google-code-prettify“ ir peržiūrėkite „readme“, kaip naudoti.

Lentelės žymėjimas

Žyma apibūdinimas
<table> Apvyniojimo elementas duomenims rodyti lentelės formatu
<thead> Sudėtinio rodinio elementas lentelės antraštės eilutėms ( <tr>), skirtas lentelės stulpeliams pažymėti
<tbody> Sudėtinio rodinio elementas lentelės eilutėms ( <tr>) lentelės turinyje
<tr> Sudėtinio rodinio elementas lentelės langelių rinkiniui ( <td>arba <th>), kuris rodomas vienoje eilutėje
<td> Numatytasis lentelės langelis
<th> Specialus lentelės langelis stulpelio (arba eilutės, atsižvelgiant į taikymo sritį ir vietą) etiketėms
Turi būti naudojamas a<thead>
<caption> Lentelėje esančios informacijos aprašymas arba santrauka, ypač naudinga ekrano skaitytuvams
  1. <lentelė>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Lentelės parinktys

vardas Klasė apibūdinimas
Numatytas Nė vienas Jokių stilių, tik stulpeliai ir eilutės
Pagrindinis .table Tik horizontalios linijos tarp eilučių
Apribota .table-bordered Suapvalina kampus ir prideda išorinį kraštą
Zebra-juosta .table-striped Prideda šviesiai pilką fono spalvą į nelygines eilutes (1, 3, 5 ir tt)
Sutirštintas .table-condensed Vertikalus užpildas perpjaunamas per pusę, nuo 8 iki 4 pikselių, visuose tdir thelementuose

Lentelių pavyzdžiai

1. Numatytieji lentelės stiliai

Lentelės automatiškai formuojamos tik keliomis kraštinėmis, kad būtų užtikrintas skaitomumas ir išlaikyta struktūra. Naudojant 2.0, .tableklasė yra būtina.

  1. <lentelės klasė = "lentelė" >
  2. </table>
# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @twitter

2. Dryžuotas stalas

Pamėginkite savo stalus pridėję zebrų juosteles – tiesiog pridėkite .table-stripedklasę.

Pastaba: dryžuotose lentelėse naudojamas :nth-childCSS parinkiklis ir jis nepasiekiamas IE7-IE8.

  1. <table class = "stalo lentelė dryžuota" >
  2. </table>
# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @twitter

3. Lentelė su apvadu

Estetiniais tikslais pridėkite rėmelius aplink visą stalą ir užapvalintus kampus.

  1. <table class = "lentelė su lentelės kraštais" >
  2. </table>
# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
ženklas Otto @getbootstrap
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @twitter

4. Sutrumpintas stalas

Padarykite savo lenteles kompaktiškesnes pridėdami .table-condensedklasę, kad lentelės langelių užpildymas būtų sumažintas per pusę (nuo 8 iki 4 pikselių).

  1. <table class = "sutraukta lentelė" >
  2. </table>
# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @twitter

5. Sujunkite juos visus!

Nesivaržykite derinti bet kurią iš lentelės klasių, kad gautumėte skirtingą išvaizdą, naudodami bet kurią iš galimų klasių.

  1. <table class = "stalo lentelės juostelėmis lentelės su apvadu lentelės sutrumpintas" >
  2. ...
  3. </table>
Pilnas vardas
# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @twitter

Lankstus HTML ir CSS

Geriausia „Bootstrap“ formų dalis yra ta, kad visi jūsų įvesties elementai ir valdikliai atrodo puikiai, nesvarbu, kaip juos kuriate savo žymėjime. Perteklinio HTML nereikia, tačiau pateikiame šablonus tiems, kuriems jo reikia.

Sudėtingesni maketai pateikiami su glaustomis ir keičiamo mastelio klasėmis, kad būtų lengva formuoti ir susieti įvykius, todėl esate aprėpti kiekviename žingsnyje.

Įtraukti keturi išdėstymai

„Bootstrap“ palaiko keturių tipų formų išdėstymus:

  • Vertikalus (numatytasis)
  • Paieška
  • Inline
  • Horizontalus

Įvairių tipų formų išdėstymams reikia šiek tiek pakeisti žymėjimą, tačiau patys valdikliai išlieka ir veikia taip pat.

Valdymo būsenos ir kt

„Bootstrap“ formose yra visų pagrindinių formų valdiklių, pvz., įvesties, tekstinės srities ir pasirinkimo, kurių tikitės, stiliai. Tačiau jame taip pat yra keletas pasirinktinių komponentų, pvz., pridėtų ir pridėtų įvesčių bei žymimųjų laukelių sąrašų palaikymas.

Tokios būsenos kaip klaida, įspėjimas ir sėkmė yra įtrauktos į kiekvieną formos valdymo tipą. Taip pat yra neįgaliesiems skirtų valdiklių stiliai.

Keturių tipų formos

„Bootstrap“ suteikia paprastą žymėjimą ir stilius keturiems įprastų žiniatinklio formų stiliams.

vardas Klasė apibūdinimas
Vertikalus (numatytasis) .form-vertical (nebūtina) Sukrautos, kairėje sulygiuotos etiketės virš valdiklių
Inline .form-inline Kairėje sulygiuotos etiketės ir eilutinio bloko valdikliai kompaktiškam stiliui
Paieška .form-search Ypatingai suapvalinta teksto įvestis, užtikrinanti tipišką paieškos estetiką
Horizontalus .form-horizontal Paslinkite į kairę, dešinėje sulygiuotas etiketes toje pačioje eilutėje kaip ir valdikliai

Formų pavyzdžiai naudojant tik formų valdiklius, be papildomo žymėjimo

Pagrindinė forma

Išmanūs ir lengvi numatytieji nustatymai be papildomo žymėjimo.

Čia yra bloko lygio pagalbos teksto pavyzdys.

  1. <form class = "gerai" >
  2. <label> Etiketės pavadinimas </label>
  3. <input type = "text" class = "span3" placeholder = "Įveskite ką nors..." >
  4. <span class = "help-block" > Čia yra bloko lygio pagalbos teksto pavyzdys. </span>
  5. <label class = "žymės langelis" >
  6. <input type = "checkbox" > Patikrinkite mane
  7. </label>
  8. <button type = "submit" class = "btn" > Pateikti </button>
  9. </form>

Paieškos forma

Pridėti .form-searchprie formos ir .search-queryprie input.

  1. <form class = "šulinės formos paieška" >
  2. <input type = "text" class = "įvesties terpės paieškos užklausa" >
  3. <button type = "submit" class = "btn" > Ieškoti </button>
  4. </form>

Įdėta forma

Pridėkite .form-inlinevertikalų formų valdiklių lygiavimą ir tarpus, kad būtų patobulintas.

  1. <form class = "gerai forma-inline" >
  2. <input type = "text" class = "input-small" placeholder = "El. paštas" >
  3. <input type = "slaptažodis" class = "input-small" placeholder = "Slaptažodis" >
  4. <label class = "žymės langelis" >
  5. <input type = "checkbox" > Prisiminti mane
  6. </label>
  7. <button type = "submit" class = "btn" > Prisijungti </button>
  8. </form>

Horizontalios formos

Dešinėje rodomi visi numatytieji formų valdikliai, kuriuos palaikome. Štai sąrašas su ženkleliais:

  • teksto įvestis (tekstas, slaptažodis, el. paštas ir kt.)
  • žymimasis langelis
  • radijas
  • pasirinkite
  • kelis pasirinkimus
  • failo įvestis
  • teksto sritis

Be laisvos formos teksto, bet kokia HTML5 teksto įvestis atrodo tokia.

Žymėjimo pavyzdys

Atsižvelgiant į aukščiau pateiktą formos išdėstymo pavyzdį, čia yra žymėjimas, susietas su pirmąja įvesties ir valdymo grupe. , .control-group, .control-labelir .controlsklasės yra būtinos kuriant stilių.

  1. <form class = "horizontali forma" >
  2. <laukų rinkinys>
  3. <legend> Legendos tekstas </legend>
  4. <div class = "kontrolinė grupė" >
  5. <label class = "control-label" for = "input01" > Teksto įvestis </label>
  6. <div class = "valdikliai" >
  7. <įvesties tipas = "tekstas" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Pagalbinis pagalbos tekstas </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Formos valdymo būsenos

„Bootstrap“ turi naršyklės palaikomų fokusavimo ir disabledbūsenų stilius. Pašaliname numatytąjį žiniatinklio rinkinį outlineir box-shadowvietoj jo pritaikome :focus.


Formos patvirtinimas

Tai taip pat apima klaidų, įspėjimų ir sėkmės patvirtinimo stilius. Norėdami naudoti, pridėkite klaidos klasę prie aplinkinių .control-group.

  1. <laukų rinkinys
  2. class = "kontrolės grupės klaida" >
  3. </fieldset>
Čia kažkokia vertybė
Galbūt kažkas nutiko
Ištaisykite klaidą
Oho!
Oho!

Formos valdiklių išplėtimas

Pridėkite ir pridėkite įvestis

Įvesties grupės su pridėtu arba pridėtu tekstu yra paprastas būdas suteikti daugiau konteksto įvestims. Puikūs pavyzdžiai yra @ ženklas, skirtas Twitter naudotojų vardams arba $ finansams.


Žymės langeliai ir radijo imtuvai

Iki 1.4 versijos „Bootstrap“ reikėjo papildomai pažymėti žymimuosius laukelius ir radijo imtuvus, kad juos būtų galima sudėti. Dabar belieka pakartoti tai <label class="checkbox">, kas apvynioja <input type="checkbox">.

Taip pat palaikomi žymimieji langeliai ir radijo imtuvai. Tiesiog pridėkite .inlineprie bet kurio .checkboxarba .radioir viskas.


Eilutinės formos ir pridėti/pridėti

Norėdami naudoti įvesties priedą arba pridėti įvestį įterptoje formoje, būtinai įdėkite .add-onir inputtoje pačioje eilutėje be tarpų.


Formos pagalbos tekstas

Norėdami pridėti pagalbos tekstą savo formos įvestims, įtraukite įterptinį pagalbos tekstą su įvesties elementu <span class="help-inline">arba pagalbos teksto bloką su po jo.<p class="help-block">

Naudokite tas pačias .span*klases iš tinklelio sistemos įvesties dydžiams.

Taip pat galite naudoti statines klases, kurios nesusiejamos su tinkleliu, nepritaikomos prie reaguojančių CSS stilių arba atsižvelgia į įvairius valdiklių tipus (pvz., inputprieš select).

@

Štai šiek tiek pagalbos teksto

.00
Čia yra daugiau pagalbos teksto
$ .00

Pastaba: Etiketės supa visas parinktis, skirtas daug didesniam paspaudimo plotui ir patogesnei formai.

Mygtukas class="" apibūdinimas
btn Standartinis pilkas mygtukas su gradientu
btn btn-primary Suteikia papildomo vizualinio svorio ir identifikuoja pagrindinį veiksmą mygtukų rinkinyje
btn btn-info Naudojamas kaip alternatyva numatytiesiems stiliams
btn btn-success Nurodo sėkmingą arba teigiamą veiksmą
btn btn-warning Nurodo, kad atliekant šį veiksmą reikia imtis atsargumo priemonių
btn btn-danger Nurodo pavojingą arba galimai neigiamą veiksmą
btn btn-inverse Alternatyvus tamsiai pilkas mygtukas, nesusietas su semantiniu veiksmu ar naudojimu

Veiksmų mygtukai

Paprastai mygtukai turėtų būti naudojami tik veiksmams, o hipersaitai turi būti naudojami objektams. Pavyzdžiui, „Atsisiųsti“ turėtų būti mygtukas, o „naujausia veikla“ – nuoroda.

Mygtukų stiliai gali būti taikomi bet kam, kai taikoma .btnklasė. Tačiau paprastai tai norėsite taikyti tik <a>ir <button>elementams.

Kelių naršyklių suderinamumas

IE9 neapkarpo fono gradientų užapvalintais kampais, todėl jį pašaliname. Su tuo susiję, IE9 išjungia išjungtus buttonelementus, todėl tekstas tampa pilkas su bjauriu teksto šešėliu, kurio negalime ištaisyti.

Keli dydžiai

Mėgstate didesnius ar mažesnius mygtukus? Pridėkite .btn-large, .btn-small, arba .btn-minidu papildomus dydžius.


Neįgalus būsena

Jei mygtukai neleidžiami, pridėkite .disabledklasę prie nuorodų ir elementų disabledatributą .<button>

Pirminė nuoroda Nuoroda

Galvas aukštyn! Čia mes naudojame .disabledkaip naudingumo klasę, panašią į bendrą .activeklasę, todėl priešdėlio nereikia.

Viena klasė, kelios žymos

Naudokite .btnklasę elemente <a>, <button>, arba .<input>

Nuoroda
  1. <a class = "btn" href = "" > Nuoroda </a>
  2. <button class = "btn" type = "pateikti" >
  3. Mygtukas
  4. </button>
  5. <įvesties klasė = "btn" tipas = "mygtukas"
  6. reikšmė = "Įvestis" >
  7. <input class = "btn" type = "pateikti"
  8. value = "Pateikti" >

Kaip geriausia praktika, pabandykite suderinti elementą pagal kontekstą, kad būtų užtikrintas tinkamas kelių naršyklių pateikimas. Jei turite , mygtukui inputnaudokite .<input type="submit">

  • ikona-stiklas
  • ikona-muzika
  • piktogramų paieška
  • ikona-vokas
  • piktograma-širdis
  • piktograma-žvaigždė
  • piktograma-žvaigždė-tuščia
  • piktograma-vartotojas
  • ikona-filmas
  • piktograma-didelė
  • ikona-oji
  • piktogramų sąrašas
  • piktograma - gerai
  • piktograma-pašalinti
  • piktogramos priartinimas
  • piktograma-mažinti
  • piktograma išjungta
  • piktograma-signalas
  • piktograma-sraigtelis
  • piktograma-šiukšliadėžė
  • piktograma-namai
  • piktograma-failas
  • ikona-laikas
  • ikona-kelias
  • icon-download-alt
  • piktogramos atsisiuntimas
  • piktogramos įkėlimas
  • piktograma-gautieji
  • piktograma-žaidimas-ratas
  • piktograma-pakartojimas
  • piktograma-atnaujinimas
  • icon-list-alt
  • piktograma-užraktas
  • piktograma-vėliava
  • piktogramos-ausinės
  • piktogramos garsumo išjungimas
  • piktogramos garsumo mažinimas
  • piktogramos garsumo padidinimas
  • piktograma-qrcode
  • piktograma-brūkšninis kodas
  • piktograma-žyma
  • piktogramos-žymos
  • ikonų knyga
  • piktograma-žymė
  • piktogramos spausdinimas
  • piktograma-kamera
  • piktograma-šriftas
  • paryškinta piktograma
  • piktograma kursyvu
  • piktograma-tekstas-aukštis
  • piktograma-teksto plotis
  • piktograma-lygiuoti-kairėn
  • piktograma-lygiuoti-centras
  • piktogramą lygiuoti į dešinę
  • piktograma-lygiuoti-išlyginti
  • piktogramų sąrašas
  • piktograma-įtrauka-kairė
  • piktograma-įtrauka-dešinė
  • piktograma-facetime-video
  • piktograma-paveikslas
  • piktograma-pieštukas
  • piktograma-žemėlapis-žymeklis
  • koreguoti piktogramą
  • piktogramos atspalvis
  • piktograma-redaguoti
  • piktograma-dalintis
  • piktogramos patikrinimas
  • piktograma-judėjimas
  • piktograma-žingsnis-atgal
  • piktograma-greitai atgal
  • piktograma atgal
  • piktograma-žaidimas
  • piktograma-pauzė
  • piktograma-stop
  • piktograma pirmyn
  • piktograma - greitas sukimas pirmyn
  • piktograma-žingsnis pirmyn
  • piktogramos išstūmimas
  • piktograma-ševronas-kairėje
  • piktograma-ševronas-dešinė
  • piktograma-pliusas-ženklas
  • piktograma-minuso ženklas
  • piktograma-pašalinti-ženklas
  • piktograma-gerai-ženklas
  • piktograma-klausimas-ženklas
  • piktograma-informacija-ženklas
  • piktograma-ekrano kopija
  • piktograma-pašalinti-apskritimas
  • piktograma-gerai-ratas
  • piktograma-uždrausti-ratas
  • piktograma-rodyklė-kairėn
  • piktograma-rodyklė-dešinėn
  • piktograma-rodyklė aukštyn
  • piktograma-rodyklė žemyn
  • icon-share-alt
  • piktograma-keisti dydį-pilna
  • piktograma-keisti dydį-maža
  • piktograma-plius
  • piktograma-minusas
  • piktograma-žvaigždutė
  • piktograma-šauktukas-ženklas
  • ikona-dovana
  • piktogramos lapelis
  • piktograma-ugnis
  • ikona-akis-atmerkta
  • ikona-akis-užmerkti
  • piktograma-įspėjamasis ženklas
  • ikona-plokštuma
  • piktograma-kalendorius
  • ikona-atsitiktinė
  • piktograma-komentaras
  • ikona-magnetas
  • piktograma-chevron-up
  • icon-chevron-down
  • piktograma-retweet
  • piktograma-pirkinių krepšelis
  • piktograma-aplankas-uždaryti
  • piktograma-aplankas-atidaryti
  • piktograma-keisti dydį-vertikali
  • piktograma-keisti dydį-horizontalus
  • piktograma-hdd
  • ikona-buliaragis
  • piktograma-varpelis
  • piktograma-sertifikatas
  • piktograma-nykščiai aukštyn
  • piktograma-nykščiai žemyn
  • piktograma-ranka-dešinė
  • piktograma-ranka-kairėje
  • piktograma-ranka aukštyn
  • piktograma ranka žemyn
  • piktograma-apskritimas-rodyklė dešinėn
  • piktograma-apskritimas-rodyklė į kairę
  • piktograma-apskritimas-rodyklė aukštyn
  • piktograma-apskritimas-rodyklė žemyn
  • ikona-gaublys
  • piktograma-veržliaraktis
  • piktogramos-užduotys
  • piktograma-filtras
  • piktograma-portfelis
  • piktograma-visas ekranas

Pastatytas kaip sprite

Užuot padarę kiekvieną piktogramą kaip papildomą užklausą, sudarėme jas į sprite – vaizdų krūvą viename faile, kuriame vaizdams nustatyti naudojamas CSS background-position. Tai yra tas pats metodas, kurį naudojame Twitter.com ir jis mums puikiai pasiteisino.

Visose piktogramų klasėse yra priešdėlis, .icon-skirtas tinkamam vardų tarpui ir taikymo sričiai, panašiai kaip ir kiti mūsų komponentai. Tai padės išvengti konfliktų su kitomis priemonėmis.

„ Glyphicons “ suteikė mums galimybę naudotis „Halflings“ rinkiniu mūsų atvirojo kodo įrankių rinkinyje, jei dokumentuose pateikiame nuorodą ir kreditą. Apsvarstykite galimybę tai padaryti savo projektuose.

Kaip naudoti

„Bootstrap“ naudoja <i>žymą visoms piktogramoms, tačiau jos neturi raidžių klasės – tik bendrinamas priešdėlis. Norėdami naudoti, įdėkite šį kodą beveik bet kur:

  1. <i class = "piktogramų paieška" ></i>

Taip pat yra apverstų (baltų) piktogramų stilių, paruoštų naudojant vieną papildomą klasę:

  1. <i class = "piktograma-paieškos piktograma-balta" ></i>

Galite pasirinkti iš 140 piktogramų klasių. Tiesiog pridėkite <i>žymą su tinkamomis klasėmis ir viskas. Visą sąrašą galite rasti sprites.less arba čia pat šiame dokumente.

Galvas aukštyn! Kai naudojate šalia teksto eilučių, pvz., mygtukų ar naršymo nuorodų, po <i>žymos palikite tarpą, kad būtų tinkami tarpai.

Naudojimo atvejai

Piktogramos yra puikios, bet kur jas panaudoti? Štai keletas idėjų:

  • Kaip vaizdiniai jūsų šoninės juostos naršymo elementai
  • Tik piktogramomis valdomai navigacijai
  • Mygtukai, padedantys perteikti veiksmo prasmę
  • Su nuorodomis, skirtomis naudotojo paskirties vietos kontekstui bendrinti

Iš esmės visur, kur galite įdėti <i>žymą, galite įdėti piktogramą.

Pavyzdžiai

Naudokite juos mygtukuose, mygtukų grupėse įrankių juostai, naršymui arba pridėtoms formoms.