ovenfor

venstre

Ikke sant

under

Hotlink til CSS

For den raskeste og enkleste starten, bare kopier denne kodebiten inn på nettsiden din.

Bruk den med mindre

En fan av å bruke mindre? Ikke noe problem, bare klon repoen og legg til disse linjene:

Fork på GitHub

Last ned, gaffel, trekk, filproblemer og mer med den offisielle Bootstrap-repoen på Github.

Bootstrap på GitHub »

For øyeblikket v1.3.0

Historie

Ingeniører hos Twitter har historisk sett brukt nesten alle biblioteker de var kjent med for å møte frontend-kravene. Bootstrap begynte som et svar på utfordringene som bød på. Med hjelp fra mange fantastiske folk har Bootstrap vokst betydelig.

Les mer på dev.twitter.com ›

Nettleserstøtte

Bootstrap er testet og støttet i store moderne nettlesere som Chrome, Safari, Internet Explorer og Firefox.

Testet og støttet i Chrome, Safari, Internet Explorer og Firefox

Siste Safari
Siste Google Chrome
Firefox 4+
Internet Explorer 7+
Opera 11

Hva er inkludert

Bootstrap kommer komplett med kompilerte CSS, ukompilerte og eksempelmaler.

Nytt i 1.3 Javascript-plugins
Alle originale .less-filer
Fullstendig kompilert og minifisert CSS
Komplett stilguidedokumentasjon
Tre eksempelsider med forskjellige oppsett

Eksempler på hurtigstart

Trenger du noen raske maler? Sjekk ut disse grunnleggende eksemplene vi har satt sammen:

Standard rutenett

Standard rutenettsystem som leveres som en del av Bootstrap er et 940px bredt rutenett med 16 kolonner. Det er en smak av det populære 960-rutesystemet, men uten ekstra margin/polstring på venstre og høyre side.

Eksempel på rutenettmarkering

Som vist her, kan en grunnleggende layout lages med to "kolonner", som hver spenner over et antall av de 16 grunnleggende kolonnene vi definerte som en del av rutenettsystemet vårt. Se eksemplene nedenfor for flere varianter.

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

1/3

2/3

Forskyvning av kolonner

8 offset 4

1/3 offset 2/3s

4 offset 4

5 offset 3

10 offset 6

Hekkesøyler

Nest innholdet ditt hvis du må ved å opprette en .rowi en eksisterende kolonne.

Eksempel på nestede kolonner

Nivå 1 i kolonnen

Nivå 2

<div class = "row" > 
  <div class = "span12" > 
    Nivå 1 i kolonnen
    <div class = "row" > 
      <div class = "span6" > 
        Nivå 2
      </div>
      <div class = "span6" > 
        Nivå 2
      </div>
    </div>
  </div>
</div>

Rull ditt eget rutenett

Innebygd i Bootstrap er en håndfull variabler for å tilpasse standard 940px rutenettsystem. Med litt tilpasning kan du endre størrelsen på kolonnene, takrennene deres og beholderen de befinner seg i.

Inne i rutenettet

Variablene som trengs for å modifisere rutenettsystemet ligger for øyeblikket alle i preboot.less.

Variabel	Standardverdi	Beskrivelse
`@gridColumns`	16	Antall kolonner i rutenettet
`@gridColumnWidth`	40 piksler	Bredden på hver kolonne i rutenettet
`@gridGutterWidth`	20 piksler	Det negative mellomrommet mellom hver kolonne
`@siteWidth`	Beregnet sum av alle søyler og takrenner	Vi bruker noen grunnleggende match for å telle antall søyler og takrenner og stille inn bredden på `.fixed-container()`blandingen.

Nå for å tilpasse

Å endre rutenettet betyr å endre de tre @grid-*variablene og rekompilere Less-filene.

