Bootstrap

Aan de slag

Overzicht van het project, de inhoud en hoe u aan de slag kunt met een eenvoudig sjabloon.

1. Downloaden

Zorg ervoor dat je een code-editor hebt voordat je gaat downloaden (we raden Sublime Text 2 aan ) en enige praktische kennis van HTML en CSS. We zullen hier niet door de bronbestanden lopen, maar ze zijn beschikbaar om te downloaden. We zullen ons concentreren op het aan de slag gaan met onze gecompileerde Bootstrap-bestanden.

Download gecompileerd

Snelste manier om te beginnen: verkrijg de gecompileerde en verkleinde versies van onze CSS, JS en afbeeldingen. Geen documenten of originele bronbestanden.

Bootstrap downloaden

Bron downloaden

Download de originele bestanden voor alle CSS en Javascript, samen met een lokale kopie van de documenten door de nieuwste versie rechtstreeks van GitHub te downloaden.

Bootstrap-bron downloaden

2. Bestandsstructuur

Binnen de download vindt u de volgende bestandsstructuur en inhoud, die gemeenschappelijke activa logisch groepeert en zowel gecompileerde als verkleinde variaties biedt.

Pak na het downloaden de gecomprimeerde map uit om de structuur van (de gecompileerde) Bootstrap te zien. Je ziet zoiets als dit:

  bootstrap / css / bootstrap . _ _ _ css
   bootstrap . _ _ min . css
   js / bootstrap . _ _ _ js
   bootstrap . _ _ min . js
   img / ├── glyphicons - halflings . _ _ png
   │ ├── glyphicons - halflings - wit . png
  
  
        
        
        LEES MIJ . md

Dit is de meest basale vorm van Bootstrap: gecompileerde bestanden voor snel gebruik in bijna elk webproject. We bieden gecompileerde CSS en JS ( bootstrap.*), evenals gecompileerde en verkleinde CSS en JS ( bootstrap.min.*). De afbeeldingsbestanden worden gecomprimeerd met ImageOptim , een Mac-app voor het comprimeren van PNG's.

3. Wat is inbegrepen?

Bootstrap is uitgerust met HTML, CSS en JS voor allerlei dingen, maar ze kunnen worden samengevat met een handvol categorieën die zichtbaar zijn bovenaan de Bootstrap-documentatie .

Documenten-secties

Steiger

Globale stijlen voor het lichaam om type en achtergrond te resetten, linkstijlen, rastersysteem en twee eenvoudige lay-outs.

Basis-CSS

Stijlen voor algemene HTML-elementen zoals typografie, code, tabellen, formulieren en knoppen. Bevat ook Glyphicons , een geweldige kleine icon set.

Componenten

Basisstijlen voor veelgebruikte interfacecomponenten zoals tabbladen en pillen, navigatiebalk, waarschuwingen, paginakopteksten en meer.

Javascript-plug-ins

Net als Components zijn deze Javascript-plug-ins interactieve componenten voor zaken als tooltips, popovers, modals en meer.

Lijst met componenten

Samen bieden de secties Componenten en Javascript-plug-ins de volgende interface-elementen:

  • Knop groepen
  • Dropdownmenu's voor knoppen
  • Navigatietabs, pillen en lijsten
  • navigatiesysteem
  • Etiketten
  • Insignes
  • Paginakoppen en heldeneenheid
  • Miniaturen
  • Waarschuwingen
  • Voortgangsbalken
  • modaliteiten
  • Dropdownmenu's
  • Knopinfo
  • Popovers
  • Accordeon
  • Carrousel
  • Typeahead

In toekomstige handleidingen kunnen we deze componenten afzonderlijk in meer detail doornemen. Zoek tot die tijd naar elk van deze in de documentatie voor informatie over hoe u ze kunt gebruiken en aanpassen.

4. Basis HTML-sjabloon

Met een korte introductie in de inhoud uit de weg, kunnen we ons concentreren op het gebruik van Bootstrap. Om dat te doen, gebruiken we een eenvoudige HTML-sjabloon die alles bevat wat we in de bestandsstructuur hebben genoemd .

Nu, hier is een blik op een typisch HTML-bestand :

  1. <html>
  2.   <head>
  3.     <title> Bootstrap 101-sjabloon </title>
  4.   </head>
  5.   <lichaam>
  6.     <h1> Hallo, wereld! </h1>
  7.   </body>
  8. </html>

Om hier een Bootstrapped-sjabloon van te maken , hoeft u alleen de juiste CSS- en JS-bestanden op te nemen:

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

En je bent klaar! Met deze twee bestanden toegevoegd, kunt u beginnen met het ontwikkelen van elke site of applicatie met Bootstrap.

5. Voorbeelden

Ga verder dan de basissjabloon met een paar voorbeeldlay-outs. We moedigen mensen aan om deze voorbeelden te herhalen en ze niet alleen als eindresultaat te gebruiken.

  • Basis marketingsite

    Met een heldeneenheid voor een primaire boodschap en drie ondersteunende elementen.

  • Vloeiende lay-out

    Maakt gebruik van ons nieuwe responsieve, vloeiende rastersysteem om een ​​naadloze, vloeiende lay-out te creëren.

  • Startsjabloon

    Een barebones HTML-document met alle Bootstrap CSS en javascript inbegrepen.

Wat nu?

Ga naar de documenten voor informatie, voorbeelden en codefragmenten, of neem de volgende stap en pas Bootstrap aan voor elk aankomend project.

Bezoek de Bootstrap-documenten Bootstrap aanpassen