mirror of https://github.com/twbs/bootstrap.git
Add Markdownlint for our MDX
This commit is contained in:
Mark Otto
parent
ae339c006b
commit
1cc589fe11
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"default": true,
|
||||
"MD004": { "style": "dash" },
|
||||
"MD013": false,
|
||||
"MD024": false,
|
||||
"MD025": false,
|
||||
"MD026": false,
|
||||
"MD031": false,
|
||||
"MD033": false,
|
||||
"MD034": false,
|
||||
"MD037": false,
|
||||
"MD038": false,
|
||||
"MD041": false,
|
||||
"MD046": false,
|
||||
"line-length": false,
|
||||
"no-inline-html": false
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -70,7 +70,8 @@
|
|||
"js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js",
|
||||
"js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
|
||||
"js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
|
||||
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
|
||||
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint lint-mdx",
|
||||
"lint-mdx": "markdownlint \"site/src/content/**/*.mdx\"",
|
||||
"docs": "npm-run-all docs-build docs-lint",
|
||||
"docs-compile": "npm run docs-build",
|
||||
"docs-vnu": "node build/vnu-jar.mjs",
|
||||
|
|
@ -152,6 +153,7 @@
|
|||
"karma-jasmine-html-reporter": "^2.1.0",
|
||||
"karma-rollup-preprocessor": "7.0.7",
|
||||
"lockfile-lint": "^4.14.0",
|
||||
"markdownlint-cli": "^0.44.0",
|
||||
"mime": "^3.0.0",
|
||||
"nodemon": "^3.1.9",
|
||||
"npm-run-all2": "^7.0.2",
|
||||
|
|
|
|||
|
|
@ -72,7 +72,6 @@ You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty st
|
|||
</ol>
|
||||
</nav>`} />
|
||||
|
||||
|
||||
```scss
|
||||
$breadcrumb-divider: none;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -221,7 +221,6 @@ const popover = new bootstrap.Popover(element, {
|
|||
| `update` | Updates the position of an element's popover. |
|
||||
</BsTable>
|
||||
|
||||
|
||||
```js
|
||||
// getOrCreateInstance example
|
||||
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
|
||||
|
|
@ -231,7 +230,6 @@ myPopover.setContent({
|
|||
'.popover-header': 'another title',
|
||||
'.popover-body': 'another content'
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
<Callout>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
|
|||
|
||||
- To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `<body>` or a custom element with a set `height` and `overflow-y: scroll`.
|
||||
|
||||
- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation.
|
||||
- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation.
|
||||
|
||||
- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`
|
||||
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
|
|||
|
||||
<ScssDocs name="spinner-grow-keyframes" file="scss/_spinners.scss" />
|
||||
|
||||
|
||||
[color]: [[docsref:/utilities/colors]]
|
||||
[flex]: [[docsref:/utilities/flex]]
|
||||
[float]: [[docsref:/utilities/float]]
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@ You can customize the appearance of tooltips using [CSS variables](#variables).
|
|||
|
||||
<ScssDocs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" />
|
||||
|
||||
|
||||
<Example addStackblitzJs class="tooltip-demo" code={`<button type="button" class="btn btn-secondary"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="custom-tooltip"
|
||||
|
|
@ -138,6 +137,7 @@ const tooltip = new bootstrap.Tooltip('#example', {
|
|||
boundary: document.body // or document.querySelector('#boundary')
|
||||
})
|
||||
```
|
||||
|
||||
</Callout>
|
||||
|
||||
### Markup
|
||||
|
|
@ -179,7 +179,6 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
|
|||
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
|
||||
</Callout>
|
||||
|
||||
|
||||
<BsTable>
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
|
|
|||
|
|
@ -23,14 +23,12 @@ Align images with the [helper float classes]([[docsref:/utilities/float]]) or [t
|
|||
<Example code={`<Placeholder width="200" height="200" class="rounded float-start" />
|
||||
<Placeholder width="200" height="200" class="rounded float-end" />`} />
|
||||
|
||||
|
||||
<Example code={`<Placeholder width="200" height="200" class="rounded mx-auto d-block" />`} />
|
||||
|
||||
<Example code={`<div class="text-center">
|
||||
<Placeholder width="200" height="200" class="rounded" />
|
||||
</div>`} />
|
||||
|
||||
|
||||
## Picture
|
||||
|
||||
If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
|
||||
|
|
|
|||
|
|
@ -109,7 +109,6 @@ As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, a
|
|||
|
||||
<Example code={`<a href="#" style="--bs-link-opacity: .5">This is an example link</a>`} />
|
||||
|
||||
|
||||
Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
|
||||
|
||||
<Example code={`<a>This is a placeholder link</a>`} />
|
||||
|
|
@ -132,17 +131,19 @@ The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are
|
|||
All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
|
||||
|
||||
<div class="bd-example">
|
||||
* All lists have their top margin removed
|
||||
* And their bottom margin normalized
|
||||
* Nested lists have no bottom margin
|
||||
* This way they have a more even appearance
|
||||
* Particularly when followed by more list items
|
||||
* The left padding has also been reset
|
||||
|
||||
- All lists have their top margin removed
|
||||
- And their bottom margin normalized
|
||||
- Nested lists have no bottom margin
|
||||
- This way they have a more even appearance
|
||||
- Particularly when followed by more list items
|
||||
- The left padding has also been reset
|
||||
|
||||
1. Here's an ordered list
|
||||
2. With a few list items
|
||||
3. It has the same overall look
|
||||
4. As the previous unordered list
|
||||
|
||||
</div>
|
||||
|
||||
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ When using Sass in your asset pipeline, make sure you optimize Bootstrap by only
|
|||
|
||||
<ScssDocs name="import-stack" file="scss/bootstrap.scss" />
|
||||
|
||||
|
||||
If you're not using a component, comment it out or delete it entirely. For example, if you're not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.
|
||||
|
||||
## Lean JavaScript
|
||||
|
|
|
|||
|
|
@ -357,7 +357,7 @@ These variables are also color mode adaptive, meaning they change color while in
|
|||
|
||||
### Sass mixins
|
||||
|
||||
Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles.
|
||||
Two mixins are combined, through our [loop](#sass-loop), to generate our form validation feedback styles.
|
||||
|
||||
<ScssDocs name="form-validation-mixins" file="scss/mixins/_forms.scss" />
|
||||
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
|
|||
|
||||
*You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.*
|
||||
|
||||
3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
|
||||
2. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
|
||||
|
||||
{/* TODO: <!-- eslint-skip --> */}
|
||||
```js
|
||||
|
|
@ -169,7 +169,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
|
|||
|
||||
*[Read our JavaScript docs]([[docsref:/getting-started/javascript/]]) for more information on how to use Bootstrap's plugins.*
|
||||
|
||||
4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
|
||||
3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
|
||||
|
||||
<img class="img-fluid" src="/docs/[[config:docs_version]]/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap" />
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ Breaking it down, here's how the grid system comes together:
|
|||
|
||||
- **Gutters are also responsive and customizable.** [Gutter classes are available]([[docsref:/layout/gutters]]) across all breakpoints, with all the same sizes as our [margin and padding spacing]([[docsref:/utilities/spacing]]). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
|
||||
|
||||
- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
|
||||
- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#css) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
|
||||
|
||||
Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
|
||||
|
||||
|
|
|
|||
|
|
@ -405,7 +405,6 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
|
|||
</div>
|
||||
```
|
||||
|
||||
|
||||
Responsive variations also exist for `flex-wrap`.
|
||||
|
||||
<ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue