index.html 4.12 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1
---
2
layout: home
3
title: Bootstrap
Mark Otto's avatar
Mark Otto committed
4
base_url: "./"
Mark Otto's avatar
Mark Otto committed
5
6
---

7
<main class="bs-masthead" id="content" role="main">
8
  <div class="container">
Mark Otto's avatar
Mark Otto committed
9
    <span class="bs-booticon bs-booticon-lg">B</span>
10
    <h1>Bootstrap</h1>
Mark Otto's avatar
Mark Otto committed
11
    <p class="lead">The most popular front-end framework for designing and building on the web.</p>
Mark Otto's avatar
Mark Otto committed
12
13
14
    <p class="lead">
      <a href="{{ site.download_dist }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);" data-content="Quickly get started with Bootstrap's precompiled CSS, JavaScript, and fonts.">Download Bootstrap</a>
      <a href="{{ site.download_source }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version source }}']);" data-content="Download Bootstrap's LESS, JavaScript, font, and documentation source code.">Download source</a>
Mark Otto's avatar
Mark Otto committed
15
    </p>
Mark Otto's avatar
Mark Otto committed
16
    {% include ads.html %}
Mark Otto's avatar
Mark Otto committed
17
  </div>
18
</main>
Mark Otto's avatar
Mark Otto committed
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59


<div class="bs-featurette">
  <div class="container">
    <h2 class="bs-featurette-title">Designed for everyone, everywhere.</h2>
    <p class="lead">Bootstrap is a responsive and mobile first framework for faster and easier web development. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>

    <hr class="half-rule">

    <div class="row">
      <div class="col-sm-4">
        <img src="docs-assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
        <h3>Preprocesors</h3>
        <p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, Less and Sass.</p>
      </div>
      <div class="col-sm-4">
        <img src="docs-assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
        <h3>One framework, every device.</h3>
        <p>Bootstrap easily and efficiently scales your project from phones to tablets to desktops with a single CSS file.</p>
      </div>
      <div class="col-sm-4">
        <img src="docs-assets/img/components.png" alt="Components" class="img-responsive">
        <h3>Comprehensive docs</h3>
        <p>With Bootstrap, you get extensive and beautiful documentation with hundreds of live examples, code snippets, and more.</p>
      </div>
    </div>

    <hr class="half-rule">

    <p class="lead">Bootstrap is an open source project, hosted and maintained on GitHub.</p>
    <a href="{{ site.repo }}" class="btn btn-outline btn-lg">View the GitHub project</a>
  </div>
</div>

<div class="bs-featurette">
  <div class="container">
    <h2 class="bs-featurette-title">Built with Bootstrap.</h2>
    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started with your own with our growing <a href="{{ site.url }}/getting-started/#examples">collection of examples</a> or by exploring some of our favorites from <a href="{{ site.expo }}">the Expo</a>.</p>

    <hr class="half-rule">

Mark Otto's avatar
Mark Otto committed
60
    <div class="row bs-featured-sites">
Mark Otto's avatar
Mark Otto committed
61
      <div class="col-sm-3">
Mark Otto's avatar
Mark Otto committed
62
63
64
        <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
          <img src="http://expo.getbootstrap.com/screenshots/coinbase.jpg" alt="" class="img-responsive">
        </a>
Mark Otto's avatar
Mark Otto committed
65
66
      </div>
      <div class="col-sm-3">
Mark Otto's avatar
Mark Otto committed
67
68
69
        <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
          <img src="http://expo.getbootstrap.com/screenshots/localcrime.jpg" alt="" class="img-responsive">
        </a>
Mark Otto's avatar
Mark Otto committed
70
71
      </div>
      <div class="col-sm-3">
Mark Otto's avatar
Mark Otto committed
72
73
74
        <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
          <img src="http://expo.getbootstrap.com/screenshots/fortrabbit.jpg" alt="" class="img-responsive">
        </a>
Mark Otto's avatar
Mark Otto committed
75
76
      </div>
      <div class="col-sm-3">
Mark Otto's avatar
Mark Otto committed
77
78
79
        <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
          <img src="http://expo.getbootstrap.com/screenshots/sentry.jpg" alt="" class="img-responsive">
        </a>
Mark Otto's avatar
Mark Otto committed
80
81
82
83
84
85
86
87
88
      </div>
    </div>

    <hr class="half-rule">

    <p class="lead">Head to the Bootstrap Expo for dozens of inspiring projects built on Bootstrap.</p>
    <a href="{{ site.expo }}" class="btn btn-outline btn-lg">Explore the showcase</a>
  </div>
</div>