Skip to content

Commit bc8fc80

Browse files
taiontaion
committed
Formatting fixes for components page
1 parent 5bf27fa commit bc8fc80

File tree

1 file changed

+28
-28
lines changed

1 file changed

+28
-28
lines changed

‎docs/src/ComponentsPage.js

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -56,28 +56,28 @@ const ComponentsPage = React.createClass({
5656
{/* Buttons */}
5757
<div className="bs-docs-section">
5858
<h1 className="page-header"><Anchor id="buttons">Buttons</Anchor> <small>Button</small></h1>
59-
<h2><Anchor id="buttons-options">Options</Anchor></h2>
59+
<h3><Anchor id="buttons-options">Options</Anchor></h3>
6060
<p>Use any of the available button style types to quickly create a styled button. Just modify the <code>bsStyle</code> prop.</p>
6161
<ReactPlayground codeText={Samples.ButtonTypes} />
6262
<div className="bs-callout bs-callout-warning">
6363
<h4>Button spacing</h4>
64-
<p>Because React doesn"t output newlines between elements, buttons on the same line are displayed
64+
<p>Because React doesn't output newlines between elements, buttons on the same line are displayed
6565
flush against each other. To preserve the spacing between multiple inline buttons, wrap your
6666
button group in <code>{"<ButtonToolbar />"}</code>.</p>
6767
</div>
6868

69-
<h2><Anchor id="buttons-sizes">Sizes</Anchor></h2>
69+
<h3><Anchor id="buttons-sizes">Sizes</Anchor></h3>
7070
<p>Fancy larger or smaller buttons? Add <code>bsSize="large"</code>, <code>bsSize="small"</code>, or <code>bsSize="xsmall"</code> for additional sizes.</p>
7171
<ReactPlayground codeText={Samples.ButtonSizes} />
7272

7373
<p>Create block level buttons—those that span the full width of a parent— by adding the <code>block</code> prop.</p>
7474
<ReactPlayground codeText={Samples.ButtonBlock} />
7575

76-
<h2><Anchor id="buttons-active">Active state</Anchor></h2>
76+
<h3><Anchor id="buttons-active">Active state</Anchor></h3>
7777
<p>To set a buttons active state simply set the components <code>active</code> prop.</p>
7878
<ReactPlayground codeText={Samples.ButtonActive} />
7979

80-
<h2><Anchor id="buttons-disabled">Disabled state</Anchor></h2>
80+
<h3><Anchor id="buttons-disabled">Disabled state</Anchor></h3>
8181
<p>Make buttons look unclickable by fading them back 50%. To do this add the <code>disabled</code> attribute to buttons.</p>
8282
<ReactPlayground codeText={Samples.ButtonDisabled} />
8383

@@ -87,13 +87,13 @@ const ComponentsPage = React.createClass({
8787
functionality. Use custom logic to disable the effect of the <code>onClick</code> handlers.</p>
8888
</div>
8989

90-
<h2><Anchor id="buttons-tags">Button tags</Anchor></h2>
90+
<h3><Anchor id="buttons-tags">Button tags</Anchor></h3>
9191
<p>The DOM element tag is choosen automatically for you based on the props you supply. Passing
9292
a <code>href</code> will result in the button using a <code>{"<a />"}</code> element otherwise
9393
a <code>{"<button />"}</code> element will be used.</p>
9494
<ReactPlayground codeText={Samples.ButtonTagTypes} />
9595

96-
<h2><Anchor id="buttons-loading">Button loading state</Anchor></h2>
96+
<h3><Anchor id="buttons-loading">Button loading state</Anchor></h3>
9797
<p>When activating an asynchronous action from a button it is a good UX pattern to give the user
9898
feedback as to the loading state, this can easily be done by updating
9999
your <code>{"<Button />"}</code>&#8217;s props from a state change like below.</p>
@@ -106,7 +106,7 @@ const ComponentsPage = React.createClass({
106106

107107
{/* Button Groups */}
108108
<div className="bs-docs-section">
109-
<h1 className="page-header"><Anchor id="btn-groups">Button groups</Anchor> <small>ButtonGroup, ButtonToolbar</small></h1>
109+
<h2 className="page-header"><Anchor id="btn-groups">Button groups</Anchor> <small>ButtonGroup, ButtonToolbar</small></h2>
110110
<p className="lead">Group a series of buttons together on a single line with the button group.</p>
111111

112112
<h3><Anchor id="btn-groups-single">Basic example</Anchor></h3>
@@ -148,7 +148,7 @@ const ComponentsPage = React.createClass({
148148
</div>
149149

150150
<div className="bs-docs-section">
151-
<h1 className="page-header"><Anchor id="btn-dropdowns">Button dropdowns</Anchor></h1>
151+
<h2 className="page-header"><Anchor id="btn-dropdowns">Dropdowns</Anchor></h2>
152152
<p className="lead">Use <code>{"<DropdownButton />"}</code> or <code>{"<SplitButton />"}</code> components to display a button with a dropdown menu.</p>
153153

154154
<h3><Anchor id="btn-dropdowns-single">Single button dropdowns</Anchor></h3>
@@ -160,7 +160,7 @@ const ComponentsPage = React.createClass({
160160
<ReactPlayground codeText={Samples.SplitButtonBasic} />
161161

162162
<h3><Anchor id="btn-dropdowns-sizing">Sizing</Anchor></h3>
163-
<p>Button dropdowns work with buttons of all sizes.</p>
163+
<p>Dropdowns work with buttons of all sizes.</p>
164164
<ReactPlayground codeText={Samples.DropdownButtonSizes} />
165165

166166
<h3><Anchor id="btn-dropdowns-nocaret">No caret variation</Anchor></h3>
@@ -177,7 +177,7 @@ const ComponentsPage = React.createClass({
177177

178178
<h3><Anchor id="btn-dropdowns-custom">Dropdown Customization</Anchor></h3>
179179
<p>
180-
If the default handling of the dropdown menu and toggle components aren"t to your liking, you can
180+
If the default handling of the dropdown menu and toggle components aren't to your liking, you can
181181
customize them, by using the more basic <code>Dropdown</code> Component to explicitly specify
182182
the Toggle and Menu components
183183
</p>
@@ -213,10 +213,10 @@ const ComponentsPage = React.createClass({
213213
<PropTable component="Dropdown"/>
214214
</div>
215215

216-
{/* Menu Item */}
216+
{/* Menu items */}
217217
<div className="bs-docs-section">
218-
<h1 className="page-header"><Anchor id="menu-item">Menu Item</Anchor> <small> MenuItem</small></h1>
219-
<p>This is a component used in other components (see <a href="buttons">Buttons</a>, <a href="#navbars">Navbars</a>).</p>
218+
<h2 className="page-header"><Anchor id="menu-items">Menu items</Anchor> <small> MenuItem</small></h2>
219+
<p>This component represents a menu item in a dropdown.</p>
220220
<p>It supports the basic anchor properties <code>href</code>, <code>target</code>, <code>title</code>.</p>
221221
<p>
222222
It also supports different properties of the normal Bootstrap MenuItem.
@@ -389,7 +389,7 @@ const ComponentsPage = React.createClass({
389389
<ReactPlayground codeText={Samples.PopoverPositioned} />
390390

391391
<h4><Anchor id="popovers-trigger-behaviors">Trigger behaviors</Anchor></h4>
392-
<p>It"s inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
392+
<p>It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
393393
<ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
394394

395395
<h4><Anchor id="popovers-in-container">Popover component in container</Anchor></h4>
@@ -415,7 +415,7 @@ const ComponentsPage = React.createClass({
415415

416416
<h4><Anchor id="overlays-overlay">Use Overlay instead of Tooltip and Popover</Anchor></h4>
417417
<p>
418-
You don"t need to use the provided <code>Tooltip</code> or <code>Popover</code> components. Creating custom overlays
418+
You don't need to use the provided <code>Tooltip</code> or <code>Popover</code> components. Creating custom overlays
419419
is as easy as wrapping some markup in an <code>Overlay</code> component
420420
</p>
421421
<ReactPlayground codeText={Samples.OverlayCustom} />
@@ -435,7 +435,7 @@ const ComponentsPage = React.createClass({
435435
<ReactPlayground codeText={Samples.ProgressBarBasic} />
436436

437437
<h2><Anchor id="progress-label">With label</Anchor></h2>
438-
<p>Add a <code>label</code> prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label"s text is fully visible.</p>
438+
<p>Add a <code>label</code> prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.</p>
439439
<p>The following keys are interpolated with the current values: <code>%(min)s</code>, <code>%(max)s</code>, <code>%(now)s</code>, <code>%(percent)s</code>, <code>%(bsStyle)s</code></p>
440440
<ReactPlayground codeText={Samples.ProgressBarWithLabel} />
441441

@@ -658,7 +658,7 @@ const ComponentsPage = React.createClass({
658658
<p>Basic alert styles.</p>
659659
<ReactPlayground codeText={Samples.AlertBasic} />
660660

661-
<h4><Anchor id="alerts-closeable">Closeable alerts</Anchor></h4>
661+
<h3><Anchor id="alerts-closeable">Closeable alerts</Anchor></h3>
662662
<p>just pass in a <code>onDismiss</code> function.</p>
663663
<ReactPlayground codeText={Samples.AlertDismissable} />
664664

@@ -667,7 +667,7 @@ const ComponentsPage = React.createClass({
667667
<p>Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.</p>
668668
</div>
669669

670-
<h4><Anchor id="alerts-auto-closeable">Auto closeable</Anchor></h4>
670+
<h3><Anchor id="alerts-auto-closeable">Auto closeable</Anchor></h3>
671671
<p>Auto close after a set time with <code>dismissAfter</code> prop.</p>
672672
<ReactPlayground codeText={Samples.AlertAutoDismissable} />
673673

@@ -751,7 +751,7 @@ const ComponentsPage = React.createClass({
751751
{/* ListGroup */}
752752
<div className="bs-docs-section">
753753
<h1 className="page-header"><Anchor id="listgroup">List group</Anchor> <small>ListGroup, ListGroupItem</small></h1>
754-
<p>Quick previous and next links.</p>
754+
<p>List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
755755

756756
<h3><Anchor id="listgroup-default">Centers by default</Anchor></h3>
757757
<ReactPlayground codeText={Samples.ListGroupDefault} />
@@ -831,9 +831,9 @@ const ComponentsPage = React.createClass({
831831
<PropTable component="Jumbotron"/>
832832
</div>
833833

834-
{/* Page Header */}
834+
{/* Page header */}
835835
<div className="bs-docs-section">
836-
<h1 className="page-header"><Anchor id="page-header">Page Header</Anchor></h1>
836+
<h1 className="page-header"><Anchor id="page-header">Page header</Anchor></h1>
837837

838838
<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>&#8217;s default <code>small</code> element, as well as most other components (with additional styles).</p>
839839
<ReactPlayground codeText={Samples.PageHeader} />
@@ -899,7 +899,7 @@ const ComponentsPage = React.createClass({
899899

900900
<p>Renders an input in bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
901901
Use <code>getValue()</code> or <code>getChecked()</code> to get the current state.
902-
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>
902+
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>
903903
<ReactPlayground codeText={Samples.Input} />
904904

905905
<h3><Anchor id="input-types">Types</Anchor></h3>
@@ -949,8 +949,8 @@ const ComponentsPage = React.createClass({
949949
<h2><Anchor id="utilities-portal">Portal</Anchor></h2>
950950
<p>
951951
A Component that renders its children into a new React "subtree" or <code>container</code>. The Portal component kind of like the React
952-
equivalent to jQuery"s <code>.appendTo()</code>, which is helpful for components that need to be appended to a DOM node other than
953-
the component"s direct parent. The Modal, and Overlay components use the Portal component internally.
952+
equivalent to jQuery's <code>.appendTo()</code>, which is helpful for components that need to be appended to a DOM node other than
953+
the component's direct parent. The Modal, and Overlay components use the Portal component internally.
954954
</p>
955955

956956
<h3><Anchor id="utilities-portal-props">Props</Anchor></h3>
@@ -1035,8 +1035,8 @@ const ComponentsPage = React.createClass({
10351035
>
10361036
<SubNav href="#buttons" key={1} text="Buttons">
10371037
<NavItem href="#btn-groups" key={2}>Button groups</NavItem>
1038-
<NavItem href="#btn-dropdowns" key={3}>Button dropdowns</NavItem>
1039-
<NavItem href="#menu-item" key={25}>Menu Item</NavItem>
1038+
<NavItem href="#btn-dropdowns" key={3}>Dropdowns</NavItem>
1039+
<NavItem href="#menu-items" key={25}>Menu items</NavItem>
10401040
</SubNav>
10411041
<NavItem href="#panels" key={4}>Panels</NavItem>
10421042
<NavItem href="#modals" key={5}>Modals</NavItem>
@@ -1059,7 +1059,7 @@ const ComponentsPage = React.createClass({
10591059
<NavItem href="#labels" key={19}>Labels</NavItem>
10601060
<NavItem href="#badges" key={20}>Badges</NavItem>
10611061
<NavItem href="#jumbotron" key={21}>Jumbotron</NavItem>
1062-
<NavItem href="#page-header" key={22}>Page Header</NavItem>
1062+
<NavItem href="#page-header" key={22}>Page header</NavItem>
10631063
<NavItem href="#responsive-embed" key={31}>Responsive embed</NavItem>
10641064
<NavItem href="#wells" key={23}>Wells</NavItem>
10651065
<NavItem href="#glyphicons" key={24}>Glyphicons</NavItem>

0 commit comments

Comments
 (0)