Bootstrap er utstyrt for å håndtere et gittersystem med opptil 24 kolonner; standarden er bare 16. Her er hvordan rutenettvariablene dine vil se ut tilpasset til et rutenett med 24 kolonner.

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

Når den er kompilert på nytt, er du klar!

Fast layout

Standard og enkel 940px bred, sentrert layout for omtrent hvilken som helst nettside eller side levert av en enkelt <div.container>.

<body>
  <div class = "container" > 
    ...
  </div>
</body>

Flytende layout

En alternativ, fleksibel, flytende sidestruktur med min- og maks-bredder og venstre sidefelt. Flott for apper og dokumenter.

<body>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "innhold" > 
      ...
    </div>
  </div>
</body>

Overskrifter og kopi

Et standard typografisk hierarki for å strukturere nettsidene dine.

Hele det typografiske rutenettet er basert på to Less-variabler i vår preboot.less-fil: @basefontog @baseline. Den første er grunnskriftstørrelsen som brukes hele veien, og den andre er grunnlinjehøyden.

Vi bruker disse variablene, og litt matematikk, for å lage marginer, utfyllinger og linjehøyder for alle våre typer og mer.

h1. Overskrift 1

h2. Overskrift 2

h3. Overskrift 3

h4. Overskrift 4

h5. Overskrift 5

h6. Overskrift 6

Eksempelavsnitt

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.

Eksempeloverskrift Har underoverskrift...

Diverse elementer

Bruke vekt, adresser og forkortelser

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

Når du skal bruke

Uthevingskoder ( <strong>og <em>) bør brukes for å indikere ytterligere viktighet eller vektlegging av et ord eller en frase i forhold til den omkringliggende kopien. Bruk <strong>for viktighet og <em>for vektlegging av stress .

Utheving i et avsnitt

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, en pharetra augue.

Merk: Det er fortsatt greit å bruke <b>og <i>tagger i HTML5, og de trenger ikke å være utformet med henholdsvis fet og kursiv (selv om det er et mer semantisk element, bruk det). <b>er ment å fremheve ord eller setninger uten å formidle ekstra betydning, mens <i>det er mest for stemme, tekniske termer, etc.

Adresser

Elementet brukes til <address>kontaktinformasjon for sin nærmeste stamfar, eller hele arbeidet. Her er to eksempler på hvordan det kan brukes:

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

Fullt navn
[email protected]

Merk: Hver linje i en <address>må slutte med et linjeskift ( <br />) eller pakkes inn i en kode på blokknivå (f.eks. <p>) for å strukturere innholdet på riktig måte.

Forkortelser

For forkortelser og akronymer, bruk <abbr>taggen ( <acronym>er utdatert i HTML5 ). Sett stenografiskjemaet i taggen og angi en tittel for hele navnet.

Blockquotes

<blockquote> <p> <small>

Hvordan sitere

For å inkludere et blokkanførselstegn, pakk <blockquote>rundt <p>og <small>tagger. Bruk <small>elementet til å sitere kilden din, så får du en em-strek —foran den.

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

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

Lister

Uordnet`<ul>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ustilt`<ul.unstyled>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Bestilt`<ol>`

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

Beskrivelse`dl`

Beskrivelseslister: En beskrivelsesliste er perfekt for å definere begreper.
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.

Kode

<code> <pre>

Pimp koden din med stil med to enkle tagger. For enda mer awesomeness gjennom javascript, stikk innom Googles kode-prettify-bibliotek og du er klar.

Presentere kode

Kode, blokker av eller bare utdrag på linje, kan vises med stil bare ved å pakke inn den riktige taggen. For blokker med kode som strekker seg over flere linjer, bruk <pre>elementet. For innebygd kode, bruk <code>elementet.

Element Resultat

<code> I en tekstlinje som denne vil den innpakkede koden din se ut som dette >html<elementet.

