index.html 3.74 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>
12
    <p class="lead"><a href="{{ page.base_url }}getting-started#download" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download Bootstrap</a></p>
Mark Otto's avatar
Mark Otto committed
13
    {% include ads.html %}
Mark Otto's avatar
Mark Otto committed
14
  </div>
15
</main>
Mark Otto's avatar
Mark Otto committed
16
17
18
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


<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>
Mark Otto's avatar
Mark Otto committed
53
    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on 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>
Mark Otto's avatar
Mark Otto committed
54
55
56

    <hr class="half-rule">

Mark Otto's avatar
Mark Otto committed
57
    <div class="row bs-featured-sites">
Mark Otto's avatar
Mark Otto committed
58
      <div class="col-sm-3">
Mark Otto's avatar
Mark Otto committed
59
60
61
        <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
62
63
      </div>
      <div class="col-sm-3">
Mark Otto's avatar
Mark Otto committed
64
65
66
        <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
67
68
      </div>
      <div class="col-sm-3">
Mark Otto's avatar
Mark Otto committed
69
70
71
        <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
72
73
      </div>
      <div class="col-sm-3">
Mark Otto's avatar
Mark Otto committed
74
75
76
        <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
77
78
79
80
81
82
83
84
85
      </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>