Skip to content

Commit c45edbe

Browse files
mdomdo
committed
Merge pull request #9056 from twbs/large-to-lg-etc
Greater standardization of sizing terminology
2 parents 30a01e0 + cabcd36 commit c45edbe

16 files changed

+142
-121
lines changed

‎components.html‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,7 @@ <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
385385
<div class="bs-example">
386386
<div class="btn-toolbar" style="margin: 0;">
387387
<div class="btn-group">
388-
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
388+
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
389389
Large button <span class="caret"></span>
390390
</button>
391391
<ul class="dropdown-menu">
@@ -397,7 +397,7 @@ <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
397397
</ul>
398398
</div><!-- /btn-group -->
399399
<div class="btn-group">
400-
<button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
400+
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
401401
Small button <span class="caret"></span>
402402
</button>
403403
<ul class="dropdown-menu">
@@ -408,12 +408,24 @@ <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
408408
<li><a href="#">Separated link</a></li>
409409
</ul>
410410
</div><!-- /btn-group -->
411+
<div class="btn-group">
412+
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
413+
Extra small button <span class="caret"></span>
414+
</button>
415+
<ul class="dropdown-menu">
416+
<li><a href="#">Action</a></li>
417+
<li><a href="#">Another action</a></li>
418+
<li><a href="#">Something else here</a></li>
419+
<li class="divider"></li>
420+
<li><a href="#">Separated link</a></li>
421+
</ul>
422+
</div><!-- /btn-group -->
411423
</div><!-- /btn-toolbar -->
412424
</div><!-- /example -->
413425
{% highlight html %}
414426
<!-- Large button group -->
415427
<div class="btn-group">
416-
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
428+
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
417429
Large button <span class="caret"></span>
418430
</button>
419431
<ul class="dropdown-menu">
@@ -423,13 +435,22 @@ <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
423435

424436
<!-- Small button group -->
425437
<div class="btn-group">
426-
<button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
438+
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
427439
Small button <span class="caret"></span>
428440
</button>
429441
<ul class="dropdown-menu">
430442
...
431443
</ul>
432444
</div>
445+
446+
<!-- Extra small button group -->
447+
<div class="btn-group">
448+
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
449+
Extra small button <span class="caret"></span>
450+
</button>
451+
<ul class="dropdown-menu">
452+
...
453+
</ul>
433454
</div>
434455
{% endhighlight %}
435456

@@ -535,8 +556,8 @@ <h2 id="input-groups-sizes">Optional sizes</h2>
535556
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
536557
<form class="bs-example bs-example-form">
537558
<div class="input-group">
538-
<span class="input-group-addon input-large">@</span>
539-
<input type="text" class="form-control input-large" placeholder="Username">
559+
<span class="input-group-addon input-lg">@</span>
560+
<input type="text" class="form-control input-lg" placeholder="Username">
540561
</div>
541562
<br>
542563
<div class="input-group">
@@ -545,14 +566,14 @@ <h2 id="input-groups-sizes">Optional sizes</h2>
545566
</div>
546567
<br>
547568
<div class="input-group">
548-
<span class="input-group-addon input-small">@</span>
549-
<input type="text" class="form-control input-small" placeholder="Username">
569+
<span class="input-group-addon input-sm">@</span>
570+
<input type="text" class="form-control input-sm" placeholder="Username">
550571
</div>
551572
</form>
552573
{% highlight html %}
553574
<div class="input-group">
554-
<span class="input-group-addon input-large">@</span>
555-
<input type="text" class="form-control input-large" placeholder="Username">
575+
<span class="input-group-addon input-lg">@</span>
576+
<input type="text" class="form-control input-lg" placeholder="Username">
556577
</div>
557578

558579
<div class="input-group">
@@ -561,8 +582,8 @@ <h2 id="input-groups-sizes">Optional sizes</h2>
561582
</div>
562583

563584
<div class="input-group">
564-
<span class="input-group-addon input-small">@</span>
565-
<input type="text" class="form-control input-small" placeholder="Username">
585+
<span class="input-group-addon input-sm">@</span>
586+
<input type="text" class="form-control input-sm" placeholder="Username">
566587
</div>
567588
{% endhighlight %}
568589

@@ -1446,10 +1467,10 @@ <h3>Disabled and active states</h3>
14461467

14471468

14481469
<h3>Sizes</h3>
1449-
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code> for additional sizes.</p>
1470+
<p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
14501471
<div class="bs-example">
14511472
<div>
1452-
<ul class="pagination pagination-large">
1473+
<ul class="pagination pagination-lg">
14531474
<li><a href="#">&laquo;</a></li>
14541475
<li><a href="#">1</a></li>
14551476
<li><a href="#">2</a></li>
@@ -1471,7 +1492,7 @@ <h3>Sizes</h3>
14711492
</ul>
14721493
</div>
14731494
<div>
1474-
<ul class="pagination pagination-small">
1495+
<ul class="pagination pagination-sm">
14751496
<li><a href="#">&laquo;</a></li>
14761497
<li><a href="#">1</a></li>
14771498
<li><a href="#">2</a></li>
@@ -1483,9 +1504,9 @@ <h3>Sizes</h3>
14831504
</div>
14841505
</div>
14851506
{% highlight html %}
1486-
<ul class="pagination pagination-large">...</ul>
1507+
<ul class="pagination pagination-lg">...</ul>
14871508
<ul class="pagination pagination">...</ul>
1488-
<ul class="pagination pagination-small">...</ul>
1509+
<ul class="pagination pagination-sm">...</ul>
14891510
{% endhighlight %}
14901511

