Tüpograafiline skaala

Kogu tüpograafiline ruudustik põhineb failis variables.less kahel Less muutujal: @baseFontSizeja @baseLineHeight. Esimene on läbivalt kasutatav põhifondi suurus ja teine ​​on baasjoone kõrgus.

Kasutame neid muutujaid ja mõningast matemaatikat kõigi meie tüüpide veeriste, polsterduste ja joonte kõrguste loomiseks ja palju muud.

Põhiteksti näide

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.

Rõhuasetuse kasutamine

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.

Märkus. Kasutage julgelt <b>ja <i>HTML5-s, kuid nende kasutus on veidi muutunud. <b>on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.

Näidisaadressid

Siin on kaks näidet selle kohta, kuidas <address>märgendit saab kasutada.

Näidislühendid

Lühendid on kujundatud suurtähtedega teksti ja heleda punktiirjoonega. Neil on ka abikursor hõljutamisel, nii et kasutajatel on lisamärguanne, et hõljutamisel näidatakse midagi.

HTML on parim asi pärast viilutatud leiba.

Sõna atribuut lühend on attr .

Plokktsitaadi lisamiseks mähkige tsitaadina <blockquote>ümber mis tahes HTML -i. Sirgete hinnapakkumiste jaoks soovitame <p>.

Lisage oma allikale viitamiseks valikuline <small>element ja saate —selle ette stiilimise eesmärgil kriipsu.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis. </p>
  <small> Keegi kuulus </small>
</blockquote>

Vaikimisi plokitsitaadid on kujundatud järgmiselt:

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis.

Keegi kuulus Body of Workis

Tsitaadi paremale ujumiseks lisage class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis.

Keegi kuulus Body of Workis

Tellimata

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Täisarv molestie lorem ja mass
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat juures
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Stiilita

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Täisarv molestie lorem ja mass
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat juures
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Tellitud

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Täisarv molestie lorem ja mass
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

Kirjeldus

<dl>

Kirjeldusloendid

Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida ja eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Järjekorras

Mähi tekstisisesed koodilõigud märgiga <code>.

Näiteks < code > jaotis < / code > tuleks ümbritseda tekstisisesena .  

Põhiplokk

Kasutage <pre>mitme koodirea jaoks. Õigeks renderdamiseks muutke kõik caretid unicode-märkideks.

<p>Näidistekst siin...</p>

<pre>
  <p>Näidistekst siin...</p>
</pre>

Märkus. Hoidke koodi <pre>siltide sees nii vasakule kui võimalik; see renderdab kõik vahelehed.

Google Prettify

Võtke sama <pre>element ja lisage täiustatud renderdamiseks kaks valikulist klassi.

<p> Näidistekst siin... </p>

<pre class = "ilus trükk 
     linenums" >
  <p>Näidistekst siin...</p>
</pre>

Laadige alla google-code-prettify ja vaadake lugemist, kuidas seda kasutada.

<tabel>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Tabelid kujundatakse automaatselt vaid mõne äärisega, et tagada loetavus ja säilitada struktuur. 2.0 puhul on .tableklass kohustuslik.

< tabeliklass = "tabel" > 
  …
</table>

Lisage sebraribad, lisades oma laudadele pisut elegantsi – lisage lihtsalt .table-stripedklass.

Märkus. Sprited-tabelid kasutavad :nth-childCSS-i valijat ja pole versioonides IE7-IE8 saadaval.

<table class = "tabel tabelitriibuline" > 
  …
</table>

Lisage esteetilistel eesmärkidel äärised ümber kogu laua ja ümarad nurgad.

<table class = "tabel tabeliga" > 
  …
</table>

Muutke oma tabelid kompaktsemaks, lisades .table-condensedklassi, et tabelilahtri polsterdus pooleks lõigata (8 pikslist 4 pikslile).

<table class = "tabel-kondenseeritud" > 
  …
</table>

