Skip to content
GitLab
Commit 88141252 authored by Mark Otto's avatar Mark Otto
Browse files

Add subnav support to CSS section

parent 23d7215d
11 merge requests!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7674Clear float on all when navbar is collapsed - v3,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices
Hide whitespace changes
Inline Side-by-side
Showing
with 109 additions and 142 deletions
+109 -142
docs/_includes/docs-nav.html
+ 57
- 5
View file @ 88141252
......@@ -9,12 +9,64 @@
<li><a class="nav-header" href="#css">CSS</a></li>
<li><a href="#css-overview">Overview</a></li>
<li><a href="#grid">Grid system</a></li>
<li><a href="#typography">Typography</a></li>
<li>
<a href="#grid">Grid system</a>
<ul class="nav">
<li><a href="#grid-example">Example usage</a></li>
<li><a href="#grid-offsetting">Offset columns</a></li>
<li><a href="#grid-nesting">Nested columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li>
<li><a href="#grid-less">LESS mixins and variables</a></li>
</ul>
</li>
<li>
<a href="#type">Typography</a>
<ul class="nav">
<li><a href="#type-headings">Headings</a></li>
<li><a href="#type-body-copy">Body copy</a></li>
<li><a href="#type-emphasis">Emphasis</a></li>
<li><a href="#type-abbreviations">Abbreviations</a></li>
<li><a href="#type-addresses">Addresses</a></li>
<li><a href="#type-blockquotes">Blockquotes</a></li>
<li><a href="#type-lists">Lists</a></li>
<li><a href="#type-"></a></li>
</ul>
</li>
<li><a href="#code">Code</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#buttons">Buttons</a></li>
<li>
<a href="#tables">Tables</a>
<ul class="nav">
<li><a href="#tables-example">Basic example</a></li>
<li><a href="#tables-striped">Zebra striping</a></li>
<li><a href="#tables-bordered">Bordered tables</a></li>
<li><a href="#tables-hover">Hover rows</a></li>
<li><a href="#tables-condensed">Condensed tables</a></li>
<li><a href="#tables-row-classes">Contextual row classes</a></li>
</ul>
</li>
<li>
<a href="#forms">Forms</a>
<ul class="nav">
<li><a href="#forms-example">Basic example</a></li>
<li><a href="#forms-inline">Inline variation</a></li>
<li><a href="#forms-horizontal">Horizontal variation</a></li>
<li><a href="#forms-controls">Supported controls</a></li>
<li><a href="#forms-control-states">Control states</a></li>
<li><a href="#forms-input-groups">Input groups</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-actions">Form actions</a></li>
<li><a href="#forms-help-text">Help text</a></li>
</ul>
</li>
<li>
<a href="#buttons">Buttons</a>
<ul class="nav">
<li><a href="#buttons-defaults">Default buttons</a></li>
<li><a href="#buttons-sizes">Sizes</a></li>
<li><a href="#buttons-disabled">Disabled</a></li>
<li><a href="#buttons-tags">Button tags</a></li>
</ul>
</li>
<li><a href="#images">Images</a></li>
<li><a class="nav-header" href="#components">Components</a></li>
......
docs/assets/css/bootstrap.css
+ 0
- 11
View file @ 88141252
......@@ -3258,7 +3258,6 @@ button.close {
}
.navbar-fixed-top,
.navbar-fixed-left,
.navbar-fixed-bottom {
position: fixed;
right: 0;
......@@ -3275,16 +3274,6 @@ button.close {
bottom: 0;
}
.navbar-fixed-left {
top: 0;
right: auto;
bottom: 0;
}
.navbar-fixed-left .container {
max-width: none;
}
.navbar-brand {
display: block;
max-width: 200px;
......
docs/assets/css/docs.css
+ 26
- 6
View file @ 88141252
......@@ -190,25 +190,45 @@ section > ul li {
text-shadow: 0 1px 0 #fff;
box-shadow: inset -1px 0 0 #e5e5e5;
}
.bs-docs-sidenav {
/* Nav: first level */
.bs-docs-sidebar > .nav {
margin: 0 0 25px;
}
.bs-docs-sidenav > li > a {
.bs-docs-sidebar .nav > li > a {
display: block;
color: #666;
padding: 4px 25px;
}
.bs-docs-sidenav > li > a:hover {
.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus {
text-decoration: none;
border-right: 1px solid #d5d5d5;
}
.bs-docs-sidenav > .active > a,
.bs-docs-sidenav > .active:hover > a,
.bs-docs-sidenav > .active:focus > a {
.bs-docs-sidebar .nav > .active > a,
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a {
font-weight: 500;
color: #b94a48;
background-color: transparent;
border-right: 1px solid #b94a48;
}
/* Nav: second level (shown on .active) */
.bs-docs-sidebar .nav .nav {
display: none;
margin-left: 15px;
margin-bottom: 5px;
}
.bs-docs-sidebar .nav > .active > ul {
display: block;
}
.bs-docs-sidebar .nav .nav > li > a {
padding-top: 2px;
padding-bottom: 2px;
font-size: 90%;
}
.bs-docs-sidenav-heading {
margin: 0 0 25px;
}
......
docs/docs.html
+ 26
- 120
View file @ 88141252
......@@ -442,13 +442,13 @@ title: Bootstrap Documentation
<!-- Typography
================================================== -->
<div class="bs-docs-section" id="typography">
<div class="bs-docs-section" id="type">
<div class="page-header">
<h1>Typography</h1>
</div>
<!-- Headings -->
<h2 id="headings">Headings</h2>
<h2 id="type-headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
<div class="bs-docs-example bs-docs-example-type">
......@@ -491,7 +491,7 @@ title: Bootstrap Documentation
{% endhighlight %}
<!-- Body copy -->
<h2 id="body-copy">Body copy</h2>
<h2 id="type-body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
<div class="bs-docs-example">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
......@@ -518,7 +518,7 @@ title: Bootstrap Documentation
<!-- Emphasis -->
<h2 id="emphasis">Emphasis</h2>
<h2 id="type-emphasis">Emphasis</h2>
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
<h3>Small text</h3>
......@@ -581,7 +581,7 @@ title: Bootstrap Documentation
<!-- Abbreviations -->
<h2 id="abbreviations">Abbreviations</h2>
<h2 id="type-abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
<h3>Basic abbreviation</h3>
......@@ -604,7 +604,7 @@ title: Bootstrap Documentation
<!-- Addresses -->
<h2 id="addresses">Addresses</h2>
<h2 id="type-addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
<div class="bs-docs-example">
<address>
......@@ -634,7 +634,7 @@ title: Bootstrap Documentation
<!-- Blockquotes -->
<h2 id="blockquotes">Blockquotes</h2>
<h2 id="type-blockquotes">Blockquotes</h2>
<p>For quoting blocks of content from another source within your document.</p>
<h3>Default blockquote</h3>
......@@ -684,7 +684,7 @@ title: Bootstrap Documentation
<!-- Lists -->
<h2 id="lists">Lists</h2>
<h2 id="type-lists">Lists</h2>
<h3>Unordered</h3>
<p>A list of items in which the order does <em>not</em> explicitly matter.</p>
......@@ -864,7 +864,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1>Tables</h1>
</div>
<h2>Default styles</h2>
<h2 id="tables-example">Basic example</h2>
<p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<div class="bs-docs-example">
<table class="table">
......@@ -908,7 +908,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>Optional classes</h2>
<p>Add any of the following classes to the <code>.table</code> base class.</p>
<h3>Striped</h3>
<h3 id="tables-striped">Striped</h3>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
<div class="bs-docs-example">
<table class="table table-striped">
......@@ -948,7 +948,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
{% endhighlight %}
<h3>Bordered</h3>
<h3 id="tables-bordered">Bordered</h3>
<p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
<div class="bs-docs-example">
<table class="table table-bordered">
......@@ -992,7 +992,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
{% endhighlight %}
<h3>Hover rows</h3>
<h3 id="tables-hover-rows">Hover rows</h3>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="bs-docs-example">
<table class="table table-hover">
......@@ -1032,7 +1032,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h3>Condensed</h3>
<h3 id="tables-condensed">Condensed</h3>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-docs-example">
<table class="table table-condensed">
......@@ -1073,7 +1073,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>Optional row classes</h2>
<h2 id="tables-row-classes">Optional row classes</h2>
<p>Use contextual classes to color table rows.</p>
<table class="table table-bordered table-striped">
<colgroup>
......@@ -1156,100 +1156,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
...
{% endhighlight %}
<h2>Supported table markup</h2>
<p>List of supported table HTML elements and how they should be used.</p>
<table class="table table-bordered table-striped">
<colgroup>
<col class="span1">
<col class="span7">
</colgroup>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>&lt;table&gt;</code>
</td>
<td>
Wrapping element for displaying data in a tabular format
</td>
</tr>
<tr>
<td>
<code>&lt;thead&gt;</code>
</td>
<td>
Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
</td>
</tr>
<tr>
<td>
<code>&lt;tbody&gt;</code>
</td>
<td>
Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
</td>
</tr>
<tr>
<td>
<code>&lt;tr&gt;</code>
</td>
<td>
Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
</td>
</tr>
<tr>
<td>
<code>&lt;td&gt;</code>
</td>
<td>
Default table cell
</td>
</tr>
<tr>
<td>
<code>&lt;th&gt;</code>
</td>
<td>
Special table cell for column (or row, depending on scope and placement) labels
</td>
</tr>
<tr>
<td>
<code>&lt;caption&gt;</code>
</td>
<td>
Description or summary of what the table holds, especially useful for screen readers
</td>
</tr>
</tbody>
</table>
{% highlight html linenos %}
<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
{% endhighlight %}
</div>
......@@ -1261,7 +1167,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1>Forms</h1>
</div>
<h2 id="forms-default">Default styles</h2>
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
<form class="bs-docs-example">
<fieldset>
......@@ -1295,10 +1201,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="forms-layouts">Optional layouts</h2>
<h2>Optional layouts</h2>
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
<h3>Inline form</h3>
<h3 id="forms-inline">Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
<form class="bs-docs-example form-inline">
<input type="text" class="span3" placeholder="Email">
......@@ -1323,7 +1229,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% endhighlight %}
<h3>Horizontal form</h3>
<h3 id="forms-horizontal">Horizontal form</h3>
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
<ul>
<li>Add <code>.form-horizontal</code> to the form</li>
......@@ -1509,7 +1415,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>Form control states</h2>
<h2 id="forms-control-states">Form control states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
<h3 id="forms-input-focus">Input focus</h3>
......@@ -1635,7 +1541,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-extending">Extending form controls</h2>
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
<h3>Input groups</h3>
<h3 id="forms-input-groups">Input groups</h3>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
<form class="bs-docs-example">
......@@ -1856,7 +1762,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
{% endhighlight %}
<h3 id="forms-extending-sizes">Control sizing</h3>
<h3 id="forms-control-sizes">Control sizing</h3>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<h4>Relative sizing</h4>
......@@ -1956,7 +1862,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<span class="uneditable-input">Some value here</span>
{% endhighlight %}
<h3>Form actions</h3>
<h3 id="forms-actions">Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<form class="bs-docs-example">
<div class="form-actions">
......@@ -1971,7 +1877,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
{% endhighlight %}
<h3>Help text</h3>
<h3 id="forms-help-text">Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p>
<h4>Inline help</h4>
<form class="bs-docs-example form-inline">
......@@ -2041,7 +1947,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
<h2>Button sizes</h2>
<h2 id="buttons-sizes">Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<p>
......@@ -2093,7 +1999,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2>Disabled state</h2>
<h2 id="buttons-disabled">Disabled state</h2>
<p>Make buttons look unclickable by fading them back 50%.</p>
<h3>Button element</h3>
......@@ -2122,7 +2028,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</p>
<h2>One class, multiple tags</h2>
<h2 id="buttons-tags">One class, multiple tags</h2>
<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-docs-example">
<a class="btn" href="">Link</a>
......
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