14911512

@@ -1659,14 +1680,14 @@ <h2 id="type-components-jumbotron">Jumbotron</h2>
16591680
<div class="jumbotron">
16601681
<h1>Hello, world!</h1>
16611682
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
1662-
<p><a class="btn btn-primary btn-large">Learn more</a></p>
1683+
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
16631684
</div>
16641685
</div>
16651686
{% highlight html %}
16661687
<div class="jumbotron">
16671688
<h1>Hello, world!</h1>
16681689
<p>...</p>
1669-
<p><a class="btn btn-primary btn-large">Learn more</a></p>
1690+
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
16701691
</div>
16711692
{% endhighlight %}
16721693

@@ -2402,20 +2423,20 @@ <h3>Default well</h3>
24022423
<h3>Optional classes</h3>
24032424
<p>Control padding and rounded corners with two optional modifier classes.</p>
24042425
<div class="bs-example">
2405-
<div class="well well-large">
2426+
<div class="well well-lg">
24062427
Look, I'm in a well!
24072428
</div>
24082429
</div>
24092430
{% highlight html %}
2410-
<div class="well well-large">...</div>
2431+
<div class="well well-lg">...</div>
24112432
{% endhighlight %}
24122433

24132434
<div class="bs-example">
2414-
<div class="well well-small">
2435+
<div class="well well-sm">
24152436
Look, I'm in a well!
24162437
</div>
24172438
</div>
24182439
{% highlight html %}
2419-
<div class="well well-small">...</div>
2440+
<div class="well well-sm">...</div>
24202441
{% endhighlight %}
24212442
</div>

‎css.html‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h1 id="glyphicons">Glyphicons</h1>
6969
</div>
7070
<p class="lead">With the launch of Bootstrap 3, icons have been moved to a <a href="https://github.com/twbs/bootstrap-glyphicons">separate repository</a>. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.</p>
7171
<p class="lead">
72-
<a href="http://glyphicons.getbootstrap.com/" class="btn btn-default btn-large">Visit Glyphicons for Bootstrap</a> or <a href="https://github.com/twbs/bootstrap-glyphicons">download from GitHub</a>
72+
<a href="http://glyphicons.getbootstrap.com/" class="btn btn-default btn-lg">Visit Glyphicons for Bootstrap</a> or <a href="https://github.com/twbs/bootstrap-glyphicons">download from GitHub</a>
7373
</p>
7474
</div>
7575

@@ -91,7 +91,7 @@ <h3 id="grid-options">Grid options</h3>
9191
<tr>
9292
<th></th>
9393
<th>
94-
Tiny devices
94+
Extra small devices
9595
<small>Phones (&lt;768px)</small>
9696
</th>
9797
<th>
@@ -1585,35 +1585,35 @@ <h3 id="forms-validation">Validation states</h3>
15851585

15861586

15871587
<h2 id="forms-control-sizes">Control sizing</h2>
1588-
<p>Set heights using classes like <code>.input-large</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
1588+
<p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
15891589

15901590
<h3>Height sizing</h3>
15911591
<p>Create larger or smaller form controls that match button sizes.</p>
15921592
<form class="bs-example bs-example-control-sizing">
15931593
<div class="controls docs-input-sizes">
1594-
<input class="form-control input-large" type="text" placeholder=".input-large">
1594+
<input class="form-control input-lg" type="text" placeholder=".input-lg">
15951595
<input type="text" class="form-control" placeholder="Default input">
1596-
<input class="form-control input-small" type="text" placeholder=".input-small">
1596+
<input class="form-control input-sm" type="text" placeholder=".input-sm">
15971597

1598-
<select class="form-control input-large">
1599-
<option value="">.input-large</option>
1598+
<select class="form-control input-lg">
1599+
<option value="">.input-lg</option>
16001600
</select>
16011601
<select class="form-control">
16021602
<option value="">Default select</option>
16031603
</select>
1604-
<select class="form-control input-small">
1605-
<option value="">.input-small</option>
1604+
<select class="form-control input-sm">
1605+
<option value="">.input-sm</option>
16061606
</select>
16071607
</div>
16081608
</form>
16091609
{% highlight html %}
1610-
<input class="form-control input-large" type="text" placeholder=".input-large">
1610+
<input class="form-control input-lg" type="text" placeholder=".input-lg">
16111611
<input class="form-control" type="text" placeholder="Default input">
1612-
<input class="form-control input-small" type="text" placeholder=".input-small">
1612+
<input class="form-control input-sm" type="text" placeholder=".input-sm">
16131613

