Støvelhempe

Starter

Oversikt over prosjektet, dets innhold og hvordan du kommer i gang med en enkel mal.

1. Last ned

Før du laster ned, sørg for å ha et koderedigeringsprogram (vi anbefaler Sublime Text 2 ) og litt praktisk kunnskap om HTML og CSS. Vi går ikke gjennom kildefilene her, men de er tilgjengelige for nedlasting. Vi vil fokusere på å komme i gang med de kompilerte Bootstrap-filene.

Last ned kompilert

Raskeste måten å komme i gang på: få de kompilerte og minifiserte versjonene av CSS, JS og bilder. Ingen dokumenter eller originale kildefiler.

Last ned Bootstrap

Last ned kilde

Få de originale filene for all CSS og Javasript, sammen med en lokal kopi av dokumentene ved å laste ned den nyeste versjonen direkte fra GitHub.

Last ned Bootstrap-kilde

2. Filstruktur

Innenfor nedlastingen finner du følgende filstruktur og innhold, logisk gruppering av vanlige eiendeler og gir både kompilerte og minifiserte varianter.

Når den er lastet ned, pakk ut den komprimerte mappen for å se strukturen til (den kompilerte) Bootstrap. Du vil se noe slikt:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glyphicons - halflings . png
   │ ├── glyphicons - halflings - white . png
  
  
        
        
        └── README . md

Dette er den mest grunnleggende formen for Bootstrap: kompilerte filer for rask drop-in-bruk i nesten alle nettprosjekter. Vi tilbyr kompilert CSS og JS ( bootstrap.*), samt kompilert og minifisert CSS og JS ( bootstrap.min.*). Bildefilene komprimeres ved hjelp av ImageOptim , en Mac-app for komprimering av PNG-er.

3. Hva er inkludert

Bootstrap er utstyrt med HTML, CSS og JS for alle slags ting, men de kan oppsummeres med en håndfull kategorier som er synlige øverst i Bootstrap-dokumentasjonen .

Dokumenter-seksjoner

Stillas

Globale stiler for kroppen for å tilbakestille type og bakgrunn, lenkestiler, rutenettsystem og to enkle oppsett.

Base CSS

Stiler for vanlige HTML-elementer som typografi, kode, tabeller, skjemaer og knapper. Inkluderer også Glyphicons , et flott lite ikonsett.

Komponenter

Grunnleggende stiler for vanlige grensesnittkomponenter som faner og piller, navbar, varsler, sideoverskrifter og mer.

Javascript-plugins

I likhet med Components er disse Javascript-pluginene interaktive komponenter for ting som verktøytips, popovers, modaler og mer.

Liste over komponenter

Sammen gir delene Komponenter og Javascript-plugins følgende grensesnittelementer:

  • Knappegrupper
  • Nedtrekkslister for knapper
  • Navigasjonsfaner, piller og lister
  • Navbar
  • Etiketter
  • Merker
  • Sideoverskrifter og helteenhet
  • Miniatyrbilder
  • Varsler
  • Fremdriftsindikatorer
  • Modaler
  • Rullegardiner
  • Verktøytips
  • Popovers
  • Trekkspill
  • Karusell
  • Skriv inn

In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.

4. Basic HTML template

With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

Now, here's a look at a typical HTML file:

  1. <html>
  2.   <head>
  3.     <title>Bootstrap 101 Template</title>
  4.   </head>
  5.   <body>
  6.     <h1>Hello, world!</h1>
  7.   </body>
  8. </html>

To make this a Bootstrapped template, just include the appropriate CSS and JS files:

  1. <html>
  2.   <head>
  3.     <title>Bootstrap 101 Template</title>
  4.     <!-- Bootstrap -->
  5.     <link href="css/bootstrap.min.css" rel="stylesheet">
  6.   </head>
  7.   <body>
  8.     <h1>Hello, world!</h1>
  9.     <script src="js/bootstrap.min.js"></script>
  10.   </body>
  11. </html>

And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

5. Examples

Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

  • Basic marketing site

    Featuring a hero unit for a primary message and three supporting elements.

  • Fluid layout

    Uses our new responsive, fluid grid system to create a seamless liquid layout.

  • Starter template

    A barebones HTML document with all the Bootstrap CSS and javascript included.

What next?

Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

Visit the Bootstrap docs Customize Bootstrap