Unverified Commit a490ca46 authored by Tor Raswill's avatar Tor Raswill Committed by GitHub
Browse files

docs: Update & re-structure getting started (#5050)



* Re-structure getting started

Re-structure getting started with sensible header levels and ordering of information.

Rename "Importing" to "Importing Components"

Reorder some subcontents within their headers

Add missing space in theming



Update link to examples
Co-authored-by: default avatarTor Raswill <tor.raswill@dqc.se>
Co-authored-by: default avatarMax Schmitt <max@schmitt.mx>
parent 59468d72
......@@ -17,7 +17,7 @@ jobs:
os: [ubuntu-latest, windows-latest, macOS-latest]
steps:
- name: Checking out Repository
uses: actions/checkout@v1
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v1
with:
......
......@@ -20,11 +20,42 @@ install <DocLink path="/getting-started/download/#npm">vanilla Bootstrap</DocLin
npm install react-bootstrap bootstrap
```
## Importing Components
You should import individual components like:
`react-bootstrap/Button` rather than the entire library.
Doing so pulls in only the specific components that you use, which
can significantly reduce the amount of code you end up sending to
the client.
```jsx
import Button from 'react-bootstrap/Button';
// or less ideally
import { Button } from 'react-bootstrap';
```
### Browser globals
We provide `react-bootstrap.js` and
`react-bootstrap.min.js` bundles with all components
exported on the `window.ReactBootstrap` object. These
bundles are available on [unpkg](https://unpkg.com/react-bootstrap/), as
well as in the npm package.
<BrowserGlobalsCodeBlock />
## Examples
React-Bootstrap has started a repo with a few basic CodeSandbox examples.
[Click here](https://github.com/react-bootstrap/code-sandbox-examples/blob/master/README.md)
to check them out.
## Stylesheets
Because React-Bootstrap doesn't depend on a very precise version of
Bootstrap, we don't ship with any included CSS. However, some
stylesheet **is required** to use these components.
stylesheet **is required** to use these components.
### CSS
......@@ -85,41 +116,10 @@ $theme-colors: (
### Advanced usage
See [the Bootstrap docs](https://getbootstrap.com/docs/4.3/getting-started/theming/)
See [the Bootstrap docs](https://getbootstrap.com/docs/4.4/getting-started/theming/)
for more advanced use cases and details about customizing stylesheets.
### Importing
You should import individual components like:
`react-bootstrap/Button` rather than the entire library.
Doing so pulls in only the specific components that you use, which
can significantly reduce the amount of code you end up sending to
the client.
```jsx
import Button from 'react-bootstrap/Button';
// or less ideally
import { Button } from 'react-bootstrap';
```
### Browser globals
We provide `react-bootstrap.js` and
`react-bootstrap.min.js` bundles with all components
exported on the `window.ReactBootstrap` object. These
bundles are available on [unpkg](https://unpkg.com/react-bootstrap/), as
well as in the npm package.
<BrowserGlobalsCodeBlock />
### Examples
React-Bootstrap has started a repo with a few basic CodeSandbox examples.
[Click here](https://github.com/react-bootstrap/react-bootstrap#codesandbox-examples)
to check them out.
### Themes
## Themes
React-Bootstrap is compatible with existing Bootstrap themes. Just
follow the installation instructions for your theme of choice.
......
......@@ -26,7 +26,7 @@ export default withLayout(function ThemingSection() {
<p>
Custom variants and sizes should follow the pattern of the default
bootstrap variants, and define css classes matching:{' '}
<code>component-*</code>. React bootstrap builds the component
<code>component-*</code>. React bootstrap builds the component{' '}
<code>classNames</code> in a consistent way that you can rely on. For
instance this custom Button.
</p>
......
Markdown is supported
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