Lisaks tellingutele on HTML-i põhielemendid kujundatud ja täiustatud laiendatavate klassidega, et pakkuda värsket ja ühtlast välimust.
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.
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.
| Element | Kasutamine | Valikuline |
|---|---|---|
<strong> |
Tekstijupi rõhutamiseks olulisega | Mitte ühtegi |
<em> |
Tekstijupi rõhutamiseks rõhuga | Mitte ühtegi |
<abbr> |
Murrab lühendeid ja akronüüme, et näidata laiendatud versiooni hõljutamisel |
.initialismsuurtähtlühendite jaoks klassi. |
<address> |
Selle lähima esivanema või kogu töö kontaktteabe saamiseks | Säilitage vorming, lõpetades kõik read tähega<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.
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.
Siin on kaks näidet selle kohta, kuidas <address>märgendit saab kasutada.
Atribuudiga lühenditel titleon hele punktiirjoonega alumine ääris ja abikursor hõljutaval kohal. See annab kasutajatele lisamärguande, et midagi näidatakse kursoril.
Lisage initialismlühendile klass, et suurendada tüpograafilist harmooniat, andes sellele veidi väiksema teksti suuruse.
HTML on parim asi pärast viilutatud leiba.
Sõna atribuut lühend on attr .
| Element | Kasutamine | Valikuline |
|---|---|---|
<blockquote> |
Plokitaseme element sisu tsiteerimiseks teisest allikast | Lisage .pull-leftja klassid.pull-right |
<small> |
Valikuline element kasutajale suunatud tsitaadi lisamiseks, tavaliselt autor koos teose pealkirjaga | Asetage <cite>allika pealkirja või nime ümber |
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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Pea püsti! Horisontaalsed kirjeldusloendid kärbivad termineid, mis on liiga pikad, et mahutada vasakpoolse veeru parandusse text-overflow. Kitsamates vaateavades muutuvad need virnastatud vaikepaigutuseks.
Mähi tekstisisesed koodilõigud märgiga <code>.
- Näiteks < code > jaotis < / code > tuleks ümbritseda tekstisisesena .
Kasutage <pre>mitme koodirea jaoks. Korralikuks renderdamiseks jätke koodis kindlasti kõik nurksulud.
<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.
Soovi korral saate lisada .pre-scrollableklassi, mis määrab maksimaalseks kõrguseks 350 pikslit ja pakub y-telje kerimisriba.
Võtke sama <pre>element ja lisage täiustatud renderdamiseks kaks valikulist klassi.
- <p> Näidistekst siin... </p>
- <pre class = "ilusprint
- linenums" >
- <p>Näidistekst siin...</p>
- </pre>
Laadige alla google-code-prettify ja vaadake lugemist, kuidas seda kasutada.
| Tag | Kirjeldus |
|---|---|
<table> |
Mähkimiselement andmete kuvamiseks tabelivormingus |
<thead> |
Tabeli päise ridade ( <tr>) konteinerelement tabeli veergude märgistamiseks |
<tbody> |
<tr>Tabeli põhiosas tabeli ridade ( ) konteinerelement |
<tr> |
Tabeli lahtrite komplekti ( <td>või <th>) konteinerelement, mis kuvatakse ühel real |
<td> |
Tabeli vaikelahter |
<th> |
Spetsiaalne tabelilahter veeru (või rea, olenevalt ulatusest ja paigutusest) siltide jaoks Tuleb kasutada a <thead> |
<caption> |
Tabeli kirjeldus või kokkuvõte, eriti kasulik ekraanilugejatele |
- <tabel>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Nimi | Klass | Kirjeldus |
|---|---|---|
| Vaikimisi | Mitte ühtegi | Ei mingeid stiile, ainult veerud ja read |
| Põhiline | .table |
Ainult horisontaalsed jooned ridade vahel |
| Piiritud | .table-bordered |
Ümardab nurki ja lisab välisäärise |
| Sebra-triip | .table-striped |
Lisab paaritutele ridadele (1, 3, 5 jne) helehalli taustavärvi |
| Kondenseeritud | .table-condensed |
Lõikab vertikaalse polstri pooleks, 8 kuni 4 pikslit, kõigis tdja thelementides |
Tabelid kujundatakse automaatselt vaid mõne äärisega, et tagada loetavus ja säilitada struktuur. 2.0 puhul on .tableklass kohustuslik.
- < tabeliklass = "tabel" >
- …
- </table>
| # | Eesnimi | Perekonnanimi | Kasutajanimi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @paks |
| 3 | Larry | lind |
Lisage sebraribad, lisades oma laudadele pisut elegantsi – lisage lihtsalt .table-stripedklass.
Märkus. Triibulised tabelid kasutavad :nth-childCSS-i valijat ja pole IE7-IE8 puhul saadaval.
- <table class = "tabel tabelitriibuline" >
- …
- </table>
| # | Eesnimi | Perekonnanimi | Kasutajanimi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @paks |
| 3 | Larry | lind |
Lisage esteetilistel eesmärkidel äärised ümber kogu laua ja ümarad nurgad.
- < tabeliklass = "tabeli äärisega tabel" >
- …
- </table>
| # | Eesnimi | Perekonnanimi | Kasutajanimi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @paks |
| 3 | Lind Larry | ||
Muutke oma tabelid kompaktsemaks, lisades .table-condensedklassi, et tabelilahtri polsterdus pooleks lõigata (8 pikslist 4 pikslile).
- <table class = "tabel-kondenseeritud" >
- …
- </table>
| # | Eesnimi | Perekonnanimi | Kasutajanimi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @paks |
| 3 | Lind Larry | ||
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>
| Täisnimi | |||
|---|---|---|---|
| # | Eesnimi | Perekonnanimi | Kasutajanimi |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @paks |
| 3 | Lind Larry | ||
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.
Bootstrap toetab nelja tüüpi vormipaigutusi:
Erinevat tüüpi vormipaigutused nõuavad märgistuses mõningaid muudatusi, kuid juhtelemendid ise jäävad samaks ja käituvad samaks.
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.
Bootstrap pakub lihtsat märgistust ja stiile nelja levinud veebivormi stiili jaoks.
| Nimi | Klass | Kirjeldus |
|---|---|---|
| Vertikaalne (vaikimisi) | .form-vertical (pole nõutud) |
Virnastatud, vasakule joondatud sildid juhtelementide kohal |
| Järjekorras | .form-inline |
Vasakule joondatud sildi ja plokisisesed juhtnupud kompaktse stiili jaoks |
| Otsing | .form-search |
Eriti ümar tekstisisestus tüüpilise otsingu esteetika jaoks |
| Horisontaalne | .form-horizontal |
Hõljutage vasakule, paremale joondatud silte juhtelementidega samal real |
Nutikad ja kerged vaikeseaded ilma täiendava märgistuseta.
- <form class = "hästi" >
- <label> Sildi nimi </label>
- <input type = "text" class = "span3" placeholder = "Tippige midagi..." >
- <span class = "help-block" > Siin on plokitaseme abiteksti näide. </span>
- <label class = "märkeruut" >
- <input type = "checkbox" > Kontrollige mind
- </label>
- <button type = "submit" class = "btn" > Esita </button>
- </form>
Lisa .form-searchvormile .search-queryja input.
- <form class = "kaevu vormiotsing" >
- <input type = "text" class = "sisendkandja otsingupäring" >
- <button type = "submit" class = "btn" > Otsi </button>
- </form>
Lisage .form-inlinevormi juhtelementide vertikaalne joondus ja vahed, et täpsustada.
- <form class = "kaev vorm-inline" >
- <input type = "text" class = "input-small" placeholder = "E-post" >
- <input type = "password" class = "input-small" placeholder = "Parool" >
- <label class = "märkeruut" >
- <input type = "checkbox" > Jäta mind meelde
- </label>
- <button type = "submit" class = "btn" > Logi sisse </button>
- </form>
Paremal on näidatud kõik vormide vaikejuhtelemendid, mida me toetame. Siin on täppide loend:
Arvestades ülaltoodud vormipaigutuse näidet, on siin esimese sisend- ja juhtrühmaga seotud märgistus. .control-groupKlassid , .control-label, ja kõik .controlson kujundamiseks vajalikud.
- <form class = "vorm-horisontaalne" >
- <väljakomplekt>
- <legend> Legendi tekst </legend>
- <div class = "kontrollrühm" >
- <label class = "control-label" for = "input01" > Tekstisisestus </label>
- <div class = "juhtelemendid" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Abiteksti tugi </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap sisaldab stiile brauseri toetatud fokuseeritud ja disabledolekute jaoks. Eemaldame vaikeveebikomplekti outlineja rakendame box-shadowselle asemele :focus.
See sisaldab ka vigade, hoiatuste ja edu kinnitamise stiile. Kasutamiseks lisage veaklass ümbritsevale .control-group.
- <väljakomplekt
- class = "kontrollrühma viga" >
- …
- </fieldset>
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.
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.
Reasiseses vormis ette- või lisamissisendite kasutamiseks asetage kindlasti .add-onja inputsamale reale ilma tühikuteta.
Vormisisendite abiteksti lisamiseks lisage sisestuselemendile tekstisisene abitekst <span class="help-inline">või abiteksti plokk koos <p class="help-block">sisestuselemendiga.
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.
Bootstrap kasutab <i>kõigi ikoonide jaoks silti, kuid neil pole käändeklassi – 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.
Pea püsti! Kui kasutate tekstistringide kõrval (nt nuppudes või navigeerimislinkides), jätke <i>sildi järele kindlasti tühik õigete tühikute jaoks.
Ikoonid on suurepärased, kuid kus neid kasutada? Siin on mõned ideed:
Põhimõtteliselt saate igale poole, kuhu saate <i>sildi panna, panna ikooni.
Kasutage neid nuppudes, tööriistariba nupurühmades, navigeerimiseks või lisatud vormi sisenditeks.