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.

Historie

I de tidligere dagene av Twitter brukte ingeniører nesten alle biblioteker de var kjent med for å møte frontend-kravene. Bootstrap begynte som et svar på utfordringene som presenterte seg og utviklingen akselererte raskt under Twitters første Hackweek.

Med hjelp og tilbakemeldinger fra mange ingeniører på Twitter, har Bootstrap vokst betydelig til å omfatte ikke bare grunnleggende stiler, men mer elegante og holdbare front-end designmønstre.

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.

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

Hva er inkludert

Bootstrap kommer komplett med kompilerte CSS, ukompilerte og eksempelmaler.

Alle originale .less-filer
Fullstendig kompilert og minifisert CSS
Komplett stilguidedokumentasjon
Eksempelsidemal (mer kommer snart)

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"> klasse = "rad" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Forskyvning av kolonner

8 offset 4

4 offset 4

5 offset 3

10 offset 6

Fast layout

En grunnleggende 940px bred, sentrert beholderlayout for omtrent alle nettsteder eller sider.

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

Flytende layout

En fleksibel flytende eller flytende sidestruktur med min- og maks-bredder og en venstre sidelinje. Flott for apper.

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

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, men de kommer ikke med iboende stiler lenger. <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. Slik ser det ut:

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

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

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.

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

<table class="common-table"> klasse = "fellestabell" >
  ...
</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.

<table class="common-table sebra-striped"> klasse = "vanlig-bord sebra-stripet" >
...
</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
1	Din	En	Engelsk
2	Joe	Sixpack	Engelsk
3	Stu	Bulk	Kode

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<script > 
  $ ( funksjon () { 
    $ ( "tabell#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "vanlig-bord sebra-stripet" > 
  ...
</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.

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"> klasse = "faner" >
  <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="pills"> klasse = "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>

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="pagination"> klasse = "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

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

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

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

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

Blokker meldinger

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.

Oh Snap! Du har en feil!Endre dette og hint og prøv igjen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Ta denne handlingen Eller gjør dette

Hellige gaucamole! 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

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

Modaler

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

Verktøytips

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

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

under!

Ikke sant!

venstre!

ovenfor!

Popovers

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

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

Fargevariabler

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;            
 
// Grunnlinje
@grunnlinje : 20px ;

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 ; 
  }
  . serif ( @vekt : normal , @størrelse : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    skriftstørrelse : @ størrelse ; _ 
    font - weight : @weight ; 
    line - høyde : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    skriftstørrelse : @ størrelse ; _ 
    font - weight : @weight ; 
    line - høyde : @lineHeight ; 
  }
}

Gradienter

#gradient {
  . horisontal ( @startColor : #555, @endColor: #333) { 
    bakgrunnsfarge : @endColor ; _ _ 
    bakgrunn - gjenta : gjenta - x ;
    bakgrunn - bilde : - khtml - gradient ( lineær , venstre topp , høyre topp , fra ( @startColor ), til ( @endColor )); // Konqueror   
    bakgrunn - bilde : - moz - lineær - gradient ( venstre , @startColor , @endColor ); // FF 3.6+    
    bakgrunn - bilde : - ms - lineær - gradient ( venstre , @startColor , @endColor ); // IE10    
    bakgrunn - bilde : - webkit - gradient ( lineær , venstre topp , høyre topp , farge - stopp ( 0 %, @startColor ), farge - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bakgrunn - bilde : - webkit - lineær - gradient ( venstre , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    bakgrunn - bilde : - o - lineær - gradient ( venstre , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 og IE7 
    bakgrunn - bilde : lineær - gradient ( venstre , @startColor , @endColor ); // Le standard   
  }
  . 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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 og IE7 
    bakgrunn - bilde : lineær - gradient ( @startColor , @endColor ); // Standarden  
  }
  . retningsbestemt ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikal - tre - farger ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Drift og nettsystem

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

// Grititude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Grid System
. container {
  width : @siteWidth ; 
  margin : 0 auto ;  
  . clearfix ();
}
. kolonner ( @columnSpan : 1 ) {  
  display : inline ; 
  flyte : venstre ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth       * ( @columnSpan - 1 ));   
  margin - venstre : @gridGutterWidth ; 
  &: første - barn {
    margin - venstre : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - venstre : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset -          1 )) ! viktig ; 
}

Støvelhempe

Bootstrap, fra Twitter

Hotlink til CSS

Bruk den med mindre

Fork på GitHub

Om Bootstrap Kort historie, nettleserstøtte og mer

Historie

Nettleserstøtte

Hva er inkludert

Rutenettsystem Rock standard 940px eller rull din egen

Standard rutenett

Eksempel på rutenettmarkering

Forskyvning av kolonner

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

Tabeller For, du gjettet riktig, tabelldata

Bygge bord

Eksempel: Standard tabellstiler

Eksempel: Sebrastripet

Eksempel: Sebrastripet m/ TableSorter.js

Skjemaer

Standard stiler

Stablede former

Knapper

Eksempelknapper

Alternative størrelser

Deaktivert tilstand

Lenker

Knapper

Navigasjon

Fast topbar

prosjektnavn

Hva er det

Tilpassbar

Dropdowns inkludert

Tabs og piller

Paginering

Varsler og feilstiler for suksess, advarsler og feilmeldinger eller varsler

Grunnleggende varsler

Blokker meldinger

Popovers- komponenter for visning av innhold i modaler, verktøytips og popovers

Modaler

Modal overskrift

Verktøytips

Popovers

Popover-tittel

Bruk av Bootstrap med mindre Overlad CSS-en din med variabler, mixins og funksjoner

Hvordan bruke det

Hva er inkludert

Fargevariabler

Kommenterer

Blander sammen wazooen

Skriftstabler

Gradienter

Drift og nettsystem

Uordnet`<ul>`

Ustilt`<ul.unstyled>`

Bestilt`<ol>`

Beskrivelse`dl`