Commit 13c690f9 authored by Mark Otto's avatar Mark Otto
Browse files

Merge pull request #15891 from StevenBlack/headings-listgroup-panel-well

docs>components>(remaining components) headings
parents 7872ca69 79eb5854
Showing with 14 additions and 14 deletions
+14 -14
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p> <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h3 id="list-group-basic">Basic example</h3> <h2 id="list-group-basic">Basic example</h2>
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p> <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
<div class="bs-example" data-example-id="simple-list-group"> <div class="bs-example" data-example-id="simple-list-group">
<ul class="list-group"> <ul class="list-group">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<h3 id="list-group-badges">Badges</h3> <h2 id="list-group-badges">Badges</h2>
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p> <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
<div class="bs-example" data-example-id="list-group-badges"> <div class="bs-example" data-example-id="list-group-badges">
<ul class="list-group"> <ul class="list-group">
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<h3 id="list-group-linked">Linked items</h3> <h2 id="list-group-linked">Linked items</h2>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p> <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
<div class="bs-example" data-example-id="list-group-anchors"> <div class="bs-example" data-example-id="list-group-anchors">
<div class="list-group"> <div class="list-group">
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="list-group-disabled">Disabled items</h3> <h2 id="list-group-disabled">Disabled items</h2>
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p> <p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
<div class="bs-example" data-example-id="list-group-disabled"> <div class="bs-example" data-example-id="list-group-disabled">
<div class="list-group"> <div class="list-group">
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="list-group-contextual-classes">Contextual classes</h3> <h2 id="list-group-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p> <p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
<div class="bs-example" data-example-id="list-group-variants"> <div class="bs-example" data-example-id="list-group-variants">
<div class="row"> <div class="row">
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="list-group-custom-content">Custom content</h3> <h2 id="list-group-custom-content">Custom content</h2>
<p>Add nearly any HTML within, even for linked list groups like the one below.</p> <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
<div class="bs-example" data-example-id="list-group-custom-content"> <div class="bs-example" data-example-id="list-group-custom-content">
<div class="list-group"> <div class="list-group">
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p> <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
<h3 id="panels-basic">Basic example</h3> <h2 id="panels-basic">Basic example</h2>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p> <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example" data-example-id="simple-panel"> <div class="bs-example" data-example-id="simple-panel">
<div class="panel panel-default"> <div class="panel panel-default">
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="panels-heading">Panel with heading</h3> <h2 id="panels-heading">Panel with heading</h2>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p> <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
<p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p> <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<div class="bs-example" data-example-id="panel-with-heading"> <div class="bs-example" data-example-id="panel-with-heading">
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="panels-footer">Panel with footer</h3> <h2 id="panels-footer">Panel with footer</h2>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p> <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
<div class="bs-example" data-example-id="panel-with-footer"> <div class="bs-example" data-example-id="panel-with-footer">
<div class="panel panel-default"> <div class="panel panel-default">
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="panels-alternatives">Contextual alternatives</h3> <h2 id="panels-alternatives">Contextual alternatives</h2>
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p> <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<div class="bs-example" data-example-id="contextual-panels"> <div class="bs-example" data-example-id="contextual-panels">
<div class="panel panel-primary"> <div class="panel panel-primary">
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
<div class="panel panel-danger">...</div> <div class="panel panel-danger">...</div>
{% endhighlight %} {% endhighlight %}
<h3 id="panels-tables">With tables</h3> <h2 id="panels-tables">With tables</h2>
<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p> <p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
<div class="bs-example" data-example-id="table-within-panel"> <div class="bs-example" data-example-id="table-within-panel">
<div class="panel panel-default"> <div class="panel panel-default">
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
{% endhighlight %} {% endhighlight %}
<h3 id="panels-list-group">With list groups</h3> <h2 id="panels-list-group">With list groups</h2>
<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p> <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
<div class="bs-example" data-example-id="panel-with-list-group"> <div class="bs-example" data-example-id="panel-with-list-group">
<div class="panel panel-default"> <div class="panel panel-default">
......
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="wells" class="page-header">Wells</h1> <h1 id="wells" class="page-header">Wells</h1>
<h3>Default well</h3> <h2>Default well</h2>
<p>Use the well as a simple effect on an element to give it an inset effect.</p> <p>Use the well as a simple effect on an element to give it an inset effect.</p>
<div class="bs-example" data-example-id="default-well"> <div class="bs-example" data-example-id="default-well">
<div class="well"> <div class="well">
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
{% highlight html %} {% highlight html %}
<div class="well">...</div> <div class="well">...</div>
{% endhighlight %} {% endhighlight %}
<h3>Optional classes</h3> <h2>Optional classes</h2>
<p>Control padding and rounded corners with two optional modifier classes.</p> <p>Control padding and rounded corners with two optional modifier classes.</p>
<div class="bs-example" data-example-id="large-well"> <div class="bs-example" data-example-id="large-well">
<div class="well well-lg"> <div class="well well-lg">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment