Hotlink til CSS

For den hurtigste og nemmeste start skal du bare kopiere dette uddrag til din webside.

Brug det med mindre

Er du fan af at bruge mindre? Intet problem, bare klon repoen og tilføje disse linjer:

Fork på GitHub

Download, gaffel, træk, filproblemer og mere med den officielle Bootstrap-repo på Github.

Historie

I de tidligere dage af Twitter brugte ingeniører næsten ethvert bibliotek, de var bekendt med, for at opfylde frontend-kravene. Bootstrap begyndte som et svar på de udfordringer, der præsenterede sig, og udviklingen accelererede hurtigt under Twitters første Hackweek.

Med hjælp og feedback fra mange ingeniører hos Twitter er Bootstrap vokset betydeligt til at omfatte ikke kun grundlæggende stilarter, men mere elegante og holdbare frontend-designmønstre.

Læs mere på dev.twitter.com ›

Browser support

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

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

Hvad er inkluderet

Bootstrap leveres komplet med kompileret CSS, ukompileret og eksempelskabeloner.

Alle originale .less filer
Fuldt kompileret og minificeret CSS
Komplet styleguide dokumentation
Eksempel på sideskabelon (mere kommer snart)

Standard gitter

Standardgittersystemet, der leveres som en del af Bootstrap, er et 940px bredt gitter med 16 kolonner. Det er en smag af det populære 960-gittersystem, men uden den ekstra margin/polstring på venstre og højre side.

Eksempel på gittermarkering

Som vist her kan der oprettes et grundlæggende layout med to "kolonner", der hver spænder over et antal af de 16 grundlæggende kolonner, vi definerede som en del af vores gittersystem. Se eksemplerne nedenfor for flere variationer.

<div class="row"> klasse = "række" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Forskydning af kolonner

8 offset 4

4 offset 4

5 offset 3

10 offset 6

Fast layout

Et grundlæggende 940px bredt, centreret containerlayout til stort set alle websteder eller sider.

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

Flydende layout

En fleksibel flydende eller flydende sidestruktur med min- og max-bredder og en venstre sidebjælke. Fantastisk til apps.

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

Overskrifter og kopi

Et standard typografisk hierarki til strukturering af dine websider.

h1. Overskrift 1

h2. Overskrift 2

h3. Overskrift 3

h4. Overskrift 4

h5. Overskrift 5

h6. Overskrift 6

Eksempel afsnit

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

Brug af eftertryk, adresser og forkortelser

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

Hvornår skal bruges

Fremhævningsmærker ( <strong>og <em>) skal bruges til at angive yderligere vigtighed eller betoning af et ord eller en sætning i forhold til dets omgivende kopi. Brug <strong>for vigtighed og <em>til betoning af stress .

Understregning i et afsnit

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ud fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, en pharetra augue.

Bemærk: Det er stadig okay at bruge <b>og <i>tags i HTML5, men de kommer ikke med iboende stilarter længere. <b>er beregnet til at fremhæve ord eller sætninger uden at formidle yderligere betydning, mens <i>det mest er til stemme, tekniske termer osv.

Adresser

Elementet <address>bruges til kontaktoplysninger for sin nærmeste forfader eller hele arbejdet. Sådan ser det ud:

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

Bemærk: Hver linje i en <address>skal slutte med et linjeskift ( <br />) eller pakkes ind i et tag på blokniveau (f.eks. <p>) for at strukturere indholdet korrekt.

Forkortelser

For forkortelser og akronymer skal du bruge <abbr>tagget ( <acronym>er forældet i HTML5 ). Indsæt stenografiformularen i tagget og indstil en titel for det fulde navn.

Blokcitater

<blockquote> <p> <small>

Sådan citeres

For at inkludere et blokcitat skal du omslutte <blockquote>og <p>tagge <small>. Brug <small>elementet til at citere din kilde, og du får en em-bindestreg —før den.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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

