over

venstre

ret

under

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.

Bootstrap på GitHub »

I øjeblikket v1.3.0

Historie

Ingeniører hos Twitter har historisk set brugt næsten ethvert bibliotek, de var bekendt med, til at opfylde frontend-kravene. Bootstrap begyndte som et svar på de udfordringer, der bød på. Med hjælp fra mange fantastiske mennesker er Bootstrap vokset betydeligt.

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.

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

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

Hvad er inkluderet

Bootstrap leveres komplet med kompileret CSS, ukompileret og eksempelskabeloner.

Nyt i 1.3 Javascript-plugins
Alle originale .less filer
Fuldt kompileret og minificeret CSS
Komplet styleguide dokumentation
Tre eksempelsider med forskellige layouts

Eksempler på hurtig start

Har du brug for nogle hurtige skabeloner? Tjek disse grundlæggende eksempler, vi har samlet:

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 klasse = "række" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

1/3

2/3

Forskydning af kolonner

8 offset 4

1/3 offset 2/3s

4 offset 4

5 offset 3

10 offset 6

Indlejrede søjler

Indlejr dit indhold, hvis du skal ved at oprette en .rowi en eksisterende kolonne.

Eksempel på indlejrede kolonner

Niveau 1 af kolonne

Niveau 2

<div klasse = "række" > 
  <div class = "span12" > 
    Niveau 1 af kolonne
    <div klasse = "række" > 
      <div class = "span6" > 
        Niveau 2
      </div>
      <div class = "span6" > 
        Niveau 2
      </div>
    </div>
  </div>
</div>

Rul dit eget gitter

Indbygget i Bootstrap er en håndfuld variabler til at tilpasse standard 940px-gittersystemet. Med lidt tilpasning kan du ændre størrelsen på søjler, deres tagrender og den beholder, de befinder sig i.

Inde i gitteret

De variabler, der er nødvendige for at ændre netsystemet, findes i øjeblikket alle i preboot.less.

Variabel	Standard værdi	Beskrivelse
`@gridColumns`	16	Antallet af kolonner i gitteret
`@gridColumnWidth`	40 px	Bredden af hver kolonne i gitteret
`@gridGutterWidth`	20 px	Det negative mellemrum mellem hver kolonne
`@siteWidth`	Beregnet sum af alle søjler og tagrender	Vi bruger nogle grundlæggende match til at tælle antallet af søjler og tagrender og indstille bredden af `.fixed-container()`mixin.

Nu skal du tilpasse

Ændring af gitteret betyder at ændre de tre @grid-*variabler og genkompilere Less-filerne.

Bootstrap er udstyret til at håndtere et gittersystem med op til 24 søjler; standarden er kun 16. Sådan ser dine gittervariabler ud tilpasset til et gitter med 24 kolonner.

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

Når den er kompileret igen, er du klar!

Fast layout

Standardlayoutet og det enkle 940px-brede, centrerede layout til stort set alle websteder eller sider leveret af en enkelt <div.container>.

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

Flydende layout

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

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

Hele det typografiske gitter er baseret på to Less-variabler i vores preboot.less-fil: @basefontog @baseline. Den første er basisskriftstørrelsen, der bruges hele vejen igennem, og den anden er basislinjehøjden.

Vi bruger disse variable og noget matematik til at skabe marginer, fyldninger og linjehøjder af alle vores typer og mere.

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, og de behøver ikke at være stilet henholdsvis fed og kursiv (selvom hvis der er et mere semantisk element, så brug det). <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. Her er to eksempler på, hvordan det kan bruges:

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

Fulde navn
[email protected]

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. Heltal posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert

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

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.

Kode

<code> <pre>

Pimp din kode med stil med to simple tags. For endnu mere fantastiskhed gennem javascript, kig ind i Googles kodebibliotek, og du er klar.

Præsenterer kode

Kode, blokke af eller blot uddrag inline, kan vises med stil blot ved at pakke ind i det rigtige tag. For kodeblokke, der spænder over flere linjer, skal du bruge <pre>elementet. For inline kode skal du bruge <code>elementet.

Element Resultat

<code> I en tekstlinje som denne vil din indpakkede kode se ud som dette >html<element.

Element	Resultat
`<code>`	I en tekstlinje som denne vil din indpakkede kode se ud som dette `>html<`element.
`<pre>`	<div> <h1>Overskrift</h1> <p>Noget lige her...</p> </div> Bemærk: Sørg for at holde koden i `pre`tags så tæt på venstre som muligt; det vil gengive alle faner.
`<pre class="prettyprint">`	Ved at bruge google-code-prettify-biblioteket får dine kodeblokke en lidt anderledes visuel stil og automatisk syntaksfremhævning. <div> <h1> Overskrift </h1> <p> Noget lige her... </p> </div> Download google-code-prettify og se readme for, hvordan du bruger.

