edellä

vasemmalle

oikein

alla

Hotlink CSS

Aloita nopein ja helpoin kopioimalla tämä katkelma verkkosivullesi.

Käytä sitä Vähemmän kanssa

Oletko vähemmän käyttänyt? Ei hätää, vain kloonaa repo ja lisää nämä rivit:

Haarukka GitHubissa

Lataa, haarukka, vedä, tee ongelmia ja paljon muuta Githubin virallisen Bootstrap-repon avulla.

Bootstrap GitHubissa »

Tällä hetkellä v1.3.0

Historia

Twitterin insinöörit ovat historiallisesti käyttäneet lähes kaikkia tuntemiaan kirjastoja käyttöliittymävaatimusten täyttämiseen. Bootstrap alkoi vastauksena haasteisiin. Bootstrap on kasvanut merkittävästi monien mahtavien ihmisten avulla.

Lue lisää osoitteessa dev.twitter.com ›

Selaimen tuki

Bootstrap on testattu ja tuettu suurimmissa nykyaikaisissa selaimissa, kuten Chrome, Safari, Internet Explorer ja Firefox.

Testattu ja tuettu Chromessa, Safarissa, Internet Explorerissa ja Firefoxissa

Uusin Safari
Uusin Google Chrome
Firefox 4+
Internet Explorer 7+
Ooppera 11

Mitä sisältyy

Bootstrap sisältää käännetyt CSS-, kääntämättömät ja esimerkkimallit.

Javascript-laajennukset
Kaikki alkuperäiset .less-tiedostot
Täysin käännetty ja minimoitu CSS
Täydellinen tyylioppaan dokumentaatio
Kolme esimerkkisivua eri asetteluilla

Pika-aloitusesimerkkejä

Tarvitsetko nopeita malleja? Katso nämä koontamamme perusesimerkit:

Oletusruudukko

Bootstrapin osana toimitettu oletusruudukkojärjestelmä on 940 pikseliä leveä 16 sarakkeen ruudukko. Se on suositun 960 ruudukkojärjestelmän maku, mutta ilman ylimääräistä marginaalia/pehmustetta vasemmalla ja oikealla puolella.

Esimerkki ruudukon merkinnöistä

Kuten tässä näkyy, perusasettelu voidaan luoda kahdella "sarakkeella", joista kukin kattaa useita 16 perussaraketta, jotka määritimme osaksi ruudukkojärjestelmäämme. Katso alla olevista esimerkeistä lisää muunnelmia.

<div class = "rivi" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

1/3

2/3

Sarakkeiden offsetointi

8 offset 4

1/3 offset 2/3 s

4 offset 4

5 offset 3

10 offset 6

Sisäkkäiset sarakkeet

Sisällytä sisältösi tarvittaessa luomalla .rowolemassa olevaan sarakkeeseen.

Esimerkki sisäkkäisistä sarakkeista

Sarakkeen taso 1

Taso 2

<div class = "rivi" > 
  <div class = "span12" > 
    Sarakkeen taso 1
    <div class = "rivi" > 
      <div class = "span6" > 
        Taso 2
      </div>
      <div class = "span6" > 
        Taso 2
      </div>
    </div>
  </div>
</div>

Rullaa oma ruudukkosi

Bootstrapiin on sisäänrakennettu kourallinen muuttujia oletusarvoisen 940 pikselin ruudukkojärjestelmän mukauttamiseen. Pienellä mukauttamisella voit muokata pylväiden kokoa, niiden kouruja ja säiliötä, jossa ne sijaitsevat.

Verkon sisällä

Verkkojärjestelmän muokkaamiseen tarvittavat muuttujat sijaitsevat tällä hetkellä kaikki variables.less.

Muuttuva	Oletusarvo	Kuvaus
`@gridColumns`	16	Ruudukon sarakkeiden määrä
`@gridColumnWidth`	40 pikseliä	Kunkin sarakkeen leveys ruudukon sisällä
`@gridGutterWidth`	20px	Negatiivinen tila kunkin sarakkeen välillä
`@siteWidth`	Kaikkien pylväiden ja kourujen laskettu summa	Laskemme pylväiden ja kourujen lukumäärän ja asetamme `.fixed-container()`mixinin leveyden perusvastineella.

Nyt mukauttamiseen