Element	Resultat
`<code>`	I en tekstlinje som denne vil den innpakkede koden din se ut som dette `>html<`elementet.
`<pre>`	<div> <h1>Overskrift</h1> <p>Noe her...</p> </div> Merk: Sørg for å holde koden i `pre`tagger så nær venstre som mulig; det vil gjengi alle faner.
`<pre class="prettyprint">`	Ved å bruke google-code-prettify-biblioteket får du kodeblokker en litt annen visuell stil og automatisk syntaksutheving. <div> <h1> Overskrift </h1> <p> Noe her... </p> </div> Last ned google-code-prettify og se readme for hvordan du bruker.

<pre>

<div>
  <h1>Overskrift</h1>
  <p>Noe her...</p>
</div>

Merk: Sørg for å holde koden i pretagger så nær venstre som mulig; det vil gjengi alle faner.

<pre class="prettyprint">

Ved å bruke google-code-prettify-biblioteket får du kodeblokker en litt annen visuell stil og automatisk syntaksutheving.

<div> <h1> Overskrift </h1> <p> Noe her... </p> </div>

Last ned google-code-prettify og se readme for hvordan du bruker.

Innebygde etiketter

<span class="label">

Ring oppmerksomhet til eller flagg en setning i brødteksten din.

Merk hva som helst

Har noen gang trengt en av de fancy nye! eller Viktige flagg når du skriver kode? Vel, nå har du dem. Her er hva som er inkludert som standard:

Merkelapp	Resultat
`<span class="label">Default</span>`	Misligholde
`<span class="label success">New</span>`	Ny
`<span class="label warning">Warning</span>`	Advarsel
`<span class="label important">Important</span>`	Viktig
`<span class="label notice">Notice</span>`	Legge merke til

Medienett

Vis miniatyrbilder av varierende størrelse på sider med lavt HTML-fotavtrykk og minimale stiler.

Eksempel på miniatyrbilder

Miniatyrbilder i .media-gridkan være alle størrelser, men de fungerer best når de er kartlagt direkte til det innebygde Bootstrap-rutenettsystemet. Bildebredder som 90, 210 og 330 kombineres med noen få piksler med polstring for å være lik .span2, .span4, og .span6kolonnestørrelsene.

Stor

Medium

Liten

Koder dem

Medierutene er enkle å bruke og ganske enkle på oppmerkingssiden. Dimensjonene deres er utelukkende basert på størrelsen på bildene som er inkludert.

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

Bygge bord

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

Bord er flotte – til mange ting. Flotte tabeller trenger imidlertid litt oppmerkingskjærlighet for å være nyttige, skalerbare og lesbare (på kodenivå). Her er noen tips for å hjelpe.

Pakk alltid kolonneoverskriftene inn <thead>slik at hierarkiet er <thead>> <tr>> <th>.

I likhet med kolonneoverskriftene, bør alt innholdet i tabellen din pakkes inn i en <tbody>slik at hierarkiet ditt er <tbody>> <tr>> <td>.

Eksempel: Standard tabellstiler

Alle tabeller vil automatisk styles med bare de essensielle kantene for å sikre lesbarhet og opprettholde struktur. Du trenger ikke å legge til ekstra klasser eller attributter.

#	Fornavn	Etternavn	Språk
1	Noen	En	Engelsk
2	Joe	Sixpack	Engelsk
3	Stu	Bulk	Kode

<tabell>
  ...
</table>

Eksempel: Sebrastripet

Bli litt fancy med bordene dine ved å legge til sebrastriper – bare legg til .zebra-stripedklassen.

#	Fornavn	Etternavn	Språk
1	Noen	En	Engelsk
2	Joe	Sixpack	Engelsk
3	Stu	Bulk	Kode

Merk: Zebra-striping er en progressiv forbedring som ikke er tilgjengelig for eldre nettlesere som IE8 og lavere.

< tabellklasse = "sebrastripet" > 
...
</table>

Eksempel: Sebrastripet m/ TableSorter.js