<pre>

<div>
  <h1>Overskrift</h1>
  <p>Noget lige her...</p>
</div>

Bemærk: Sørg for at holde koden i pretags så tæt på venstre som muligt; det vil gengive alle faner.

<pre class="prettyprint">

Ved at bruge google-code-prettify-biblioteket får dine kodeblokke en lidt anderledes visuel stil og automatisk syntaksfremhævning.

<div> <h1> Overskrift </h1> <p> Noget lige her... </p> </div>

Download google-code-prettify og se readme for, hvordan du bruger.

Inline etiketter

<span class="label">

Gør opmærksom på eller marker enhver sætning i din brødtekst.

Mærk hvad som helst

Har nogensinde haft brug for en af de smarte Nyheder! eller Vigtige flag ved skrivning af kode? Nå, nu har du dem. Her er, hvad der er inkluderet som standard:

Etiket	Resultat
`<span class="label">Default</span>`	Standard
`<span class="label success">New</span>`	Ny
`<span class="label warning">Warning</span>`	Advarsel
`<span class="label important">Important</span>`	Vigtig
`<span class="label notice">Notice</span>`	Varsel

Mediegitter

Vis miniaturebilleder af varierende størrelse på sider med et lavt HTML-fodaftryk og minimale stilarter.

Eksempel på thumbnails

Miniaturebilleder i .media-gridkan have enhver størrelse, men de fungerer bedst, når de er kortlagt direkte til det indbyggede Bootstrap-gittersystem. Billedbredder som 90, 210 og 330 kombineres med nogle få pixel polstring for at svare til .span2, .span4, og .span6kolonnestørrelserne.

Stor

Medium

Lille

Koder dem

Mediegitter er nemme at bruge og ret enkle på opmærkningssiden. Deres dimensioner er udelukkende baseret på størrelsen af de inkluderede billeder.

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

<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 = "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
2	Joe	Vaskebræt	engelsk
3	Stu	Bule	Kode
1	Din	En	engelsk

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funktion () { 
    $ ( "tabel#sortTabeleksempel" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "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. Dropdown- litags understøtter også .activevisning af det aktuelle sidevalg.

Bemærk: Når du bruger topbjælken på en hvilken som helst side, skal du sørge for at tage højde for den overlapning, den forårsager ved at tilføje padding-top: 40px;til din body.

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>

Brødkrummer

Brødkrumme-navigation bruges som en måde at vise brugere, hvor de er i en app eller et websted, men ikke til primær navigation.

<ul class = "brødkrumme" > 
  <li><a href = "#" > Hjem </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Mellemside </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Endnu en </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Du er her </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 = "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 = "næste" ><a href = "#" > Næste → </a></li>  
  </ul>
</div>

Grundlæggende advarsler

.alert-message

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

Hent javascript »

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

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

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.

Eksempel kode

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Hellige guacamole! </strong> Tjek bedst selv, du ser ikke for godt ud. </p>
</div>

Bloker beskeder

.alert-message.block-message

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.

Hent javascript »

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

Oh snap! Du har en fejl! Skift dit og dat og prøv igen.

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

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

Eksempel kode

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Hellige guacamole! Dette er en advarsel! </strong> Tjek bedst selv, du ser ikke for godt ud. 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 = "#" > Foretag denne handling </a> <a class = "btn small" href = "#" > Eller gør dette </a>     
  </div>
</div>

Modaler

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

Hent javascript »

Værktøjstip

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

Hent javascript »

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 accusantium fugit voluptas sed quae

Popovers

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

Hent javascript »

Kom godt i gang

Det er super nemt at integrere javascript med Bootstrap-biblioteket. Nedenfor gennemgår vi det grundlæggende og giver dig nogle fantastiske plugins til at komme i gang!

Se javascript-dokumenter »

Hvad er inkluderet

Bring nogle af Bootstraps primære komponenter til live med nye brugerdefinerede plugins, der fungerer med jQuery og Ender . Vi opfordrer dig til at udvide og ændre dem, så de passer til dine specifikke udviklingsbehov.

Fil	Beskrivelse
bootstrap-modal.js	Vores Modal-plugin er et superslankt bud på det traditionelle modal js-plugin! Vi var særligt opmærksomme på kun at inkludere den nøgne funktionalitet, som vi har brug for på twitter.
bootstrap-alerts.js	Alert-plugin'et er en superlille klasse til at tilføje tæt funktionalitet til alarmer.
bootstrap-dropdown.js	Dette plugin er til at tilføje dropdown-interaktion til bootstrap-topbjælken eller navigation med faner.
bootstrap-scrollspy.js	ScrollSpy-plugin'et er til at tilføje en automatisk opdateringsnavigation baseret på rulleposition til bootstrap-topbjælken.
bootstrap-tabs.js	Dette plugin tilføjer hurtig, dynamisk fane- og pillefunktionalitet til at cykle gennem lokalt indhold.
bootstrap-twipsy.js	Baseret på det fremragende jQuery.tipsy plugin skrevet af Jason Frame; twipsy er en opdateret version, som ikke er afhængig af billeder, bruger css3 til animationer og dataattributter til lokal titellagring!
bootstrap-popover.js	Popover-plugin'et giver en enkel grænseflade til at tilføje popovers til din applikation. Det udvider boostrap-twipsy.js plugin, så sørg for at få fat i den fil også, når du inkluderer popovers i dit projekt!

Er javascript nødvendigt?

Nix! Bootstrap er først og fremmest designet til at være et CSS-bibliotek. Dette javascript giver et grundlæggende interaktivt lag oven på de inkluderede stilarter.

Men for dem, der har brug for javascript, har vi leveret plugins ovenfor for at hjælpe dig med at forstå, hvordan du integrerer Bootstrap med javascript og for at give dig en hurtig, let mulighed for den grundlæggende funktionalitet med det samme.

For mere information og for at se nogle live-demoer, se venligst vores plugin-dokumentationsside .

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

Variabler

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;            
 
// Basislinjegitter
@basefont : 13px ;          
@baseline : 18px ;

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 partialer til CSS, så du kan kombinere en blok kode til en. De er gode til ejendomme med præfiks fra sælgerebox-shadow , forløb 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 , @lineHeight : 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 ; 
  }
  ...
}

