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: @baseFontSizeja @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 .initialismluokkaa isojen kirjainten lyhenteissä. |
<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ä:
Attribuutilla varustetuilla lyhenteillä titleon vaalea pisteviiva alareuna ja ohjekohdistin osoitin. Tämä antaa käyttäjille lisätietoa siitä, että jotain näytetään hiiren päällä.
Lisää initialismluokka lyhenteeseen lisätäksesi typografista harmoniaa pienentämällä tekstiä hieman.
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-leftja .pull-rightluokkia 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>
<dl class="dl-horizontal">
Varoitus! Vaakasuuntaiset kuvausluettelot lyhentävät termit, jotka ovat liian pitkiä mahtumaan vasemman sarakkeen korjaukseen text-overflow. Kapeammissa näkymäporteissa ne muuttuvat oletusarvoiseksi pinotuksi asetteluksi.
Kääri tekstin sisäiset koodinpätkät <code>.
- Esimerkiksi < code > -osio < / code > tulee kääriä riviin .
Käytä <pre>useille koodiriveille. Muista jättää koodin kulmasulkeet pois oikeasta renderöinnista.
<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.
Voit halutessasi lisätä .pre-scrollableluokan, joka asettaa enimmäiskorkeudeksi 350 pikseliä ja tarjoaa y-akselin vierityspalkin.
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 tdja thelementeissä |
Taulukot muotoillaan automaattisesti vain muutamilla reunuksilla luettavuuden ja rakenteen säilyttämiseksi. 2.0:lla .tableluokka vaaditaan.
- <taulukkoluokka = " taulukko" >
- …
- </table>
| # | Etunimi | Sukunimi | Käyttäjätunnus |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @rasva |
| 3 | Larry | lintu | @viserrys |
Nauti pöydistäsi lisäämällä seepraraitoja – lisää vain .table-stripedluokka.
Huomautus: Raidalliset taulukot käyttävät :nth-childCSS-valitsinta, eikä niitä ole saatavana IE7-IE8:ssa.
- <table class = "taulukko pöytäraidallinen" >
- …
- </table>
| # | Etunimi | Sukunimi | Käyttäjätunnus |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @rasva |
| 3 | Larry | lintu | @viserrys |
Lisää reunukset koko pöydän ympärille ja pyöristetyt kulmat esteettisistä syistä.
- <table class = "taulukon taulukkoreunattu" >
- …
- </table>
| # | Etunimi | Sukunimi | Käyttäjätunnus |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @rasva |
| 3 | Larry lintu | @viserrys | |
Tee taulukoistasi kompakteja lisäämällä .table-condensedluokka, joka leikkaa taulukon solujen täytön kahtia (8 pikselistä 4 pikseliin).
- <table class = "taulukkotaulukko-tiivistetty" >
- …
- </table>
| # | Etunimi | Sukunimi | Käyttäjätunnus |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @rasva |
| 3 | Larry lintu | @viserrys | |
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>
| Koko nimi | |||
|---|---|---|---|
| # | Etunimi | Sukunimi | Käyttäjätunnus |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @rasva |
| 3 | Larry lintu | @viserrys | |
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ä |
Älykkäät ja kevyet oletusasetukset ilman ylimääräisiä merkintöjä.
- <form class = "hyvin" >
- <label> Tarran nimi </label>
- <input type = "text" class = "span3" placeholder = "Kirjoita jotain..." >
- <span class = "help-block" > Esimerkki lohkotason ohjeteksti tästä. </span>
- <label class = "valintaruutu" >
- <input type = "checkbox" > Tarkista minut
- </label>
- <button type = "submit" class = "btn" > Lähetä </button>
- </form>
Lisää .form-searchlomakkeeseen .search-queryja input.
- <form class = "hyvin lomakehaku" >
- <syöttötyyppi = " teksti" class = "syöttötavan hakukysely" >
- <button type = "submit" class = "btn" > Hae </button>
- </form>
Lisää .form-inlinehienostuneeksi lomakesäätimien pystysuuntainen tasaus ja väli.
- <form class = "hyvin muoto-inline" >
- <input type = "text" class = "input-small" placeholder = "Sähköposti" >
- <input type = "password" class = "input-small" placeholder = "Salasana" >
- <label class = "valintaruutu" >
- <input type = "checkbox" > Muista minut
- </label>
- <button type = "submit" class = "btn" > Kirjaudu sisään </button>
- </form>
Oikealla näkyvät kaikki tukemamme oletuslomakeohjaimet. Tässä on luettelomerkitty luettelo:
Kun otetaan huomioon yllä oleva esimerkkilomakeasettelu, tässä on ensimmäiseen syöttö- ja ohjausryhmään liittyvä merkintä. Luokat .control-group, .control-label, ja .controlskaikki vaaditaan muotoiluun.
- <form class = "form-horizontal" >
- <kenttäjoukko>
- <legend> Seliteteksti </legend>
- <div class = "kontrolliryhmä" >
- <label class = "control-label" for = "input01" > Tekstinsyöttö </label>
- <div class = "säätimet" >
- <syöttötyyppi = " teksti" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Tukeva ohjeteksti </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap sisältää tyylejä selaimen tukemille kohdistetuille ja disabledtiloille. Poistamme Webkit-oletuspaketin outlineja käytämme box-shadowsen tilalle a:ta :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 .inlinemihin tahansa .checkboxtai .radioja olet valmis.
Jos haluat käyttää prepend- tai append-syötteitä upotettuna, muista sijoittaa .add-onja inputsamalle 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">.
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.
Bootstrap käyttää <i>tunnistetta kaikille kuvakkeille, 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.
Varoitus! Kun käytät tekstiä merkkijonojen vieressä, kuten painikkeissa tai navigointilinkeissä, muista jättää välilyönti <i>tunnisteen perään oikean välityksen varmistamiseksi.
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ä.