Ruudukon muokkaaminen tarkoittaa kolmen @grid-*muuttujan muuttamista ja Less-tiedostojen kääntämistä uudelleen.

Bootstrap on varustettu käsittelemään verkkojärjestelmää, jossa on jopa 24 saraketta; oletusarvo on vain 16. Tältä ruudukkomuuttujasi näyttäisivät räätälöitynä 24 sarakkeen ruudukoksi.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

Kun olet käännetty uudelleen, olet valmis!

Kiinteä asettelu

Oletus- ja yksinkertainen 940 pikseliä leveä, keskitetty asettelu melkein mille tahansa verkkosivustolle tai sivulle, jonka tarjoaa yhden <div.container>.

<body>
  <div class = "säilö" > 
    ...
  </div>
</body>

Nestemäinen asettelu

Vaihtoehtoinen joustava sivurakenne, jossa on minimi- ja maksimileveydet sekä vasen sivupalkki. Erinomainen sovelluksille ja asiakirjoille.

<body>
  <div class = "container-fluid" > 
    <div class = "sivupalkki" > 
      ...
    </div>
    <div class = "sisältö" > 
      ...
    </div>
  </div>
</body>

Otsikot ja kopioi

Normaali typografinen hierarkia verkkosivujesi jäsentämiseen.

Koko typografinen ruudukko perustuu kahteen Less-muuttujaan variables.less-tiedostossamme: @basefontja @baseline. 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.

h1. Otsikko 1

h2. Otsikko 2

h3. Otsikko 3

h4. Otsikko 4

h5. Otsikko 5

h6. Otsikko 6

Esimerkkikappale

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.

Esimerkkiotsikossa on alaotsikko…

Muut elementtejä

Painopisteiden, osoitteiden ja lyhenteiden käyttäminen

<strong> <em> <address> <abbr>

Milloin käyttää

Korostustunnisteita ( <strong>ja <em>) tulee käyttää ilmaisemaan sanan tai lauseen ylimääräistä tärkeyttä tai painotusta ympäröivään kopioon verrattuna. Käytä <strong>tärkeyden ja <em>stressin korostamiseen .

Korostus kappaleessa

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.

Huomaa: HTML5:ssä voi silti käyttää -tunnisteita, <b>eikä <i>niiden tarvitse olla lihavoituja ja kursivoituja (jos on kuitenkin semanttisempi elementti, käytä sitä). <b>on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>se on enimmäkseen puhetta, teknisiä termejä jne.

Osoitteet

Elementtiä <address>käytetään lähimmän esi-isänsä tai koko työn yhteystiedoissa. Tässä on kaksi esimerkkiä sen käytöstä:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Koko nimi
[email protected]

Huomautus: Jokaisen rivin <address>täytyy päättyä rivinvaihtoon ( <br />) tai olla kääritty lohkotason tunnisteeseen (esim. <p>), jotta sisältö rakentuu oikein.

Lyhenteet

Käytä lyhenteitä ja lyhenteitä varten <abbr>tagia ( <acronym>on vanhentunut HTML5 :ssä ). Laita lyhenne lomake tagin sisään ja aseta otsikko koko nimelle.

Lohkolainaukset

<blockquote> <p> <small>

Kuinka lainata

Jos haluat sisällyttää lohkolainauksen, kääri <blockquote>ympärille <p>ja <small>merkitse tunnisteet. Käytä <small>elementtiä lähteen mainitsemiseen, niin saat em-viivan —ennen sitä.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante venenatis dapibus posuere velit aliquet.
Tohtori Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Tri Julius Hibbert </small>
</blockquote>

Luettelot

Tilaamaton`<ul>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Kokonaisluku molestie lorem ja massa
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

Tyylitön`<ul.unstyled>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Kokonaisluku molestie lorem ja massa
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

