Bootstrap

Komma igång

Översikt över projektet, dess innehåll och hur du kommer igång med en enkel mall.

1. Ladda ner

Innan du laddar ner, se till att ha en kodredigerare (vi rekommenderar Sublime Text 2 ) och viss praktisk kunskap om HTML och CSS. Vi går inte igenom källfilerna här, men de är tillgängliga för nedladdning. Vi kommer att fokusera på att komma igång med våra kompilerade Bootstrap-filer.

Nedladdning kompilerad

Snabbaste sättet att komma igång: skaffa de kompilerade och minifierade versionerna av vår CSS, JS och bilder. Inga dokument eller originalkällfiler.

Ladda ner Bootstrap

Ladda ner källa

Skaffa originalfilerna för alla CSS och Javasript, tillsammans med en lokal kopia av dokumenten genom att ladda ner den senaste versionen direkt från GitHub.

Ladda ner Bootstrap-källa

2. Filstruktur

I nedladdningen hittar du följande filstruktur och innehåll, som logiskt grupperar gemensamma tillgångar och tillhandahåller både kompilerade och minifierade varianter.

När du har laddat ner, packa upp den komprimerade mappen för att se strukturen för (den kompilerade) Bootstrap. Du kommer att se något sånt här:

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

Detta är den mest grundläggande formen av Bootstrap: kompilerade filer för snabb drop-in-användning i nästan alla webbprojekt. Vi tillhandahåller kompilerad CSS och JS ( bootstrap.*), samt kompilerad och minifierad CSS och JS ( bootstrap.min.*). Bildfilerna komprimeras med ImageOptim , en Mac-app för att komprimera PNG-filer.

3. Vad ingår

Bootstrap är utrustad med HTML, CSS och JS för alla möjliga saker, men de kan sammanfattas med en handfull kategorier som är synliga överst i Bootstrap-dokumentationen .

Dokumentsektioner

Ställningar

Globala stilar för kroppen att återställa typ och bakgrund, länkstilar, rutsystem och två enkla layouter.

Bas CSS

Stilar för vanliga HTML-element som typografi, kod, tabeller, formulär och knappar. Innehåller även Glyphicons , en fantastisk liten ikonuppsättning.

Komponenter

Grundläggande stilar för vanliga gränssnittskomponenter som flikar och piller, navbar, varningar, sidhuvuden och mer.

Javascript plugins

I likhet med Components är dessa Javascript-plugins interaktiva komponenter för saker som verktygstips, popovers, modals och mer.

Lista över komponenter

Tillsammans tillhandahåller sektionerna Komponenter och Javascript-plugin följande gränssnittselement:

  • Knappgrupper
  • Nedrullningsbara knappar
  • Navigationsflikar, piller och listor
  • Navbar
  • Etiketter
  • Märken
  • Sidhuvuden och hjälteenhet
  • Miniatyrer
  • Varningar
  • Framstegsindikatorer
  • Modals
  • Dropdowns
  • Verktygstips
  • Popovers
  • Dragspel
  • Karusell
  • Skriv framåt

I framtida guider kan vi gå igenom dessa komponenter individuellt mer i detalj. Tills dess, leta efter var och en av dessa i dokumentationen för information om hur du använder och anpassar dem.

4. Grundläggande HTML-mall

Med en kort introduktion till innehållet ur vägen kan vi fokusera på att använda Bootstrap. För att göra det använder vi en grundläggande HTML-mall som innehåller allt vi nämnde i filstrukturen .

Nu, här är en titt på en typisk HTML-fil :

  1. <html>
  2.   <huvud>
  3.     <title> Bootstrap 101-mall </title>
  4.   </head>
  5.   <kropp>
  6.     <h1> Hej världen! </h1>
  7.   </body>
  8. </html>

För att göra detta till en Bootstrapped-mall , inkludera bara lämpliga CSS- och JS-filer:

  1. <html>
  2.   <huvud>
  3.     <title> Bootstrap 101-mall </title>
  4.     <!-- Bootstrap -->
  5.     <länk href = "css/bootstrap.min.css" rel = "stilmall" >  
  6.   </head>
  7.   <kropp>
  8.     <h1> Hej världen! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

Och du är klar! Med dessa två filer tillagda kan du börja utveckla vilken webbplats eller applikation som helst med Bootstrap.

5. Exempel

Gå bortom basmallen med några exempellayouter. Vi uppmuntrar folk att upprepa dessa exempel och inte bara använda dem som ett slutresultat.

  • Grundläggande marknadsföringssida

    Med en hjälteenhet för ett primärt budskap och tre stödjande element.

  • Flytande layout

    Använder vårt nya lyhörda, flytande rutsystem för att skapa en sömlös flytande layout.

  • Förrättsmall

    Ett barebones HTML-dokument med all Bootstrap CSS och javascript ingår.

Vad härnäst?

Gå till dokumenten för information, exempel och kodavsnitt, eller ta nästa steg och anpassa Bootstrap för alla kommande projekt.

Besök Bootstrap-dokumenten Anpassa Bootstrap