Twitter Bootstrap

Bootstrap er et verktøysett fra Twitter designet for å kickstarte utviklingen av webapper og nettsteder.
Den inkluderer grunnleggende CSS og HTML for typografi, skjemaer, knapper, tabeller, rutenett, navigasjon og mer.

Nerd-varsel: Bootstrap er bygget med Less og ble designet for å fungere utenfor porten med kun moderne nettlesere i tankene.

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 »

Rutenettsystem Rock standard 940px eller rull din egen

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 et grunnleggende oppsett 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.

  1. <div class="row"> klasse = "rad" >
  2.   <div class = "span6 columns" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10 columns" > 
  6.     ...
  7.   </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
8
8
5
11
16

Forskyvning av kolonner

4
8 offset 4
4 offset 4
4 offset 4
5 offset 3
5 offset 3
10 offset 6

Oppsett Grunnleggende maler for å lage nettsider

Fast layout

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

  1. <body>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Flytende layout

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

  1. <body>
  2.   <div class = "container-fluid" > 
  3.     <div class = "sidebar" > 
  4.       ...
  5.     </div>
  6.     <div class = "innhold" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

Typografi Overskrifter, avsnitt, lister og andre innebygde typeelementer

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

Du kan også legge til underoverskrifter med <strong>og<em>

Diverse elementer

Bruke vekt, adresser og forkortelser

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

Når du skal bruke

Uthevingsetiketter ( <strong>og <em>) bør brukes for å legge til et visuelt skille mellom et ord eller en frase og den omgivende kopien. Bruk <strong>for ren gammel oppmerksomhet og <em>for glatte oppmerksomhet og titler.

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.

Adresser

addressElementet brukes til – du gjettet det! – adresser . Slik ser det ut:

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

Merk: Hver linje i en addressmå slutte med et linjeskift ( <br />) for å strukturere innholdet riktig slik det leses i det virkelige liv uten at noen stiler er brukt.

Forkortelser

For forkortelser og akronymer, bruk abbrtaggen ( acronymer utdatert i HTML5 ). Sett stenografiskjemaet i taggen og angi en tittel for hele navnet.

Blockquotes

<blockquote> <p> <cite>

Sørg for å pakke blockquoterundt paragraphog citetagger. Når du siterer en kilde, bruk citeelementet. CSS vil automatisk innlede et navn med en em-strek (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr. Julius Hibbert

Lister

Uordnet<ul>

  • Jeremy Bixby
  • Robert Dezure
  • Josh Washington
  • Anton Capresi
  • Lagkameratene mine
    • George Castanza
    • Jerry Seinfeld
    • Cosmo Kramer
    • Elaine Bennis
    • Ny mann
  • John Jacob
  • Paul Pierce
  • Kevin Garnett

Ustilt<ul.unstyled>

  • Jeremy Bixby
  • Robert Dezure
  • Josh Washington
  • Anton Capresi
  • Lagkameratene mine
    • George Castanza
    • Jerry Seinfeld
    • Cosmo Kramer
    • Elaine Bennis
    • Ny mann
  • John Jacob
  • Paul Pierce
  • Kevin Garnett

Bestilt<ol>

  1. Jeremy Bixby
  2. Robert Dezure
  3. Josh Washington
  4. Anton Capresi
  5. Lagkameratene mine
    1. George Castanza
    2. Jerry Seinfeld
    3. Cosmo Kramer
    4. Elaine Bennis
    5. Ny mann
  6. John Jacob
  7. Paul Pierce
  8. Kevin Garnett

Beskrivelsedl

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.

Tabeller For, du gjettet riktig, tabelldata

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 theadslik at hierarkiet er thead> tr> th.

I likhet med kolonneoverskriftene, bør alt innholdet i tabellen din pakkes inn i en tbodyslik 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 
  1. < tabellklasse = "fellestabell" > 
  2.   ...
  3. </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 
  1. <table class = "vanlig-bord sebra-stripet" > 
  2. ...
  3. </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 hvilken som helst kolonneoverskrift for å endre sorteringen.

# Fornavn Etternavn Språk
1 Din En Engelsk
2 Joe Sixpack Engelsk
3 Stu Bulk Kode 
  1. <script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
  2. <skripttype = " tekst/javascript" > 
  3.   $ ( dokument ). klar ( funksjon () { 
  4.     $ ( "tabell#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  5.   });
  6. </script>
  7. <table class = "vanlig-bord sebra-stripet" > 
  8.   ...
  9. </table>

Skjemaer

Standard stiler

Alle skjemaer får standardstiler for å presentere dem på en lesbar og skalerbar måte. Stiler er gitt for tekstinndata, utvalgslister, tekstområder, alternativknapper og avmerkingsbokser og knapper.

Eksempel på formforklaring
Litt verdi her
Et lite stykke hjelpetekst
Eksempel på formforklaring
@
Eksempel på formforklaring
Merk: Etiketter omgir alle alternativene for mye større klikkområder og en mer brukbar form.
til Alle tider vises som Pacific Standard Time (GMT -08:00).
Blokk med hjelpetekst for å beskrive feltet ovenfor om nødvendig.

Stablede former

Legg .form-stackedtil i skjemaets HTML, og du vil ha etiketter på toppen av feltene deres i stedet for til venstre. Dette fungerer bra hvis skjemaene dine er korte eller du har to kolonner med inndata for tyngre skjemaer.

Eksempel på formforklaring
Eksempel på formforklaring
Merk: Etiketter omgir alle alternativene for mye større klikkområder og en mer brukbar form.

Knapper

Som en konvensjon brukes knapper for handlinger mens lenker brukes til objekter. For eksempel kan "Last ned" være en knapp og "nylig aktivitet" kan være en lenke.

Alle knapper har som standard en lysegrå stil, men en blå .primaryklasse er tilgjengelig. Dessuten er det lett å rulle dine egne stiler.

Eksempelknapper

Knappestiler kan brukes på hva som helst med den .btnpåførte. Vanligvis vil du bare bruke disse på a, button, og utvalgte inputelementer. Slik ser det ut:

Alternative størrelser

Lyst på større eller mindre knapper? Ha på det!

Primær handling Handling
Primær handling Handling

Deaktivert tilstand

For knapper som ikke er aktive eller er deaktivert av appen av en eller annen grunn, bruk deaktivert tilstand. Det er .disabledfor lenker og :disabledfor buttonelementer.

Lenker

Primær handling Handling

Knapper

Varsler og feilstiler for suksess, advarsler og feilmeldinger eller varsler

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

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

Modaler

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

Modal overskrift

×

En fin kropp...

Hoved Sekundær

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

under!
Ikke sant!
venstre!
ovenfor!

Popovers

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

Popover-tittel

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ved eros.

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

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.

  1. <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "alle" />     
  2. <script type = "text/javascript" 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.

  1. // Lenker
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     mørkere ( @linkColor , 10 ); 
  4.  
  5. // Grå
  6. @svart : #000;             
  7. @grayDark :           lysere ( @black , 25 %); 
  8. @grå :               lysere ( @svart , 50 %); 
  9. @grayLight :          lysere ( @black , 70 %); 
  10. @grayLighter :        lysere ( @black , 90 %); 
  11. @hvit : #fff;             
  12.  
  13. // Aksentfarger
  14. @blå : #08b5fb ;              
  15. @grønn : #46a546 ;             
  16. @rød : #9d261d ;               
  17. @gul : #ffc40d;            
  18. @oransje : #f89406;            
  19. @rosa : #c3325f;              
  20. @lilla : #7a43b6;            
  21.  
  22. // Grunnlinje
  23. @grunnlinje : 20px ;

Kommenterer

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

  1. // Dette er en kommentar
  2. /* 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

  1. #font {
  2.   . stenografi ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  3.     skriftstørrelse : @ størrelse ; _ 
  4.     font - weight : @weight ; 
  5.     line - høyde : @lineHeight ; 
  6.   }
  7.   . sans - serif ( @vekt : normal , @størrelse : 14px , @lineHeight : 20px ) {     
  8.     font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
  9.     skriftstørrelse : @ størrelse ; _ 
  10.     font - weight : @weight ; 
  11.     line - høyde : @lineHeight ; 
  12.   }
  13.   . serif ( @vekt : normal , @størrelse : 14px , @lineHeight : 20px ) {     
  14.     font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
  15.     skriftstørrelse : @ størrelse ; _ 
  16.     font - weight : @weight ; 
  17.     line - høyde : @lineHeight ; 
  18.   }
  19.   . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
  20.     font - family : "Monaco" , Courier New , monospace ;   
  21.     skriftstørrelse : @ størrelse ; _ 
  22.     font - weight : @weight ; 
  23.     line - høyde : @lineHeight ; 
  24.   }
  25. }

Gradienter

  1. #gradient {
  2.   . horisontal ( @startColor : #555, @endColor: #333) { 
  3.     bakgrunnsfarge : @endColor ; _ _ 
  4.     bakgrunn - gjenta : gjenta - x ;
  5.     bakgrunn - bilde : - khtml - gradient ( lineær , venstre topp , høyre topp , fra ( @startColor ), til ( @endColor )); // Konqueror   
  6.     bakgrunn - bilde : - moz - lineær - gradient ( venstre , @startColor , @endColor ); // FF 3.6+    
  7.     bakgrunn - bilde : - ms - lineær - gradient ( venstre , @startColor , @endColor ); // IE10    
  8.     bakgrunn - bilde : - webkit - gradient ( lineær , venstre topp , høyre topp , farge - stopp ( 0 %, @startColor ), farge - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  9.     bakgrunn - bilde : - webkit - lineær - gradient ( venstre , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
  10.     bakgrunn - bilde : - o - lineær - gradient ( venstre , @startColor , @endColor ); // Opera 11.10    
  11.     - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
  12.     filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 og IE7 
  13.     bakgrunn - bilde : lineær - gradient ( venstre , @startColor , @endColor ); // Le standard   
  14.   }
  15.   . vertikal ( @startColor : #555, @endColor: #333) { 
  16.     bakgrunnsfarge : @endColor ; _ _ 
  17.     bakgrunn - gjenta : gjenta - x ;
  18.     bakgrunn - bilde : - khtml - gradient ( lineær , venstre topp , venstre bunn , fra ( @startColor ), til ( @endColor )); // Konqueror   
  19.     bakgrunn - bilde : - moz - lineær - gradient ( @startColor , @endColor ); // FF 3.6+   
  20.     bakgrunn - bilde : - ms - lineær - gradient ( @startColor , @endColor ); // IE10   
  21.     bakgrunn - bilde : - webkit - gradient ( lineær , venstre topp , venstre bunn , farge - stopp ( 0 %, @startColor ), farge - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  22.     bakgrunn - bilde : - webkit - lineær - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  23.     bakgrunn - bilde : - o - lineær - gradient ( @startColor , @endColor ); // Opera 11.10   
  24.     - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
  25.     filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 og IE7 
  26.     bakgrunn - bilde : lineær - gradient ( @startColor , @endColor ); // Standarden  
  27.   }
  28.   . retningsbestemt ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
  29.     ...
  30.   }
  31.   . vertikal - tre - farger ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
  32.     ...
  33.   }
  34. }

Drift og nettsystem

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

  1. // Grititude
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5.  
  6. // Grid System
  7. . container {
  8.   width : @siteWidth ; 
  9.   margin : 0 auto ;  
  10.   . clearfix ();
  11. }
  12. . kolonner ( @columnSpan : 1 ) {  
  13.   display : inline ; 
  14.   flyte : venstre ;
  15.   width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  16.   margin - venstre : @gridGutterWidth ; 
  17.   &: første - barn {
  18.     marg - venstre : 0 ; 
  19.   }
  20. }
  21. . offset ( @columnOffset : 1 ) {  
  22.   margin - venstre : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! viktig ;          
  23. }