Tilattu`<ol>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Kokonaisluku molestie lorem ja massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Kuvaus`dl`

Kuvausluettelot: Kuvausluettelo on täydellinen termien määrittelyyn.
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.

Koodi

<code> <pre>

Pyöritä koodisi tyylikkäästi kahdella yksinkertaisella tunnisteella. Jos haluat vieläkin enemmän javascriptin avulla, pudota Googlen koodi Prettify -kirjastoon ja olet valmis.

Esitetään koodi

Koodi, lohkot tai vain katkelmat tekstiin, voidaan näyttää tyylillä vain käärimällä oikeaan tagiin. Käytä elementtiä koodilohkoille, jotka kattavat useita rivejä <pre>. Käytä sisäistä koodia varten <code>elementtiä.

Elementti Tulos

<code> Tällaisella tekstirivillä rivitetty koodi näyttää tältä <html>elementiltä.

Elementti	Tulos
`<code>`	Tällaisella tekstirivillä rivitetty koodi näyttää tältä `<html>`elementiltä.
`<pre>`	<div> <h1>Otsikko</h1> <p>Jotain täällä...</p> </div> Huomautus: Varmista, että koodi on `<pre>`tagien sisällä mahdollisimman lähellä vasenta. se hahmontaa kaikki välilehdet.
`<pre class="prettyprint">`	Käyttämällä google-code-prettify-kirjastoa koodilohkosi saavat hieman erilaisen visuaalisen tyylin ja automaattisen syntaksin korostuksen. <div> <h1> Otsikko </h1> <p> Jotain tässä... </p> </div> Lataa google-code-prettify ja katso käyttöohjeet Readme-tiedostosta.

<pre>

<div>
  <h1>Otsikko</h1>
  <p>Jotain täällä...</p>
</div>

Huomautus: Varmista, että koodi on <pre>tagien sisällä mahdollisimman lähellä vasenta. se hahmontaa kaikki välilehdet.

<pre class="prettyprint">

Käyttämällä google-code-prettify-kirjastoa koodilohkosi saavat hieman erilaisen visuaalisen tyylin ja automaattisen syntaksin korostuksen.

<div> <h1> Otsikko </h1> <p> Jotain tässä... </p> </div>

Lataa google-code-prettify ja katso käyttöohjeet Readme-tiedostosta.

Sisäiset etiketit

<span class="label">

Kiinnitä huomio tai merkitse mikä tahansa lause tekstissäsi.

Merkitse mitä tahansa

Oletko koskaan tarvinnut yhtä näistä hienoista uudesta! tai tärkeät liput koodia kirjoitettaessa? No, nyt sinulla on ne. Tässä on oletuksena mukana:

Label	Tulos
`<span class="label">Default</span>`	Oletus
`<span class="label success">New</span>`	Uusi
`<span class="label warning">Warning</span>`	Varoitus
`<span class="label important">Important</span>`	Tärkeä
`<span class="label notice">Notice</span>`	Ilmoitus

Mediaruudukko

Näytä erikokoisia pikkukuvia sivuilla, joilla on pieni HTML-jalanjälki ja minimaaliset tyylit.

Esimerkkejä pikkukuvista

Pikkukuvat .media-gridvoivat olla minkä kokoisia tahansa, mutta ne toimivat parhaiten, kun ne on yhdistetty suoraan sisäänrakennettuun Bootstrap-ruudukkojärjestelmään. Kuvaleveydet, kuten 90, 210 ja 330, yhdistettynä muutaman pikselin täytökseen vastaamaan .span2, .span4, ja .span6sarakkeiden kokoa.

Suuri

Keskikokoinen

Pieni

Koodaa niitä

Mediaruudukot ovat helppokäyttöisiä ja melko yksinkertaisia merkintäpuolella. Niiden mitat perustuvat puhtaasti mukana olevien kuvien kokoon.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Rakennuspöytiä

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Pöydät ovat mahtavia - moniin asioihin. Hienot taulukot tarvitsevat kuitenkin hieman merkintöjä ollakseen hyödyllisiä, skaalautuvia ja luettavia (kooditasolla). Tässä on muutamia vinkkejä avuksi.

Kääri aina sarakeotsikot siten <thead>, että hierarkia on <thead>> <tr>> <th>.

Kuten sarakeotsikoissa, kaikki taulukon leipäsisältö tulee kääriä a-merkkiin, <tbody>jotta hierarkiasi on <tbody>> <tr>> <td>.

Esimerkki: Oletustaulukkotyylit

Kaikki taulukot muotoillaan automaattisesti vain tärkeillä reunuksilla luettavuuden ja rakenteen säilyttämiseksi. Ei tarvitse lisätä ylimääräisiä luokkia tai attribuutteja.

#	Etunimi	Sukunimi	Kieli
1	Jonkin verran	Yksi	Englanti
2	Joe	Sixpäkki	Englanti
3	Stu	Dent	Koodi

<taulukko>
  ...
</table>

Esimerkki: Tiivistetty pöytä

Taulukoissa, jotka vaativat enemmän tietoja ahtaissa tiloissa, käytä tiivistettyä makua, joka leikkaa pehmusteen puoleen. Sitä voidaan käyttää myös reunusten ja seepraraitojen kanssa, aivan kuten oletustaulukkotyylejä.

#	Etunimi	Sukunimi	Kieli
1	Jonkin verran	Yksi	Englanti
2	Joe	Sixpäkki	Englanti
3	Stu	Dent	Koodi

Esimerkki: Reunattu taulukko

Tee pöydistäsi hieman tyylikkäämpiä pyöristämällä niiden kulmat ja lisäämällä reunuksia joka puolelle.

#	Etunimi	Sukunimi	Kieli
1	Jonkin verran	Yksi	Englanti
2	Joe	Sixpäkki	Englanti
3	Stu	Dent	Koodi

<taulukkoluokka = " reunattu -taulukko" > 
  ...
</table>

Esimerkki: Seepraraidallinen

Nauti pöydistäsi lisäämällä seepraraitoja – lisää vain .zebra-stripedluokka.

#	Etunimi	Sukunimi	Kieli
1	Jonkin verran	Yksi	Englanti
2	Joe	Sixpäkki	Englanti
3	Stu	Dent	Koodi
kattaa 4 saraketta
kattaa 2 saraketta		kattaa 2 saraketta

Huomautus: Zebra-striping on progressiivinen parannus, joka ei ole saatavilla vanhemmille selaimille, kuten IE8 tai vanhemmille.

<taulukkoluokka = "seepraraidallinen " > 
  ...
</table>

Esimerkki: Seepraraidallinen w/ TableSorter.js

Edellisessä esimerkissä parannamme taulukoidemme hyödyllisyyttä tarjoamalla lajittelutoimintoja jQueryn ja Tablesorter- laajennuksen kautta. Muuta lajittelua napsauttamalla minkä tahansa sarakkeen otsikkoa.

#	Etunimi	Sukunimi	Kieli
2	Joe	Sixpäkki	Englanti
3	Stu	Dent	Koodi
1	Sinun	Yksi	Englanti

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funktio () { 
    $ ( "taulukko#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<taulukkoluokka = "seepraraidallinen " > 
  ...
</table>

Kiinteä yläpalkki

Mikä se on

Yläpalkkimme on kiinteä palkki, joka sisältää verkkosivuston logon tai nimen, ensisijaisen navigoinnin ja hakulomakkeen.

Muokattava

Kaikki elementit sisällä ja myös koko yläpalkki ovat valinnaisia. Voit valita, haluatko sisällyttää logon/nimen, navigoinnin, haun ja toissijaisen navigoinnin – tai minkä tahansa näiden yhdistelmän.

Mukana pudotusvalikot

Osana päänavigointia olemme lisänneet avattavia valikoita navigointiisi. Katso yllä olevaa toissijaista navigointipainiketta (oikealle tasattuna) nähdäksesi, miten se on tehty. Pudotusvalikkotunnisteet litukevat .activemyös nykyisen sivuvalinnan näyttämistä.

Huomautus: Kun käytät yläpalkkia millä tahansa sivulla, muista ottaa huomioon sen aiheuttama päällekkäisyys lisäämällä padding-top: 40px;.body

Välilehdet ja pillerit

Luo yksinkertainen toissijainen navigointi käyttämällä <ul>. Vaihda välilehtiä tai pillereitä lisäämällä sopiva luokka.

Sopii erinomaisesti sisällön alaosioihin, kuten tiliasetussivuillemme ja käyttäjien aikajanalle, joilla voit siirtyä samankaltaisen sisällön sivujen välillä. Saatavana välilehti- tai pillerityyleinä.

Esimerkki perusvälilehdistä

Välilehtiä voidaan käyttää tavallisena navigointina (ulkoisten sivujen lataaminen samalle välilehdelle) tai välilehtien sisältöalueina sisältöruutujen vaihtamiseksi. Meillä on välilehdet-laajennus , jota voidaan käyttää jälkimmäisen integroimiseen.

<ul class = "välilehdet" > 
  <li class = "aktiivinen" ><a href = "#" > Etusivu </a></li>  
  <li><a href = "#" > Profiili </a></li> 
  <li><a href = "#" > Viestit </a></li> 
  <li><a href = "#" > Asetukset </a></li> 
  <li><a href = "#" > Ota yhteyttä </a></li> 
</ul>

Esimerkki peruspillereistä

<ul class = "pillerit" > 
  <li class = "aktiivinen" ><a href = "#" > Etusivu </a></li>  
  <li><a href = "#" > Profiili </a></li> 
  <li><a href = "#" > Viestit </a></li> 
  <li><a href = "#" > Asetukset </a></li> 
  <li><a href = "#" > Ota yhteyttä </a></li> 
</ul>

korppujauhoja

Navigointia käytetään tapana näyttää käyttäjille, missä he ovat sovelluksessa tai sivustolla, mutta ei ensisijaisena navigointina.

<ul class = "leivänmuru" > 
  <li><a href = "#" > Etusivu </a> <span class = "jakaja" > / </span></li>   
  <li><a href = "#" > Keskisivu </a> <span class = "jakaja" > / </span></li>   
  <li><a href = "#" > Toinen </a> <span class = "jakaja" > / </span></li>   
  <li class = "aktiivinen" > Olet täällä </li> 
</ul>

Sivunumerointi

Erittäin yksinkertainen ja minimalistinen sivutus Rdion inspiroimana. Suuri lohko on vaikea missata, helposti skaalautuva ja tarjoaa suuria napsautusalueita.

<div class = "sivutus" > 
  <ul>
    <li class = "edellinen poistettu käytöstä" ><a href = "#" > ← Edellinen </a></li>  
    <li class = "aktiivinen" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "seuraava" ><a href = "#" > Seuraava → </a></li>  
  </ul>
</div>

Perushälytykset

.alert-message

Yksiriviset viestit toiminnon epäonnistumisen, mahdollisen epäonnistumisen tai onnistumisen korostamiseksi. Erityisen hyödyllinen lomakkeille.

Hanki javascript »

Pyhä guacamole! Tarkista itsesi, et näytä liian hyvältä .

Voi pahus! Vaihda tämä ja se ja yritä uudelleen .

Hyvin tehty! Luit tämän hälytysviestin onnistuneesti .

Varoitus! Tämä on hälytys, joka vaatii huomiota, mutta se ei ole vielä suuri prioriteetti .

Esimerkkikoodi

<div class = "hälytysviestin varoitus" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Pyhä guacamole! </strong> Tarkista itsesi, et näytä liian hyvältä. </p>
</div>

Estä viestit

.alert-message.block-message

Viesteille, jotka vaativat hieman selitystä, meillä on kappaletyylivaroitukset. Nämä ovat täydellisiä pidempien virheilmoitusten ilmaamiseen, käyttäjän varoittamiseen odottavasta toiminnasta tai vain tietojen esittämiseen sivun korostamiseksi.

Hanki javascript »

Pyhä guacamole! Tämä on varoitus! Parasta tarkistaa itsesi, et näytä liian hyvältä. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Tee tämä toimenpide Tai tee tämä

Voi pahus! Sinulla on virhe! Vaihda tämä ja se ja yritä uudelleen .

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem muualle elit

Tee tämä toimenpide Tai tee tämä

Hyvin tehty! Luit tämän hälytysviestin onnistuneesti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Tee tämä toimenpide Tai tee tämä

Varoitus! Tämä on hälytys, joka vaatii huomiota, mutta se ei ole vielä suuri prioriteetti.

Tee tämä toimenpide Tai tee tämä

Esimerkkikoodi

<div class = "alert-message block-message Warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Pyhä guacamole! Tämä on varoitus! </strong> Tarkista itsesi, et näytä liian hyvältä. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Tee tämä </a> <a class = "btn small" href = "#" > Tai tee näin </a>     
  </div>
</div>

Modaalit

Modaalit – valintaikkunat tai valolaatikot – sopivat erinomaisesti kontekstuaalisiin toimiin tilanteissa, joissa on tärkeää säilyttää taustakonteksti.

Hanki javascript »

Työkaluvinkit

Twipsit ovat erittäin hyödyllisiä hämmentyneen käyttäjän auttamiseksi ja oikeaan suuntaan.

Hanki javascript »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed voluptatem quauttitamm volquauttatasm quauttamas quautta

Popovers

Käytä ponnahdusikkunoita sivun tekstisisällön tarjoamiseen vaikuttamatta asetteluun.

Hanki javascript »

Päästä alkuun

JavaScriptin integrointi Bootstrap-kirjastoon on erittäin helppoa. Alla käymme läpi perusasiat ja tarjoamme sinulle mahtavia laajennuksia, joiden avulla pääset alkuun!

Näytä javascript-dokumentit »

Mitä sisältyy

Herätä osa Bootstrapin pääkomponenteista henkiin uusilla mukautetuilla laajennuksilla, jotka toimivat jQueryn ja Enderin kanssa . Kehotamme sinua laajentamaan ja muokkaamaan niitä vastaamaan erityisiä kehitystarpeitasi.

Tiedosto	Kuvaus
bootstrap-modal.js	Modal-laajennusmme on erittäin ohut perinteinen modaalinen js-laajennus! Kiinnitimme erityistä huomiota siihen, että sisälsimme vain ne paljaat toiminnot, joita tarvitsemme Twitterissä.
bootstrap-alerts.js	Alert-laajennus on erittäin pieni luokka, joka lisää läheisiä toimintoja hälytyksiin.
bootstrap-dropdown.js	Tämä laajennus on tarkoitettu pudotusvalikon vuorovaikutuksen lisäämiseen bootstrapin yläpalkkiin tai välilehtien navigointiin.
bootstrap-scrollspy.js	ScrollSpy-laajennus on tarkoitettu automaattisesti päivittyvän navigoinnin lisäämiseen bootstrapin yläpalkkiin vierityksen sijainnin perusteella.
bootstrap-buttons.js	ScrollSpy-laajennus on tarkoitettu automaattisesti päivittyvän navigoinnin lisäämiseen bootstrapin yläpalkkiin vierityksen sijainnin perusteella.
bootstrap-tabs.js	Tämä laajennus lisää nopean, dynaamisen välilehden ja pilleritoiminnon paikallisen sisällön selaamiseen.
bootstrap-twipsy.js	Perustuu erinomaiseen jQuery.tipsy-laajennukseen, jonka on kirjoittanut Jason Frame; twipsy on päivitetty versio, joka ei ole riippuvainen kuvista, käyttää css3:a animaatioihin ja data-attribuutteja paikalliseen otsikon tallentamiseen!
bootstrap-popover.js	Popover-laajennus tarjoaa yksinkertaisen käyttöliittymän ponnahdusikkunoiden lisäämiseen sovellukseesi. Se laajentaa boostrap-twipsy.js- laajennusta, joten muista napata myös tämä tiedosto, kun sisällytät ponnahdusikkunat projektiisi!

Onko javascript välttämätön?

Ei! Bootstrap on suunniteltu ennen kaikkea CSS-kirjastoksi. Tämä javascript tarjoaa interaktiivisen peruskerroksen mukana olevien tyylien päälle.

Kuitenkin niille, jotka tarvitsevat javascriptiä, olemme tarjonneet yllä olevat laajennukset, jotka auttavat sinua ymmärtämään, kuinka Bootstrap integroidaan javascriptiin, ja antaa sinulle nopean ja kevyen vaihtoehdon perustoimintoihin heti.

Lisätietoja ja nähdäksesi joitain live-demoja, katso laajennuksen dokumentaatiosivumme .

Bootstrap rakennettiin Prebootista , avoimen lähdekoodin sekoituksista ja muuttujista koostuvasta paketista, jota käytetään yhdessä Lessin kanssa , CSS-esiprosessorin kanssa nopeampaa ja helpompaa verkkokehitystä varten.

Katso, kuinka käytimme Prebootia Bootstrapissa ja kuinka voit hyödyntää sitä, jos päätät käyttää Less-ohjelmaa seuraavassa projektissasi.

Kuinka käyttää sitä

Käytä tätä vaihtoehtoa hyödyntääksesi Bootstrapin Less-muuttujia, sekoituksia ja sisäkkäisyyttä CSS:ssä selaimesi JavaScriptin kautta.

<link rel = "tyylitaulukko/vähemmän" href = "vähemmän/bootstrap.less" media = "kaikki" />    
<script src = "js/less-1.1.3.min.js" ></script>

Etkö tunne .js-ratkaisua? Kokeile Less Mac -sovellusta tai käytä Node.js :ää kääntämiseen, kun otat koodin käyttöön.

Mitä sisältyy

Tässä on joitain kohokohtia siitä, mitä Twitter Bootstrap sisältää osana Bootstrapia. Siirry Bootstrap-verkkosivustolle tai Github-projektisivulle ladataksesi ja saadaksesi lisätietoja.

Muuttujat

Muuttujat in Less ovat täydellisiä ylläpitämään ja päivittämään CSS-päänsärkyäsi. Kun haluat muuttaa väriarvoa tai usein käytettyä arvoa, päivitä se yhdessä paikassa ja olet valmis.

// Linkkejä
@linkColor : #8b59c2;         
@linkColorHover :     tummenna ( @linkColor , 10 ); 
 
// Harmaat
@musta : #000;             
@harmaaDark :           vaalentaa ( @musta , 25 %); 
@harmaa :               vaalentaa ( @musta , 50 %); 
@greyLight :          vaalentaa ( @musta , 70 %); 
@greyLighter :        vaalentaa ( @musta , 90 %); 
@valkoinen : #fff;             
 
// Korostusvärit
@sininen : #08b5fb;              
@vihreä : #46a546 ;             
@punainen : #9d261d;               
@keltainen : #ffc40d;            
@oranssi : #f89406;            
@vaaleanpunainen : #c3325f;              
@violetti : #7a43b6;            
 
// Perustason ruudukko
@basefont : 13px ;          
@perusviiva : 18px ;

Kommentointi

Less tarjoaa myös toisen kommentointityylin CSS:n normaalin /* ... */syntaksin lisäksi.

// Tämä on kommentti
/* Tämä on myös kommentti */

Sekoittaa wazoon

Mixiinit ovat pohjimmiltaan CSS:n sisältämiä tai osittaisia, joten voit yhdistää koodilohkon yhdeksi. Ne sopivat erinomaisesti toimittajan etuliitteillä box-shadowvarustettuihin ominaisuuksiin, kuten , selaimen välisiin liukuväreihin, kirjasinpinoihin ja muihin. Alla on esimerkki Bootstrapin mukana tulevista mixineistä.

Fonttipinot

#font {
  . pikakirjoitus ( @paino : normaali , @koko : 14px , @linjankorkeus : 20px ) {     
    font - size : @size ; 
    font - weight : @weight ; 
    rivi - korkeus : @lineHeight ; 
  }
  . sans - serif ( @weight : normaali , @size : 14px , @lineHeight : 20px ) {     
    kirjasinperhe : " Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - weight : @weight ; 
    rivi - korkeus : @lineHeight ; 
  }
  ...
}

Gradientit

#gradient {
  ...
  . pystysuora ( @startColor : #555, @endColor: #333) { 
    taustaväri : @endColor ; _ _ 
    tausta - toisto : toista - x ;
    background - image : - khtml - gradientti ( lineaarinen , vasen ylhäällä , vasen alaosa , alkaen ( @startColor ), to ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( lineaarinen , vasen ylhäällä , vasen alaosa , väri - stop ( 0 % , @startColor ), väri - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - image : - o - linear - gradient ( @startColor , @endColor ); // Ooppera 11.10   
    background - image : linear - gradient ( @startColor , @endColor ); // Standardi  
  }
  ...
}

Toiminnot

Ihastu ja suorita matematiikkaa luodaksesi joustavia ja tehokkaita sekoituksia, kuten alla.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Tee joitain sarakkeita
. sarakkeet ( @columnSpan : 1 ) {  
  leveys : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

Kokoamalla vähemmän

Kun olet muokannut .lesstiedostoja /lib/:ssä, sinun on käännettävä ne uudelleen, jotta voit luoda uudelleen bootstrap-*.*.*.css- ja bootstrap-*.*.*.min.css-tiedostot. Jos lähetät vetopyynnön GitHubille, sinun on aina käännettävä uudelleen.

Kokoamistapoja

Menetelmä	Askeleet
Solmu, jossa on makefile	Asenna vähemmän komentorivin kääntäjä npm:llä suorittamalla seuraava komento: $ npm install lessc Kun olet asentanut, suorita `make`käynnistyshakemistosi juurista ja olet valmis. Lisäksi, jos sinulla on watchr asennettuna, voit suorittaa `make watch`käynnistyksen automaattisen uudelleen rakentamisen aina, kun muokkaat tiedostoa bootstrap libissä (tätä ei vaadita, vain mukavuusmenetelmä).
Javascript	Lataa uusin Less.js ja lisää sen polku (ja Bootstrap) tiedostoon `head`. <link rel = "tyylitaulukko/vähemmän" href = "/polku/bootstrap.less" > <script src = "/path/to/less.js" ></script> Voit kääntää .less-tiedostot uudelleen tallentamalla ne ja lataamalla sivusi uudelleen. Less.js kokoaa ne ja tallentaa ne paikalliseen tallennustilaan.
Komentorivi	Jos sinulla on jo vähemmän komentorivityökalu asennettuna, suorita seuraava komento: $ lessc ./lib/bootstrap.less > bootstrap.css Muista sisällyttää `--compress`tämä komento, jos yrität tallentaa tavuja!
Vähemmän Mac-sovellusta	Epävirallinen Mac-sovellus tarkkailee .less-tiedostojen hakemistoja ja kokoaa koodin paikallisiksi tiedostoiksi jokaisen katsotun .less-tiedoston tallennuksen jälkeen. Voit halutessasi vaihtaa sovelluksessa automaattisen pienennyksen asetuksia ja valita, mihin hakemistoon käännetyt tiedostot päätyvät.

Hotlink CSS

Käytä sitä Vähemmän kanssa

Haarukka GitHubissa

Tietoja Bootstrapista Lyhyt historia, selaintuki ja paljon muuta

Historia

Selaimen tuki

Mitä sisältyy

Pika-aloitusesimerkkejä

Ristikkojärjestelmä Rokkaa vakio 940 pikseliä tai rullaa omaasi

Oletusruudukko

Esimerkki ruudukon merkinnöistä

Sarakkeiden offsetointi

Sisäkkäiset sarakkeet

Esimerkki sisäkkäisistä sarakkeista

Rullaa oma ruudukkosi

Verkon sisällä

Nyt mukauttamiseen

Layouts Perusmallit verkkosivujen luomiseen

Kiinteä asettelu

Nestemäinen asettelu

Typografia Otsikot, kappaleet, luettelot ja muut tekstin sisäiset elementit

Otsikot ja kopioi

h1. Otsikko 1

h2. Otsikko 2

h3. Otsikko 3

h4. Otsikko 4

h5. Otsikko 5

h6. Otsikko 6

Esimerkkikappale

Esimerkkiotsikossa on alaotsikko…

Muut elementtejä

Milloin käyttää

Korostus kappaleessa

Osoitteet

Lyhenteet

Lohkolainaukset

Kuinka lainata

Luettelot

Tilaamaton<ul>

Tyylitön<ul.unstyled>

Tilattu<ol>

Kuvausdl

Koodi

Esitetään koodi

Sisäiset etiketit

Merkitse mitä tahansa

Media Kuvien ja videoiden näyttäminen

Mediaruudukko

Esimerkkejä pikkukuvista

Suuri

Keskikokoinen

Pieni

Koodaa niitä

Taulukot Arvasit, taulukkotietoa varten

Rakennuspöytiä

Esimerkki: Oletustaulukkotyylit

Esimerkki: Tiivistetty pöytä

Esimerkki: Reunattu taulukko

Esimerkki: Seepraraidallinen

Esimerkki: Seepraraidallinen w/ TableSorter.js

Lomakkeet

Oletustyylit

Pinotut lomakkeet

Lomakekenttien koot

Painikkeet

Esimerkkipainikkeet

Vaihtoehtoiset koot

Pois käytöstä

Linkit

Painikkeet

Navigointi

Kiinteä yläpalkki

projektin nimi

Mikä se on

Muokattava

Mukana pudotusvalikot

Välilehdet ja pillerit

Esimerkki perusvälilehdistä

Esimerkki peruspillereistä

korppujauhoja

Tilaamaton`<ul>`

Tyylitön`<ul.unstyled>`

Tilattu`<ol>`

Kuvaus`dl`