Võite vabalt kombineerida mis tahes tabeliklasse, et saavutada erineva välimuse, kasutades mõnda olemasolevat klassi.

<table class = "tabel tabel-triibuline tabel-ääristatud tabel-kondenseeritud" > 
  ...
</table>

Paindlik HTML ja CSS

Bootstrapi vormide parim osa on see, et kõik teie sisendid ja juhtelemendid näevad suurepärased välja, olenemata sellest, kuidas te neid märgistuses koostate. Üleliigset HTML-i pole vaja, kuid pakume mustreid neile, kes seda vajavad.

Keerulisemate paigutustega on kaasas kokkuvõtlikud ja skaleeritavad klassid lihtsaks kujundamiseks ja sündmuste sidumiseks, nii et olete igal sammul kaetud.

Kaasas neli paigutust

Bootstrap toetab nelja tüüpi vormipaigutusi:

• Vertikaalne (vaikimisi)
• Otsing
• Järjekorras
• Horisontaalne

Erinevat tüüpi vormipaigutused nõuavad märgistuses mõningaid muudatusi, kuid juhtelemendid ise jäävad samaks ja käituvad samaks.

Kontrolli olekuid ja palju muud

Bootstrapi vormid sisaldavad stiile kõigi põhivormi juhtelementide jaoks, nagu sisend, tekstiala ja valik. Kuid see sisaldab ka mitmeid kohandatud komponente, nagu lisatud ja lisatud sisendid ning märkeruutude loendite tugi.

Olekud, nagu viga, hoiatus ja edu, on kaasatud igat tüüpi vormikontrolli jaoks. Kaasas on ka puudega juhtnuppude stiilid.

V2.0 puhul on meil vormistiilide jaoks kergemad ja nutikamad vaikeseaded. Ei mingit lisamärgistust, vaid vormi juhtelemendid.

Peegeldab WebKiti vaikestiile, lisage lihtsalt .form-searchümardatud otsinguväljade jaoks.

Sisendid on alustamiseks plokkide tasemel. .form-inlineJa puhul .form-horizontalkasutame tekstisisest plokki.

Mis on kaasas

Vasakul on näidatud kõik vormide vaikejuhtelemendid, mida me toetame. Siin on täppide loend:

• tekstisisestus (tekst, parool, e-post jne)
• märkeruut
• raadio
• vali
• mitu valikut
• faili sisend
• tekstiala

Uued vaikeseaded versiooniga 2.0

Kuni versioonini 1.4 kasutasid Bootstrapi vaikevormistiilid horisontaalset paigutust. Bootstrap 2-ga eemaldasime selle piirangu, et saada iga vormi jaoks nutikamaid ja skaleeritumaid vaikeseadeid.

Uuendatud brauseri olekud

Bootstrap sisaldab stiile brauseri toetatud fokuseeritud ja disabledolekute jaoks. Eemaldame vaikeveebikomplekti outlineja rakendame box-shadowselle asemele :focus.

Vormi kinnitamine

See sisaldab ka vigade, hoiatuste ja edu kinnitamise stiile. Kasutamiseks lisage veaklass ümbritsevale .control-group.

<väljakomplekt
  class = "kontrollrühma viga" >
  …
</fieldset>

Sisendite ette ja lisamine

Sisestusrühmad – lisatud või lisatud tekstiga – pakuvad lihtsat viisi sisenditele rohkem konteksti andmiseks. Suurepärased näited hõlmavad @-märki Twitteri kasutajanimede jaoks või $ rahanduse jaoks.

Märkeruudud ja raadiod

Kuni versioonini 1.4 nõudis Bootstrap märkeruutude ja raadiote ümber lisamärke, et neid virnastada. Nüüd on lihtne korrata seda <label class="checkbox">, mis ümbritseb <input type="checkbox">.

Toetatud on ka tekstisisesed märkeruudud ja raadiod. Lisage lihtsalt .inlinemis tahes .checkboxvõi .radioja oletegi valmis.

