Skip to content

B
bootstrap
Commit f8b65b41 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch '3.0.0-wip' into bs3_restore_glyphicons 

Conflicts:
	dist/css/bootstrap.min.css
parents 6b24297c 6496ffb7
Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 76 deletions
_includes/nav-getting-started.html
View file @ f8b65b41
......@@ -18,6 +18,9 @@
<li>
<a href="#disable-responsive">Disabling responsiveness</a>
</li>
<li>
<a href="#migration">Migration</a>
</li>
<li>
<a href="#browsers">Browser support</a>
</li>
......
components.html
View file @ f8b65b41
......@@ -2287,7 +2287,7 @@ body { padding-bottom: 70px; }
</div>
<h3 id="progress-basic">Basic example</h3>
<p>Default progress bar with a vertical gradient.</p>
<p>Default progress bar.</p>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
......
dist/css/bootstrap.css
View file @ f8b65b41
......@@ -3449,11 +3449,12 @@ input[type="button"].btn-block {
}
.btn-lg .caret {
border-width: 5px;
border-width: 5px 5px 0;
border-bottom-width: 0;
}
.dropup .btn-lg .caret {
border-bottom-width: 5px;
border-width: 0 5px 5px;
}
.btn-group-vertical > .btn,
......
dist/css/bootstrap.min.css
View file @ f8b65b41
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/jumbotron/index.html
View file @ f8b65b41
......@@ -75,34 +75,30 @@
</div>
<div class="container">
<div class="body-content">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<hr>
<footer>
<p>&copy; Company 2013</p>
</footer>
</div>
<hr>
<footer>
<p>&copy; Company 2013</p>
</footer>
</div> <!-- /container -->
......
examples/jumbotron/jumbotron.css
View file @ f8b65b41
......@@ -3,18 +3,3 @@ body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove padding from wrapping element since we kick in the grid classes here */
.body-content {
padding: 0;
}
}
\ No newline at end of file
examples/justified-nav/index.html
View file @ f8b65b41
......@@ -45,29 +45,24 @@
<p><a class="btn btn-lg btn-success" href="#">Get started today</a></p>
</div>
<div class="body-content">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div>
</div><!-- /.body-content -->
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div>
</div>
<!-- Site footer -->
<div class="footer">
......
examples/justified-nav/justified-nav.css
View file @ f8b65b41
......@@ -2,13 +2,6 @@ body {
padding-top: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile-first views */
.masthead,
.footer {
padding-left: 15px;
padding-right: 15px;
}
.footer {
border-top: 1px solid #eee;
margin-top: 40px;
......
getting-started.html
View file @ f8b65b41
......@@ -320,6 +320,337 @@ bootstrap/
<!-- Migration
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="migration">Migration</h1>
</div>
<p class="lead">We've put together a helpful guide that outlines some of the key changes from Bootstrap 2.x to 3.0.</p>
<h3 id="migration-clases">Major class changes</h3>
<p></p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Bootstrap 2.x</th>
<th>Bootstrap 3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.container-fluid</code></td>
<td><code>.container</code></td>
</tr>
<tr>
<td><code>.row-fluid</code></td>
<td><code>.row</code></td>
</tr>
<tr>
<td><code>.span*</code></td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td><code>.offset*</code></td>
<td><code>.col-md-offset-*</code></td>
</tr>
<tr>
<td><code>.brand</code></td>
<td><code>.navbar-brand</code></td>
</tr>
<tr>
<td><code>.hero-unit</code></td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td><code>.icon-*</code></td>
<td><code>.glyphicon .glyphicon-*</code></td>
</tr>
<tr>
<td><code>.btn</code></td>
<td><code>.btn .btn-default</code></td>
</tr>
<tr>
<td><code>.btn-mini</code></td>
<td><code>.btn-xs</code></td>
</tr>
<tr>
<td><code>.btn-small</code></td>
<td><code>.btn-sm</code></td>
</tr>
<tr>
<td><code>.btn-large</code></td>
<td><code>.btn-lg</code></td>
</tr>
<tr>
<td><code>.visible-phone</code></td>
<td><code>.visible-sm</code></td>
</tr>
<tr>
<td><code>.visible-tablet</code></td>
<td><code>.visible-md</code></td>
</tr>
<tr>
<td><code>.visible-desktop</code></td>
<td><code>.visible-lg</code></td>
</tr>
<tr>
<td><code>.hidden-phone</code></td>
<td><code>.hidden-sm</code></td>
</tr>
<tr>
<td><code>.hidden-tablet</code></td>
<td><code>.hidden-md</code></td>
</tr>
<tr>
<td><code>.hidden-desktop</code></td>
<td><code>.hidden-lg</code></td>
</tr>
<tr>
<td><code>.input-small</code></td>
<td><code>.input-sm</code></td>
</tr>
<tr>
<td><code>.input-large</code></td>
<td><code>.input-lg</code></td>
</tr>
<tr>
<td><code>.input-prepend</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td><code>.input-append</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td><code>.add-on</code></td>
<td><code>.input-group-addon</code></td>
</tr>
<tr>
<td><code>.btn-navbar</code></td>
<td><code>.navbar-btn</code></td>
</tr>
<tr>
<td><code>.thumbnail</code></td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td><code>ul.inline</code></td>
<td><code>.list-inline</code></td>
</tr>
</tbody>
</table>
<h3 id="migration-new">What's new</h3>
<p>We've added a few new elements and changed some existing ones. Here's their new or updated classes.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Panels</td>
<td><code>.panel</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
</tr>
<tr>
<td>List groups</td>
<td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
</tr>
<tr>
<td>Glyphicons</td>
<td><code>.glyphicon</code></td>
</tr>
<tr>
<td>Jumbotron</td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td>Tiny grid (&lt;768 px)</td>
<td><code>.col-xs-*</code></td>
</tr>
<tr>
<td>Small grid (&gt;768 px)</td>
<td><code>.col-sm-*</code></td>
</tr>
<tr>
<td>Medium grid (&gt;992 px)</td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td>Large grid (&gt;1200 px)</td>
<td><code>.col-lg-*</code></td>
</tr>
<tr>
<td>Offsets</td>
<td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
</tr>
<tr>
<td>Push</td>
<td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
</tr>
<tr>
<td>Pull</td>
<td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
</tr>
<tr>
<td>Input groups</td>
<td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
</tr>
<tr>
<td>Form controls</td>
<td><code>.form-control</code> <code>.form-group</code></td>
</tr>
<tr>
<td>Inline controls</td>
<td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
</tr>
<tr>
<td>Button group sizes</td>
<td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
</tr>
<tr>
<td>Navbar text</td>
<td><code>.navbar-text</code></td>
</tr>
<tr>
<td>Navbar header</td>
<td><code>.navbar-header</code></td>
</tr>
<tr>
<td>Justified tabs / pills</td>
<td><code>.nav-justified</code></td>
</tr>
<tr>
<td>Responsive images</td>
<td><code>.img-responsive</code></td>
</tr>
<tr>
<td>Contextual table rows</td>
<td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
</tr>
<tr>
<td>Contextual panels</td>
<td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
</tr>
<tr>
<td>Modal</td>
<td><code>.modal-dialog</code> <code>.modal-content</code></td>
</tr>
<tr>
<td>Thumbnail image</td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td>Well sizes</td>
<td><code>.well-small</code> <code>.well-large</code></td>
</tr>
<tr>
<td>Alert links</td>
<td><code>.alert-link</code></td>
</tr>
</tbody>
</table>
<h3 id="migration-dropped">What's been removed</h3>
<p>The following elements have been dropped or changed in v3.</p>
<table class="table table-bordered table-striped bs-table">
<thead>
<tr>
<th>Element</th>
<th>Removed from 2.x</th>
<th>3.0 Equivalent</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hero Unit</td>
<td><code>.hero-unit</code></td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td>Form actions</td>
<td><code>.form-actions</code></td>
<td>-</td>
</tr>
<tr>
<td>Grid</td>
<td><code>.span*</code></td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td>Fluid container</td>
<td><code>.container-fluid</code></td>
<td><code>.container</code> (no more fixed grid)</td>
</tr>
<tr>
<td>Fluid row</td>
<td><code>.row-fluid</code></td>
<td><code>.row</code> (no more fixed grid)</td>
</tr>
<tr>
<td>Icons</td>
<td><code>.icon-*</code></td>
<td><code>.glyphicon-*</code></td>
</tr>
<tr>
<td>Navbar button</td>
<td><code>.btn-navbar</code></td>
<td><code>.navbar-btn</code></td>
</tr>
<tr>
<td>Navbar inner</td>
<td><code>.navbar-inner</code></td>
<td>-</td>
</tr>
<tr>
<td>Thumbnails</td>
<td><code>.thumbnails</code></td>
<td><code>.col-*</code> and <code>.thumbnail</code></td>
</tr>
<tr>
<td>Input append / prepend</td>
<td><code>.input-append</code> <code>.input-prepend</code> <code>.add-on</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td>Dropdown submenu</td>
<td><code>.dropdown-submenu</code></td>
<td>-</td>
</tr>
<tr>
<td>Tab alignments</td>
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="migration-notes">Additional notes</h3>
<p>We've made many underlying changes in v3 that are not immediately apparent without closer inspection. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.</p>
<ul>
<li><code>.input-*</code> are 100% width. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
<li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes</li>
<li><code>.btn</code> must also use <code>.btn-default</code> to get the 'default' button</li>
<li><code>.container</code> and <code>.row</code> are now fluid (percentage-based)</li>
<li>Images are not responsive by default. Use <code>.img-responsive</code> for fluid IMG size</li>
<li>The icons, now <code>.glyphicon</code> are in a separate CSS file.</li>
<li>Include <code>.glyphicon</code> base class in all icons (ie: <code>.glyphicon .glyphicon-asterisk</code>).</li>
<li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
<li>Modal markup has changed <code>.modal-header</code> <code>.modal-body</code> <code>.modal-footer</code> now get wrapped in <code>.modal-content</code> and <code>.modal-dialog</code></li>
<li>Events are namespaced. For example to handle the modal 'show' event, use <code>'show.bs.modal'</code>. For tabs 'shown' use <code>'shown.bs.tab'</code>, etc..</li>
</ul>
<div class="bs-callout bs-callout-info">
<h4>More Tools &amp; Examples</h4>
<p>You may also find this <a href="https://github.com/iatek/bootstrap-3-upgrade">upgrade tool</a> and collection of <a href="http://bootply.com/tagged/bootstrap-3">code snippets at Bootply</a> useful for migrating to Bootstrap 3.</p>
</div>
</div>
<!-- Browser support
================================================== -->
<div class="bs-docs-section">
......
less/button-groups.less
View file @ f8b65b41
......@@ -159,11 +159,12 @@
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large;
border-width: @caret-width-large @caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-bottom-width: @caret-width-large;
border-width: 0 @caret-width-large @caret-width-large;
}
......
less/theme.less
View file @ f8b65b41
......@@ -94,7 +94,7 @@
// Basic navbar
.navbar {
#gradient > .vertical(@start-color: lighten(@navbar-bg, 10%); @end-color: @navbar-bg;);
border-radius: @border-radius-base;
border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment