Kom godt i gang

Oversigt over projektet, dets indhold, og hvordan du kommer i gang med en simpel skabelon.

Før du downloader, skal du sørge for at have en kodeeditor (vi anbefaler Sublime Text 2 ) og noget praktisk kendskab til HTML og CSS. Vi vil ikke gennemgå kildefilerne her, men de er tilgængelige til download. Vi vil fokusere på at komme i gang med de kompilerede Bootstrap-filer.

Download kompileret

Hurtigste måde at komme i gang: Få de kompilerede og minificerede versioner af vores CSS, JS og billeder. Ingen dokumenter eller originale kildefiler.

Download Bootstrap

Download kilde

Få de originale filer til al CSS og JavaScript sammen med en lokal kopi af dokumenterne ved at downloade den seneste version direkte fra GitHub.

Download Bootstrap-kilde

I download'en finder du følgende filstruktur og indhold, der logisk grupperer fælles aktiver og giver både kompilerede og minificerede variationer.

Når den er downloadet, skal du udpakke den komprimerede mappe for at se strukturen af ​​(den kompilerede) Bootstrap. Du vil se noget som dette:

  bootstrap / ├── css / ├── bootstrap . css
   ├── bootstrap . min . css
   ├── js / ├── bootstrap . js
   ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - hvide . png
  
        
        
      

Dette er den mest grundlæggende form for Bootstrap: kompilerede filer til hurtig drop-in-brug i næsten ethvert webprojekt. Vi leverer kompileret CSS og JS ( bootstrap.*), samt kompileret og minificeret CSS og JS ( bootstrap.min.*). Billedfilerne komprimeres ved hjælp af ImageOptim , en Mac-app til komprimering af PNG'er.

Bemærk venligst, at alle JavaScript-plugins kræver, at jQuery er inkluderet.

Bootstrap er udstyret med HTML, CSS og JS til alle mulige ting, men de kan opsummeres med en håndfuld kategorier, der er synlige øverst i Bootstrap-dokumentationen .

Docs sektioner

Stilladser

Globale stilarter for kroppen til at nulstille type og baggrund, linkstile, gittersystem og to simple layouts.

Base CSS

Typografier til almindelige HTML-elementer som typografi, kode, tabeller, formularer og knapper. Indeholder også Glyphicons , et fantastisk lille ikonsæt.

Komponenter

Grundlæggende stilarter til almindelige grænsefladekomponenter som faner og piller, navbar, advarsler, sideoverskrifter og mere.

JavaScript plugins

I lighed med Components er disse JavaScript-plugins interaktive komponenter til ting som værktøjstip, popovers, modals og mere.

Liste over komponenter

Sammen giver sektionerne Komponenter og JavaScript-plugins følgende grænsefladeelementer:

  • Knapgrupper
  • Knap rullemenuer
  • Navigationsfaner, piller og lister
  • Navbar
  • Etiketter
  • Badges
  • Sideoverskrifter og heltenhed
  • Miniaturebilleder
  • Advarsler
  • Fremskridtsbjælker
  • Modaler
  • Dropdowns
  • Værktøjstip
  • Popovers
  • Harmonika
  • Karrusel
  • Skriv frem

I fremtidige vejledninger vil vi muligvis gennemgå disse komponenter individuelt mere detaljeret. Indtil da skal du se efter hver af disse i dokumentationen for at få oplysninger om, hvordan du bruger og tilpasser dem.

Med en kort introduktion til indholdet af vejen, kan vi fokusere på at tage Bootstrap i brug. For at gøre det bruger vi en grundlæggende HTML-skabelon, der inkluderer alt, hvad vi nævnte i filstrukturen .

Her er et kig på en typisk HTML-fil :

  1. <!DOCTYPE html>
  2. <html>
  3. <hoved>
  4. <title> Bootstrap 101 skabelon </title>
  5. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  6. </head>
  7. <body>
  8. <h1> Hej verden! </h1>
  9. <script src = "https://code.jquery.com/jquery.js" ></script>
  10. </body>
  11. </html>

For at gøre dette til en Bootstrapped-skabelon skal du blot inkludere de relevante CSS- og JS-filer:

  1. <!DOCTYPE html>
  2. <html>
  3. <hoved>
  4. <title> Bootstrap 101 skabelon </title>
  5. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  6. <!-- Bootstrap -->
  7. <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "skærm" >
  8. </head>
  9. <body>
  10. <h1> Hej verden! </h1>
  11. <script src = "https://code.jquery.com/jquery.js" ></script>
  12. <script src = "js/bootstrap.min.js" ></script>
  13. </body>
  14. </html>

Og du er klar! Med disse to filer tilføjet, kan du begynde at udvikle ethvert websted eller program med Bootstrap.

Gå ud over basisskabelonen med et par eksempler på layouts. Vi opfordrer folk til at gentage disse eksempler og ikke blot bruge dem som et slutresultat.

  • Starter skabelon

    Et barebones HTML-dokument med alle Bootstrap CSS og JavaScript inkluderet.

  • Grundlæggende markedsføringsside

    Med en heltenhed for en primær besked og tre understøttende elementer.

  • Flydende layout

    Bruger vores nye responsive, flydende gittersystem til at skabe et sømløst flydende layout.

  • Snæver markedsføring

    Slank, let marketingskabelon til små projekter eller teams.

  • Begrundet nav

    Marketingside med lige bredde navigationslinks i en ændret navbar.

  • Log ind

    Barebones-logonformular med brugerdefinerede, større formularkontroller og et fleksibelt layout.

  • Sticky footer

    Fastgør en sidefod med fast højde til bunden af ​​brugerens visningsport.

  • Karrusel jumbotron

    Et mere interaktivt riff på den grundlæggende markedsføringsside med en fremtrædende karrusel.

Gå til dokumenterne for at få oplysninger, eksempler og kodestykker, eller tag det næste spring og tilpas Bootstrap til ethvert kommende projekt.

Besøg Bootstrap-dokumenterne Tilpas Bootstrap