Tekstisisesed vormid ja lisamine/eelliitmine

Reasiseses vormis ette- või lisamissisendite kasutamiseks asetage kindlasti .add-onja inputsamale reale ilma tühikuteta.

Vormi abitekst

Vormisisendite abiteksti lisamiseks lisage sisestuselemendile tekstisisene abitekst <span class="help-inline">või abiteksti plokk koos <p class="help-block">sisestuselemendiga.

Toimingute nupud

Tavapäraselt tuleks nuppe kasutada ainult toimingute jaoks, hüperlinke aga objektide jaoks. Näiteks "Laadi alla" peaks olema nupp, samas kui "hiljutine tegevus" peaks olema link.

Ankrute ja vormide jaoks

Nupu stiile saab rakendusega kõigele .btnrakendada. Kuid tavaliselt soovite neid rakendada ainult <a>ja <button>elementidele.

Märkus. Kõik nupud peavad sisaldama .btnklassi. Järjepidevuse tagamiseks tuleks nuppude stiile <button>ja <a>elemente rakendada.

Mitu suurust

Kas soovite suuremaid või väiksemaid nuppe? Tehke seda!

Esmane tegevus Tegevus

Esmane tegevus Tegevus

Puudega olek

Keelatud nuppude puhul kasutage .btn-disabledlinkide ja elementide :disabledjaoks .<button>

Esmane tegevus Tegevus

Esmane tegevus Tegevus

Brauseriülene ühilduvus

IE9-s kaotame gradiendi kõikidel nuppudel ümarate nurkade kasuks, kuna IE9 ei kärbi tausta gradiente nurkadesse.

Seotud, IE9 jankkib keelatud buttonelemente, muutes teksti halliks ja vastiku tekstivarjuga – kahjuks ei saa me seda parandada.

Ehitatud spraitina

Selle asemel, et muuta iga ikoon lisataotluseks, oleme need koostanud spraitiks – hunnikuks pilte ühes failis, mis kasutab CSS-i piltide positsioneerimiseks background-position. See on sama meetod, mida kasutame Twitter.com-is ja see on meie jaoks hästi toiminud.

Kõikide ikoonide klasside eesliide on .icon-õige nimevahe ja ulatuse jaoks, sarnaselt meie teistele komponentidele. See aitab vältida konflikte teiste tööriistadega.

Glyphicons on andnud meile võimaluse kasutada meie avatud lähtekoodiga tööriistakomplekti Halflings, kui pakume siin dokumentides lingi ja krediiti. Palun kaaluge oma projektides sama tegemist.

Kuidas kasutada

Versiooniga 2.0.0 oleme valinud <i>kõigi oma ikoonide jaoks märgendi kasutamise, kuid neil pole suurtähtede klassi – ainult jagatud eesliide. Kasutamiseks asetage järgmine kood peaaegu kõikjale:

<i class = "ikooniotsing" ></i> 

Saadaval on ka stiilid ümberpööratud (valgete) ikoonide jaoks, mis on valmis ühe lisaklassiga:

<i class = "ikoon-otsing ikoon-valge" ></i> 

Ikoonide jaoks on valida 120 klassi vahel. Lihtsalt lisage <i>õigete klassidega silt ja oletegi valmis. Täieliku loendi leiate saidilt sprites.less või siit, selles dokumendis.

Kasutusjuhtumid

Ikoonid on suurepärased, kuid kus neid kasutada? Siin on mõned ideed:

• Külgriba navigeerimise visuaalidena
• Puhtalt ikoonipõhiseks navigeerimiseks
• Nuppude jaoks, mis aitavad toimingu tähendust edasi anda
• Linkidega kasutaja sihtkoha konteksti jagamiseks

Põhimõtteliselt saate igale poole, kuhu saate <i>sildi panna, panna ikooni.

Värskenda Kassasse Kustuta

Kommenteeri Seaded Rohkem infot