Med det forrige eksemplet forbedrer vi nytten av tabellene våre ved å tilby sorteringsfunksjonalitet via jQuery og Tablesorter- plugin. Klikk på en kolonneoverskrift for å endre sorteringen.

#	Fornavn	Etternavn	Språk
2	Joe	Sixpack	Engelsk
3	Stu	Bulk	Kode
1	Din	En	Engelsk

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funksjon () { 
    $ ( "tabell#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< tabellklasse = "sebrastripet" > 
  ...
</table>

Fast topbar

Hva er det

Topplinjen vår er en fast bar som inneholder logoen eller navnet til et nettsted, primærnavigasjon og søkeskjema.

Tilpassbar

Alle elementer innenfor, og hele topplinjen også, er valgfrie. Du kan velge å inkludere en logo/navn, nav, søk og en sekundær navigasjon – eller en kombinasjon av det.

Dropdowns inkludert

Som en del av hovednavigasjonen har vi inkludert muligheten for deg å legge til rullegardinmenyene i navigasjonen. Sjekk ut den sekundære navigasjonen ovenfor (høyrejustert) for å se hvordan det gjøres. Dropdown- litagger støtter også .activefor å vise gjeldende sidevalg.

Merk: Når du bruker topplinjen på en side, sørg for å ta hensyn til overlappingen den forårsaker ved å legge padding-top: 40px;til i body.

Tabs og piller

Lag enkel sekundærnavigasjon med en <ul>. Bytt mellom tabletter eller piller ved å legge til riktig klasse.

Flott for underseksjoner av innhold som kontoinnstillingssidene våre og brukertidslinjer for å veksle mellom sider med lignende innhold. Tilgjengelig i kategorier eller pillestiler.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Hjem </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Meldinger </a></li> 
  <li><a href = "#" > Innstillinger </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

<ul class = "piller" > 
  <li class = "active" ><a href = "#" > Hjem </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Meldinger </a></li> 
  <li><a href = "#" > Innstillinger </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Brødsmuler

Brødsmule-navigasjon brukes som en måte å vise brukere hvor de er i en app eller et nettsted, men ikke for primærnavigering.

<ul class = "brødsmule" > 
  <li><a href = "#" > Hjem </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Midtside </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > En annen </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Du er her </li> 
</ul>

Paginering

Ultra forenklet og minimalistisk stil paginering inspirert av Rdio. Den store blokken er vanskelig å gå glipp av, lett skalerbar og gir store klikkområder.

<div class = "paginering" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Forrige </a></li>  
    <li class = "active" ><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 = "neste" ><a href = "#" > Neste → </a></li>  
  </ul>
</div>

Grunnleggende varsler

.alert-message

Meldinger på én linje for å fremheve feilen, mulig fiasko eller suksess for en handling. Spesielt nyttig for skjemaer.

Få javascript »

Hellige guacamole! Best sjekk deg selv, du ser ikke så bra ut.

Oh Snap! Endre dette og hint og prøv igjen.

Bra gjort! Du har lest denne varselmeldingen.

Vær oppmerksom! Dette er et varsel som trenger din oppmerksomhet, men det er ikke en stor prioritet ennå.

Eksempelkode

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Hellige guacamole! </strong> Best sjekk deg selv, du ser ikke så bra ut. </p>
</div>

Blokker meldinger

.alert-message.block-message

For meldinger som krever litt forklaring, har vi avsnittsstilvarsler. Disse er perfekte for å boble opp lengre feilmeldinger, advare en bruker om en ventende handling, eller bare presentere informasjon for mer vekt på siden.

Få javascript »

Hellige guacamole! Dette er en advarsel! Best sjekk deg selv, du ser ikke så bra ut. Nulla vitae elit libero, en pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Ta denne handlingen Eller gjør dette

Oh Snap! Du har en feil! Endre dette og hint og prøv igjen.

Duis mollis er ikke commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

Ta denne handlingen Eller gjør dette

Bra gjort! Du har lest denne varselmeldingen. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Ta denne handlingen Eller gjør dette

Vær oppmerksom! Dette er et varsel som trenger din oppmerksomhet, men det er ikke en stor prioritet ennå.

Ta denne handlingen Eller gjør dette

Eksempelkode

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Hellige guacamole! Dette er en advarsel! </strong> Best sjekk deg selv, du ser ikke så bra ut. Nulla vitae elit libero, en pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Utfør denne handlingen </a> <a class = "btn small" href = "#" > Eller gjør dette </a>     
  </div>
</div>

Modaler

Modaler – dialogbokser eller lysbokser – er flotte for kontekstuelle handlinger i situasjoner der det er viktig at bakgrunnskonteksten opprettholdes.

Få javascript »

Verktøytips

Twipsies er veldig nyttige for å hjelpe en forvirret bruker og peke dem i riktig retning.

Få javascript »

Lorem ipsum dolar sit amet illo feil 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 dicta quae accusantium fugit volupta nemo

Popovers

Bruk popovers for å gi undertekstinformasjon til en side uten å påvirke layout.

Få javascript »

Starter

Å integrere javascript med Bootstrap-biblioteket er superenkelt. Nedenfor går vi over det grunnleggende og gir deg noen fantastiske plugins for å komme i gang!

Se javascript-dokumenter »

Hva er inkludert

Gjør noen av Bootstraps primærkomponenter til live med nye tilpassede plugins som fungerer med jQuery og Ender . Vi oppfordrer deg til å utvide og modifisere dem for å passe dine spesifikke utviklingsbehov.

Fil	Beskrivelse
bootstrap-modal.js	Vår Modal-plugin er en superslank versjon av den tradisjonelle modal js-pluginen! Vi passet spesielt på å inkludere bare funksjonaliteten vi trenger på twitter.
bootstrap-alerts.js	Varslingspluginen er en superliten klasse for å legge til nærfunksjonalitet til varsler.
bootstrap-dropdown.js	Dette pluginet er for å legge til rullegardininteraksjon til bootstrap-toppen eller navigering med faner.
bootstrap-scrollspy.js	ScrollSpy-pluginet er for å legge til en automatisk oppdateringsnavigasjon basert på rulleposisjon til bootstrap-toppen.
bootstrap-tabs.js	Dette pluginet legger til rask, dynamisk fane- og pillefunksjonalitet for å sykle gjennom lokalt innhold.
bootstrap-twipsy.js	Basert på den utmerkede jQuery.tipsy-pluginen skrevet av Jason Frame; twipsy er en oppdatert versjon, som ikke er avhengig av bilder, bruker css3 for animasjoner og dataattributter for lokal tittellagring!
bootstrap-popover.js	Popover-pluginet gir et enkelt grensesnitt for å legge til popovers til applikasjonen din. Den utvider boostrap-twipsy.js- pluginen, så sørg for å ta tak i den filen også når du inkluderer popovers i prosjektet ditt!

Er javascript nødvendig?

Nei! Bootstrap er først og fremst designet for å være et CSS-bibliotek. Dette javascriptet gir et grunnleggende interaktivt lag på toppen av de inkluderte stilene.

Men for de som trenger javascript, har vi gitt pluginene ovenfor for å hjelpe deg å forstå hvordan du integrerer Bootstrap med javascript og for å gi deg et raskt, lett alternativ for grunnleggende funksjonalitet med en gang.

For mer informasjon og for å se noen live-demoer, se vår plugin-dokumentasjonsside .

Bootstrap ble bygget med Preboot , en åpen kildekodepakke med blandinger og variabler som skal brukes sammen med Less , en CSS-forprosessor for raskere og enklere webutvikling.

Sjekk ut hvordan vi brukte Preboot i Bootstrap og hvordan du kan bruke det hvis du velger å kjøre Less på ditt neste prosjekt.

Hvordan bruke det

Bruk dette alternativet for å gjøre full bruk av Bootstraps Less-variabler, mixins og nesting i CSS via javascript i nettleseren din.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "alle" />    
<script src = "js/less-1.1.3.min.js" ></script>

Føler du ikke .js-løsningen? Prøv Less Mac-appen eller bruk Node.js til å kompilere når du distribuerer koden din.

Hva er inkludert

Her er noen av høydepunktene av det som er inkludert i Twitter Bootstrap som en del av Bootstrap. Gå over til Bootstrap-nettstedet eller Github-prosjektsiden for å laste ned og lære mer.

Variabler

Variables in Less er perfekte for å vedlikeholde og oppdatere din CSS-hodepinefri. Når du vil endre en fargeverdi eller en ofte brukt verdi, oppdaterer du den på ett sted, og du er klar.

// Lenker
@linkColor : #8b59c2;         
@linkColorHover :     mørkere ( @linkColor , 10 ); 
 
// Grå
@svart : #000;             
@grayDark :           lysere ( @black , 25 %); 
@grå :               lysere ( @svart , 50 %); 
@grayLight :          lysere ( @black , 70 %); 
@grayLighter :        lysere ( @black , 90 %); 
@hvit : #fff;             
 
// Aksentfarger
@blå : #08b5fb ;              
@grønn : #46a546 ;             
@rød : #9d261d ;               
@gul : #ffc40d;            
@oransje : #f89406;            
@rosa : #c3325f;              
@lilla : #7a43b6;            
 
// Grunnlinjenett
@basefont : 13px ;          
@grunnlinje : 18px ;

Kommenterer

Less gir også en annen stil for kommentering i tillegg til CSSs normale /* ... */syntaks.

// Dette er en kommentar
/* Dette er også en kommentar */

Blander sammen wazooen

Mixins er i utgangspunktet inkluderer eller deler for CSS, slik at du kan kombinere en kodeblokk til en. De er flotte for egenskaper med leverandørprefiks som box-shadow, gradienter på tvers av nettlesere, skriftstabler og mer. Nedenfor er et eksempel på mixinene som er inkludert i Bootstrap.

Skriftstabler

#font {
  . stenografi ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    skriftstørrelse : @ størrelse ; _ 
    font - weight : @weight ; 
    line - høyde : @lineHeight ; 
  }
  . sans - serif ( @vekt : normal , @størrelse : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    skriftstørrelse : @ størrelse ; _ 
    font - weight : @weight ; 
    line - høyde : @lineHeight ; 
  }
  ...
}

