Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 11.9 KB
Newer Older
Mark Otto's avatar
Porting over all Blueprint styles to new Baseline repo  
Mark Otto committed
1
2
3
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Mark Otto's avatar
updates to the topbar markup and css to remove the logo classname and simplify the selectors for it    
Mark Otto committed
5 
    <title>Bootstrap, from Twitter</title>
Raul Riera's avatar
Removed trailing backslash :)    
Raul Riera committed
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
Mark Otto's avatar
update js in footer, add max-width to img    
Mark Otto committed
7 
    <meta name="apple-mobile-web-app-capable" content="yes">
Mark Otto's avatar
updated docs to fix inconsistent display of code elements, update scaffolding...    
Mark Otto committed
8
9 
    <meta name="description" content="">
    <meta name="author" content="">
Mark Otto's avatar
Porting over all Blueprint styles to new Baseline repo  
Mark Otto committed
10
Mark Otto's avatar
update docs to remove old stuff, update to all new classes; no more backwards compatibility    
Mark Otto committed
11 
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
Mark Otto's avatar
updated docs and docs css to not use rgba colors on the layout modules so IE can see that shiz    
Mark Otto committed
12
13
14
15 
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
Mark Otto's avatar
update to use latest version of bootstrap, docs cleanup, etc    
Mark Otto committed
16 
    <!-- Le styles -->
Jacob Thornton's avatar
mv 1.3.0 file names to plane bootstrap.css for submodulers    
Jacob Thornton committed
17 
    <link href="../bootstrap.css" rel="stylesheet">
Jacob Thornton's avatar
remove type attr from docs    
Jacob Thornton committed
18 
    <link href="assets/css/docs.css" rel="stylesheet">
Mark Otto's avatar
updated docs to fix inconsistent display of code elements, update scaffolding...    
Mark Otto committed
19 
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
Mark Otto's avatar
Porting over all Blueprint styles to new Baseline repo  
Mark Otto committed
20
Mark Otto's avatar
updated docs to fix inconsistent display of code elements, update scaffolding...    
Mark Otto committed
21 
    <!-- Le fav and touch icons -->
Mark Otto's avatar
adding quick and dirty favicons and touch icons for iOS    
Mark Otto committed
22
23
24
25 
    <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
Mark Otto's avatar
Porting over all Blueprint styles to new Baseline repo  
Mark Otto committed
26
27 
  </head>
Karthik Viswanathan's avatar
Made JavaScript unobtrusive by factoring out prettyPrint() to application.js....    
Karthik Viswanathan committed
28 
  <body>
Mark Otto's avatar
Porting over all Blueprint styles to new Baseline repo  
Mark Otto committed
29
Mark Otto's avatar
update docs to change topbar to navbar    
Mark Otto committed
30 
    <!-- Navbar
Mark Otto's avatar
more spacing and commenting    
Mark Otto committed
31 
    ================================================== -->
Mark Otto's avatar
new navbar introduced to replace topbar    
Mark Otto committed
32
33 
    <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
      <div class="navbar-inner">
Jacob Thornton's avatar
make topbar .fill wrap    
Jacob Thornton committed
34 
        <div class="container">
Mark Otto's avatar
updated js docs page to new 12 column layout, fix subhead jumbotron styles to match new front page    
Mark Otto committed
35 
          <a class="brand" href="./index.html">Bootstrap</a>
Mark Otto's avatar
adding dropdowns to tabs by refactoring the shizzzz out of them    
Mark Otto committed
36 
          <ul class="nav">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
37
38
39
40
41
42 
            <li class="active"><a href="./index.html">Overview</a></li>
            <li><a href="./scaffolding.html">Scaffolding</a></li>
            <li><a href="./base-css.html">Base CSS</a></li>
            <li><a href="./components.html">Components</a></li>
            <li><a href="./javascript.html">Javascript plugins</a></li>
            <li><a href="./less.html">Using LESS</a></li>
Jacob Thornton's avatar
make topbar .fill wrap    
Jacob Thornton committed
43
44 
          </ul>
        </div>
Mark Otto's avatar
Porting over all Blueprint styles to new Baseline repo  
Mark Otto committed
45
46
47 
      </div>
    </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
48
49
50
51
52
53
54
55
56 
    <div class="container">

      <div id="overview">

        <!-- Masthead
        ================================================== -->
        <header class="jumbotron masthead">
          <div class="inner">
            <h1>Bootstrap,<br> from Twitter</h1>
