clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-24 03:57:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '3.0.0-wip' into bs3_restore_glyphicons

Browse Source 
Conflicts:
	dist/css/bootstrap.min.css
This commit is contained in:
Mark Otto 2013-08-18 10:28:32 -07:00
commit f8b65b41ab
11 changed files with 381 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_includes/nav-getting-started.html
View File

@ -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>

2
components.html
View File

@ -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>

5
dist/css/bootstrap.css vendored
View File

@ -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,

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
examples/jumbotron/index.html
View File

@ -75,8 +75,6 @@
</div>
<div class="container">
<div class="body-content">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
@ -101,8 +99,6 @@
<footer>
<p>&copy; Company 2013</p>
</footer>
</div>
</div> <!-- /container -->

15
examples/jumbotron/jumbotron.css
View File

@ -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;
}
}

5
examples/justified-nav/index.html
View File

@ -45,9 +45,6 @@
<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">
@ -67,8 +64,6 @@
</div>
</div>
</div><!-- /.body-content -->
<!-- Site footer -->
<div class="footer">
<p>&copy; Company 2013</p>

7
examples/justified-nav/justified-nav.css
View File

@ -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;

331
getting-started.html
View File

@ -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">

5
less/button-groups.less
View File

@ -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;
}

2
less/theme.less
View File

@ -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);