1614-
<select class="form-control input-large">...</select>
1614+
<select class="form-control input-lg">...</select>
16151615
<select class="form-control">...</select>
1616-
<select class="form-control input-small">...</select>
1616+
<select class="form-control input-sm">...</select>
16171617
{% endhighlight %}
16181618

16191619
<h3>Column sizing</h3>
@@ -1701,54 +1701,54 @@ <h2 id="buttons-options">Button options</h2>
17011701
{% endhighlight %}
17021702

17031703
<h2 id="buttons-sizes">Button sizes</h2>
1704-
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p>
1704+
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
17051705
<div class="bs-example">
17061706
<p>
1707-
<button type="button" class="btn btn-primary btn-large">Large button</button>
1708-
<button type="button" class="btn btn-default btn-large">Large button</button>
1707+
<button type="button" class="btn btn-primary btn-lg">Large button</button>
1708+
<button type="button" class="btn btn-default btn-lg">Large button</button>
17091709
</p>
17101710
<p>
17111711
<button type="button" class="btn btn-primary">Default button</button>
17121712
<button type="button" class="btn btn-default">Default button</button>
17131713
</p>
17141714
<p>
1715-
<button type="button" class="btn btn-primary btn-small">Small button</button>
1716-
<button type="button" class="btn btn-default btn-small">Small button</button>
1715+
<button type="button" class="btn btn-primary btn-sm">Small button</button>
1716+
<button type="button" class="btn btn-default btn-sm">Small button</button>
17171717
</p>
17181718
<p>
1719-
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
1720-
<button type="button" class="btn btn-default btn-mini">Mini button</button>
1719+
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
1720+
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
17211721
</p>
17221722
</div>
17231723
{% highlight html %}
17241724
<p>
1725-
<button type="button" class="btn btn-primary btn-large">Large button</button>
1726-
<button type="button" class="btn btn-default btn-large">Large button</button>
1725+
<button type="button" class="btn btn-primary btn-lg">Large button</button>
1726+
<button type="button" class="btn btn-default btn-lg">Large button</button>
17271727
</p>
17281728
<p>
17291729
<button type="button" class="btn btn-primary">Default button</button>
17301730
<button type="button" class="btn btn-default">Default button</button>
17311731
</p>
17321732
<p>
1733-
<button type="button" class="btn btn-primary btn-small">Small button</button>
1734-
<button type="button" class="btn btn-default btn-small">Small button</button>
1733+
<button type="button" class="btn btn-primary btn-sm">Small button</button>
1734+
<button type="button" class="btn btn-default btn-sm">Small button</button>
17351735
</p>
17361736
<p>
1737-
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
1738-
<button type="button" class="btn btn-default btn-mini">Mini button</button>
1737+
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
1738+
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
17391739
</p>
17401740
{% endhighlight %}
17411741

17421742
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
17431743
<div class="bs-example">
17441744
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
1745-
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
1746-
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
1745+
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
1746+
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
17471747
</div>
17481748
</div>
17491749
{% highlight html %}
1750-
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
1751-
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
1750+
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
1751+
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
17521752
{% endhighlight %}
17531753

17541754

@@ -1758,12 +1758,12 @@ <h2 id="buttons-disabled">Disabled state</h2>
17581758
<h3>Button element</h3>
17591759
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
17601760
<p class="bs-example">
1761-
<button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
1762-
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
1761+
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
1762+
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
17631763
</p>
17641764
{% highlight html %}
1765-
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
1766-
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
1765+
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
1766+
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
17671767
{% endhighlight %}
17681768

17691769
<div class="bs-callout bs-callout-danger">
@@ -1774,12 +1774,12 @@ <h4>Cross-browser compatibility</h4>
17741774
<h3>Anchor element</h3>
17751775
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
17761776
<p class="bs-example">
1777-
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
1778-
<a href="#" class="btn btn-default btn-large disabled">Link</a>
1777+
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
1778+
<a href="#" class="btn btn-default btn-lg disabled">Link</a>
17791779
</p>
17801780
{% highlight html %}
1781-
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
1782-
<a href="#" class="btn btn-default btn-large disabled">Link</a>
1781+
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
1782+
<a href="#" class="btn btn-default btn-lg disabled">Link</a>
17831783
{% endhighlight %}
17841784
<p>
17851785
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.

‎customize.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ <h3>Media queries breakpoints</h3>
486486
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
487487
<div class="row">
488488
<div class="col-lg-6">
489-
<label>@screen-tiny</label>
489+
<label>@screen-xsmall</label>
490490
<input type="text" class="form-control" placeholder="480px">
491491
<label>@screen-small</label>
492492
<input type="text" class="form-control" placeholder="768px">
@@ -1439,7 +1439,7 @@ <h1 id="download">Download</h1>
14391439
</div>
14401440
<p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
14411441
<div class="bs-customize-download">
1442-
<a class="btn btn-block btn-large btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
1442+
<a class="btn btn-block btn-lg btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
14431443
</div>
14441444
<div class="bs-callout bs-callout-danger">
14451445
<h4>What's included?</h4>

0 commit comments

Comments
 (0)