root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Merge 8a102dd7bc into 99a0dc628a

This commit is contained in:
Louis-Maxime Piton 2025-04-15 06:24:26 +00:00 committed by GitHub
parent 99a0dc628a 8a102dd7bc
commit e54e21e873
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 104 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/assets/js/partials/code-examples.js
View File

@ -20,10 +20,13 @@ export default () => {
const btnHtml = [
'<div class="bd-code-snippet">',
' <div class="bd-clipboard">',
' <button type="button" class="btn-clipboard">',
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
' </button>',
' <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">',
' <small class="font-monospace text-body-secondary text-uppercase">html</small>',
' <div class="d-flex ms-auto">',
' <button type="button" class="btn-clipboard mt-0 me-0">',
' <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>',
' </button>',
' </div>',
' </div>',
'</div>'
].join('')
@ -35,6 +38,7 @@ export default () => {
if (!element.closest('.bd-example-snippet')) {
element.insertAdjacentHTML('beforebegin', btnHtml)
element.previousElementSibling.append(element)
element.previousElementSibling.querySelector('small').textContent = element.querySelector('pre > code').getAttribute('data-lang')
}
})

2
site/assets/scss/_clipboard-js.scss
View File

@ -23,7 +23,7 @@
padding: .5em;
line-height: 1;
color: var(--bs-body-color);
background-color: var(--bd-pre-bg);
background-color: transparent;
border: 0;
@include border-radius(.25rem);

30
site/assets/scss/_component-examples.scss
View File

@ -12,6 +12,18 @@
margin-left: 0;
border-width: 1px;
@include border-radius(var(--bs-border-radius));
> :first-child {
@include border-top-radius(calc(var(--bs-border-radius) - 1px));
}
> :last-child {
@include border-bottom-radius(calc(var(--bs-border-radius) - 1px));
}
}
> :not(:first-child) {
border-top: 1px solid var(--bs-border-color);
}
}
@ -31,7 +43,10 @@
margin-right: 0;
margin-left: 0;
border-width: 1px;
@include border-radius(var(--bs-border-radius));
&:not(:first-child) {
@include border-radius(var(--bs-border-radius));
}
}
+ p {
@ -353,7 +368,6 @@
@include media-breakpoint-up(md) {
padding: .75rem 1.25rem;
@include border-radius(calc(var(--bs-border-radius) - 1px));
}
@include media-breakpoint-up(lg) {
@ -385,18 +399,6 @@
.highlight-toolbar {
background-color: var(--bd-pre-bg);
+ .highlight {
@include border-top-radius(0);
}
}
.bd-file-ref {
.highlight-toolbar {
@include media-breakpoint-up(md) {
@include border-top-radius(calc(var(--bs-border-radius) - 1px));
}
}
}
.bd-content .bd-code-snippet {

25
site/assets/scss/_masthead.scss
View File

@ -21,19 +21,37 @@
}
.bd-code-snippet {
--bs-border-radius: .5rem;
position: relative;
margin: 0;
border-color: var(--bs-border-color-translucent);
border-width: 1px;
@include border-radius(.5rem);
}
.highlight {
.highlight-toolbar {
padding: 0 !important; // stylelint-disable-line declaration-no-important
> :first-child {
display: none;
}
.btn-clipboard {
position: absolute;
top: 50%;
right: .75rem;
z-index: 1;
transform: translateY(-50%);
}
}
.highlight-toolbar + .highlight {
width: 100%;
padding: .5rem 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: rgba(var(--bs-body-color-rgb), .075);
border: 0;
@include border-radius(calc(.5rem - 1px));
@include media-breakpoint-up(lg) {
@ -46,6 +64,7 @@
overflow: hidden;
}
}
.btn-clipboard {
position: absolute;
top: -.625rem;

26
site/content/docs/5.3/docsref.md
View File

@ -31,20 +31,40 @@ sitemap:
## Code example
<div class="bd-example">
<div class="test">This is a test using <code>.bd-example</code> directly.</div>
</div>
```scss
.test {
--color: blue;
}
```
<div class="bd-example">
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
</div>
```html
<div class="test">This is a triple backtick markup only test.</div>
```
{{< highlight html >}}
<div class="test">This is a highlight tag markup only test.</div>
{{< /highlight >}}
{{< example show_preview=false >}}
<div class="test">This is a markup only test.</div>
{{< /example >}}
{{< example show_markup=false >}}
<div class="test">This is a preview only test.</div>
{{< /example >}}
{{< example >}}
<div class="test">This is a test.</div>
{{< /example >}}
{{< example class=bg-body-secondary >}}
<div class="test">This is a test with a custom background color.</div>
{{< /example >}}
{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}

20
site/layouts/shortcodes/example.html
View File

@ -26,21 +26,21 @@
</div>
{{- end }}
{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
<div class="d-flex ms-auto">
{{- if eq $show_preview true -}}
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
{{- end -}}
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
</div>
{{- end -}}
{{- if eq $show_markup true -}}
{{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}

4
site/layouts/shortcodes/js-docs.html
View File

@ -32,8 +32,8 @@
{{- $match = replace $match $to_remove "" -}}
{{- end -}}
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<div class="bd-example-snippet bd-code-snippet">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
{{- $file -}}
</a>

4
site/layouts/shortcodes/scss-docs.html
View File

@ -45,8 +45,8 @@
{{- $match = replace $match " !default" "" -}}
{{- end -}}
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<div class="bd-example-snippet bd-code-snippet">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
{{- $file -}}
</a>

26
site/layouts/shortcodes/table.html
View File

@ -22,10 +22,24 @@
{{- $table := printf "<table%s>\n%s</table>" $table_attributes $table_content -}}
<div class="bd-example">
<table{{ with $class }} class="{{ . }}"{{ end }}>
{{ partialCached "table-content" . }}
</table>
</div>
<div class="bd-example-snippet bd-code-snippet">
<div class="bd-example m-0 border-0">
<table{{ with $class }} class="{{ . }}"{{ end }}>
{{ partialCached "table-content" . }}
</table>
</div>
{{- highlight $table "html" "" -}}
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-body-secondary text-uppercase">html</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
</div>
{{- highlight $table "html" "" -}}
</div>