Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Greater standardization of sizing terminology #9056

Merged
merged 4 commits into from
Aug 4, 2013
+142 −121
Merged

Greater standardization of sizing terminology #9056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23ef8c0
Greater standardization of sizing terminology
cvrebert Aug 4, 2013
7a04e95
rm stray space in components.html
cvrebert Aug 4, 2013
b9c5721
add .btn-xs to .btn-group example
cvrebert Aug 4, 2013
cabcd36
add missing ref to .btn-xs in button sizes docs
cvrebert Aug 4, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 44 additions & 23 deletions components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,7 @@ <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
<div class="bs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
Expand All @@ -397,7 +397,7 @@ <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
Expand All @@ -408,12 +408,24 @@ <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div><!-- /example -->
{% highlight html %}
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
Expand All @@ -423,13 +435,22 @@ <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>

<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
{% endhighlight %}

Expand Down Expand Up @@ -535,8 +556,8 @@ <h2 id="input-groups-sizes">Optional sizes</h2>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form">
<div class="input-group">
<span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username">
<span class="input-group-addon input-lg">@</span>
<input type="text" class="form-control input-lg" placeholder="Username">
</div>
<br>
<div class="input-group">
Expand All @@ -545,14 +566,14 @@ <h2 id="input-groups-sizes">Optional sizes</h2>
</div>
<br>
<div class="input-group">
<span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username">
<span class="input-group-addon input-sm">@</span>
<input type="text" class="form-control input-sm" placeholder="Username">
</div>
</form>
{% highlight html %}
<div class="input-group">
<span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username">
<span class="input-group-addon input-lg">@</span>
<input type="text" class="form-control input-lg" placeholder="Username">
</div>

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

<div class="input-group">
<span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username">
<span class="input-group-addon input-sm">@</span>
<input type="text" class="form-control input-sm" placeholder="Username">
</div>
{% endhighlight %}

Expand Down Expand Up @@ -1446,10 +1467,10 @@ <h3>Disabled and active states</h3>


<h3>Sizes</h3>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code> for additional sizes.</p>
<p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
<div class="bs-example">
<div>
<ul class="pagination pagination-large">
<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
Expand All @@ -1471,7 +1492,7 @@ <h3>Sizes</h3>
</ul>
</div>
<div>
<ul class="pagination pagination-small">
<ul class="pagination pagination-sm">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
Expand All @@ -1483,9 +1504,9 @@ <h3>Sizes</h3>
</div>
</div>
{% highlight html %}
<ul class="pagination pagination-large">...</ul>
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination pagination">...</ul>
<ul class="pagination pagination-small">...</ul>
<ul class="pagination pagination-sm">...</ul>
{% endhighlight %}


Expand Down Expand Up @@ -1659,14 +1680,14 @@ <h2 id="type-components-jumbotron">Jumbotron</h2>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
{% highlight html %}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
{% endhighlight %}

Expand Down Expand Up @@ -2402,20 +2423,20 @@ <h3>Default well</h3>
<h3>Optional classes</h3>
<p>Control padding and rounded corners with two optional modifier classes.</p>
<div class="bs-example">
<div class="well well-large">
<div class="well well-lg">
Look, I'm in a well!
</div>
</div>
{% highlight html %}
<div class="well well-large">...</div>
<div class="well well-lg">...</div>
{% endhighlight %}

<div class="bs-example">
<div class="well well-small">
<div class="well well-sm">
Look, I'm in a well!
</div>
</div>
{% highlight html %}
<div class="well well-small">...</div>
<div class="well well-sm">...</div>
{% endhighlight %}
</div>
76 changes: 38 additions & 38 deletions css.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ <h1 id="glyphicons">Glyphicons</h1>
</div>
<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>
<p class="lead">
<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>
<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>
</p>
</div>

Expand All @@ -91,7 +91,7 @@ <h3 id="grid-options">Grid options</h3>
<tr>
<th></th>
<th>
Tiny devices
Extra small devices
<small>Phones (&lt;768px)</small>
</th>
<th>
Expand Down Expand Up @@ -1585,35 +1585,35 @@ <h3 id="forms-validation">Validation states</h3>


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

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

<select class="form-control input-large">
<option value="">.input-large</option>
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
<select class="form-control">
<option value="">Default select</option>
</select>
<select class="form-control input-small">
<option value="">.input-small</option>
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
</form>
{% highlight html %}
<input class="form-control input-large" type="text" placeholder=".input-large">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-small" type="text" placeholder=".input-small">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-large">...</select>
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-small">...</select>
<select class="form-control input-sm">...</select>
{% endhighlight %}

<h3>Column sizing</h3>
Expand Down Expand Up @@ -1701,54 +1701,54 @@ <h2 id="buttons-options">Button options</h2>
{% endhighlight %}

<h2 id="buttons-sizes">Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p>
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<div class="bs-example">
<p>
<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-default btn-large">Large button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-default btn-small">Small button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
<button type="button" class="btn btn-default btn-mini">Mini button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
</div>
{% highlight html %}
<p>
<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-default btn-large">Large button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-default btn-small">Small button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
<button type="button" class="btn btn-default btn-mini">Mini button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
{% endhighlight %}

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


Expand All @@ -1758,12 +1758,12 @@ <h2 id="buttons-disabled">Disabled state</h2>
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="bs-example">
<button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
</p>
{% highlight html %}
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
{% endhighlight %}

<div class="bs-callout bs-callout-danger">
Expand All @@ -1774,12 +1774,12 @@ <h4>Cross-browser compatibility</h4>
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-example">
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
<a href="#" class="btn btn-default btn-large disabled">Link</a>
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>
</p>
{% highlight html %}
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
<a href="#" class="btn btn-default btn-large disabled">Link</a>
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>
{% endhighlight %}
<p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
Expand Down
4 changes: 2 additions & 2 deletions customize.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,7 +486,7 @@ <h3>Media queries breakpoints</h3>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row">
<div class="col-lg-6">
<label>@screen-tiny</label>
<label>@screen-xsmall</label>
<input type="text" class="form-control" placeholder="480px">
<label>@screen-small</label>
<input type="text" class="form-control" placeholder="768px">
Expand Down Expand Up @@ -1439,7 +1439,7 @@ <h1 id="download">Download</h1>
</div>
<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>
<div class="bs-customize-download">
<a class="btn btn-block btn-large btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
<a class="btn btn-block btn-lg btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
</div>
<div class="bs-callout bs-callout-danger">
<h4>What's included?</h4>
Expand Down
Loading