Skip to content

Commit 0aeaf27

Browse files
taiontaion
committed
Organize components page into sections
1 parent 234db05 commit 0aeaf27

30 files changed

+162
-114
lines changed

‎docs/examples/PagerDefault.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const pagerInstance = (
22
<Pager>
33
<PageItem href="#">Previous</PageItem>
4+
{' '}
45
<PageItem href="#">Next</PageItem>
56
</Pager>
67
);

‎docs/src/ComponentsPage.js

Lines changed: 96 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ import ButtonGroupSection from './sections/ButtonGroupSection';
1616
import ButtonSection from './sections/ButtonSection';
1717
import CarouselSection from './sections/CarouselSection';
1818
import DropdownSection from './sections/DropdownSection';
19+
import FormSection from './sections/FormSection';
1920
import GlyphiconSection from './sections/GlyphiconSection';
2021
import GridSection from './sections/GridSection';
2122
import ImageSection from './sections/ImageSection';
22-
import InputSection from './sections/InputSection';
2323
import JumbotronSection from './sections/JumbotronSection';
2424
import LabelSection from './sections/LabelSection';
2525
import ListGroupSection from './sections/ListGroupSection';
@@ -85,48 +85,78 @@ const ComponentsPage = React.createClass({
8585
<DropdownSection />
8686
<MenuItemSection />
8787

88-
<PanelSection />
88+
<div className="bs-docs-section">
89+
<h1 className="page-header">
90+
<Anchor id="overlays">Overlays</Anchor>
91+
</h1>
92+
93+
<p className="lead">React-Bootstrap offers a number of accessible overlay components built using <a href="http://react-bootstrap.github.io/react-overlays/examples/">react-overlays</a>.</p>
94+
</div>
8995

9096
<ModalSection />
9197
<TooltipSection />
9298
<PopoverSection />
9399
<OverlaySection />
94100

95-
<ProgressBarSection />
101+
<div className="bs-docs-section">
102+
<h1 className="page-header">
103+
<Anchor id="navigation">Navigation</Anchor>
104+
</h1>
105+
106+
<p className="lead">React-Bootstrap offers a variety of responsive, accessible components for setting up navigation both across your website and within your pages.</p>
107+
</div>
96108

97109
<NavSection />
98110
<NavbarSection />
99111
<BreadcrumbSection />
100112
<TabsSection />
101-
<PagerSection />
102113
<PaginationSection />
114+
<PagerSection />
103115

104-
<AlertsSection />
116+
<div className="bs-docs-section">
117+
<h1 className="page-header">
118+
<Anchor id="page-layout">Page layout</Anchor>
119+
</h1>
105120

106-
<CarouselSection />
121+
<p className="lead">The components in this section offer different ways to structure and present data on your page.</p>
122+
</div>
107123

108124
<GridSection />
109-
110-
<ImageSection />
111-
<ThumbnailSection />
112-
125+
<JumbotronSection />
126+
<PageHeaderSection />
113127
<ListGroupSection />
128+
<TableSection />
129+
<PanelSection />
130+
<WellSection />
114131

115-
<LabelSection />
116-
<BadgeSection />
132+
<FormSection />
117133

118-
<JumbotronSection />
119-
<PageHeaderSection />
134+
<div className="bs-docs-section">
135+
<h1 className="page-header">
136+
<Anchor id="media-content">Media content</Anchor>
137+
</h1>
120138

121-
<ResponsiveEmbedSection />
139+
<p className="lead">The React-Bootstrap media content components offer ways to present images and other media to your users in a responsive way, along with support for styling those components.</p>
140+
</div>
122141

123-
<WellSection />
142+
<ImageSection />
143+
<ThumbnailSection />
144+
<ResponsiveEmbedSection />
145+
<CarouselSection />
124146

125-
<GlyphiconSection />
147+
<div className="bs-docs-section">
148+
<h1 className="page-header">
149+
<Anchor id="misc">Miscellaneous components</Anchor>
150+
</h1>
126151

127-
<TableSection />
152+
<p className="lead">React-Bootstrap also offers various standalone components that can be used to present specific, relevant kinds of information across your pages.</p>
153+
</div>
128154

129-
<InputSection />
155+
<GlyphiconSection />
156+
<LabelSection />
157+
<BadgeSection />
158+
<AlertsSection />
159+
<ProgressBarSection />
130160

131161
<div className="bs-docs-section">
132162
<h1 className="page-header">
@@ -185,43 +215,62 @@ const ComponentsPage = React.createClass({
185215
<NavItem href="#btn-dropdowns">Dropdowns</NavItem>
186216
<NavItem href="#menu-items">Menu items</NavItem>
187217
</SubNav>
188-
<NavItem href="#panels">Panels</NavItem>
189-
<NavItem href="#modals">Modals</NavItem>
190-
<NavItem href="#tooltips">Tooltips</NavItem>
191-
<NavItem href="#popovers">Popovers</NavItem>
192-
<NavItem href="#overlays">Overlays</NavItem>
193-
<NavItem href="#progress">Progress bars</NavItem>
194-
<NavItem href="#navs">Navs</NavItem>
195-
<NavItem href="#navbars">Navbars</NavItem>
196-
<NavItem href="#breadcrumbs">Breadcrumbs</NavItem>
197-
<NavItem href="#tabs">Tabs</NavItem>
198-
<NavItem href="#pager">Pager</NavItem>
199-
<NavItem href="#pagination">Pagination</NavItem>
200-
<NavItem href="#alerts">Alerts</NavItem>
201-
<NavItem href="#carousels">Carousels</NavItem>
202-
<NavItem href="#grids">Grids</NavItem>
203-
<NavItem href="#images">Images</NavItem>
204-
<NavItem href="#thumbnail">Thumbnails</NavItem>
205-
<NavItem href="#listgroup">List group</NavItem>
206-
<NavItem href="#labels">Labels</NavItem>
207-
<NavItem href="#badges">Badges</NavItem>
208-
<NavItem href="#jumbotron">Jumbotron</NavItem>
209-
<NavItem href="#page-header">Page header</NavItem>
210-
<NavItem href="#responsive-embed">Responsive embed</NavItem>
211-
<NavItem href="#wells">Wells</NavItem>
212-
<NavItem href="#glyphicons">Glyphicons</NavItem>
213-
<NavItem href="#tables">Tables</NavItem>
214-
<NavItem href="#input">Input</NavItem>
218+
219+
<SubNav href="#overlays" text="Overlays">
220+
<NavItem href="#modals">Modals</NavItem>
221+
<NavItem href="#tooltips">Tooltips</NavItem>
222+
<NavItem href="#popovers">Popovers</NavItem>
223+
<NavItem href="#custom-overlays">Custom overlays</NavItem>
224+
</SubNav>
225+
226+
<SubNav href="#navigation" text="Navigation">
227+
<NavItem href="#navs">Navs</NavItem>
228+
<NavItem href="#navbars">Navbars</NavItem>
229+
<NavItem href="#breadcrumbs">Breadcrumbs</NavItem>
230+
<NavItem href="#tabs">Tabs</NavItem>
231+
<NavItem href="#pagination">Pagination</NavItem>
232+
<NavItem href="#pager">Pager</NavItem>
233+
</SubNav>
234+
235+
<SubNav href="#page-layout" text="Page layout">
236+
<NavItem href="#grid">Grid system</NavItem>
237+
<NavItem href="#jumbotron">Jumbotron</NavItem>
238+
<NavItem href="#page-header">Page header</NavItem>
239+
<NavItem href="#listgroup">List group</NavItem>
240+
<NavItem href="#tables">Tables</NavItem>
241+
<NavItem href="#panels">Panels</NavItem>
242+
<NavItem href="#wells">Wells</NavItem>
243+
</SubNav>
244+
245+
<NavItem href="#forms">Forms</NavItem>
246+
247+
<SubNav href="#media-content" text="Media content">
248+
<NavItem href="#images">Images</NavItem>
249+
<NavItem href="#thumbnail">Thumbnails</NavItem>
250+
<NavItem href="#responsive-embed">Responsive embed</NavItem>
251+
<NavItem href="#carousels">Carousels</NavItem>
252+
</SubNav>
253+
254+
<SubNav href="#misc" text="Miscellaneous">
255+
<NavItem href="#glyphicons">Glyphicons</NavItem>
256+
<NavItem href="#labels">Labels</NavItem>
257+
<NavItem href="#badges">Badges</NavItem>
258+
<NavItem href="#alerts">Alerts</NavItem>
259+
<NavItem href="#progress">Progress bars</NavItem>
260+
</SubNav>
261+
215262
<SubNav href="#utilities" text="Utilities">
216263
<NavItem href="#transitions">Transitions</NavItem>
217264
</SubNav>
265+
218266
<SubNav href="#missing" text="Missing components">
219267
<NavItem href="#affix">Affix</NavItem>
220268
<NavItem href="#scrollspy">Scrollspy</NavItem>
221269
</SubNav>
222270
</Nav>
271+
223272
<a className="back-to-top" href="#top">
224-
Back to top
273+
Back to top
225274
</a>
226275
</div>
227276
</AutoAffix>

‎docs/src/sections/AlertsSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function AlertsSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="alerts">Alert messages</Anchor> <small>Alert</small>
13-
</h1>
13+
</h2>
1414

1515
<p>Basic alert styles.</p>
1616
<ReactPlayground codeText={Samples.AlertBasic} />

‎docs/src/sections/BadgeSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function BadgeSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="badges">Badges</Anchor> <small>Badge</small>
13-
</h1>
13+
</h2>
1414

1515
<p>Easily highlight new or unread items by adding a <code>{"<Badge>"}</code> to links, Bootstrap navs, and more.</p>
1616
<ReactPlayground codeText={Samples.Badge} />

‎docs/src/sections/BreadcrumbSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function BreadcrumbSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="breadcrumbs">Breadcrumbs</Anchor> <small>Breadcrumb, BreadcrumbItem</small>
13-
</h1>
13+
</h2>
1414

1515
<p>Breadcrumbs are used to indicate the current page's location. Add <code>active</code> attribute to active <code>BreadcrumbItem</code>.</p>
1616
<p>Do not set both <code>active</code> and <code>href</code> attributes. <code>active</code> overrides <code>href</code> and <code>span</code> element is rendered instead of <code>a</code>.</p>

‎docs/src/sections/CarouselSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function CarouselSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="carousels">Carousels</Anchor> <small>Carousel, CarouselItem</small>
13-
</h1>
13+
</h2>
1414

1515
<h3><Anchor id="carousels-uncontrolled">Uncontrolled</Anchor></h3>
1616
<p>Allow the component to control its own state.</p>

‎docs/src/sections/DropdownSection.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ export default function DropdownSection() {
1212
<Anchor id="btn-dropdowns">Dropdowns</Anchor> <small>DropdownButton, SplitButton, Dropdown</small>
1313
</h2>
1414

15-
<p className="lead">Use <code>{"<DropdownButton />"}</code> or <code>{"<SplitButton />"}</code> components to display a button with a dropdown menu.</p>
16-
1715
<h3><Anchor id="btn-dropdowns-single">Single button dropdowns</Anchor></h3>
1816
<p>Create a dropdown button with the <code>{"<DropdownButton />"}</code> component.</p>
1917
<ReactPlayground codeText={Samples.DropdownButtonBasic} />

‎docs/src/sections/InputSection.js renamed to ‎docs/src/sections/FormSection.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import PropTable from '../PropTable';
55
import ReactPlayground from '../ReactPlayground';
66
import Samples from '../Samples';
77

8-
export default function InputSection() {
8+
export default function FormSection() {
99
return (
1010
<div className="bs-docs-section">
1111
<h1 className="page-header">
12-
<Anchor id="input">Input</Anchor> <small>Input, ButtonInput, FormControls</small>
12+
<Anchor id="forms">Forms</Anchor> <small>Input, ButtonInput, FormControls</small>
1313
</h1>
1414

15-
<p>Renders an input in bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
15+
<p>The <code>{'<Input>'}</code> component renders an input in Bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
1616
Use <code>getValue()</code> or <code>getChecked()</code> to get the current state.
1717
The helper method <code>getInputDOMNode()</code> returns the internal input element. If you don't want the <code>form-group</code> class applied apply the prop named <code>standalone</code>.</p>
1818
<ReactPlayground codeText={Samples.Input} />
@@ -21,7 +21,7 @@ export default function InputSection() {
2121
<p>Supports <code>select</code>, <code>textarea</code>, as well as standard HTML input types. <code>getValue()</code> returns an array for multiple select.</p>
2222
<ReactPlayground codeText={Samples.InputTypes} />
2323

24-
<h3><Anchor id="input-static">FormControls.Static</Anchor></h3>
24+
<h3><Anchor id="forms-controls-static">FormControls.Static</Anchor></h3>
2525
<p>Static text can be added to your form controls through the use of the <code>FormControls.Static</code> component.</p>
2626
<ReactPlayground codeText={Samples.StaticText} />
2727

‎docs/src/sections/GlyphiconSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function GlyphiconSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="glyphicons">Glyphicons</Anchor> <small>Glyphicon</small>
13-
</h1>
13+
</h2>
1414

1515
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
1616
<ReactPlayground codeText={Samples.Glyphicon} />

‎docs/src/sections/GridSection.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@ import Samples from '../Samples';
88
export default function GridSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
12-
<Anchor id="grids">Grids</Anchor> <small>Grid, Row, Col</small>
13-
</h1>
11+
<h2 className="page-header">
12+
<Anchor id="grid">Grid system</Anchor> <small>Grid, Row, Col</small>
13+
</h2>
1414

15-
<ReactPlayground codeText={Samples.GridBasic} exampleClassName="bs-example-tabs" />
15+
<ReactPlayground codeText={Samples.GridBasic} />
1616

17-
<h3><Anchor id="grids-props">Props</Anchor></h3>
17+
<h3><Anchor id="grid-props">Props</Anchor></h3>
1818

19-
<h4><Anchor id="grids-props-grid">Grid</Anchor></h4>
19+
<h4><Anchor id="grid-props-grid">Grid</Anchor></h4>
2020
<PropTable component="Grid"/>
2121

22-
<h4><Anchor id="grids-props-row">Row</Anchor></h4>
22+
<h4><Anchor id="grid-props-row">Row</Anchor></h4>
2323
<PropTable component="Row"/>
2424

25-
<h4><Anchor id="grids-props-col">Col</Anchor></h4>
25+
<h4><Anchor id="grid-props-col">Col</Anchor></h4>
2626
<PropTable component="Col"/>
2727
</div>
2828
);

‎docs/src/sections/ImageSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function ImageSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="images">Images</Anchor> <small>Image</small>
13-
</h1>
13+
</h2>
1414

1515
<h3><Anchor id="image-shape">Shape</Anchor></h3>
1616
<p>Use the <code>rounded</code>, <code>circle</code> and <code>thumbnail</code> props to customise the image.</p>

‎docs/src/sections/JumbotronSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function JumbotronSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="jumbotron">Jumbotron</Anchor> <small>Jumbotron</small>
13-
</h1>
13+
</h2>
1414

1515
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
1616
<ReactPlayground codeText={Samples.Jumbotron} />

‎docs/src/sections/LabelSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function LabelSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="labels">Labels</Anchor> <small>Label</small>
13-
</h1>
13+
</h2>
1414

1515
<p>Create a <code>{"<Label>label</Label>"}</code> to highlight information</p>
1616
<ReactPlayground codeText={Samples.Label} />

‎docs/src/sections/ListGroupSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function ListGroupSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="listgroup">List group</Anchor> <small>ListGroup, ListGroupItem</small>
13-
</h1>
13+
</h2>
1414

1515
<p>List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
1616

‎docs/src/sections/ModalSection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import Samples from '../Samples';
88
export default function ModalSection() {
99
return (
1010
<div className="bs-docs-section">
11-
<h1 className="page-header">
11+
<h2 className="page-header">
1212
<Anchor id="modals">Modals</Anchor> <small>Modal</small>
13-
</h1>
13+
</h2>
1414

1515
<h3><Anchor id="modals-static">Static Markup</Anchor></h3>
1616
<p>A modal dialog component</p>

0 commit comments

Comments
 (0)