mirror of
https://github.com/jasny/bootstrap.git
synced 2026-04-24 03:00:49 -04:00
641 lines
23 KiB
HTML
641 lines
23 KiB
HTML
---
|
|
layout: default
|
|
title: Components
|
|
slug: components
|
|
lead: "Reusable components to built the user interface."
|
|
base_url: "../"
|
|
---
|
|
|
|
|
|
<!-- Navmenu
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="navmenu">Navmenu</h1>
|
|
</div>
|
|
|
|
<h2 id="navmenu-default">Default navmenu</h2>
|
|
<p>Navmenu is a vertical navigation component. By default it shares it look and feel with the navmenu component.</p>
|
|
|
|
<div class="bs-callout bs-callout-info">
|
|
<h4>Custom width</h4>
|
|
<p>The navmenu is 300px wide by default. You can change this by customizing the <code>@navmenu-width</code> variable or by setting the width of <code>.navmenu</code> in your CSS.</p>
|
|
</div>
|
|
|
|
<div class="bs-example">
|
|
<nav class="navmenu navmenu-default" role="navigation">
|
|
<a class="navmenu-brand" href="#">Brand</a>
|
|
|
|
<ul class="nav navmenu-nav">
|
|
<li class="active"><a href="#">Link</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
|
<ul class="dropdown-menu navmenu-nav" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
<li><a href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
{% highlight html %}
|
|
<nav class="navmenu navmenu-default" role="navigation">
|
|
<a class="navmenu-brand" href="#">Brand</a>
|
|
|
|
<ul class="nav navmenu-nav">
|
|
<li class="active"><a href="#">Link</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
|
<ul class="dropdown-menu navmenu-nav" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
<li><a href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
{% endhighlight %}
|
|
|
|
<div class="bs-callout bs-callout-warning">
|
|
<h4>Make navmenus accessible</h4>
|
|
<p>Be sure to add a <code>role="navigation"</code> to every navmenu to help with accessibility.</p>
|
|
</div>
|
|
|
|
|
|
<h2 id="navmenu-fixed">Fixed to left or right</h2>
|
|
<p>Add either <code>.navmenu-fixed-left</code> or <code>.navmenu-fixed-right</code>.</p>
|
|
<div class="bs-example bs-navmenu-fixed-example">
|
|
<nav class="navmenu navmenu-default navmenu-fixed-left" role="navigation">
|
|
<a class="navmenu-brand" href="#">Brand</a>
|
|
<ul class="nav navmenu-nav">
|
|
<li class="active"><a href="#">Home</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div><!-- /example -->
|
|
{% highlight html %}
|
|
<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm" role="navigation">
|
|
...
|
|
</nav>
|
|
{% endhighlight %}
|
|
|
|
<div class="bs-callout bs-callout-danger">
|
|
<h4>Body padding required</h4>
|
|
<p>The fixed navmenu will overlay your other content, unless you add <code>padding</code> to the left or right of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navmenu is 300px wide.</p>
|
|
{% highlight css %}
|
|
@media (min-width: 992px) {
|
|
body {
|
|
padding-left: 300px;
|
|
}
|
|
}
|
|
{% endhighlight %}
|
|
<p>Make sure to include this <strong>after</strong> the Jasny Bootstrap CSS.</p>
|
|
</div>
|
|
|
|
|
|
<h2 id="navmenu-offcanvas">Off canvas</h2>
|
|
<p>With the <a href="../javascript/#offcanvas">offcanvas plugin</a>, you can hide the navmenu off canvas. This is especially useful for screens with a small viewport.</p>
|
|
<div class="bs-example bs-navmenu-offcanvas-example">
|
|
<div id="myNavmenuCanvas">
|
|
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
|
|
<a class="navmenu-brand" href="#">Brand</a>
|
|
<ul class="nav navmenu-nav">
|
|
<li class="active"><a href="#">Home</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="navbar navbar-default navbar-fixed-top">
|
|
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="#myNavmenuCanvas" data-placement="left">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
|
|
</div>
|
|
</div><!-- /example -->
|
|
{% highlight html %}
|
|
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
|
|
...
|
|
</nav>
|
|
<div class="navbar navbar-default navbar-fixed-top">
|
|
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
<div class="bs-callout bs-callout-info">
|
|
<h4>Examples</h4>
|
|
<p>There is a full example for an <a href="../examples/navmenu-push/">off canvas push menu</a> as well as examples for an off canvas navmenu with an <a href="../examples/navmenu/">slide in</a> and <a href="../examples/navmenu-reveal/">reveal</a> effect.</p>
|
|
</div>
|
|
|
|
<h2 id="navmenu-inverted">Inverted navmenu</h2>
|
|
<p>Modify the look of the navmenu by adding <code>.navmenu-inverse</code>.</p>
|
|
<div class="bs-example">
|
|
<nav class="navmenu navmenu-inverse" role="navigation">
|
|
<a class="navmenu-brand" href="#">Brand</a>
|
|
<ul class="nav navmenu-nav">
|
|
<li class="active"><a href="#">Home</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li><a href="#">Link</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div><!-- /example -->
|
|
{% highlight html %}
|
|
<nav class="navmenu navmenu-inverse" role="navigation">
|
|
...
|
|
</nav>
|
|
{% endhighlight %}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Breadcrumbs
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="breadcrumbs">Breadcrumbs <small></small></h1>
|
|
</div>
|
|
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
|
|
<p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
|
|
<div class="bs-example">
|
|
<ol class="breadcrumb">
|
|
<li class="active">Home</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li><a href="#">Home</a></li>
|
|
<li class="active">Library</li>
|
|
</ol>
|
|
<ol class="breadcrumb" style="margin-bottom: 5px;">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Library</a></li>
|
|
<li class="active">Data</li>
|
|
</ol>
|
|
</div>
|
|
{% highlight html %}
|
|
<ol class="breadcrumb">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Library</a></li>
|
|
<li class="active">Data</li>
|
|
</ol>
|
|
{% endhighlight %}
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Pagination
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="pagination">Pagination</h1>
|
|
</div>
|
|
<p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
|
|
|
|
<h2 id="pagination-default">Default pagination</h2>
|
|
<p>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.</p>
|
|
<div class="bs-example">
|
|
<ul class="pagination">
|
|
<li><a href="#">«</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="#">»</a></li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="pagination">
|
|
<li><a href="#">«</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="#">»</a></li>
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
<h3>Disabled and active states</h3>
|
|
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
|
|
<div class="bs-example">
|
|
<ul class="pagination">
|
|
<li class="disabled"><a href="#">«</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="#">»</a></li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="pagination">
|
|
<li class="disabled"><a href="#">«</a></li>
|
|
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
|
|
...
|
|
</ul>
|
|
{% endhighlight %}
|
|
<p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p>
|
|
{% highlight html %}
|
|
<ul class="pagination">
|
|
<li class="disabled"><span>«</span></li>
|
|
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
|
|
...
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
|
|
<h3>Sizing</h3>
|
|
<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-lg">
|
|
<li><a href="#">«</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="#">»</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<ul class="pagination">
|
|
<li><a href="#">«</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="#">»</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<ul class="pagination pagination-sm">
|
|
<li><a href="#">«</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="#">»</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="pagination pagination-lg">...</ul>
|
|
<ul class="pagination">...</ul>
|
|
<ul class="pagination pagination-sm">...</ul>
|
|
{% endhighlight %}
|
|
|
|
|
|
<h2 id="pagination-pager">Pager</h2>
|
|
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
|
|
|
|
<h3>Default example</h3>
|
|
<p>By default, the pager centers links.</p>
|
|
<div class="bs-example">
|
|
<ul class="pager">
|
|
<li><a href="#">Previous</a></li>
|
|
<li><a href="#">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="pager">
|
|
<li><a href="#">Previous</a></li>
|
|
<li><a href="#">Next</a></li>
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
<h3>Aligned links</h3>
|
|
<p>Alternatively, you can align each link to the sides:</p>
|
|
<div class="bs-example">
|
|
<ul class="pager">
|
|
<li class="previous"><a href="#">← Older</a></li>
|
|
<li class="next"><a href="#">Newer →</a></li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="pager">
|
|
<li class="previous"><a href="#">← Older</a></li>
|
|
<li class="next"><a href="#">Newer →</a></li>
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
|
|
<h3>Optional disabled state</h3>
|
|
<p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
|
|
<div class="bs-example">
|
|
<ul class="pager">
|
|
<li class="previous disabled"><a href="#">← Older</a></li>
|
|
<li class="next"><a href="#">Newer →</a></li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="pager">
|
|
<li class="previous disabled"><a href="#">← Older</a></li>
|
|
<li class="next"><a href="#">Newer →</a></li>
|
|
</ul>
|
|
{% endhighlight %}
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Labels
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="labels">Labels</h1>
|
|
</div>
|
|
<p class="lead"></p>
|
|
|
|
<h3>Example</h3>
|
|
<div class="bs-example">
|
|
<h1>Example heading <span class="label label-default">New</span></h1>
|
|
<h2>Example heading <span class="label label-default">New</span></h2>
|
|
<h3>Example heading <span class="label label-default">New</span></h3>
|
|
<h4>Example heading <span class="label label-default">New</span></h4>
|
|
<h5>Example heading <span class="label label-default">New</span></h5>
|
|
<h6>Example heading <span class="label label-default">New</span></h6>
|
|
</div>
|
|
{% highlight html %}
|
|
<h3>Example heading <span class="label label-default">New</span></h3>
|
|
{% endhighlight %}
|
|
|
|
<h3>Available variations</h3>
|
|
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
|
|
<div class="bs-example">
|
|
<span class="label label-default">Default</span>
|
|
<span class="label label-primary">Primary</span>
|
|
<span class="label label-success">Success</span>
|
|
<span class="label label-info">Info</span>
|
|
<span class="label label-warning">Warning</span>
|
|
<span class="label label-danger">Danger</span>
|
|
</div>
|
|
{% highlight html %}
|
|
<span class="label label-default">Default</span>
|
|
<span class="label label-primary">Primary</span>
|
|
<span class="label label-success">Success</span>
|
|
<span class="label label-info">Info</span>
|
|
<span class="label label-warning">Warning</span>
|
|
<span class="label label-danger">Danger</span>
|
|
{% endhighlight %}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Badges
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="badges">Badges</h1>
|
|
</div>
|
|
<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 and list navigations.</p>
|
|
<div class="bs-example">
|
|
<ul class="nav nav-pills">
|
|
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
|
|
<li><a href="#">Profile</a></li>
|
|
<li><a href="#">Messages <span class="badge">3</span></a></li>
|
|
</ul>
|
|
<br>
|
|
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
|
|
<li class="active">
|
|
<a href="#">
|
|
<span class="badge pull-right">42</span>
|
|
Home
|
|
</a>
|
|
</li>
|
|
<li><a href="#">Profile</a></li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="badge pull-right">3</span>
|
|
Messages
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li class="active">
|
|
<a href="#">
|
|
<span class="badge pull-right">42</span>
|
|
Home
|
|
</a>
|
|
</li>
|
|
...
|
|
</ul>
|
|
{% endhighlight %}
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Jumbotron
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="jumbotron">Jumbotron</h1>
|
|
</div>
|
|
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
|
|
<div class="bs-example">
|
|
<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-lg" role="button">Learn more</a></p>
|
|
</div>
|
|
</div>
|
|
{% highlight html %}
|
|
<div class="jumbotron">
|
|
<h1>Hello, world!</h1>
|
|
<p>...</p>
|
|
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
|
|
</div>
|
|
{% endhighlight %}
|
|
<p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p>
|
|
{% highlight html %}
|
|
<div class="jumbotron">
|
|
<div class="container">
|
|
...
|
|
</div>
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Page header
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="page-header">Page header</h1>
|
|
</div>
|
|
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
|
|
<div class="bs-example">
|
|
<div class="page-header">
|
|
<h1>Example page header <small>Subtext for header</small></h1>
|
|
</div>
|
|
</div>
|
|
{% highlight html %}
|
|
<div class="page-header">
|
|
<h1>Example page header <small>Subtext for header</small></h1>
|
|
</div>
|
|
{% endhighlight %}
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Thumbnails
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="thumbnails">Thumbnails</h1>
|
|
</div>
|
|
<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
|
|
|
|
<h3 id="thumbnails-default">Default example</h3>
|
|
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
|
|
<div class="bs-example">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.bs-example -->
|
|
{% highlight html %}
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="...">
|
|
</a>
|
|
</div>
|
|
...
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
<h3 id="thumbnails-custom-content">Custom content</h3>
|
|
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
|
|
<div class="bs-example">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="thumbnail">
|
|
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
|
|
<div class="caption">
|
|
<h3>Thumbnail label</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="thumbnail">
|
|
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
|
|
<div class="caption">
|
|
<h3>Thumbnail label</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="thumbnail">
|
|
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
|
|
<div class="caption">
|
|
<h3>Thumbnail label</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.bs-example -->
|
|
{% highlight html %}
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="thumbnail">
|
|
<img data-src="holder.js/300x200" alt="...">
|
|
<div class="caption">
|
|
<h3>Thumbnail label</h3>
|
|
<p>...</p>
|
|
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endhighlight %}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Alerts
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<h1 id="alerts">Alerts</h1>
|
|
</div>
|
|
|
|
<h2 id="alerts-fixed">Fixed to top / bottom</h2>
|
|
<p>Add <code>.alert-fixed-top</code> top stick the alert on top of your page. Use <code>.alert-fixed-bottom</code> for the bottom.</p>
|
|
<div class="bs-example">
|
|
<div class="alert alert-success alert-fixed-top">
|
|
<strong>Well done!</strong> You successfully read this important alert message.
|
|
</div>
|
|
</div>
|
|
{% highlight html %}
|
|
<div class="alert alert-success alert-fixed-top">
|
|
<strong>Success!</strong> Your action has been completed succefully.
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
</div>
|