Ustylet`<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 til at definere termer.
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 borde

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

Borde er gode - til mange ting. Store tabeller har dog brug for en smule markup-kærlighed for at være nyttige, skalerbare og læsbare (på kodeniveau). Her er et par tips til at hjælpe.

Indpak altid dine kolonneoverskrifter på en <thead>sådan måde, at hierarkiet er <thead>> <tr>> <th>.

I lighed med kolonneoverskrifterne skal hele din tabels kropsindhold pakkes ind i en <tbody>, så dit hierarki er <tbody>> <tr>> <td>.

Eksempel: Standard tabelstile

Alle tabeller bliver automatisk stylet med kun de væsentlige rammer for at sikre læsbarhed og opretholde struktur. Ingen grund til at tilføje ekstra klasser eller attributter.

#	Fornavn	Efternavn	Sprog
1	Nogle	En	engelsk
2	Joe	Vaskebræt	engelsk
3	Stu	Bule	Kode

< tabelklasse = "fælles-tabel" > 
  ...
</table>

Eksempel: Zebra-stribet

Bliv lidt fancy med dine borde ved at tilføje zebrastriber – bare tilføj .zebra-stripedklassen.

#	Fornavn	Efternavn	Sprog
1	Nogle	En	engelsk
2	Joe	Vaskebræt	engelsk
3	Stu	Bule	Kode

Bemærk: Zebra-striping er en progressiv forbedring, der ikke er tilgængelig for ældre browsere som IE8 og derunder.

<table class = "almindelig-bord zebra-stribet" > 
...
</table>

Eksempel: Zebra-stribet m/ TableSorter.js

Tager vi det foregående eksempel, forbedrer vi anvendeligheden af vores tabeller ved at levere sorteringsfunktionalitet via jQuery og Tablesorter plugin. Klik på en hvilken som helst kolonneoverskrift for at ændre sorteringen.

#	Fornavn	Efternavn	Sprog
1	Din	En	engelsk
2	Joe	Vaskebræt	engelsk
3	Stu	Bule	Kode

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funktion () { 
    $ ( "tabel#sortTabeleksempel" ). tablesorter ({ sortList : [[ 1  , 0 ]] }); 
  });
</script>
<tabel class = "almindelig-bord zebra-stribet" >
  ...
</table>

Fast topbar

Hvad er det

Vores topbjælke er en fast bjælke, der rummer et websteds logo eller navn, primær navigation og søgeform.

Kan tilpasses

Alle elementer i, og også hele topbjælken, er valgfri. Du kan vælge at inkludere et logo/navn, nav, søgning og en sekundær nav - eller en hvilken som helst kombination af det.

Dropdowns inkluderet

Som en del af hovednavigationen har vi inkluderet muligheden for, at du kan tilføje rullemenuer til din nav. Tjek den sekundære nav ovenfor (højrejusteret) for at se, hvordan det gøres.

Tabs og piller

Opret enkel sekundær navigation med en <ul>. Skift mellem faner eller piller ved at tilføje den relevante klasse.

Fantastisk til undersektioner af indhold som vores kontoindstillingssider og brugertidslinjer til at skifte mellem sider med lignende indhold. Tilgængelig i fane- eller pilleformater.

<ul class = "faner" > 
  <li class = "active" ><a href = "#" > Startside </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Beskeder </a></li> 
  <li><a href = "#" > Indstillinger </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

<ul class = "piller" > 
  <li class = "active" ><a href = "#" > Startside </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Beskeder </a></li> 
  <li><a href = "#" > Indstillinger </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Sideinddeling

Ultra forenklet og minimalistisk paginering inspireret af Rdio. Den store blok er svær at gå glip af, let skalerbar og giver store klikområder.

<div class = "paginering" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Forrige </a></li>  
    <li class = "aktiv" ><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 = "næste" ><a href = "#" > Næste → </a></li>  
  </ul>
</div>

Grundlæggende advarsler

Beskeder på én linje til at fremhæve en handlings fiasko, mulige fiasko eller succes. Særligt nyttigt til formularer.

Oh snap! Skift dit og dat og prøv igen.

Hellige gaucamole! Bedst tjek dig selv, du ser ikke for godt ud.

Godt klaret! Du har læst denne advarselsmeddelelse.

Heads up! Dette er en advarsel, der kræver din opmærksomhed, men det er ikke en stor prioritet endnu.

Bloker beskeder

For beskeder, der kræver lidt forklaring, har vi advarsler om afsnitsstil. Disse er perfekte til at boble længere fejlmeddelelser op, advare en bruger om en afventende handling eller blot præsentere information for at få mere vægt på siden.

Oh snap! Du har en fejl!Skift dit og dat og prøv igen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tag denne handling Eller gør dette

Hellige gaucamole! Dette er en advarsel!Bedst tjek dig selv, du ser ikke for godt ud. Nulla vitae elit libero, en pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Tag denne handling Eller gør dette

Godt klaret!Du har læst denne advarselsmeddelelse. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Tag denne handling Eller gør dette

Heads up!Dette er en advarsel, der kræver din opmærksomhed, men det er ikke en stor prioritet endnu.

Tag denne handling Eller gør dette

Modaler

Modaler – dialogbokse eller lysbokse – er gode til kontekstuelle handlinger i situationer, hvor det er vigtigt, at baggrundskonteksten bevares.

Værktøjstip

Twipsies er super nyttige til at hjælpe en forvirret bruger og pege dem i den rigtige retning.

Lorem ipsum dolar sit amet illo fejl 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 quae accusantium fugit volupta quae quate quae

under!

ret!

venstre!

over!

Popovers

Brug popovers til at give subtekstuelle oplysninger til en side uden at påvirke layoutet.

Bootstrap blev bygget med Preboot , en open source-pakke af mixins og variabler, der skal bruges sammen med Less , en CSS-forprocessor til hurtigere og nemmere webudvikling.

Se, hvordan vi brugte Preboot i Bootstrap, og hvordan du kan gøre brug af det, hvis du vælger at køre Less på dit næste projekt.

Brugsvejledning

Brug denne mulighed til at gøre fuld brug af Bootstraps Less-variabler, mixins og nesting i CSS via javascript i din browser.

<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 brug Node.js til at kompilere, når du implementerer din kode.

Hvad er inkluderet

Her er nogle af højdepunkterne i, hvad der er inkluderet i Twitter Bootstrap som en del af Bootstrap. Gå over til Bootstrap-webstedet eller Github-projektsiden for at downloade og lære mere.

Farvevariable

Variables in Less er perfekte til at vedligeholde og opdatere din CSS-hovedpinefri. Når du vil ændre en farveværdi eller en ofte brugt værdi, skal du opdatere den på ét sted, og du er klar.

// Links
@linkColor : #8b59c2;         
@linkColorHover :     mørkere ( @linkColor , 10 ); 
 
// Grå
@sort : #000;             
@grayDark :           lysere ( @sort , 25 %); 
@grå :               lysere ( @sort , 50 %); 
@grayLight :          lysere ( @sort , 70 %); 
@grayLighter :        lysere ( @sort , 90 %); 
@hvid : #fff;             
 
// Accentfarver
@blå : #08b5fb ;              
@grøn : #46a546 ;             
@rød : #9d261d ;               
@gul : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@lilla : #7a43b6;            
 
// Baseline
@baseline : 20px ;

Kommenterer

Mindre giver også en anden måde at kommentere på ud over CSS's normale /* ... */syntaks.

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

Blander wazoo'en sammen

Mixins er dybest set inkluderer eller delvise til CSS, så du kan kombinere en blok kode til en. De er gode til egenskaber med leverandørpræfiks som box-shadow, gradienter på tværs af browsere, skrifttyper og mere. Nedenfor er et eksempel på de mixins, der er inkluderet i Bootstrap.

Font stakke

#font {
  . stenografi ( @vægt : normal , @størrelse : 14px , @lineHøjde : 20px ) {     
    skrifttype - størrelse : @ størrelse ; 
    font - vægt : @ vægt ; 
    line - højde : @lineHøjde ; 
  }
  . sans - serif ( @vægt : normal , @størrelse : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    skrifttype - størrelse : @ størrelse ; 
    font - vægt : @ vægt ; 
    line - højde : @lineHøjde ; 
  }
  . serif ( @vægt : normal , @størrelse : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    skrifttype - størrelse : @ størrelse ; 
    font - vægt : @ vægt ; 
    line - højde : @lineHøjde ; 
  }
  . monospace ( @vægt : normal , @ størrelse : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    skrifttype - størrelse : @ størrelse ; 
    font - vægt : @ vægt ; 
    line - højde : @lineHøjde ; 
  }
}

Gradienter

#gradient {
  . vandret ( @startColor : #555, @endColor: #333) { 
    baggrundsfarve : @endColor ; _ _ 
    baggrund - gentag : gentag - x ;
    baggrund - billede : - khtml - gradient ( lineær , venstre top , højre top , fra ( @startColor ), til ( @endColor )); // Konqueror   
    baggrund - billede : - moz - lineær - gradient ( venstre , @startColor , @endColor ); // FF 3.6+    
    baggrund - billede : - ms - lineær - gradient ( venstre , @startColor , @endColor ); // IE10    
    baggrund - billede : - webkit - gradient ( lineær , venstre top , højre top , farve - stop ( 0 %, @startColor ), farve - stop ( 100 %, @ endColor )); // Safari 4+, Chrome 2+    
    baggrund - billede : - webkit - lineær - gradient ( venstre , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    baggrund - billede : - 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 & IE7 
    baggrund - billede : lineær - gradient ( venstre , @startfarve , @ endColor ); // Le standard   
  }
  . vertikal ( @startColor : #555, @endColor: #333) { 
    baggrundsfarve : @endColor ; _ _ 
    baggrund - gentag : gentag - x ;
    baggrund - billede : - khtml - gradient ( lineær , venstre top , venstre bund , fra ( @startColor ), til ( @endColor )); // Konqueror   
    baggrund - billede : - moz - lineær - gradient ( @startColor , @endColor ); // FF 3.6+   
    baggrund - billede : - ms - lineær - gradient ( @startColor , @endColor ); // IE10   
    baggrund - billede : - webkit - gradient ( lineær , venstre top , venstre bund , farve - stop ( 0 %, @startColor ), farve - stop ( 100 %, @ endColor )); // Safari 4+, Chrome 2+    
    baggrund - billede : - webkit - lineær - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - image : - o - linear - 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 & IE7 
    baggrund - billede : lineær - gradient ( @startColor , @endColor ); // Standarden  
  }
  . retningsbestemt ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . lodret - tre - farver ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Drift og netsystem

Bliv fancy og udfør noget matematik for at generere fleksible og kraftfulde mixins som det nedenfor.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Grid System
. container {
  width : @siteWidth ; 
  margin : 0 auto ;  
  . clearfix ();
}
. kolonner ( @columnSpan : 1 ) {  
  display : inline ; 
  flyde : 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 )) ! vigtigt ;          
}

Bootstrap

Bootstrap, fra Twitter

Hotlink til CSS

Brug det med mindre

Fork på GitHub

Om Bootstrap Kort historie, browsersupport og mere

Historie

Browser support

Hvad er inkluderet

Grid system Rock standard 940px eller rul din egen

Standard gitter

Eksempel på gittermarkering

Forskydning af kolonner

Layouts Grundlæggende skabeloner til at oprette websider

Fast layout

Flydende layout

Typografi Overskrifter, afsnit, lister og andre inline-typeelementer

Overskrifter og kopi

h1. Overskrift 1

h2. Overskrift 2

h3. Overskrift 3

h4. Overskrift 4

h5. Overskrift 5

h6. Overskrift 6

Eksempel afsnit

Eksempeloverskrift Har underoverskrift...

Diverse elementer

Hvornår skal bruges

Understregning i et afsnit

Adresser

Forkortelser

Blokcitater

Sådan citeres

Lister

Uordnet<ul>

Ustylet<ul.unstyled>

Bestilt<ol>

Beskrivelsedl

Tabeller For, du gættede det, tabeldata

Bygge borde

Eksempel: Standard tabelstile

Eksempel: Zebra-stribet

Eksempel: Zebra-stribet m/ TableSorter.js

Formularer

Standard stilarter

Stablede former

Knapper

Eksempel knapper

Alternative størrelser

Deaktiveret tilstand

Links

Knapper

Navigation

Fast topbar

Projekt navn

Hvad er det

Kan tilpasses

Dropdowns inkluderet

Tabs og piller

Sideinddeling

Alerts & Errors Styles for succes, advarsler og fejlmeddelelser eller advarsler

Grundlæggende advarsler

Bloker beskeder

Popovers- komponenter til visning af indhold i modaler, værktøjstip og popovers

Modaler

Modal overskrift

Værktøjstip

Popovers

Popover titel

Brug af Bootstrap med mindre Overlad din CSS med variabler, mixins og funktioner

Brugsvejledning

Hvad er inkluderet

Farvevariable

Kommenterer

Blander wazoo'en sammen

Font stakke

Gradienter

Drift og netsystem

Uordnet`<ul>`

Ustylet`<ul.unstyled>`

Bestilt`<ol>`

Beskrivelse`dl`