Gradienter

#gradient {
  ...
  . vertikal ( @startColor : #555, @endColor: #333) { 
    bakgrunnsfarge : @endColor ; _ _ 
    bakgrunn - gjenta : gjenta - x ;
    bakgrunn - bilde : - khtml - gradient ( lineær , venstre topp , venstre bunn , fra ( @startColor ), til ( @endColor )); // Konqueror   
    bakgrunn - bilde : - moz - lineær - gradient ( @startColor , @endColor ); // FF 3.6+   
    bakgrunn - bilde : - ms - lineær - gradient ( @startColor , @endColor ); // IE10   
    bakgrunn - bilde : - webkit - gradient ( lineær , venstre topp , venstre bunn , farge - stopp ( 0 %, @startColor ), farge - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bakgrunn - bilde : - webkit - lineær - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    bakgrunn - bilde : - o - lineær - gradient ( @startColor , @endColor ); // Opera 11.10   
    bakgrunn - bilde : lineær - gradient ( @startColor , @endColor ); // Standarden  
  }
  ...
}

Drift

Bli fancy og utfør litt matematikk for å generere fleksible og kraftige mixins som den nedenfor.

// Grititude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Lag noen kolonner
. kolonner ( @columnSpan : 1 ) {  
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

Kompilere mindre

Etter å ha modifisert .lessfilene i /lib/, må du kompilere dem på nytt for å gjenskape filene bootstrap-*.*.*.css og bootstrap-*.*.*.min.css. Hvis du sender inn en pull-forespørsel til GitHub, må du alltid rekompilere.

Måter å kompilere

Metode	Trinn
Node med makefile	Installer mindre kommandolinjekompilatoren med npm ved å kjøre følgende kommando: $ npm installer mindrec Når den er installert, kjør bare `make`fra roten til bootstrap-katalogen din, og du er klar. I tillegg, hvis du har watchr installert, kan du kjøre `make watch`for å få bootstrap automatisk gjenoppbygd hver gang du redigerer en fil i bootstrap lib (dette er ikke nødvendig, bare en praktisk metode).
Javascript	Last ned den nyeste Less.js og ta med banen til den (og Bootstrap) i `head`. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> For å rekompilere .less-filene, lagrer du dem og laster inn siden på nytt. Less.js kompilerer dem og lagrer dem i lokal lagring.
Kommandolinje	Hvis du allerede har installert mindre kommandolinjeverktøy, kjør bare følgende kommando: $ lessc ./lib/bootstrap.less > bootstrap.css Sørg for å inkludere `--compress`i den kommandoen hvis du prøver å lagre noen byte!
Mindre Mac-app	Den uoffisielle Mac-appen ser på kataloger med .less-filer og kompilerer koden til lokale filer etter hver lagring av en overvåket .less-fil. Hvis du vil, kan du bytte innstillinger i appen for automatisk minifisering og hvilken katalog de kompilerte filene havner i.

Hotlink til CSS

Bruk den med mindre

Fork på GitHub

Om Bootstrap Kort historie, nettleserstøtte og mer

Historie

Nettleserstøtte

Hva er inkludert

Eksempler på hurtigstart

Rutenettsystem Rock standard 940px eller rull din egen

Standard rutenett

Eksempel på rutenettmarkering

Forskyvning av kolonner

Hekkesøyler

Eksempel på nestede kolonner

Rull ditt eget rutenett

Inne i rutenettet

Nå for å tilpasse

Oppsett Grunnleggende maler for å lage nettsider

Fast layout

Flytende layout

Typografi Overskrifter, avsnitt, lister og andre innebygde typeelementer

Overskrifter og kopi

h1. Overskrift 1

h2. Overskrift 2

h3. Overskrift 3

h4. Overskrift 4

h5. Overskrift 5

h6. Overskrift 6

Eksempelavsnitt

Eksempeloverskrift Har underoverskrift...

Diverse elementer

Når du skal bruke

Utheving i et avsnitt

Adresser

Forkortelser

Blockquotes

Hvordan sitere

Lister

Uordnet<ul>

Ustilt<ul.unstyled>

Bestilt<ol>

Beskrivelsedl

Kode

Presentere kode

Innebygde etiketter

Merk hva som helst

Media Viser bilder og videoer

Medienett

Eksempel på miniatyrbilder

Stor

Medium

Liten

Koder dem

Tabeller For, du gjettet riktig, tabelldata

Bygge bord

Eksempel: Standard tabellstiler

Eksempel: Sebrastripet

Eksempel: Sebrastripet m/ TableSorter.js

Skjemaer

Standard stiler

Stablede former

Skjemafeltstørrelser

Knapper

Eksempelknapper

Alternative størrelser

Deaktivert tilstand

Lenker

Knapper

Navigasjon

Fast topbar

prosjektnavn

Hva er det

Tilpassbar

Dropdowns inkludert

Tabs og piller

Brødsmuler

Paginering

Varsler og feilstiler for suksess, advarsler og feilmeldinger eller varsler

Grunnleggende varsler

Eksempelkode

Uordnet`<ul>`

Ustilt`<ul.unstyled>`

Bestilt`<ol>`

Beskrivelse`dl`