aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-09-17 15:21:31 -0700
committerMark Otto <[email protected]>2014-09-17 15:21:31 -0700
commit9f2aeafe851bdca522b886c29afcece1ee0060e1 (patch)
treebe13d5ce0d68631543f28af8d9b444a7bd44917e /docs/components
parent7d9f55c3d5dcc5b12882af96245dab27be5fa346 (diff)
parentc5c67d0f54674dede58fc924d4d7c0f1d65705d9 (diff)
downloadbootstrap-9f2aeafe851bdca522b886c29afcece1ee0060e1.tar.xz
bootstrap-9f2aeafe851bdca522b886c29afcece1ee0060e1.zip
Merge branch 'master' into derp
Conflicts: Gruntfile.js dist/css/bootstrap-theme.css.map dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.svg docs/_includes/components/badges.html docs/_includes/components/input-groups.html docs/_includes/components/pagination.html docs/_includes/css/forms.html docs/_includes/footer.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/grunt.html docs/_includes/home-nav.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/tooltips.html docs/_includes/nav/getting-started.html docs/_includes/nav/javascript.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/browser-bugs.html docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.svg less/_button-group.less less/_jumbotron.less less/_variables.less less/mixins/vendor-prefixes.less less/panels.less less/thumbnails.less package.json
Diffstat (limited to 'docs/components')
-rw-r--r--docs/components/badges.md17
-rw-r--r--docs/components/dropdowns.md2
-rw-r--r--docs/components/forms.md10
-rw-r--r--docs/components/input-group.md6
-rw-r--r--docs/components/new-navbar.md4
-rw-r--r--docs/components/pagination.md114
6 files changed, 76 insertions, 77 deletions
diff --git a/docs/components/badges.md b/docs/components/badges.md
index 44368b783..0828f151d 100644
--- a/docs/components/badges.md
+++ b/docs/components/badges.md
@@ -29,23 +29,6 @@ Built-in styles are included for placing badges in active states in pill navigat
<a class="nav-link" href="#">Messages <span class="badge">3</span></a>
</li>
</ul>
-<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
- <li class="nav-item active" role="presentation">
- <a class="nav-link" href="#">
- <span class="badge pull-right">42</span>
- Home
- </a>
- </li>
- <li class="nav-item" role="presentation">
- <a class="nav-link" href="#">Profile</a>
- </li>
- <li class="nav-item" role="presentation">
- <a class="nav-link" href="#">
- <span class="badge pull-right">3</span>
- Messages
- </a>
- </li>
-</ul>
{% endexample %}
### Buttons
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index bc2fb86fa..4c4ad61d0 100644
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -86,7 +86,7 @@ Separate groups of related menu items with a divider.
Add `.disabled` to a `<li>` in the dropdown to disable the link.
{% example html %}
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
+<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Regular link</a>
</li>
diff --git a/docs/components/forms.md b/docs/components/forms.md
index a57641570..8f1604a81 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -316,12 +316,12 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
<div class="bs-callout bs-callout-warning">
<h4>Caveat about link functionality of `&lt;a&gt;`</h4>
- <p>Our styles use `pointer-events: none` to try to disable the link functionality of `&lt;a class="btn btn-*"&gt;` buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
+ <p>Our styles use `pointer-events: none` to try to disable the link functionality of <code>&lt;a class="btn btn-*"&gt;</code> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
- <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the `disabled` attribute on a `&lt;fieldset&gt;`. Use custom JavaScript to disable the fieldset in these browsers.</p>
+ <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
## Readonly inputs
@@ -441,9 +441,9 @@ Set heights using classes like `.input-lg`, and set widths using grid column cla
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
-<select class="form-control input-lg">...</select>
-<select class="form-control">...</select>
-<select class="form-control input-sm">...</select>
+<select class="form-control input-lg"></select>
+<select class="form-control"></select>
+<select class="form-control input-sm"></select>
{% endexample %}
Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
diff --git a/docs/components/input-group.md b/docs/components/input-group.md
index 5edbc8ced..f53eb9a17 100644
--- a/docs/components/input-group.md
+++ b/docs/components/input-group.md
@@ -3,11 +3,11 @@ layout: page
title: Input group
---
-Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use `.input-group` with an `.input-group-addon` to prepend or append elements to a single `.form-control`.
+Extend form controls by adding text or buttons before, after, or on both sides of any text-based `<input>`. Use `.input-group` with an `.input-group-addon` to prepend or append elements to a single `.form-control`.
<div class="bs-callout bs-callout-danger">
- <h4>Cross-browser compatibility</h4>
- <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
+ <h4>Textual <code>&lt;input&gt;</code>s only</h4>
+ <p>Avoid using <code>&lt;textarea&gt;</code> elements here as their <code>rows</code> attribute will not be respected in some cases.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Tooltips &amp; popovers in input groups require special setting</h4>
diff --git a/docs/components/new-navbar.md b/docs/components/new-navbar.md
index a409bb0ad..97b274aaf 100644
--- a/docs/components/new-navbar.md
+++ b/docs/components/new-navbar.md
@@ -77,7 +77,7 @@ Proposal to replace the existing navbar with something simpler and more customiz
<a class="nav-link" href="#">About</a>
</li>
</ul>
- <form action="" class="form-inline pull-right">
+ <form class="form-inline pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
@@ -101,7 +101,7 @@ Proposal to replace the existing navbar with something simpler and more customiz
<a class="nav-link" href="#">About</a>
</li>
</ul>
- <form action="" class="form-inline pull-right">
+ <form class="form-inline pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 115e19cd5..7b6aaa5c5 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -10,15 +10,17 @@ Provide pagination links for your site or app with the multi-page pagination com
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
{% example html %}
-<ul class="pagination">
- <li><a href="#">&laquo;</a></li>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li><a href="#">&raquo;</a></li>
-</ul>
+<nav>
+ <ul class="pagination">
+ <li><a href="#">&laquo;</a></li>
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ <li><a href="#">5</a></li>
+ <li><a href="#">&raquo;</a></li>
+ </ul>
+</nav>
{% endexample %}
### Disabled and active states
@@ -26,25 +28,29 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
{% example html %}
-<ul class="pagination">
- <li class="disabled"><a href="#">&laquo;</a></li>
- <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li><a href="#">&raquo;</a></li>
-</ul>
+<nav>
+ <ul class="pagination">
+ <li class="disabled"><a href="#">&laquo;</a></li>
+ <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ <li><a href="#">5</a></li>
+ <li><a href="#">&raquo;</a></li>
+ </ul>
+</nav>
{% endexample %}
You can optionally swap out active or disabled anchors for `<span>` to remove click functionality while retaining intended styles.
{% highlight html %}
-<ul class="pagination">
- <li class="disabled"><span>&laquo;</span></li>
- <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
- ...
-</ul>
+<nav>
+ <ul class="pagination">
+ <li class="disabled"><span>&laquo;</span></li>
+ <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
+ ...
+ </ul>
+</nav>
{% endhighlight %}
@@ -53,23 +59,27 @@ You can optionally swap out active or disabled anchors for `<span>` to remove cl
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
{% example html %}
-<ul class="pagination pagination-lg">
- <li><a href="#">&laquo;</a></li>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">&raquo;</a></li>
-</ul>
+<nav>
+ <ul class="pagination pagination-lg">
+ <li><a href="#">&laquo;</a></li>
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">&raquo;</a></li>
+ </ul>
+</nav>
{% endexample %}
{% example html %}
-<ul class="pagination pagination-sm">
- <li><a href="#">&laquo;</a></li>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">&raquo;</a></li>
-</ul>
+<nav>
+ <ul class="pagination pagination-sm">
+ <li><a href="#">&laquo;</a></li>
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">&raquo;</a></li>
+ </ul>
+</nav>
{% endexample %}
## Pager
@@ -81,10 +91,12 @@ Quick previous and next links for simple pagination implementations with light m
By default, the pager centers links.
{% example html %}
-<ul class="pager">
- <li><a href="#">Previous</a></li>
- <li><a href="#">Next</a></li>
-</ul>
+<nav>
+ <ul class="pager">
+ <li><a href="#">Previous</a></li>
+ <li><a href="#">Next</a></li>
+ </ul>
+</nav>
{% endexample %}
### Aligned links
@@ -92,10 +104,12 @@ By default, the pager centers links.
Alternatively, you can align each link to the sides:
{% example html %}
-<ul class="pager">
- <li class="previous"><a href="#">&larr; Older</a></li>
- <li class="next"><a href="#">Newer &rarr;</a></li>
-</ul>
+<nav>
+ <ul class="pager">
+ <li class="previous"><a href="#">&larr; Older</a></li>
+ <li class="next"><a href="#">Newer &rarr;</a></li>
+ </ul>
+</nav>
{% endexample %}
@@ -104,8 +118,10 @@ Alternatively, you can align each link to the sides:
Pager links also use the `.disabled` class.
{% highlight html %}
-<ul class="pager">
- <li class="previous disabled"><a href="#">&larr; Older</a></li>
- <li class="next"><a href="#">Newer &rarr;</a></li>
-</ul>
+<nav>
+ <ul class="pager">
+ <li class="previous disabled"><a href="#">&larr; Older</a></li>
+ <li class="next"><a href="#">Newer &rarr;</a></li>
+ </ul>
+</nav>
{% endhighlight %}