Gradienter

#gradient {
  ...
  . 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   
    baggrund - billede : lineær - gradient ( @startColor , @endColor ); // Standarden  
  }
  ...
}

Operationer

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

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

Kompilere mindre

Efter at have ændret .lessfilerne i /lib/, bliver du nødt til at kompilere dem igen for at genskabe bootstrap-*.*.*.css- og bootstrap-*.*.*.min.css-filerne. Hvis du sender en pull-anmodning til GitHub, skal du altid kompilere igen.

Måder at kompilere

Metode	Trin
Node med makefile	Installer mindre kommandolinje-kompiler med npm ved at køre følgende kommando: $ npm installer mindrec Når den er installeret, skal du bare køre `make`fra roden af din bootstrap-mappe, og du er klar. Derudover, hvis du har watchr installeret, kan du køre `make watch`for at få bootstrap automatisk genopbygget hver gang du redigerer en fil i bootstrap lib (dette er ikke påkrævet, kun en bekvemmelighedsmetode).
Javascript	Download den seneste Less.js og inkluder stien til den (og Bootstrap) i `head`. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> For at genkompilere .less-filerne skal du bare gemme dem og genindlæse din side. Less.js kompilerer dem og gemmer dem i lokalt lager.
Kommandolinje	Hvis du allerede har det mindre kommandolinjeværktøj installeret, skal du blot køre følgende kommando: $ lessc ./lib/bootstrap.less > bootstrap.css Sørg for at inkludere `--compress`i den kommando, hvis du prøver at gemme nogle bytes!
Mindre Mac-app	Den uofficielle Mac-app overvåger mapper med .less-filer og kompilerer koden til lokale filer efter hver lagring af en overvåget .less-fil. Hvis du vil, kan du skifte præferencer i appen for automatisk minificering, og hvilken mappe de kompilerede filer ender i.

Hotlink til CSS

Brug det med mindre

Fork på GitHub

Om Bootstrap Kort historie, browsersupport og mere

Historie

Browser support

Hvad er inkluderet

Eksempler på hurtig start

Grid system Rock standard 940px eller rul din egen

Standard gitter

Eksempel på gittermarkering

Forskydning af kolonner

Indlejrede søjler

Eksempel på indlejrede kolonner

Rul dit eget gitter

Inde i gitteret

Nu skal du tilpasse

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

Kode

Præsenterer kode

Inline etiketter

Mærk hvad som helst

Medier Viser billeder og videoer

Mediegitter

Eksempel på thumbnails

Stor

Medium

Lille

Koder dem

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

Formfeltstørrelser

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

Brødkrummer

Sideinddeling

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

Grundlæggende advarsler

Eksempel kode

Uordnet`<ul>`

Ustylet`<ul.unstyled>`

Bestilt`<ol>`

Beskrivelse`dl`