Får · Bootstrap på norsk

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 JavaScript, sammen med en lokal kopi av dokumentene ved å laste ned den nyeste versjonen direkte fra GitHub.

Last ned Bootstrap-kilde

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

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.

Vær oppmerksom på at alle JavaScript-plugins krever at jQuery 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-plugins 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

I fremtidige guider kan vi gå gjennom disse komponentene individuelt mer detaljert. Inntil da, se etter hver av disse i dokumentasjonen for informasjon om hvordan du kan bruke og tilpasse dem.

Med en kort introduksjon til innholdet ute av veien, kan vi fokusere på å ta Bootstrap i bruk. For å gjøre det, bruker vi en grunnleggende HTML-mal som inkluderer alt vi nevnte i filstrukturen .

Nå, her er en titt på en typisk HTML-fil :

<!DOCTYPE html>
<html>
  <hode>
    <title> Bootstrap 101-mal </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  </head>
  <body>
    <h1> Hei, verden! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
  </body>
</html>

For å gjøre dette til en Bootstrapped-mal , inkluderer du de riktige CSS- og JS-filene:

<!DOCTYPE html>
<html>
  <hode>
    <title> Bootstrap 101-mal </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
    <!-- Bootstrap -->
    <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "skjerm" >   
  </head>
  <body>
    <h1> Hei, verden! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
    <script src = "js/bootstrap.min.js" ></script> 
  </body>
</html>

Og du er klar! Med disse to filene lagt til, kan du begynne å utvikle et hvilket som helst nettsted eller program med Bootstrap.

Gå utover grunnmalen med noen få eksempeloppsett. Vi oppfordrer folk til å gjenta disse eksemplene og ikke bare bruke dem som et sluttresultat.

Startmal

Et barebones HTML-dokument med alle Bootstrap CSS og JavaScript inkludert.
Grunnleggende markedsføringsside

Med en helteenhet for en primær melding og tre støtteelementer.
Flytende layout

Bruker vårt nye responsive, flytende rutenettsystem for å lage en sømløs flytende layout.
Smal markedsføring

Slank, lett markedsføringsmal for små prosjekter eller team.
Begrunnet nav

Markedsføringsside med navigasjonslenker i lik bredde i en modifisert navigasjonslinje.
Logg inn

Barebones påloggingsskjema med tilpassede, større skjemakontroller og en fleksibel layout.
Klistrete bunntekst

Fest en bunntekst med fast høyde til bunnen av brukerens visningsport.
Karusell jumbotron

Et mer interaktivt riff på den grunnleggende markedsføringssiden med en fremtredende karusell.