index.html

---
layout: home
title: Bootstrap (deutsch) · Das beliebteste anpassungsfähige und moderne Front-End-Framework der Welt
---


<main class="bs-docs-masthead" id="content" tabindex="-1">
  <div class="container">
    <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
    <p class="lead">Bootstrap ist das beliebteste Framework mit HTML, CSS und JS für die Entwicklung von anpassungsfähigen Projekten für das moderne Web.</p>
    <p class="lead">
      <a href="{{ site.baseurl }}/los-gehts#download" class="btn btn-outline-inverse btn-lg">Bootstrap herunterladen</a>
    </p>
    <p class="version">Dokumentation für v{{ site.current_version }}</p>
  </div>
</main>

<div class="bs-docs-featurette">
  <div class="container">
    <h2 class="bs-docs-featurette-title">Für alle, überall.</h2>
    <p class="lead">Bootstrap ist ein anpassungsfähiges und zuerst für mobile Geräte entwickeltes Framework. Egal, wie gut du dich auskennst, kannst du damit einfacher und schneller kleine wie große Projekte entwickeln, die auf Geräten in allen erdenklichen Formen funktionieren.</p>

    <hr class="half-rule">

    <div class="row">
      <div class="col-sm-4">
        <img src="{{ site.baseurl }}/assets/img/sass-less.png" alt="Unterstützung für Sass und Less" class="img-responsive" width="1000" height="360">
        <h3>Präprozessoren</h3>
        <p>Bootstrap kommt mit purem, fertigem CSS, nutzt aber im Quellcode die zwei berühmtesten CSS-Präprozessoren, <a href="{{ site.baseurl }}/css/#less">Less</a> und <a href="{{ site.baseurl }}/css/#sass">Sass</a>. Leg mit vorkompiliertem CSS direkt los oder arbeite mit der Quelle und kompiliere dann selbst.</p>
      </div>
      <div class="col-sm-4">
        <img src="{{ site.baseurl }}/assets/img/devices.png" alt="Anpassungsfähig auf allen Geräten" class="img-responsive" width="1000" height="360">
        <h3>Ein Framework, alle Geräte.</h3>
        <p>Bootstrap passt mit Hilfe von Media-Queries deine Websites und Anwendungen ohne doppelten Code jedem Gerät an&mdash;von Smartphones über Tablets bis hin zu Desktop-PCs.</p>
      </div>
      <div class="col-sm-4">
        <img src="{{ site.baseurl }}/assets/img/components.png" alt="Komponenten" class="img-responsive" width="1000" height="360">
        <h3>Jede Menge Funktionen</h3>
        <p>Mit Bootstrap liefern wir dir eine umfangreiche und ansehnliche Dokumentation für übliche HTML-Elemente, Dutzende besondere HTML- und CSS-Komponenten und tolle jQuery-Plugins.</p>
      </div>
    </div>

    <hr class="half-rule">

    <p class="lead">Bootstrap ist Open Source.<br>Es wird auf GitHub gehostet, entwickelt und gepflegt und alle können dabei zusehen und mitmachen.</p>
    <a href="{{ site.repo }}" class="btn btn-outline btn-lg">GitHub-Projekt ansehen</a>
  </div>
</div>

<div class="bs-docs-featurette">
  <div class="container">
    <h2 class="bs-docs-featurette-title">Offizielle Bootstrap Themes</h2>
    <p class="lead">
      Werte Bootstrap mit offiziellen hochwertigen Themes auf. Jedes Theme ist eine separate Sammlung von brandneuen Komponenten und Plugins in Ergänzung zu allem was Bootstrap zu bieten hat. Dazu gehört eine vollständige Dokumentation, Build-Tools und noch mehr.
    </p>

    <p class="lead">
      <a href="{{ site.themes }}" class="btn btn-outline btn-lg">Themes erkunden</a>
    </p>

    <img class="img-responsive" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
  </div>
</div>

<div class="bs-docs-featurette">
  <div class="container">
    <h2 class="bs-docs-featurette-title">Gemacht mit Bootstrap.</h2>
    <p class="lead">Es gibt Millionen von großartigen Seiten online, die mit Bootstrap gemacht wurden. Lass dich von unserer wachsenden <a href="{{ site.baseurl }}/los-gehts/#examples">Beispiel-Sammlung</a> oder einigen unserer persönlichen Favoriten inspirieren und leg dann selbst los.</p>

    <hr class="half-rule">

    <div class="row bs-docs-featured-sites">
    {% for showcase in site.data.showcase %}
      <div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0">
        <a href="{{ showcase.expo_url }}" rel="noopener" target="_blank" title="{{ showcase.name }}">
          <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-responsive" width="800" height="600">
        </a>
      </div>
    {% endfor %}
    </div>

    <hr class="half-rule">

    <p class="lead">Schau in der Bootstrap Expo vorbei und sieh dir inspirierende Projekte an, die mit Bootstrap entwickelt wurden.</p>
    <a href="{{ site.expo }}" class="btn btn-outline btn-lg">Sieh dir die Galerie an</a>
  </div>
</div>