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.

Historia

Twitterin aikaisempina päivinä insinöörit käyttivät lähes mitä tahansa tuttua kirjastoa täyttääkseen käyttöliittymävaatimukset. Bootstrap sai alkunsa vastauksena haasteisiin ja kehitys kiihtyi nopeasti Twitterin ensimmäisen Hackweekin aikana.

Monien Twitterin insinöörien avulla ja palautteen avulla Bootstrap on kasvanut merkittävästi kattamaan perustyylien lisäksi tyylikkäämpiä ja kestävämpiä etupään suunnittelukuvioita.

Lue lisää osoitteessa dev.twitter.com ›

Selaimen tuki

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

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

Mitä sisältyy

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

Kaikki alkuperäiset .less-tiedostot
Täysin käännetty ja minimoitu CSS
Täydellinen tyylioppaan dokumentaatio
Esimerkkisivumalli (lisää tulossa pian)

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="row"> luokka = "rivi" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Sarakkeiden offsetointi

8 offset 4

4 offset 4

5 offset 3

10 offset 6

Kiinteä asettelu

Perustason 940 pikseliä leveä, keskitetty säilön asettelu melkein mille tahansa sivustolle tai sivulle.

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

Nestemäinen asettelu

Joustava nestemäinen tai nestemäinen sivurakenne, jossa on minimi- ja maksimileveydet sekä vasen sivupalkki. Erinomainen sovelluksille.

<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.

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.

Huomautus: HTML5:ssä voi edelleen käyttää <b>ja <i>-tageja, mutta niissä ei enää ole luontaisia tyylejä. <b>on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>se on enimmäkseen puheille, teknisille termeille jne.

Osoitteet

Elementtiä <address>käytetään lähimmän esi-isänsä tai koko työn yhteystiedoissa. Tältä se näyttää:

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

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

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.

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

<table class="common-table"> luokka = "yhteinen 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

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

<table class="common-table zebra-striped"> class = "yhteisen pöydän 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
1	Sinun	Yksi	Englanti
2	Joe	Sixpäkki	Englanti
3	Stu	Dent	Koodi

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<script > 
  $ ( funktio () { 
    $ ( "taulukko#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "yhteinen pöytä 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.

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ä.

<ul class="tabs"> luokka = "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>

<ul class="pills"> luokka = "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>

Sivunumerointi

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

<div class="pagination"> luokka = "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

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

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

Pyhä gaucamole! Parasta tarkistaa itsesi, et näytä liian hyvältä.

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.

Estä viestit

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.

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 nec elit. Cras mattis consectetur purus sit amet fermentum.

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

Pyhä gaucamole! 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ä

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ä

Modaalit

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

Työkaluvinkkejä

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

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 volquauttitasm up quauttatas

alla!

oikein!

vasemmalle!

edellä!

Popovers

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

Bootstrap rakennettiin Prebootilla , avoimen lähdekoodin sekoittimien ja muuttujien paketilla, jota käytetään yhdessä Lessin kanssa , CSS-esiprosessori nopeuttaa ja helpottaa verkkokehitystä.

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 täysin Bootstrapin Less-muuttujia, sekoituksia ja sisäkkäisyyttä CSS:ssä selaimesi JavaScriptin kautta.

<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "tyylitaulukko/vähemmän" href = "vähemmän/bootstrap.less" media = "kaikki" />   
<script src = "js/less-1.0.41.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.

Värimuuttujat

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;             
@greyDark :           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;            
// Perustaso
@perusviiva : 20px ;

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 ; 
  }
  . serif ( @weight : normaali , @size : 14px , @lineHeight : 20px ) {     
    kirjasinperhe : " Georgia " , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - weight : @weight ; 
    rivi - korkeus : @lineHeight ; 
  }
  . monospace ( @weight : normaali , @size : 12px , @lineHeight : 20px ) {     
    kirjasinperhe : " Monaco " , Courier New , monospace ;   
    font - size : @size ; 
    font - weight : @weight ; 
    rivi - korkeus : @lineHeight ; 
  }
}

Gradientit

#gradient {
  . vaakasuora ( @startColor : #555, @endColor: #333) { 
    taustaväri : @endColor ; _ _ 
    tausta - toisto : toista - x ;
    background - image : - khtml - gradient ( lineaarinen , vasen ylhäällä , oikea ylhäällä , alkaen ( @startColor ), to ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( vasen , @startColor , @endColor ); // FF 3.6+    
    background - image : - ms - linear - gradient ( vasen , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradient ( lineaarinen , vasen yläosa , oikea yläosa , väri - stop ( 0 % , @startColor ), väri - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( vasen , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : - o - linear - gradient ( vasen , @startColor , @endColor ); // Ooppera 11.10    
    - ms - suodatin : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    suodatin : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ja IE7 
    background - image : linear - gradient ( vasen , @startColor , @endColor ); // Le standardi   
  }
  . 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   
    - ms - suodatin : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    suodatin : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 ja IE7 
    background - image : linear - gradient ( @startColor , @endColor ); // Standardi  
  }
  . suuntaava ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . pystysuora - kolme - väriä ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Toiminta ja verkkojärjestelmä

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

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Verkkojärjestelmä
. kontti {
  leveys : @siteWidth ; 
  marginaali : 0 auto ;  
  . clearfix ();
}
. sarakkeet ( @columnSpan : 1 ) {  
  näyttö : inline ; 
  kellua : vasen ;
  leveys : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  marginaali - vasen : @gridGutterWidth ; 
  &: ensimmäinen - lapsi {
    marginaali - vasen : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  marginaali - vasen : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! tärkeä ;          
}

Bootstrap

Bootstrap, Twitteristä

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

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

Oletusruudukko

Esimerkki ruudukon merkinnöistä

Sarakkeiden offsetointi

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

Taulukot Arvasit, taulukkotietoa varten

Rakennuspöytiä

Esimerkki: Oletustaulukkotyylit

Esimerkki: Seepraraidallinen

Esimerkki: Seepraraidallinen w/ TableSorter.js

Lomakkeet

Oletustyylit

Pinotut lomakkeet

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

Sivunumerointi

Alerts & Errors Tyylit onnistumis-, varoitus- ja virheilmoituksia tai ilmoituksia varten

Perushälytykset

Estä viestit

Ponnahdusikkunat Komponentit sisällön näyttämiseen modaaleissa, työkaluvihjeissä ja ponnahdusikkunoissa

Modaalit

Modaalinen otsikko

Työkaluvinkkejä

Popovers

Popover Otsikko

Bootstrapin käyttäminen vähemmällä Lataa CSS:ääsi muuttujilla, mikseillä ja funktioilla

Kuinka käyttää sitä

Mitä sisältyy

Värimuuttujat

Kommentointi

Sekoittaa wazoon

Fonttipinot

Gradientit

Toiminta ja verkkojärjestelmä

Tilaamaton`<ul>`

Tyylitön`<ul.unstyled>`

Tilattu`<ol>`

Kuvaus`dl`