Mark Otto's avatar
center example sites in docs on mobile    
Mark Otto committed
57 
            <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
58 
            <p class="download-info">
Mark Otto's avatar
update all leads on docs pages    
Mark Otto committed
59 
              <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">Download on GitHub</a>
Mark Otto's avatar
tweaks and increase specificity of pills and active classes    
Mark Otto committed
60 
              <a href="./scaffolding.html" class="btn btn-large">Get started &rarr;</a>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
61
62 
              Currently v2.0.0
            </p>
Mark Otto's avatar
adding unofficial github buttons    
Mark Otto committed
63
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
64
65
66
67
68
69
70
71
72
73
74 
            <div class="benefits">
              <h4>Feature highlights</h4>
              <ul>
                <li><span>&times;</span> Built on LESS</li>
                <li><span>&times;</span> Complete styleguide docs</li>
                <li><span>&times;</span> Fully responsive design</li>
                <li><span>&times;</span> Small footprint (7kb gzipped)</li>
                <li><span>&times;</span> Support for IE7 and up</li>
                <li><span>&times;</span> Custom jQuery plugins</li>
                <li><span>&times;</span> Dozens of components</li>
              </ul>
Mark Otto's avatar
huge update to forms, docs for the new forms, added a new link for js example...    
Mark Otto committed
75
76 
            </div>
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
77
78
79
80
81
82
83
84
85 
        </header>

        <ul class="quick-links">
          <li><strong>Quick links</strong></li>
          <li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li>
          <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
          <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
          <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
          <li class="divider">&middot;</li>
Mark Otto's avatar
adding unofficial github buttons    
Mark Otto committed
86 
          <li>
Mark Otto's avatar
Remove static github buttons and replace with iframe versions    
Mark Otto committed
87
88
89
90 
            <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
          </li>
          <li>
            <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="94px" height="20px"></iframe>
Mark Otto's avatar
adding unofficial github buttons    
Mark Otto committed
91
92 
          </li>
<!--
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
93
94
95 
          <li><strong>Authors</strong></li>
          <li><a href="http://twitter.com/mdo">@mdo</a></li>
          <li><a href="http://twitter.com/fat">@fat</a></li>
Mark Otto's avatar
adding unofficial github buttons    
Mark Otto committed
96
97 
 -->
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
98
99 
          <li class="divider">&middot;</li>
          <li class="follow-btn">
Jacob Thornton's avatar
clean up all the js across all the doc pages    
Jacob Thornton committed
100 
            <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a>
Mark Otto's avatar
new navbar introduced to replace topbar    
Mark Otto committed
101 
          </li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
102 
          <li class="tweet-btn">
Jacob Thornton's avatar
clean up all the js across all the doc pages    
Jacob Thornton committed
103 
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
Mark Otto's avatar
new navbar introduced to replace topbar    
Mark Otto committed
104
105 
          </li>
        </ul>
Mark Otto's avatar
more tweaks to resolve some missed conflicts    
Mark Otto committed
106
Mark Otto's avatar
first pass at moving over the new tabs stuff to 2.0    
Mark Otto committed
107
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
108 
        <div class="marketing">
Mark Otto's avatar
updated index page to add featured sites, more docs tweaks    
Mark Otto committed
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145 
          <h1>Built with Bootstrap</h1>
          <ul class="media-grid example-sites">
            <li>
              <a href="http://kippt.com/" target="_blank">
                <img src="assets/img/example-sites/kippt.png" alt="Kippt">
              </a>
            </li>
            <li>
              <a href="http://www.fleetio.com/" target="_blank">
                <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
              </a>
            </li>
            <li>
              <a href="http://www.jshint.com/" target="_blank">
                <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
              </a>
            </li>
<!--
            <li>
              <a href="http://bartop.co/" target="_blank">
                <img src="assets/img/example-sites/bartop.png" alt="Bartop.co">
              </a>
            </li>
            <li>
              <a href="http://railwayjs.com/" target="_blank">
                <img src="assets/img/example-sites/railwayjs.png" alt="RailwayJS">
              </a>
            </li>
            <li>
              <a href="http://www.totalwireframe.com/" target="_blank">
                <img src="assets/img/example-sites/totalwireframe.png" alt="Total Wireframe">
              </a>
            </li>
 -->
          </ul>

          <h1>Designed for everyone, everywhere</h1>
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
146
147 
          <div class="row">
            <div class="span4">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
