diff options
Diffstat (limited to 'docs/_includes')
| -rw-r--r-- | docs/_includes/components/alerts.html | 85 | ||||
| -rw-r--r-- | docs/_includes/components/badges.html | 72 | ||||
| -rw-r--r-- | docs/_includes/components/dropdowns.html | 98 | ||||
| -rw-r--r-- | docs/_includes/components/navs.html | 235 |
4 files changed, 0 insertions, 490 deletions
diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html deleted file mode 100644 index 749ecc2b4..000000000 --- a/docs/_includes/components/alerts.html +++ /dev/null @@ -1,85 +0,0 @@ -<div class="bs-docs-section"> - <h1 id="alerts" class="page-header">Alerts</h1> - - <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p> - - <h2 id="alerts-examples">Examples</h2> - <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p> - - <div class="bs-callout bs-callout-info"> - <h4>No default class</h4> - <p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p> - </div> - - <div class="bs-example"> - <div class="alert alert-success" role="alert"> - <strong>Well done!</strong> You successfully read this important alert message. - </div> - <div class="alert alert-info" role="alert"> - <strong>Heads up!</strong> This alert needs your attention, but it's not super important. - </div> - <div class="alert alert-warning" role="alert"> - <strong>Warning!</strong> Better check yourself, you're not looking too good. - </div> - <div class="alert alert-danger" role="alert"> - <strong>Oh snap!</strong> Change a few things up and try submitting again. - </div> - </div> -{% highlight html %} -<div class="alert alert-success" role="alert">...</div> -<div class="alert alert-info" role="alert">...</div> -<div class="alert alert-warning" role="alert">...</div> -<div class="alert alert-danger" role="alert">...</div> -{% endhighlight %} - - <h2 id="alerts-dismissible">Dismissible alerts</h2> - <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p> - <div class="bs-example"> - <div class="alert alert-warning alert-dismissible" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> - <strong>Warning!</strong> Better check yourself, you're not looking too good. - </div> - </div> -{% highlight html %} -<div class="alert alert-warning alert-dismissible" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> - <strong>Warning!</strong> Better check yourself, you're not looking too good. -</div> -{% endhighlight %} - - <div class="bs-callout bs-callout-warning"> - <h4>Ensure proper behavior across all devices</h4> - <p>Be sure to use the <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p> - </div> - - <h2 id="alerts-links">Links in alerts</h2> - <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p> - <div class="bs-example"> - <div class="alert alert-success" role="alert"> - <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. - </div> - <div class="alert alert-info" role="alert"> - <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. - </div> - <div class="alert alert-warning" role="alert"> - <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>. - </div> - <div class="alert alert-danger" role="alert"> - <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. - </div> - </div> -{% highlight html %} -<div class="alert alert-success" role="alert"> - <a href="#" class="alert-link">...</a> -</div> -<div class="alert alert-info" role="alert"> - <a href="#" class="alert-link">...</a> -</div> -<div class="alert alert-warning" role="alert"> - <a href="#" class="alert-link">...</a> -</div> -<div class="alert alert-danger" role="alert"> - <a href="#" class="alert-link">...</a> -</div> -{% endhighlight %} -</div> diff --git a/docs/_includes/components/badges.html b/docs/_includes/components/badges.html deleted file mode 100644 index df5efe476..000000000 --- a/docs/_includes/components/badges.html +++ /dev/null @@ -1,72 +0,0 @@ -<div class="bs-docs-section"> - <h1 id="badges" class="page-header">Badges</h1> - - <p class="lead">Easily highlight new or unread items by adding a <code><span class="badge"></code> to links, Bootstrap navs, and more.</p> - - <div class="bs-example"> - <a href="#">Inbox <span class="badge">42</span></a> - </div> -{% highlight html %} -<a href="#">Inbox <span class="badge">42</span></a> -{% endhighlight %} - - <h4>Self collapsing</h4> - <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p> - - <div class="bs-callout bs-callout-danger"> - <h4>Cross-browser compatibility</h4> - <p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p> - </div> - - <h4>Adapts to active nav states</h4> - <p>Built-in styles are included for placing badges in active states in pill navigations.</p> - <div class="bs-example"> - <ul class="nav nav-pills" role="tablist"> - <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> - <li role="presentation"><a href="#">Profile</a></li> - <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li> - </ul> - <br> - <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;"> - <li role="presentation" class="active"> - <a href="#"> - <span class="badge pull-right">42</span> - Home - </a> - </li> - <li role="presentation"><a href="#">Profile</a></li> - <li role="presentation"> - <a href="#"> - <span class="badge pull-right">3</span> - Messages - </a> - </li> - </ul> - <br> - <p> - <button class="btn btn-primary btn-lg" type="button"> - Large button <span class="badge">4</span> - </button> - <button class="btn btn-primary" type="button"> - Button <span class="badge">4</span> - </button> - <button class="btn btn-primary btn-sm" type="button"> - Small button <span class="badge">4</span> - </button> - <button class="btn btn-primary btn-xs" type="button"> - Extra small <span class="badge">4</span> - </button> - </p> - </div> -{% highlight html %} -<ul class="nav nav-pills nav-stacked" role="tablist"> - <li role="presentation" class="active"> - <a href="#"> - <span class="badge pull-right">42</span> - Home - </a> - </li> - ... -</ul> -{% endhighlight %} -</div> diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html deleted file mode 100644 index eabfd9ca7..000000000 --- a/docs/_includes/components/dropdowns.html +++ /dev/null @@ -1,98 +0,0 @@ -<div class="bs-docs-section"> - <h1 id="dropdowns" class="page-header">Dropdowns</h1> - - <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p> - - <h3 id="dropdowns-example">Example</h3> - <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> - <div class="bs-example"> - <div class="dropdown clearfix"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> - Dropdown - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> - </ul> - </div> - </div><!-- /example --> -{% highlight html %} -<div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> - Dropdown - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> - </ul> -</div> -{% endhighlight %} - - <h3 id="dropdowns-alignment">Alignment</h3> - <p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> - <div class="bs-callout bs-callout-warning"> - <h4>May require additional positioning</h4> - <p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p> - </div> -{% highlight html %} -<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel"> - ... -</ul> -{% endhighlight %} - - <h3 id="dropdowns-headers">Headers</h3> - <p>Add a header to label sections of actions in any dropdown menu.</p> - <div class="bs-example"> - <div class="dropdown clearfix"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"> - Dropdown - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> - <li role="presentation" class="dropdown-header">Dropdown header</li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation" class="dropdown-header">Dropdown header</li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> - </ul> - </div> - </div><!-- /example --> -{% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> - <li role="presentation" class="dropdown-header">Dropdown header</li> - ... - <li role="presentation" class="divider"></li> - <li role="presentation" class="dropdown-header">Dropdown header</li> - ... -</ul> -{% endhighlight %} - - <h3 id="dropdowns-disabled">Disabled menu items</h3> - <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> - <div class="bs-example"> - <div class="dropdown clearfix"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown"> - Dropdown - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> - <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> - </ul> - </div> - </div><!-- /example --> -{% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> - <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> -</ul> -{% endhighlight %} -</div> diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html deleted file mode 100644 index f474a0998..000000000 --- a/docs/_includes/components/navs.html +++ /dev/null @@ -1,235 +0,0 @@ -<div class="bs-docs-section"> - <h1 id="nav" class="page-header">Navs</h1> - - <p class="lead">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p> - - <h2 id="nav-base">Base nav</h2> - <p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but <strong>not the active state</strong>.</p> - -{% example html %} -<ul class="nav" role="tablist"> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Another link</a> - </li> - <li class="nav-item disabled"> - <a class="nav-link" href="#">Disabled</a> - </li> -</ul> -{% endexample %} - - <p>Classes are used so your markup can be super flexible.</p> - <div class="bs-example"> - <nav class="nav" role="tablist"> - <a class="nav-link active" href="#">Active</a> - <a class="nav-link" href="#">Link</a> - <a class="nav-link" href="#">Another link</a> - <a class="nav-link disabled" href="#">Disabled</a> - </nav> - </div> -{% highlight html %} -<nav class="nav" role="tablist"> - <a class="nav-link active" href="#">Active</a> - <a class="nav-link" href="#">Link</a> - <a class="nav-link" href="#">Another link</a> - <a class="nav-link disabled" href="#">Disabled</a> -</nav> -{% endhighlight %} - - - <h2 id="nav-tabs">Tabs</h2> - <p>Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p> - <div class="bs-example"> - <ul class="nav nav-tabs" role="tablist"> - <li role="presentation" class="nav-item active"> - <a href="#" class="nav-link">Active</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Link</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Another link</a> - </li> - <li role="presentation" class="nav-item disabled"> - <a href="#" class="nav-link">Disabled</a> - </li> - </ul> - </div> -{% highlight html %} -<ul class="nav nav-tabs" role="tablist"> - <li role="presentation" class="nav-item active"> - <a href="#" class="nav-link">Active</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Link</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Another link</a> - </li> - <li role="presentation" class="nav-item disabled"> - <a href="#" class="nav-link">Disabled</a> - </li> -</ul> -{% endhighlight %} - <div class="bs-callout bs-callout-info"> - <h4>Requires JavaScript tabs plugin</h4> - <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p> - </div> - - <h2 id="nav-pills">Pills</h2> - <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> - <div class="bs-example"> - <ul class="nav nav-pills" role="tablist"> - <li role="presentation" class="nav-item active"> - <a href="#" class="nav-link">Active</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Link</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Another link</a> - </li> - <li role="presentation" class="nav-item disabled"> - <a href="#" class="nav-link">Disabled</a> - </li> - </ul> - </div> -{% highlight html %} -<ul class="nav nav-pills" role="tablist"> - <li role="presentation" class="nav-item active"> - <a href="#" class="nav-link">Active</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Link</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Another link</a> - </li> - <li role="presentation" class="nav-item disabled"> - <a href="#" class="nav-link">Disabled</a> - </li> -</ul> -{% endhighlight %} - - <h2 id="nav-pills-stacked">Stacked pills</h2> - <p>Just add <code>.nav-stacked</code>.</p> - <div class="bs-example"> - <ul class="nav nav-pills nav-stacked" role="tablist"> - <li role="presentation" class="nav-item active"> - <a href="#" class="nav-link">Active</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Link</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Another link</a> - </li> - <li role="presentation" class="nav-item disabled"> - <a href="#" class="nav-link">Disabled</a> - </li> - </ul> - </div> -{% highlight html %} -<ul class="nav nav-pills nav-stacked" role="tablist"> - <li role="presentation" class="nav-item active"> - <a href="#" class="nav-link">Active</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Link</a> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Another link</a> - </li> - <li role="presentation" class="nav-item disabled"> - <a href="#" class="nav-link">Disabled</a> - </li> -</ul> -{% endhighlight %} - - - <h2 id="nav-dropdowns">Using dropdowns</h2> - <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p> - - <h3>Tabs with dropdowns</h3> - <div class="bs-example"> - <ul class="nav nav-tabs" role="tablist"> - <li role="presentation" class="nav-item active"> - <a href="#" class="nav-link">Active</a> - </li> - <li role="presentation" class="nav-item"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a> - <ul class="dropdown-menu" role="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> - </li> - <li role="presentation" class="nav-item"> - <a href="#" class="nav-link">Another link</a> - </li> - <li role="presentation" class="nav-item disabled"> - <a href="#" class="nav-link">Disabled</a> - </li> - </ul> - </div> -{% highlight html %} -<ul class="nav nav-tabs" role="tablist"> - ... - <li role="presentation" class="nav-item"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"> - Dropdown - </a> - <ul class="dropdown-menu" role="menu"> - ... - </ul> - </li> - ... -</ul> -{% endhighlight %} - - <h3>Pills with dropdowns</h3> - <div class="bs-example"> - <ul class="nav nav-pills" role="tablist"> - <li role="presentation" class="nav-item active"> - <a href="#" class="nav-link">Active</a> - </li> - <li role="presentation" class="nav-item"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a> - <ul class="dropdown-menu" role="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> - </li> - <li class="nav-item"> - <a href="#" class="nav-link">Another link</a> - </li> - <li class="nav-item disabled"> - <a href="#" class="nav-link">Disabled</a> - </li> - </ul> - </div> -{% highlight html %} -<ul class="nav nav-pills" role="tablist"> - ... - <li role="presentation" class="nav-item"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"> - Dropdown - </a> - <ul class="dropdown-menu" role="menu"> - ... - </ul> - </li> - ... -</ul> -{% endhighlight %} -</div> |