Telineen päällä HTML-peruselementit on muotoiltu ja parannettu laajennettavilla luokilla tuoreen, yhtenäisen ilmeen ja tuntuman saamiseksi.
Koko typografinen ruudukko perustuu kahteen Less-muuttujaan variables.less-tiedostossamme: @baseFontSize
ja @baseLineHeight
. Ensimmäinen on kauttaaltaan käytetty perusfontin koko ja toinen on perusviivan korkeus.
Käytämme näitä muuttujia ja hieman matematiikkaa kaikkien tyyppiemme marginaalien, täytteiden ja rivinkorkeuksien luomiseen ja paljon muuta.
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.
Elementti | Käyttö | Valinnainen |
---|---|---|
<strong> |
Tekstinpätkän korostamiseen tärkeällä | Ei mitään |
<em> |
Tekstinpätkän korostamiseen stressillä | Ei mitään |
<abbr> |
Kääriä lyhenteet ja akronyymit näyttämään laajennetun version hiirellä | Sisällytä valinnainen title laajennettu teksti |
<address> |
Lähimmän esi-isän tai koko työn yhteystiedot | Säilytä muotoilu lopettamalla kaikki rivit<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, pharetra augue.
Huomautus: Voit vapaasti käyttää <b>
ja <i>
HTML5:ssä, mutta niiden käyttö on muuttunut hieman. <b>
on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>
se on enimmäkseen puhetta, teknisiä termejä jne.
Tässä on kaksi esimerkkiä <address>
tunnisteen käytöstä:
Lyhenteet on muotoiltu isoilla kirjaimilla ja vaalealla pisteviivalla alareunalla. Niissä on myös ohjekohdistin osoitin, jotta käyttäjät voivat ylimääräistä tietoa siitä, että jotain näytetään hiiren päällä.
HTML on parasta sitten viipaloidun leivän.
Sanan attribuutti lyhenne on attr .
Elementti | Käyttö | Valinnainen |
---|---|---|
<blockquote> |
Lohkotason elementti sisällön lainaamiseen toisesta lähteestä | Lisää .pull-left ja .pull-right luokkia kelluville vaihtoehdoille |
<small> |
Valinnainen elementti käyttäjälle tarkoitetun sitaatin lisäämiseen, yleensä tekijä, jolla on teoksen nimi | Sijoita <cite> otsikon tai lähteen nimen ympärille |
Jos haluat sisällyttää lainauksen, kierrä <blockquote>
minkä tahansa HTML -koodi lainauksena. Suorille lainauksille suosittelemme <p>
.
Sisällytä valinnainen <small>
elementti lähteen mainitsemiseksi, niin saat sen —
eteen em-viivan muotoilua varten.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante venenatis. </p>
- <small> Joku kuuluisa </small>
- </blockquote>
Oletuslainausmerkit on muotoiltu seuraavasti:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante venenatis.
Joku kuuluisa Body of workissa
Liu'uta lohkolainaus oikealle lisäämällä class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante venenatis.
Joku kuuluisa Body of workissa
<ul>
<ul class="unstyled">
<ol>
<dl>
Kääri tekstin sisäiset koodinpätkät <code>
.
- Esimerkiksi < code > -osio < / code > tulee kääriä riviin .
Käytä <pre>
useille koodiriveille. Muista muuttaa kaikki caret-merkit Unicode-merkeiksi, jotta ne hahmontuvat oikein.
<p>Esiteksti tässä...</p>
- <pre>
- <p>Esimerkkiteksti tässä...</p>
- </pre>
Huomautus: Varmista, että koodi on <pre>
tagien sisällä mahdollisimman lähellä vasenta. se hahmontaa kaikki välilehdet.
Ota sama <pre>
elementti ja lisää kaksi valinnaista luokkaa tehostaaksesi renderöintiä.
- <p> Esimerkkiteksti täällä... </p>
- <pre class = "kaunis printti
- linenums" >
- <p>Esimerkkiteksti tässä...</p>
- </pre>
Lataa google-code-prettify ja katso käyttöohjeet readme-tiedostosta.
Tag | Kuvaus |
---|---|
<table> |
Kääritty elementti tietojen näyttämiseksi taulukkomuodossa |
<thead> |
Taulukon otsikkorivien ( <tr> ) säilöelementti taulukon sarakkeiden merkitsemiseksi |
<tbody> |
Taulukon rivien ( <tr> ) säilöelementti taulukon rungossa |
<tr> |
Säilöelementti taulukon solujoukolle ( <td> tai <th> ), joka näkyy yhdellä rivillä |
<td> |
Taulukon oletussolu |
<th> |
Erillinen taulukon solu sarake- (tai rivi-, laajuudesta ja sijoittelusta riippuen) tarroille On käytettävä a <thead> |
<caption> |
Kuvaus tai yhteenveto taulukon sisällöstä, erityisen hyödyllinen näytönlukuohjelmille |
- <taulukko>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
Nimi | Luokka | Kuvaus |
---|---|---|
Oletus | Ei mitään | Ei tyylejä, vain sarakkeita ja rivejä |
Perus | .table |
Vain vaakasuorat viivat rivien välissä |
Reunattu | .table-bordered |
Pyöristää kulmat ja lisää ulkoreunuksen |
Seepra-raita | .table-striped |
Lisää vaaleanharmaan taustavärin parittomille riveille (1, 3, 5 jne.) |
Tiivistetty | .table-condensed |
Leikkaa pystysuoran pehmustuksen puoliksi, 8 pikselistä 4 pikseliin, kaikissa td ja th elementeissä |
Taulukot muotoillaan automaattisesti vain muutamilla reunuksilla luettavuuden ja rakenteen säilyttämiseksi. 2.0:lla .table
luokka vaaditaan.
- <taulukkoluokka = " taulukko" >
- …
- </table>
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Nauti pöydistäsi lisäämällä seepraraitoja – lisää vain .table-striped
luokka.
Huomautus: Sprite-taulukot käyttävät :nth-child
CSS-valitsinta, eikä niitä ole saatavana IE7-IE8:ssa.
- <table class = "taulukko pöytäraidallinen" >
- …
- </table>
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Lisää reunukset koko pöydän ympärille ja pyöristetyt kulmat esteettisistä syistä.
- <table class = "taulukon taulukkoreunattu" >
- …
- </table>
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | |
3 | Brosef | Stalin | HTML |
Tee taulukoistasi kompakteja lisäämällä .table-condensed
luokka, joka leikkaa taulukon solujen täytön kahtia (8 pikselistä 4 pikseliin).
- <table class = "taulukkotaulukko-tiivistetty" >
- …
- </table>
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Voit vapaasti yhdistää mitä tahansa pöytäluokista saadaksesi erilaisia ulkoasuja käyttämällä mitä tahansa saatavilla olevia luokkia.
- <table class = "taulukko taulukko-raidallinen taulukko-reunustettu taulukko-tiivistetty" >
- ...
- </table>
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
4 | Brosef | Stalin | HTML |
Parasta Bootstrapin lomakkeissa on, että kaikki syötteesi ja säätimet näyttävät upeilta riippumatta siitä, miten luot ne merkinnöissäsi. Ylimääräistä HTML-koodia ei tarvita, mutta annamme mallit sitä tarvitseville.
Monimutkaisemmissa asetteluissa on ytimekkäät ja skaalautuvat luokat helpottamaan muotoilua ja tapahtumien sidontaa, joten olet suojattu joka vaiheessa.
Bootstrap tukee neljää lomakeasettelutyyppiä:
Erityyppiset lomakeasettelut vaativat joitain muutoksia merkintään, mutta itse säätimet pysyvät samoina ja toimivat samoina.
Bootstrapin lomakkeet sisältävät tyylejä kaikille perusmuotosäätimille, kuten syöttö-, tekstialue- ja valintavaihtoehdoille. Mutta sen mukana tulee myös useita mukautettuja komponentteja, kuten liitetty ja edeltävä syöte sekä tuki valintaruutujen luetteloille.
Tilat, kuten virhe, varoitus ja onnistuminen, sisältyvät jokaiseen lomakehallintatyyppiin. Mukana on myös tyylejä vammaisille säätimille.
Bootstrap tarjoaa yksinkertaisia merkintöjä ja tyylejä neljälle yleisille verkkolomakkeille.
Nimi | Luokka | Kuvaus |
---|---|---|
Pysty (oletus) | .form-vertical (ei vaadittu) |
Pinotut, vasemmalle tasatut tarrat säätimien päällä |
Linjassa | .form-inline |
Vasemmalle kohdistetut tarra- ja rivisäätimet kompaktiin tyyliin |
Hae | .form-search |
Erittäin pyöristetty tekstinsyöttö tyypilliseen hakuestetiikkaan |
Vaakasuora | .form-horizontal |
Kelluuta vasemmalle, oikealle tasattuja tarroja samalla rivillä kuin säätimiä |
V2.0:ssa meillä on kevyempiä ja älykkäämpiä oletusasetuksia lomaketyyleille. Ei ylimääräisiä merkintöjä, vain lomakehallinta.
Heijastaa WebKitin oletustyylejä, lisää .form-search
vain pyöristetyille hakukentille.
Tulot ovat lohkotasolla käynnistystä varten. Käytämme inline-block : lle .form-inline
ja -kentille..form-horizontal
Vasemmalla näkyvät kaikki tukemamme oletuslomakeohjaimet. Tässä on luettelomerkitty luettelo:
Vuoteen 1.4 asti Bootstrapin oletustyylit käyttivät vaakasuuntaista asettelua. Bootstrap 2:lla poistimme tämän rajoituksen, jotta saisimme älykkäämpiä ja skaalautuvampia oletusasetuksia mille tahansa lomakkeelle.
Bootstrap sisältää tyylejä selaimen tukemille kohdistetuille ja disabled
tiloille. Poistamme Webkit-oletuspaketin outline
ja lisäämme box-shadow
sen tilalle :focus
.
Se sisältää myös validointityylejä virheiden, varoitusten ja onnistumisen varalta. Käytä lisäämällä virheluokka ympäröivään .control-group
.
- <kenttäjoukko
- class = "ohjausryhmän virhe" >
- …
- </fieldset>
Syöttöryhmät – joihin on liitetty tai lisätty teksti – tarjoavat helpon tavan antaa lisää kontekstia syötteillesi. Hyviä esimerkkejä ovat @-merkki Twitter-käyttäjätunnuksille tai $ talouselämälle.
Vuoteen 1.4 asti Bootstrap vaati ylimääräisiä merkintöjä valintaruutujen ja radioiden pinoamiseksi. Nyt on yksinkertainen asia <label class="checkbox">
toistaa <input type="checkbox">
.
Myös upotetut valintaruudut ja radiot ovat tuettuja. Lisää vain .inline
mihin tahansa .checkbox
tai .radio
ja olet valmis.
Jos haluat käyttää prepend- tai append-syötteitä upotettuna, muista sijoittaa .add-on
ja input
samalle riville ilman välilyöntejä.
Jos haluat lisätä ohjetekstiä lomakkeen syötteisiin, sisällytä syöttöelementin kanssa upotettu ohjeteksti <span class="help-inline">
tai ohjetekstilohko <p class="help-block">
.
:after
. Asiakirjoissa näytämme vaaleanpunaisen taustavärin, kun hiiren osoitin korostaa kuvakkeen kokoa.
Sen sijaan, että olisimme tehneet jokaisesta kuvakkeesta ylimääräisen pyynnön, olemme koonneet ne spriteiksi – joukoksi kuvia yhdessä tiedostossa, joka käyttää CSS:ää kuvien sijoittamiseen background-position
. Tämä on sama menetelmä, jota käytämme Twitter.comissa, ja se on toiminut hyvin meillä.
Kaikki kuvakeluokat on varustettu etuliitteellä .icon-
oikeaa nimiväliä ja laajuutta varten, aivan kuten muissakin komponenteissamme. Tämä auttaa välttämään ristiriitoja muiden työkalujen kanssa.
Glyphicons on antanut meille mahdollisuuden käyttää avoimen lähdekoodin työkalupakkiamme Halflings-sarjaa, kunhan annamme linkin ja hyvityksen täällä dokumenteissa. Harkitse samanlaista tekemistä projekteissasi.
V2.0.0:ssa olemme päättäneet käyttää <i>
tunnistetta kaikille kuvakkeillemme, mutta niillä ei ole tapausluokkaa – vain jaettu etuliite. Käytä seuraavaa koodia sijoittamalla melkein minne tahansa:
- <i class = "kuvakehaku" ></i>
Saatavilla on myös tyylejä käänteisille (valkoisille) kuvakkeille, jotka on valmistettu yhdellä lisäluokalla:
- <i class = "kuvake-haku kuvake-valkoinen" ></i>
Valittavana on 120 luokkaa kuvakkeillesi. Lisää vain <i>
tunniste oikeilla luokilla ja olet valmis. Löydät täydellisen luettelon osoitteesta sprites.less tai tästä asiakirjasta.
Ikonit ovat mahtavia, mutta missä niitä voisi käyttää? Tässä muutamia ideoita:
Käytännössä minne voit laittaa <i>
tunnisteen, voit laittaa kuvakkeen.
Käytä niitä painikkeissa, painikeryhmissä työkalupalkissa, navigoinnissa tai lisättyjen lomakkeiden syötteissä.