148 
              <img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
149
150
151
152 
              <h2>Built for and by nerds</h2>
              <p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.</p>
            </div>
            <div class="span4">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
153 
              <img class="icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
154
155
156
157 
              <h2>For all skill levels</h2>
              <p>Bootstrap is designed to help people of all skill level&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
            </div>
            <div class="span4">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
158 
              <img class="icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
159
160
161
162
163
164 
              <h2>Cross-everything</h2>
              <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
            </div>
          </div><!--/row-->
          <div class="row">
            <div class="span4">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
165 
              <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
166
167
168
169 
              <h2>12-column grid</h2>
              <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
            </div>
            <div class="span4">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
170 
              <img class="icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
171
172
173
174 
              <h2>Responsive design</h2>
              <p>With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.</p>
            </div>
            <div class="span4">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
175 
              <img class="icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
176
177
178
179
180
181 
              <h2>Styleguide docs</h2>
              <p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p>
            </div>
          </div><!--/row-->
          <div class="row">
            <div class="span4">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
182 
              <img class="icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
183
184
185
186 
              <h2>Growing library</h2>
              <p>Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p>
            </div>
            <div class="span4">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
187 
              <img class="icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
188
189
190
191 
              <h2>Custom jQuery plugins</h2>
              <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
            </div>
            <div class="span4">
Mark Otto's avatar
updated to include sub nav and pip nav, new docs updates, topbar nav...    
Mark Otto committed
192 
              <img class="icon" src="assets/img/less-small.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
193
194
195
196
197
198 
              <h2>Built on LESS</h2>
              <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
            </div>
          </div><!--/row-->
          <div class="row">
            <div class="span3">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
199 
              <img class="small-icon" src="assets/img/icon-html5.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
200
201
202
203 
              <h3>HTML5</h3>
              <p>Built to support new HTML5 elements and syntax.</p>
            </div>
            <div class="span3">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
204 
              <img class="small-icon" src="assets/img/icon-css3.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
205
206
207
208 
              <h3>CSS3</h3>
              <p>Progressively enhanced components for ultimate style.</p>
            </div>
            <div class="span3">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
209 
              <img class="small-icon" src="assets/img/icon-github.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
210
211
212
213 
              <h3>Open-source</h3>
              <p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p>
            </div>
            <div class="span3">
Mark Otto's avatar
adding more icons for the homepage for open source, twitter, and html5/css3    
Mark Otto committed
214 
              <img class="small-icon" src="assets/img/icon-twitter.png">
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
215 
              <h3>Made at Twitter</h3>
Mark Otto's avatar
updated to include sub nav and pip nav, new docs updates, topbar nav...    
Mark Otto committed
216 
              <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
217
218
219
220 
            </div>
          </div><!--/row-->
        </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
221 
      </div><!-- /#overview -->
Mark Otto's avatar
trying out new doc style stuff    
Mark Otto committed
222
Mark Otto's avatar
Updated documentation; added stacked forms; cleaned up spacing; moved all ids...    
Mark Otto committed
223
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
224
225 
      <!-- Footer
      ================================================== -->
Mark Otto's avatar
updated docs to include quick links and twitter buttons, added updated...    
Mark Otto committed
226
227 
      <footer class="footer">
        <p class="pull-right"><a href="#">Back to top</a></p>
Mark Otto's avatar
overhauled the front page to feel a bit more marketing-like, added the awesome...    
Mark Otto committed
228
229
230 
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
Mark Otto's avatar
updated docs to include quick links and twitter buttons, added updated...    
Mark Otto committed
231 
      </footer>
Mark Otto's avatar
biiiiiig update coming for responsiveness    
Mark Otto committed
232
233 
    </div><!-- /container -->
Mark Otto's avatar
tweak the h2s again for better spacing, adjust docs, remove white bg if...    
Mark Otto committed
234 
    <!-- Le javascript -->
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation    
Mark Otto committed
235 
    <!-- Placed at the end of the document so the pages load faster -->
Jacob Thornton's avatar
clean up all the js across all the doc pages    
Jacob Thornton committed
236 
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Mark Otto's avatar
Porting over all Blueprint styles to new Baseline repo  
Mark Otto committed
237 
  </body>
Jacob Thornton's avatar
clean up all the js across all the doc pages    
Jacob Thornton committed
238 
</html>